MRT logoMaterial React Table

Welcome To
Material React TableV2

Built with Material UIV5 and TanStack TableV8

NPM VersionDownloadsBundle SizeGitHub Stars
$ npm i material-react-table @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled

The Best of Both Worlds

Mui + React Table

Combine TanStack Table's Extensive API With Material UI's Awesome Pre-Built Components!

Efficiency Icon Efficient Bundle Size

37-53 KB depending on components imported.

Import the recommended MaterialReactTable component, or optionally import lighter weight MRT sub-components that only include the UI you need.

Quality Icon Pre-Built or 100% Custom

Use the pre-built single component data grid with the <MaterialReactTable /> component.

Or build your own markup from scratch using the useMaterialReactTable hook.

All internal MRT components are exported for you to use as "lego blocks" to build your own custom tables.

Customizable Icon Easy Customization

Just about everything is customizable or overridable in Material React Table. Pass in custom props or styles to all internal components. Use simple enable* props to easily enable or disable features.

Quality Icon Powerful Features

Material React Table has most of the features you would expect from a modern table library including Pagination, Sorting, Filtering, Row Selection, Row Expansion, Column Resizing, Column Reordering, etc.

However, Material React Table also has advanced features that you may not find in other table libraries such as Virtualization, Aggregation and Grouping, Advanced Filter UIs, Fuzzy Search, Full Editing (CRUD), Column Pinning, Row Pinning, Row Numbers, Click to Copy, and more.

30+ i18n Locales

The MRT Community has contributed over 30 Locales for everyone to import and use.

Popular Docs

Examples To Get You Started

Data Export
DnD
Editing
Filtering
Fetching
Pinning
Virtualization
More Examples
JohnDoe261 Erdman FordEast DaphneKentucky
JaneDoe769 Dominic GroveColumbusOhio
JoeDoe566 Brakus InletSouth LindaWest Virginia
KevinVandy722 Emie StreamLincolnNebraska
JoshuaRolluffs32188 Larkin TurnpikeOmahaNebraska
1-5 of 5

Source Code

1import { useMemo } from 'react';
2import {
3 MaterialReactTable,
4 useMaterialReactTable,
5 type MRT_ColumnDef,
6} from 'material-react-table';
7
8//example data type
9type Person = {
10 name: {
11 firstName: string;
12 lastName: string;
13 };
14 address: string;
15 city: string;
16 state: string;
17};
18
19//nested data is ok, see accessorKeys in ColumnDef below
20const data: Person[] = [
21 {
22 name: {
23 firstName: 'John',
24 lastName: 'Doe',
25 },
26 address: '261 Erdman Ford',
27 city: 'East Daphne',
28 state: 'Kentucky',
29 },
30 {
31 name: {
32 firstName: 'Jane',
33 lastName: 'Doe',
34 },
35 address: '769 Dominic Grove',
36 city: 'Columbus',
37 state: 'Ohio',
38 },
39 {
40 name: {
41 firstName: 'Joe',
42 lastName: 'Doe',
43 },
44 address: '566 Brakus Inlet',
45 city: 'South Linda',
46 state: 'West Virginia',
47 },
48 {
49 name: {
50 firstName: 'Kevin',
51 lastName: 'Vandy',
52 },
53 address: '722 Emie Stream',
54 city: 'Lincoln',
55 state: 'Nebraska',
56 },
57 {
58 name: {
59 firstName: 'Joshua',
60 lastName: 'Rolluffs',
61 },
62 address: '32188 Larkin Turnpike',
63 city: 'Omaha',
64 state: 'Nebraska',
65 },
66];
67
68const Example = () => {
69 //should be memoized or stable
70 const columns = useMemo<MRT_ColumnDef<Person>[]>(
71 () => [
72 {
73 accessorKey: 'name.firstName', //access nested data with dot notation
74 header: 'First Name',
75 size: 150,
76 },
77 {
78 accessorKey: 'name.lastName',
79 header: 'Last Name',
80 size: 150,
81 },
82 {
83 accessorKey: 'address', //normal accessorKey
84 header: 'Address',
85 size: 200,
86 },
87 {
88 accessorKey: 'city',
89 header: 'City',
90 size: 150,
91 },
92 {
93 accessorKey: 'state',
94 header: 'State',
95 size: 150,
96 },
97 ],
98 [],
99 );
100
101 const table = useMaterialReactTable({
102 columns,
103 data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
104 });
105
106 return <MaterialReactTable table={table} />;
107};
108
109export default Example;
110

Is
<MaterialReactTable />
Right For Your Project?

Let's Compare

Material React TableFree MIT
53 KB53
Built on top of TanStack Table V8 and Material UI V5, Material React Table (MRT) is a batteries-included React table library that attempts to provide all the table features you need while trying to stay as highly performant and lightweight as possible. Customization is treated as a top priority to let you override any styles you need to change. Initially built in 2022, so it is still somewhat new.
Mantine React TableFree MIT
48 KB48
Mantine React Table is Material React Table's sister library. It was forked from Material React Table and just uses Mantine instead of Material UI. If you want a more "pure" CSS component library to use with MRT, or you are a Tailwind user, then Mantine React Table might actually be a better fit for you.
TanStack Table (React Table)Free MIT
14 KB14
TanStack Table (formerly React Table) is a lightweight Headless UI library for building powerful tables and datagrids. No CSS or components included. You use logic from the useReactTable hook to build your own table components. No batteries included, but you get total control of your markup and styles (Material React Table is built on top of TanStack Table).
Material TableFree MIT
185 KB185
Material Table is a once-popular Material UI table library originally built in 2018 for creating Material UI tables that includes tons of features. However, it has a very large bundle size and contains outdated and insecure dependencies. It is mostly unmaintained now but did recently release a version that was somewhat compatible with Material UI V5.
MUI DatatablesFree MIT
96 KB96
MUI Datatables is a solid Material UI-based table library that was originally built in 2017. It has a lot of features and is very customizable. However, it is not as lightweight as MRT and has a lot of dependencies. The library appears to still be kept up to date occasionally, but its documentation site is no longer available. Some of the UI layouts in MUI Datatables served as inspiration for Material React Table.
MUI X Data Grid MIT/Pro/PremiumMIT or Paid License
135 KB135
MUI X Data Grid MIT/Pro/Premium is one of the best Material UI Data Grid options available and it comes directly from MUI. It includes the full suite of features you may need but requires a paid license for many of the advanced features.
AG Grid Community/EnterpriseMIT or Paid License
332 KB332
AG Grid Community/Enterprise is arguably the best table library of all time, but many of the advanced features require an expensive paid license. It appears to have a very large bundle size, although this is a bit misleading because it is tree-shakable and includes a lot of the UI components in the bundle. It is not built on top of Material UI, but it does follow Material Design, so it is definitely relevant to this comparison.

Feature Comparison

Click to copy
Column Action Dropdown
Column Hiding
Column Ordering (DnD)
Column Pinning (Freezing)
Column Resizing
Column Spanning⚠️
Column Virtualization⚠️
Column/Row Grouping and Aggregation
Custom Icons
Customize Toolbars⚠️
Data Editing
Density Toggle
Detail Panels
Expanding Rows (Tree Data)
Export to CSV⚠️
Filter Modes
Filtering
Fullscreen Mode
Global Filtering Search
Header Groups and Footers
Localization (i18n)
Manage your own state⚠️
Pagination
Row Action Buttons
Row Numbers
Row Ordering (DnD)
Row Pinning
Row Selection
Row Spanning⚠️
Same Column Multi-Filtering
Sorting
SSR Compatibility⚠️
Theming
Virtualization⚠️

*If you see any inaccuracies in this table, PRs are welcome!

Maintainers and Contributors

Kevin Van Cott

Kevin Van Cott

Maintainer, Developer

Daniel Humphrey

Daniel Humphrey

UI/UX, Technical Writer

Ryan Kholousi

Ryan Kholousi

UI/UX Designer

GitHub Contributors

Useful Links

NPM

NPM

Source Code

Source Code

GitHub Issues

GitHub Issues

Discord

Discord

Storybook

Storybook