DOCSEARCHbyAlgolia
Submit Docs

Material React Table

website·Indexed 33 days ago

https://www.material-react-table.com/

A feature-rich data table component for React. It provides comprehensive tools for implementing CRUD functionality, row virtualization, column filtering, sorting, grouping, and expanding sub-rows (tree data). The library includes built-in support for row selection, pagination, sticky headers, and detail panels, with deep integration of TanStack Table for advanced state management and configuration.

Tokens
52.4K
Snippets
256
Records
349
Agent score
69%

What's inside Material React Table

  1. Overview of Material React Table editing modes

    Material React Table provides five distinct editing modes to implement CRUD functionality depending on the desired user experience:

    • Modal: Edit data within a modal dialog.
    • Row: Edit one row at a time inline.
    • Cell: Edit one cell at a time inline.
    • Table: Editing is enabled for every cell across the table simultaneously.
    • Custom: Implement a completely custom editing user interface.

  2. Overview of Material React Table

    Material React Table (MRT) is a fully-featured data grid/table component library for React. It is a Material UI V6 implementation of TanStack React Table V8, written in TypeScript. It is designed to integrate seamlessly into projects already using Material UI, though it can be used independently as long as the required peer dependencies are installed.

  3. Overview of Material React Table Column Actions

    Material React Table renders a column actions button in each column header by default. This button opens a drop-down menu providing users with a UI/UX alternative to access various table features. All actions available in this menu can also be triggered through other means in the table.

  4. Build a custom Material Design data grid using TanStack Table and MUI

    For highly specific requirements where pre-built libraries are not customizable enough, you can build a custom data grid by combining TanStack Table with Material UI (MUI) Table components. In this architecture, TanStack Table provides the headless logic (hooks) for sorting, filtering, pagination, and grouping, while MUI components are used to render the UI. This approach provides maximum control over the final implementation.

  5. Use built-in filter variants in Material React Table

    Material React Table (MRT) V3 provides several built-in filter variants to handle common data filtering tasks without requiring custom implementation. Available variants include:

    • Text filters
    • Date filters
    • Range filters
    • Range slider filters
    • Faceted values
    • Popover filters
    • Custom Filter UIs

  6. Use the Cell Instance API to access cell data and methods

    Every cell in Material React Table provides a cell object. This object is not a prop or column option itself, but a static instance containing information and methods about that specific cell. It is commonly accessed within callback functions in column definitions (like muiTableBodyCellProps or Cell overrides) and table-level callback props (like muiEditTextFieldProps).
    const columns = [
  {
    accessorKey: 'username',
    header: 'Username',
    // Access cell in callback column definition options
    muiTableBodyCellProps: ({ cell }) => ({
      onClick: () => {
        console.log(cell.getValue(), cell.id);
      },
    }),
    // Access cell in component override callbacks
    Cell: ({ cell }) => {
      return <div>{cell.getValue()}</div>;
    },
  },
];

const table = useMaterialReactTable({
  columns,
  data,
  // Access cell in callback props
  muiEditTextFieldProps: ({ cell }) => ({
    disabled: cell.getValue() === 'admin',
  }),
});

  7. Basic usage of Material React Table

    Material React Table provides a main component MaterialReactTable for rendering and a hook useMaterialReactTable for defining table configuration, columns, and data. While options can be passed directly as props to the component, using the useMaterialReactTable hook is the recommended approach.
    import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';

const table = useMaterialReactTable({
  columns,
  data,
  // other options
});

return <MaterialReactTable table={table} />;

  8. Manage table row density in Material React Table

    Material React Table provides a density toggle in the top toolbar by default, allowing users to switch between three density levels: spacious, comfortable (default), and compact. When compact density is active, whitespace is set to nowrap by default to minimize row height; this behavior can be overridden using the muiTableBodyCellProps styles or sx prop.

  11. Material React Table V3 Feature Overview

    Material React Table provides a wide range of built-in features:

    • Standard Features: Pagination, Sorting, Column Filtering, Row Selection, Row Expansion, Column Resizing, and Column Reordering.
    • Advanced Features: Virtualization, Aggregation and Grouping, Advanced Filter UIs, Fuzzy Search, Full CRUD Editing, Column Pinning, Row Pinning, and Row Numbers.
    • Internationalization: Support for over 30 i18n locales.

  12. Compare Material UI compatible data grid libraries

    When building data-heavy interfaces with Material UI, several third-party libraries provide higher-level functionality than the stock MUI Table components. The top recommendations include:

    • MUI X DataGrid: Official MUI package. High integration, feature-rich, but some advanced features require paid Pro/Premium licenses.
    • AG Grid: Framework-agnostic, extremely powerful (Excel-like capabilities). Follows Material Design but does not use MUI components internally. Has a free MIT version and a paid Enterprise version. Larger bundle size.
    • Material React Table (MRT): 100% free (MIT). Built on Material UI V6, TanStack Table v8, and TanStack Virtual v3. Highly customizable via TanStack's API and has a significantly smaller bundle size (~42 KB).