A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.

Downloads in past


1,408702.13.03 months ago6 years agoMinified + gzip package size for material-react-table in KB


Material React Table V2
View Documentation


Quickly Create React Data Tables with Material Design

Built with Material UI V5 and TanStack Table V8

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

Learn More

Quick Examples

View additional storybook examples


All features can easily be enabled/disabled
Fully Fleshed out Docs are available for all features
  • x 30-56kb gzipped - Bundlephobia
  • x Advanced TypeScript Generics Support (TypeScript Optional)
  • x Aggregation and Grouping (Sum, Average, Count, etc.)
  • x Cell Actions (Right-click Context Menu)
  • 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 and Creating (5 different editing modes)
  • x Density Toggle
  • x Detail Panels (Expansion)
  • x Faceted Value Generation for Filter Options
  • 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 Pinning
  • 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


View the full Installation Docs

  1. Ensure that you have React 18 or later installed

  1. Install Peer Dependencies (Material UI V5)

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

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


Read the full usage docs here

import { useMemo, useState, useEffect } from 'react';
import {
} 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({
    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

  return (
    <MaterialReactTable table={table} /> //other more lightweight MRT sub components also available

Open in Code Sandbox


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.