Material React TableAbout Material React Table
Material React Table is a fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.
What is Material React Table?
Material React Table (MRT) is a fully-feature data grid/table component library for React built on TanStack Table V8's powerful API. MRT is meant to work best in projects already using Material UI components, but it is not necessarily required. However, be aware that Material UI and Emotion are required as peer dependencies for MRT to work.
MRT is built from the ground up in TypeScript, and is designed to have a great type-safe dev experience with generics that react to the data structures you pass in. TypeScript is not at all required to use MRT, but it is recommended for the best and fasted developer experience, especially when defining columns.
Motivation
Material React Table started out as an attempt to upgrade the once popular material-table library to Material UI v5 and TypeScript, since that project seemed to have become abandoned. However, after a few frustrating weeks, it was discovered that it would be easier and more fun to write a new advanced Material UI table library from scratch. React Table naturally seemed like a great basis for the underlying API and therefore was chosen as the foundation for the project.
License
Material React Table is licensed under the MIT License and is free to use in both personal and commercial projects.
Features
✅ < 41kb gzipped - Bundlephobia
✅ Advanced TypeScript Generics Support (TypeScript Optional)
✅ Aggregation and Grouping (Sum, Average, Count, etc.)
✅ Click To Copy Cell Values
✅ Column Action Dropdown Menu
✅ Column Hiding
✅ Column Ordering via Drag'n'Drop
✅ Column Pinning (Freeze Columns)
✅ Column Resizing
✅ Customize Icons
✅ Customize Styling of internal Mui Components
✅ Data Editing (4 different editing modes)
✅ Density Toggle
✅ Detail Panels (Expansion)
✅ Filtering (supports client-side and server-side)
✅ Full Screen Mode
✅ Global Filtering (Search across all columns, rank by best match)
✅ Header Groups & Footers
✅ Localization (i18n) support
✅ Manage your own state or let the table manage it internally for you
✅ Pagination (supports client-side and server-side)
✅ Row Actions (Your Custom Action Buttons)
✅ Row Numbers
✅ Row Ordering via Drag'n'Drop
✅ Row Selection (Checkboxes)
✅ SSR compatible
✅ Sorting (supports client-side and server-side)
✅ Theming (Respects your Material UI Theme)
✅ Toolbars (Add your own action buttons)
✅ Tree Data / Expanding Sub-rows
✅ Virtualization (react-virtual)
Join the Development Discussion
Want to join the development discussion? Join the Discord server to ask questions, or talk about the general direction of the project.
Contributors
Important Links
FAQs
Is Material React Table free to use?
Yes, as stated above, this library uses the MIT License and is free to use for either personal or enterprise projects.
Is Material React Table the same as Material Table?
No, Material React Table is a totally new and different library from Material Table, written from scratch, with a different API and different features. However, many of the features of material-table were inspirations for this library. I originally wrote this library with the goal to replace all my uses of material-table in my own enterprise applications.
Should I use Material React Table?
It depends. If you are already using MUI for other components in your project, and are looking for a efficient and fully featured data grid component to drop in, this may be the perfect library for you. MRT is not necessarily the lightest weight table library out there, but it has a much smaller bundle size than similar libraries like material-table. If you are looking for the most powerful data grid possible, AG Grid is still recommended above MRT as long as you do not care about bundle size.