Material React Table V3
View Documentation
About
Quickly Create React Data Tables with Material Design
Want to use Mantine instead of Material UI? Check out Mantine React Table
Learn More
Quick Examples
- 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
Features
All features can easily be enabled/disabled
Fully Fleshed out Docs are available for all features
Getting Started
Installation
View the full Installation Docs
-
Ensure that you have React 18 or later installed
-
Install Peer Dependencies (Material UI V6)
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-utils are internal dependencies, so you do NOT need to install them yourself.
Usage
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
Contributors
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.
