Opting out of features in Material React Table Example

Material 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.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

First Name	Last Name	Address	City	State
Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Source Code

1import React, { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { data, type Person } from './makeData';
4
5export const Example = () => {
6  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7    //column definitions...
8    () => [
9      {
10        accessorKey: 'firstName',
11        header: 'First Name',
12      },
13      {
14        accessorKey: 'lastName',
15        header: 'Last Name',
16      },
17      {
18        accessorKey: 'address',
19        header: 'Address',
20      },
21      {
22        accessorKey: 'city',
23        header: 'City',
24      },
25      {
26        accessorKey: 'state',
27        header: 'State',
28      },
29    ],
30    [],
31    
32  );
33
34  return (
35    <MaterialReactTable
36      columns={columns}
37      data={data}
38      enableColumnActions={false}
39      enableColumnFilters={false}
40      enablePagination={false}
41      enableSorting={false}
42      enableBottomToolbar={false}
43      enableTopToolbar={false}
44      muiTableBodyRowProps={{ hover: false }}
45      muiTableProps={{
46        sx: {
47          border: '1px solid rgba(81, 81, 81, 1)',
48        },
49      }}
50      muiTableHeadCellProps={{
51        sx: {
52          border: '1px solid rgba(81, 81, 81, 1)',
53        },
54      }}
55      muiTableBodyCellProps={{
56        sx: {
57          border: '1px solid rgba(81, 81, 81, 1)',
58        },
59      }}
60    />
61  );
62};
63
64export default Example;
65

View Extra Storybook Examples