amitsinghrawat1994 / material-react-table

A fully featured Material UI V5 implementation of TanStack Table V8, inspired by material-table, written from the ground up in TypeScript

Material React Table

---

This project is still in alpha, but is expected to enter beta by August 2022, and a stable 1.0 release shortly thereafter.

• A fully featured Material UI V5 implementation of Tanstack React Table V8
• Inspired by material-table and the MUI X DataGrid
• Written from the ground up in TypeScript
• All internal Material UI components are easily customizable

This project is in alpha, but will go into beta soon^TM, so feel free to install and explore

Join the Discord server to join in on the development discussion or ask questions

View the Docs Site

See all Props and Options

---

Quick Examples

• Basic Table (See Default Features)
• Minimal Table (Turn off Features)
• Advanced Table (See some of the Advanced Features)
• Remote Data (Server-side Pagination, Sorting, and Filtering)
• React Query (Server-side Pagination, Sorting, and Filtering)
• Virtualized Rows (20,000 rows at once!)

View additional storybook examples

---

Features (All Features work and are MVP, but are still being polished)

All features can easily be enabled/disabled

• < 35kb gzipped - Bundlephobia
• Advanced TypeScript Generics Support (TypeScript Optional)
• Click To Copy Cell Values
• Column Actions
• Column Grouping (Group By and Aggregates)
• Column Hiding
• Column Ordering via Drag'n'Drop
• Column Pinning
• Column Resizing (work in progress)
• Customize Icons
• Customize Styling of internal Mui Components
• Data Editing (3 different editing modes)
• Density Toggle
• Detail Panels
• Filtering and multiple built-in filter modes
• Full Screen mode
• Global Filtering (Search across all columns, rank by best match)
• Header Groups & Footers
• Localization (i18n) support
• Manage your own state
• Pagination (supports client-side and server-side)
• Remote/Server-side sorting and filtering supported
• Row Actions
• Row Numbers
• Row Selection (checkboxes)
• SSR compatible
• Sorting
• Theming (Respects your Material UI Theme)
• Toolbars (Add your own action buttons)
• Tree Data / Expanding Sub-rows
• Virtualization (react-virtual)

---

Getting Started

Installation

1. Install Peer Dependencies (Material UI V5)

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

2. 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 don't need to install them yourself.

---

Usage

Read the full usage docs here

import React, { useMemo } from 'react';
import MaterialReactTable from 'material-react-table';

export default function App() {
  const columns = useMemo(
    () => [
      {
        accessorKey: 'name', //simple recommended way to define a column
        header: 'Name',
        muiTableHeadCellProps: { sx: { color: 'green' } }, //custom props
      },
      {
        accessorFn: (row) => row.age, //alternate way
        id: 'age', //id required if you use accessorFn instead of accessorKey
        header: 'Age',
        Header: <i style={{ color: 'red' }}>Age</i>, //optional custom markup
      },
    ],
    [],
  );

  //simple data example
  //Check out https://www.material-react-table.com/docs/examples/remote for a more realistic example
  const data = useMemo(
    () => [
      {
        name: 'John',
        age: 30,
      },
      {
        name: 'Sara',
        age: 25,
      },
    ],
    [],
  );

  return (
    <MaterialReactTable 
      columns={columns} 
      data={data} 
      enableColumnOrdering //enable some features
      enableRowSelection 
      enableStickyHeader
   />
   );
}

Open in Code Sandbox

---

Contributors

PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first!