DOCSEARCHbyAlgolia
Submit Docs

Material React Table

repository·v3·Indexed 11 days ago

https://github.com/KevinVandy/material-react-table

A powerful React component library for building complex, high-performance data tables using Material UI V6 and TanStack Table V8. It includes built-in features such as sorting, filtering, grouping, and virtualization.

Tokens
85.5K
Snippets
329
Records
421
Agent score
76%

What's inside Material React Table

  1. What is Material React Table?

    v3

    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 from the ground up in TypeScript.

    Key Characteristics

    • Foundation: Built on TanStack Table V8.
    • Styling: Designed to work best in projects already using Material UI.
    • Type Safety: Uses advanced TypeScript generics that react to the data structures you pass in, providing a high-fidelity developer experience.
    • Peer Dependencies: Requires Material UI and Emotion to function.

    Alternatives

    • If you use Tailwind CSS or native CSS and prefer Mantine components, use Mantine React Table instead. It is a sister library with the same API but different component foundations.

  4. Compare Material React Table with other Data Grid libraries

    v3

    When choosing a data grid library for Material UI projects, consider the following trade-offs:

    • Material React Table: 100% free (MIT license), built on Material UI V6, TanStack Table v8, and TanStack Virtual v3. It is highly customizable, lightweight (~42 KB), and uses standard TanStack APIs. Best for projects needing deep customization and Material UI integration without licensing costs.
    • MUI X DataGrid: Official MUI package. Offers seamless integration but uses a tiered licensing model (MIT, Pro, or Premium). Some advanced features require paid versions.
    • AG Grid: Extremely powerful, feature-rich (can act as an Excel replacement), and framework-agnostic. However, it has a larger bundle size and requires a paid Enterprise license for many advanced features.
    • Custom Implementation: If extreme control is needed, you can build a custom grid using TanStack Table hooks for logic (sorting, filtering, pagination) combined with standard Material UI Table components for the UI.

  6. Configure Edit Display Modes

    v3

    Material React Table provides five editDisplayMode options to control how editing is presented to the user:

    1. modal (Default): Opens a modal dialog for editing one row at a time. Requires onEditingRowSave to process changes and call table.setEditingRow(null) to exit the mode.
    2. row: Renders editing components inline within the table row instead of a modal.
    3. cell: Allows editing a single cell (default trigger is double-click). You must manually handle saving via onBlur or onChange in muiEditTextFieldProps.
    4. table: Makes all data cells in the table editable simultaneously.
    5. custom: Provides no built-in UI. You must use the editingCell, editingRow, and creatingRow state options to build your own interface (e.g., in a sidebar).
    // Example: Modal Edit Mode
const table = useMaterialReactTable({
  columns,
  data,
  enableEditing: true,
  editDisplayMode: 'modal',
  onEditingRowSave: ({ table, values }) => {
    // validate data
    // save data to api
    table.setEditingRow(null); // exit editing mode
  },
  onEditingRowCancel: () => {
    // clear any validation errors
  },
});

  7. Customize Pagination Behavior

    v3

    Use these options to modify how pagination interacts with other table features:

    • autoResetPageIndex: (Default: true) When true, the table automatically resets to the first page whenever sorting, filtering, or grouping occurs. Set to false to prevent this.
    • paginateExpandedRows: (Default: true) When true, the table enforces the pageSize even when sub-rows are expanded. Set to false to allow expanded sub-rows to stay on the same page as their parent row.

  8. Use Original Row Numbers

    v3

    In original mode, row numbers are linked to the original index of the data array. When you sort, filter, or search the table, the row numbers stay attached to their specific data rows. This allows you to track a specific record's index even as its position in the visible list changes.

    <MaterialReactTable
  enableRowNumbers
  rowNumberDisplayMode="original"
  // ... other props
/>

  9. Build custom tables with MRT Sub Components

    v3

    Material React Table exports all its internal components (prefixed with MRT_), allowing you to build highly customized table layouts.

    Core Layout Components

    • <MRT_TablePaper />: The outermost component. Includes the table UI and the toolbar components. Does not accept table options as props.
    • <MRT_TableContainer />: Contains only the table UI (no toolbars). Ideal for tables where you want to provide your own custom toolbar.
    • <MRT_Table />: Contains the <table> element, including head, body, and footer. Warning: Using this directly will cause you to lose row virtualization, modal editing, and full-screen features. Use <MRT_TableContainer /> instead if you need those features.
    • <MRT_TableLoadingOverlay />: A loading spinner displayed over the table during loading states.

  10. How MRT hooks work together

    v3

    Material React Table uses a layered hook architecture to provide its features. The main useMaterialReactTable hook is a composition of two internal hooks:

    1. useMRT_TableOptions: Takes custom options and merges them with defaults. It also handles feature-dependent logic (e.g., enabling sticky headers automatically if row virtualization is enabled).
    2. useMRT_TableInstance: The core engine that creates the TanStack Table instance and injects MRT features. It relies on useMRT_Effects to manage table-wide side effects via useEffect hooks.

    This architecture allows developers to use the same logic internally used by MRT components to build their own custom headless tables.

  11. Understand Layout Modes and their impact on sizing

    v3

    Material React Table uses three layoutMode options that determine how column styles are applied:

    1. "semantic" (Default): Uses standard HTML <table>, <tr>, <td> styles. Columns size themselves to fit content. The grow option has no effect here.
    2. "grid": Uses CSS Grid and Flexbox. If grow: false is set on a column, it will have a fixed size and not fill remaining space.
    3. "grid-no-grow": Uses CSS Grid and Flexbox, but sets flex-grow: 0 on all columns and adds a spacer column at the end. This is the recommended mode for absolute pixel widths. If you set grow: true on a column in this mode, it will expand to fill the remaining space.

    If you want absolute widths, use layoutMode: "grid-no-grow" and set the size option on each column.

  12. How Row Actions work in Material React Table

    v3
    The row actions feature is a pre-built Display Column that provides a dedicated column for row-specific interactions. This column can host either a dropdown menu of items or a set of individual action buttons. While you can manually create your own display columns for actions, using the built-in feature provides conveniences for managing the actions column's lifecycle and configuration.