Material React Table V3

View Documentation

About

Quickly Create React Data Tables with Material Design

Built with Material UI ^V6 and TanStack Table ^V8

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, APIs, Components, and Hooks

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

• 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)

Getting Started

Installation

View the full Installation Docs

1. Ensure that you have React 18 or later installed

2. Install Peer Dependencies (Material UI V6)

1npm install @mui/material @mui/x-date-pickers @mui/icons-material @emotion/react @emotion/styled

3. Install material-react-table

1npm 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

1import { useMemo, useState, useEffect } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5} from 'material-react-table';
6
7//data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)
8const data = [
9  {
10    name: 'John',
11    age: 30,
12  },
13  {
14    name: 'Sara',
15    age: 25,
16  },
17];
18
19export default function App() {
20  const columns = useMemo(
21    () => [
22      {
23        accessorKey: 'name', //simple recommended way to define a column
24        header: 'Name',
25        muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
26        Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
27      },
28      {
29        accessorFn: (row) => row.age, //alternate way
30        id: 'age', //id required if you use accessorFn instead of accessorKey
31        header: 'Age',
32        Header: () => <i>Age</i>, //optional custom header render
33      },
34    ],
35    [],
36  );
37
38  //optionally, you can manage any/all of the table state yourself
39  const [rowSelection, setRowSelection] = useState({});
40
41  useEffect(() => {
42    //do something when the row selection changes
43  }, [rowSelection]);
44
45  const table = useMaterialReactTable({
46    columns,
47    data,
48    enableColumnOrdering: true, //enable some features
49    enableRowSelection: true,
50    enablePagination: false, //disable a default feature
51    onRowSelectionChange: setRowSelection, //hoist internal state to your own state (optional)
52    state: { rowSelection }, //manage your own state, pass it back to the table (optional)
53  });
54
55  const someEventHandler = () => {
56    //read the table state during an event from the table instance
57    console.log(table.getState().sorting);
58  };
59
60  return (
61    <MaterialReactTable table={table} /> //other more lightweight MRT sub components also available
62  );
63}

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.