Skip to content

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

License

Notifications You must be signed in to change notification settings

Kliton/material-react-table

 
 

Repository files navigation

Material React Table

About

Version 1.0 released 2022-09-13 🎉

Built with Material UI V5 and TanStack Table V8

Quickly Create React Data Tables with Material Design

Full Localization (i18n) Support!

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

View additional storybook examples

Features

All features can easily be enabled/disabled

Fully Fleshed out Docs are available for all features

  • < 40kb gzipped - Bundlephobia
  • Advanced TypeScript Generics Support (TypeScript Optional)
  • Aggregation and Grouping (Sum, Average, Count, etc.)
  • 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 (4 different editing modes)
  • Density Toggle
  • Detail Panels (Expansion)
  • Filtering (supports client-side and server-side)
  • 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 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 (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)

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 don't 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

PRs are Welcome, but please discuss in GitHub Discussions or the Discord Server first if it is a large change!

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 87.3%
  • JavaScript 11.0%
  • HTML 1.6%
  • CSS 0.1%