Material React Table

Material React Table includes a density toggle button in the top toolbar by default where a user can toggle between 3 different density levels. This is a great feature to include to help with accessibility for different user preferences, but it can easily be disabled if it is not wanted.

boolean

true

'comfortable' | 'compact' | 'spacious'

comfortable

By default, Material React Table will render with a medium comfortable density.

A density toggle is shown by default to let a user change the density to cycle through spacious, comfortable, and compact densities.

When a compact density is set, whitespace is set to nowrap by default to keep the rows as short in height as possible. This can be overridden in the muiTableBodyCellProps styles or sx prop.

If you want to change the default density, you can set that in either the initialState prop or the state prop.

<MaterialReactTable
  data={data}
  columns={columns}
  initialState={{ density: 'compact' }}
/>

You can change the default density, and disable the density toggle itself if you want.

In this example, the density toggle is disabled and a compact density is set by default in the initialState prop.

1import React, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { data, Person } from './makeData';
4
5const Example: FC = () => {
6  const columns = useMemo(
7    //column definitions...
8    () =>
9      [
10        {
11          accessorKey: 'firstName',
12          header: 'First Name',
13        },
14        {
15          accessorKey: 'lastName',
16          header: 'Last Name',
17        },
18        {
19          accessorKey: 'address',
20          header: 'Address',
21        },
22        {
23          accessorKey: 'city',
24          header: 'City',
25        },
26        {
27          accessorKey: 'state',
28          header: 'State',
29        },
30      ] as MRT_ColumnDef<Person>[],
31    [],
32    
33  );
34
35  return (
36    <MaterialReactTable
37      columns={columns}
38      data={data}
39      enableDensityToggle={false}
40      initialState={{ density: 'compact' }}
41    />
42  );
43};
44
45export default Example;
46