Built with Material UI V9 and TanStack Table V9
This is a fork of Material React Table maintained by Novastera. V5 is a from-scratch rewrite, not an incremental update — it moves the table engine onto TanStack Table v9 and rebuilds on Material UI v9 and React 19, so the library stops carrying forward v8-era workarounds and starts using what its own dependencies offer natively.
Still on React 18 or an older stack? The v4 branch remains available — V5 is not a drop-in upgrade, so stay on v4 until you're ready to move (see the Migration Guide).
- See the Changelog for release notes and breaking changes, especially before upgrading across a major version
- Upgrading from v4? See the Migration Guide for a step-by-step walkthrough with code
- View the Docs Website
- See all Props, Options, APIs, Components, and Hooks
Material React Table was originally created by Kevin Van Cott. We are grateful for the foundation he built, which allows this fork to exist and serve the community.
- 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 19 or later installed
-
Install Peer Dependencies (Material UI V9)
npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled- Install @novastera-oss/material-react-table
npm install @novastera-oss/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 '@novastera-oss/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! If you're looking to contribute, please check out the issues or start a discussion in this repository.
Read the Contributing Guide to learn how to run this project locally.
We're the folks who dusted off this table and gave it a React 19 engine. PRs, issues, and stars are the best kind of coffee but if what your company actually needs is to run your business and client relationships with AI without shipping your data off to feed someone else's model, that's the real thing we build. Come sign up at novastera.com.