MRT logoMaterial React Table

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... prop 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
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,
41 enableColumnActions: false,
42 enableColumnFilters: false,
43 enablePagination: false,
44 enableSorting: false,
45 muiTableBodyRowProps: { hover: false },
46 muiTableProps: {
47 sx: {
48 border: '1px solid rgba(81, 81, 81, .5)',
49 },
50 },
51 muiTableHeadCellProps: {
52 sx: {
53 border: '1px solid rgba(81, 81, 81, .5)',
54 },
55 },
56 muiTableBodyCellProps: {
57 sx: {
58 border: '1px solid rgba(81, 81, 81, .5)',
59 },
60 },
61 });
62
63 //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
64 return <MRT_Table table={table} />;
65};
66
67export default Example;
68

View Extra Storybook Examples