Opting out of features in Material React Table Example

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 don't 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

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, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { data, Person } from './makeData';
4
5export const Example: FC = () => {
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    />
46  );
47};
48
49export default Example;
50

View Extra Storybook Examples