View Documentation
Built with Material UI V5 and TanStack Table V8
Want to use Mantine instead of Material UI? Check out Mantine React Table
- Join the Discord server to join in on the development discussion or ask questions
- View the Docs Website
- See all Props, Options, APIs, Components, and Hooks
- Basic Table (See Default Features)
- Minimal Table (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
- Advanced Table (See some of the Advanced Features)
- Custom Headless Table (Build your own table markup)
- Dragging / Ordering Examples (Drag and Drop)
- Editing (CRUD) Examples (Create, Edit, and Delete Rows)
- Expanding / Grouping Examples (Sum, Average, Count, etc.)
- Filtering Examples (Faceted Values, Switching Filters, etc.)
- Sticky Pinning Examples (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
- Remote Data Fetching Examples (Server-side Pagination, Sorting, and Filtering)
- Virtualized Examples (10,000 rows at once!)
- Infinite Scrolling (Fetch data as you scroll)
- Localization (i18n) (Over a dozen languages built-in)
View additional storybook examples
All features can easily be enabled/disabled
Fully Fleshed out Docs are available for all features
- 30-56kb gzipped - Bundlephobia
- Advanced TypeScript Generics Support (TypeScript Optional)
- Aggregation and Grouping (Sum, Average, Count, etc.)
- Cell Actions (Right-click Context Menu)
- 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 and Creating (5 different editing modes)
- Density Toggle
- Detail Panels (Expansion)
- Faceted Value Generation for Filter Options
- 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
- 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 (@tanstack/react-virtual)
View the full Installation Docs
-
Ensure that you have React 18 or later installed
-
Install Peer Dependencies (Material UI V5)
npm install @mui/material @mui/x-date-pickers @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-utilsare internal dependencies, so you do NOT need to install them yourself.
Read the full usage docs here
import { useMemo, useState, useEffect } from 'react';
import {
MaterialReactTable,
useMaterialReactTable,
} from 'material-react-table';
//data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)
const data = [
{
name: 'John',
age: 30,
},
{
name: 'Sara',
age: 25,
},
];
export default function App() {
const columns = useMemo(
() => [
{
accessorKey: 'name', //simple recommended way to define a column
header: 'Name',
muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
},
{
accessorFn: (row) => row.age, //alternate way
id: 'age', //id required if you use accessorFn instead of accessorKey
header: 'Age',
Header: () => <i>Age</i>, //optional custom header render
},
],
[],
);
//optionally, you can manage any/all of the table state yourself
const [rowSelection, setRowSelection] = useState({});
useEffect(() => {
//do something when the row selection changes
}, [rowSelection]);
const table = useMaterialReactTable({
columns,
data,
enableColumnOrdering: true, //enable some features
enableRowSelection: true,
enablePagination: false, //disable a default feature
onRowSelectionChange: setRowSelection, //hoist internal state to your own state (optional)
state: { rowSelection }, //manage your own state, pass it back to the table (optional)
});
const someEventHandler = () => {
//read the table state during an event from the table instance
console.log(table.getState().sorting);
};
return (
<MaterialReactTable table={table} /> //other more lightweight MRT sub components also available
);
}Open in Code Sandbox
PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first if it is a large change!
Read the Contributing Guide to learn how to run this project locally.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent