Density Toggle Feature Guide

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

Relevant Table Options

#	Type	Default Value	More Info Links
1	boolean	true	MRT Density Toggle Docs

2	OnChangeFn<MRT_DensityState>		MRT Density Toggle Docs

Relevant State

	#	State Option	Type	Default Value	More Info Links
	1		'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'

Default Density

By default, Mantine React Table will render with a medium md density.

A density toggle is shown by default to let a user change the density to cycle through xl, md, and xs densities.

When a xs 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 mantineTableBodyCellProps styles or sx prop.

Change Default Density

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

const table = useMantineReactTable({
  data,
  columns,
  initialState: { density: 'xs' },
});

Disable or Hide the Density Toggle

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 xs density is set by default in the initialState prop.

Demo

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

Rows per page

1-5 of 5

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { data, type Person } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo(
7
    () =>
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
      ] as MRT_ColumnDef<Person>[],
30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      enableDensityToggle={false}
38
      initialState={{ density: 'xs' }}
39
    />
40
  );
41
};
42

43
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo(
7
    () => [
8
      {
9
        accessorKey: 'firstName',
10
        header: 'First Name',
11
      },
12
      {
13
        accessorKey: 'lastName',
14
        header: 'Last Name',
15
      },
16
      {
17
        accessorKey: 'address',
18
        header: 'Address',
19
      },
20
      {
21
        accessorKey: 'city',
22
        header: 'City',
23
      },
24
      {
25
        accessorKey: 'state',
26
        header: 'State',
27
      },
28
    ],
29

30
    [],
31
  );
32

33
  return (
34
    <MantineReactTable
35
      columns={columns}
36
      data={data}
37
      enableDensityToggle={false}
38
      initialState={{ density: 'xs' }}
39
    />
40
  );
41
};
42

43
export default Example;