Material React Table

A fully featured Material UI V5 implementation of TanStack React Table V8, ...

Material designTableReact
KevinVandy/material-react-tablematerial-react-table.commaterial-react-table

README

Material React Table


View Documentation


About


_Quickly Create React Data Tables with Material Design_


### __Built with [Material UI V5](https://mui.com) and [TanStack Table V8](https://tanstack.com/table/v8)__

MRT

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

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


Installation


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)

  1. ```bash
  2. npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
  3. ```

3. Install material-react-table

  1. ```bash
  2. npm install material-react-table
  3. ```

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


  1. ```jsx
  2. import React, { useMemo, useRef, useState, useEffect } from 'react';
  3. import MaterialReactTable from 'material-react-table';

  5. const data = [
  6.   {
  7.     name: 'John',
  8.     age: 30,
  9.   },
  10.   {
  11.     name: 'Sara',
  12.     age: 25,
  13.   },
  14. ]

  16. export default function App() {
  17.   const columns = useMemo(
  18.     () => [
  19.       {
  20.         accessorKey: 'name', //simple recommended way to define a column
  21.         header: 'Name',
  22.         muiTableHeadCellProps: { sx: { color: 'green' } }, //optional custom props
  23.         Cell: ({ cell }) => <span>{cell.getValue()}</span>, //optional custom cell render
  24.       },
  25.       {
  26.         accessorFn: (row) => row.age, //alternate way
  27.         id: 'age', //id required if you use accessorFn instead of accessorKey
  28.         header: 'Age',
  29.         Header: () => <i>Age</i>, //optional custom header render
  30.       },
  31.     ],
  32.     [],
  33.   );

  35.   //optionally, you can manage any/all of the table state yourself
  36.   const [rowSelection, setRowSelection] = useState({});

  38.   useEffect(() => {
  39.     //do something when the row selection changes
  40.   }, [rowSelection]);

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

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

  50.   return (
  51.     <MaterialReactTable
  52.       columns={columns}
  53.       data={data}
  54.       enableColumnOrdering //enable some features
  55.       enableRowSelection
  56.       enablePagination={false} //disable a default feature
  57.       onRowSelectionChange={setRowSelection} //hoist internal state to your own state (optional)
  58.       state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
  59.       tableInstanceRef={tableInstanceRef} //get a reference to the underlying table instance (optional)
  60.     />
  61.   );
  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.