Material React Table

View Documentation

About

$3

$3

> Want to use Mantine instead of Material UI? Check out Mantine React Table

Learn More

- Join the Discord server to join in on the development discussion or ask questions
- View the Docs Website
- See all Props, Options, and APIs

$3

- Basic Table (See Default Features)
- Minimal Table (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
- 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, simplified)
- Virtualized Rows (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_

- [x] < 43kb gzipped - Bundlephobia
- [x] Advanced TypeScript Generics Support (TypeScript Optional)
- [x] Aggregation and Grouping (Sum, Average, Count, etc.)
- [x] Click To Copy Cell Values
- [x] Column Action Dropdown Menu
- [x] Column Hiding
- [x] Column Ordering via Drag'n'Drop
- [x] Column Pinning (Freeze Columns)
- [x] Column Resizing
- [x] Customize Icons
- [x] Customize Styling of internal Mui Components
- [x] Data Editing (4 different editing modes)
- [x] Density Toggle
- [x] Detail Panels (Expansion)
- [x] Filtering (supports client-side and server-side)
- [x] Filter Match Highlighting
- [x] Full Screen Mode
- [x] Global Filtering (Search across all columns, rank by best match)
- [x] Header Groups & Footers
- [x] Localization (i18n) support
- [x] Manage your own state or let the table manage it internally for you
- [x] Pagination (supports client-side and server-side)
- [x] Row Actions (Your Custom Action Buttons)
- [x] Row Numbers
- [x] Row Ordering via Drag'n'Drop
- [x] Row Selection (Checkboxes)
- [x] SSR compatible
- [x] Sorting (supports client-side and server-side)
- [x] Theming (Respects your Material UI Theme)
- [x] Toolbars (Add your own action buttons)
- [x] Tree Data / Expanding Sub-rows
- [x] Virtualization (@tanstack/react-virtual)

Getting Started

$3

View the full Installation Docs

1. Ensure that you have React 17 or later installed (MUI V5 requires React 17 or 18)

2. Install Peer Dependencies (Material UI V5)

``bash
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
`

3. Install material-react-table

`bash
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.

$3

> Read the full usage docs here

`jsx
import React, { useMemo, useRef, useState, useEffect } from 'react';
import MaterialReactTable from '@inbuild/material-react-table';

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 }) => {cell.getValue()}, //optional custom cell render
},
{
accessorFn: (row) => row.age, //alternate way
id: 'age', //id required if you use accessorFn instead of accessorKey
header: 'Age',
Header: () => Age, //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]);

//Or, optionally, you can get a reference to the underlying table instance
const tableInstanceRef = useRef(null);

const someEventHandler = () => {
//read the table state during an event from the table instance ref
console.log(tableInstanceRef.current.getState().sorting);
}

return (
columns={columns}
data={data}
enableColumnOrdering //enable some features
enableRowSelection
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)
tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
/>
);
}
``

_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.