This project is still in alpha, but is expected to enter beta by August 2022, and a stable 1.0 release shortly thereafter.
- A fully featured Material UI V5 implementation of Tanstack React Table V8
- Inspired by material-table and the MUI X DataGrid
- Written from the ground up in TypeScript
- All internal Material UI components are easily customizable
Join the Discord server to join in on the development discussion or ask questions
View the Docs Website
See all Props and Options
- Basic Table (See Default Features)
- Minimal Table (Turn off Features)
- Advanced Table (See some of the Advanced Features)
- Aggregation/Grouping (Aggregation features such as Sum, Average, Count, etc.)
- Data Export Table (Export to CSV, Excel, etc.)
- Editing CRUD Table (Create, Edit, and Delete Rows)
- Remote Data (Server-side Pagination, Sorting, and Filtering)
- React Query (Server-side Pagination, Sorting, and Filtering)
- Virtualized Rows (10,000 rows at once!)
- Infinite Scrolling (Fetch data as you scroll)
View additional storybook examples
All features can easily be enabled/disabled
- < 37kb 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 (3 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
- 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)
View the full Installation Docs
- Install Peer Dependencies (Material UI V5)
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
- Install material-react-table
npm install material-react-table
@tanstack/react-table
,@tanstack/react-virtual
, and@tanstack/match-sorter-utils
are internal dependencies, so you don't need to install them yourself.
Read the full usage docs here
import React, { useMemo, useState, useEffect } from 'react';
import MaterialReactTable from 'material-react-table';
export default function App() {
const columns = useMemo(
() => [
{
accessorKey: 'name', //simple recommended way to define a column
header: 'Name',
muiTableHeadCellProps: { sx: { color: 'green' } }, //custom props
},
{
accessorFn: (row) => row.age, //alternate way
id: 'age', //id required if you use accessorFn instead of accessorKey
header: 'Age',
Header: <i style={{ color: 'red' }}>Age</i>, //optional custom markup
},
],
[],
);
const data = useMemo(
() => [
{
name: 'John',
age: 30,
},
{
name: 'Sara',
age: 25,
},
],
[],
);
//optionally, you can manage any/all of the table state yourself
const [rowSelection, setRowSelection] = useState({});
useEffect(() => {
//do something when the row selection changes
}, [rowSelection]);
return (
<MaterialReactTable
columns={columns}
data={data}
enableColumnOrdering //enable some features
enableRowSelection
enableStickyHeader
onRowSelectionChange={setRowSelection} //hoist internal state to your own state (optional)
state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
/>
);
}
Open in Code Sandbox
PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first!