About 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-featured 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.
If you are a Tailwind or native CSS user, check out Mantine React Table instead, which is a sister library to MRT that uses Mantine components instead of Material UI and is a bit more Tailwind friendly.
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.
Material React Table has a sister library, Mantine React Table that uses Mantine components instead of Material UI, but otherwise has the same API. Check it out if you're looking for a Material UI alternative.
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.
Material React Table is licensed under the MIT License and is free to use in both personal and commercial projects.
✅ < 53kb 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)
✅ Faceted Values (Detect filter select options from data)
✅ Filtering (supports client-side and server-side)
✅ Filter Match Highlighting
✅ 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 Pinning (Sticky Rows)
✅ 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)
If you would like to contribute code to the project, please read the Contributing Guide to learn how to get started.
Support the Project
If you enjoy this library, please consider supporting the project by leaving a ⭐️ on the GitHub repository.
Also consider sponsoring me on GitHub to help cover the costs of maintaining the project.
Nothing financial is required at all to support this library. The greatest help of all, actually, is to get involved in the project and community. Submitting issues, pull requests, and helping others in the Discord Server are all great ways to help out.
If you see any inaccuracies in the documentation, there is a
"Suggest an Edit For This Page on GitHub" button at the bottom of every page that will take you directly to the page's markdown file on GitHub. You can then edit the file and submit a pull request to fix any issues.
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(s).
Kevin Van Cott
UI/UX, Technical Writer
OSS that Makes Material React Table Possible
Material UI - Components!
TanStack - React Table and React Virtual are key underlying technologies of MRT.
Vercel - Next.js, Domains, and Hosting
Docsearch - High quality search for static websites, free for open source projects
EthicalAds - Ethical ads for open source projects (no tracking or cookies!)
Is Material React Table free to use?
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 Material UI 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.