Material React Table

In previous versions of material-react-table, you only had the option to use the <MaterialReactTable /> component. Now in version 2, all internal MRT components are exported for you to to optionally use to build up your own custom table components.

View Source Code on GitHub

For most use cases, you will probably just use the default <MaterialReactTable /> component.

It accepts table options as props, just like in v1, but it also now simply accepts the table instance as its only prop instead. You have the choice to use the useMaterialReactTable hook to create the table instance in your own scope or not. Using the table prop with the useMaterialReactTable hook is recommended, because it will give you more flexibility as your table features get more complex.

import {
  MaterialReactTable,
  useMaterialReactTable,
} from 'material-react-table';
//...
const table = useMaterialReactTable({
  columns,
  data,
  enableRowPinning: true,
});
return <MaterialReactTable table={table} />; //recommended

import { MaterialReactTable } from 'material-react-table';
//...
return <MaterialReactTable columns={columns} data={data} enableRowPinning />; //passing props instead like in v1 is possible

Do not pass both a table prop and other table options as props. Additional table options passed to the <MaterialReactTable /> component will be ignored if a table prop is passed. Either specify all table options in the useMaterialReactTable hook or pass all of them as props to the <MaterialReactTable /> component.

Material React Table now exports all of its internal components. You can use them for your own use cases.

View Table Components Source Code on GitHub

The <MRT_TablePaper /> component is the outermost component of the table. Using this is pretty much the same thing as using the <MaterialReactTable /> component, except that you cannot pass table options as props to it.

The Paper component includes UI for the table and the toolbar components.

The <MRT_TableContainer /> component is the container for the table. It only contains the table ui, but none of the toolbar components.

This is a popular use case for tables that do not want the built-in toolbars, but still want all of the other table features.

The <MRT_Table /> component contains the <table> element, and all of the table head, body, and footer components.

Be aware that using this deep of a component, you will lose out on row virtualization, modal editing, and full screen features. Use the above <MRT_TableContainer /> if you want to use those features.

Shows a loading spinner over the table above the MRT_Table component when the table is loading.

View TableHead Components Source Code on GitHub

The <MRT_TableHead /> component contains the <thead> element, and all of the table head rows.

The <MRT_TableHeadRow /> is a <tr> element that contains all of the table head cells in a row

The <MRT_TableHeadCell /> is a <th> element that contains all of the table head cell components. It contains all of the other table head cell components down below depending on which features are enabled.

A button that opens up the column actions menu.

The Sort Icon Button and Label next to a table header

The Filter Icon Button and Label next to a table header

The Grab Handle Icon Button next to a table header used for column dragging

The Resize Handle Icon Button next to a table header used for column resizing

The Filter Container that contains the filter input and filter actions

View TableBody Components Source Code on GitHub

The <MRT_TableBody /> component contains the <tbody> element, and all of the table body rows. It has the ability to render multiple table bodies, depending on if static row pinning features are enabled and used.

The <MRT_TableBodyRow /> is a <tr> element that contains all of the table body cells in a row.

A row and all column-spanning row for rendering detail panels for a row.

The <MRT_TableBodyCell /> is a <td> element that surrounds the cell value or custom Cell render.

Renders the value of a cell. This is a popular component to use as an alternative to TanStack Table's flexRender method. It renders everything inside of the <td>, but not the <td> itself.

A button for grabbing a row for dragging.

A button or buttons for pinning a row.

View TableFooter Components Source Code on GitHub

The <MRT_TableFooter /> component contains the <tfoot> element, and all of the table footer rows.

The <MRT_TableFooterRow /> is a <tr> element that contains all of the table footer cells in a row.

The <MRT_TableFooterCell /> is a <td> element that surrounds the cell value or custom Footer render.

View Input Components Source Code on GitHub

The textfield component for editing a cell value that can either show in a modal or table cell.

The search textfield component for global filtering.

The textfield component for filtering a column. A somewhat comprehensive component that can be a textfield, select, multi-select, or date picker.

The checkbox component for filtering a column by boolean values.

The range slider component for filtering a column by a range of numbers.

A Container component that will render two MRT_FilterTextField components for filtering in a range (min and max).

A checkbox component for selecting a row or selecting all rows from the table header.