Home

Awesome

Material React Table

View Documentation

<a href="https://npmjs.com/package/material-react-table" target="_blank"> <img alt="" src="https://badgen.net/npm/v/material-react-table?color=blue" /> </a> <a href="https://npmtrends.com/material-react-table" target="_blank"> <img alt="" src="https://badgen.net/npm/dt/material-react-table?label=installs&icon=npm&color=blue" /> </a> <a href="https://bundlephobia.com/result?p=material-react-table" target="_blank"> <img alt="" src="https://badgen.net/bundlephobia/minzip/material-react-table@latest?color=blue" /> </a> <a href="https://star-history.com/#kevinvandy/material-react-table&Date" target="_blank"> <img alt="" src="https://badgen.net/github/stars/KevinVandy/material-react-table?color=blue" /> </a> <a href="https://github.com/KevinVandy/material-react-table/blob/v1/LICENSE" target="_blank"> <img alt="" src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue" /> </a> <a href="http://makeapullrequest.com" target="_blank"> <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" /> </a>

About

Quickly Create React Data Tables with Material Design

Built with Material UI <sup>V5</sup> and TanStack Table <sup>V8</sup>

<img src="https://material-react-table.com/banner.png" alt="MRT" height="50"/>

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

Learn More

Quick Examples

View additional storybook examples

Features

All features can easily be enabled/disabled

Fully Fleshed out Docs are available for all features

Getting Started

Installation

View the full Installation Docs

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

  2. Install Peer Dependencies (Material UI V5)

npm install @mui/material @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.

Usage

Read the full usage docs here

import React, { useMemo, useRef, useState, useEffect } from 'react';
import { MaterialReactTable } from '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 }) => <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]);

  //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 (
    <MaterialReactTable 
      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

<a href="https://github.com/kevinvandy/material-react-table/graphs/contributors"> <img src="https://contrib.rocks/image?repo=kevinvandy/material-react-table" /> </a>

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.

<!-- Use the FORCE, Luke! -->