MRT logoMaterial React Table

Legacy V2 Docs

Minimal Example

Material React Table gives you a lot out of the box, but it's also easy to turn off any features that you do not need.

Every feature has an enable... table option that let's you turn it on or off.

For example, you can turn off sorting or hide the top or bottom toolbars if you want.

Data Export
DnD
Editing
Filtering
Fetching
Pinning
Virtualization
More Examples

Demo

Open StackblitzOpen Code SandboxOpen on GitHub
Here is a table rendered with the lighter weight MRT_Table sub-component, rendering 5 rows.
DylanMurray261 Erdman FordEast DaphneKentucky
RaquelKohler769 Dominic GroveColumbusOhio
ErvinReinger566 Brakus InletSouth LindaWest Virginia
BrittanyMcCullough722 Emie StreamLincolnNebraska
BransonFrami32188 Larkin TurnpikeCharlestonSouth Carolina

Source Code

1import { useMemo } from 'react';
2import {
3 MRT_Table, //import alternative sub-component if we do not want toolbars
4 type MRT_ColumnDef,
5 useMaterialReactTable,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9export const Example = () => {
10 const columns = useMemo<MRT_ColumnDef<Person>[]>(
11 //column definitions...
36 );
37
38 const table = useMaterialReactTable({
39 columns,
40 data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
41 enableColumnActions: false,
42 enableColumnFilters: false,
43 enablePagination: false,
44 enableSorting: false,
45 mrtTheme: (theme) => ({
46 baseBackgroundColor: theme.palette.background.default, //change default background color
47 }),
48 muiTableBodyRowProps: { hover: false },
49 muiTableProps: {
50 sx: {
51 border: '1px solid rgba(81, 81, 81, .5)',
52 caption: {
53 captionSide: 'top',
54 },
55 },
56 },
57 muiTableHeadCellProps: {
58 sx: {
59 border: '1px solid rgba(81, 81, 81, .5)',
60 fontStyle: 'italic',
61 fontWeight: 'normal',
62 },
63 },
64 muiTableBodyCellProps: {
65 sx: {
66 border: '1px solid rgba(81, 81, 81, .5)',
67 },
68 },
69 renderCaption: ({ table }) =>
70 `Here is a table rendered with the lighter weight MRT_Table sub-component, rendering ${table.getRowModel().rows.length} rows.`,
71 });
72
73 //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
74 return <MRT_Table table={table} />;
75};
76
77export default Example;
78

View Extra Storybook Examples