Row Selection Feature Guide

Material React Table has a built-in row-selection feature and makes it easy to manage the selection state yourself. This guide will walk you through how to enable row selection and how to customize the selection behavior.

Relevant Props

#	Type	Default Value	More Info Links
1	boolean	true	MRT Row Selection Docs

2	boolean \| (row: MRT_Row) => boolean

3	boolean	true

4	boolean	true

5	(originalRow: TData, index: number, parent?: MRT_Row<TData>) => string		TanStack Table Core Table Docs

6	CheckboxProps \| ({ table }) => CheckboxProps		Material UI Checkbox Props

7	CheckboxProps \| ({ row, table }) => CheckboxProps		Material UI Checkbox Props

8	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

9	'bottom' \| 'top' \| 'none'

10	'all' \| 'page'	'page'

Relevant State

	#	State Option	Type	Default Value	More Info Links
	1		Record<string, boolean>	{}	TanStack Table Row Selection Docs

Enable Row Selection

Selection checkboxes can be enabled with the enableRowSelection prop.

<MaterialReactTable columns={columns} data={data} enableRowSelection />

Enable Row Selection Conditionally Per Row

You can also enable row selection conditionally per row with the same enableRowSelection prop, but with a callback function instead of a boolean.

<MaterialReactTable
  columns={columns}
  data={data}
  enableRowSelection={(row) => row.original.age > 18} //disable row selection for rows with age <= 18
/>

Access Row Selection State

There a couple of ways to access the selection state. You can either manage the selection state yourself or read it from the table instance.

Manage Row Selection State

The row selection state is managed internally by default, but more than likely, you will want to have access to that state yourself. Here is how you can simply get access to the row selection state, specifically.

const [rowSelection, setRowSelection] = useState({});

return (
  <MaterialReactTable
    columns={columns}
    data={data}
    enableRowSelection
    onRowSelectionChange={setRowSelection}
    state={{ rowSelection }}
  />
);

Read Row Selection State from Table Instance

Alternatively, you can read the selection state from the tableInstanceRef ref like so:

const tableInstanceRef = useRef<MRT_TableInstance<YouDataType>>(null); //ts

const someEventHandler = () => {
  const rowSelection = tableInstanceRef.current.getState().rowSelection;
};

return (
  <MaterialReactTable
    columns={columns}
    data={data}
    enableRowSelection
    renderTopToolbarCustomActions={() => (
      <Button onClick={someEventHandler}>
        {'Do Something with Selected Rows'}
      </Button>
    )}
    tableInstanceRef={tableInstanceRef}
  />
);

Useful Row IDs

By default, the row.id for each row in the table is simply the index of the row in the table. You can override this and tell Material React Table to use a more useful Row ID with the getRowId prop. For example, you may want some like this:

<MaterialReactTable
  columns={columns}
  data={data}
  enableRowSelection
  getRowId={(originalRow) => originalRow.userId}
/>

Now as rows get selected, the rowSelection state will look like this:

{
  "3f25309c-8fa1-470f-811e-cdb082ab9017": true,
  "be731030-df83-419c-b3d6-9ef04e7f4a9f": true,
  ...
}

This can be very useful when you are trying to read your selection state and do something with your data as the row selection changes.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

	First Name	Last Name	Age	Address	City	State
	Dylan	Murray	22	261 Erdman Ford	East Daphne	Kentucky
	Raquel	Kohler	18	769 Dominic Grove	Columbus	Ohio

Source Code

1import React, { useEffect, useMemo, useState } from 'react';
2import MaterialReactTable, {
3  MRT_ColumnDef,
4  MRT_RowSelectionState,
5} from 'material-react-table';
6
7const data = [
8  {
9    userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
10    firstName: 'Dylan',
11    lastName: 'Murray',
12    age: 22,
13    address: '261 Erdman Ford',
14    city: 'East Daphne',
15    state: 'Kentucky',
16  }, //data definitions...
17  {
18    userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
19    firstName: 'Raquel',
20    lastName: 'Kohler',
21    age: 18,
22    address: '769 Dominic Grove',
23    city: 'Columbus',
24    state: 'Ohio',
25  },
26  
27];
28
29const Example = () => {
30  const columns = useMemo(
31    //column definitions...
32    () =>
33      [
34        {
35          accessorKey: 'firstName',
36          header: 'First Name',
37        },
38        {
39          accessorKey: 'lastName',
40          header: 'Last Name',
41        },
42        {
43          accessorKey: 'age',
44          header: 'Age',
45        },
46        {
47          accessorKey: 'address',
48          header: 'Address',
49        },
50        {
51          accessorKey: 'city',
52          header: 'City',
53        },
54        {
55          accessorKey: 'state',
56          header: 'State',
57        },
58      ] as MRT_ColumnDef<(typeof data)[0]>[],
59    [], 
60  );
61
62  //optionally, you can manage the row selection state yourself
63  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
64
65  useEffect(() => {
66    //do something when the row selection changes...
67    console.info({ rowSelection });
68  }, [rowSelection]);
69
70  return (
71    <MaterialReactTable
72      columns={columns}
73      data={data}
74      enableRowSelection
75      getRowId={(row) => row.userId} //give each row a more useful id
76      onRowSelectionChange={setRowSelection} //connect internal row selection state to your own
77      state={{ rowSelection }} //pass our managed row selection state to the table to use
78    />
79  );
80};
81
82export default Example;
83

Select Row on Row Click

By default, a row can only be selected by either clicking the checkbox or radio button in the mrt-row-select column. If you want to be able to select a row by clicking anywhere on the row, you can add your own onClick function to a table body row like this:

<MaterialReactTable
  columns={columns}
  data={data}
  enableRowSelection
  //clicking anywhere on the row will select it
  muiTableBodyRowProps={({ row }) => ({
    onClick: row.getToggleSelectedHandler(),
    sx: { cursor: 'pointer' },
  })}
/>

Disable Select All

By default, if you enable selection for each row, there will also be a select all checkbox in the header of the checkbox column. It can be hidden with the enableSelectAll prop.

<MaterialReactTable
  columns={columns}
  data={data}
  enableRowSelection
  enableSelectAll={false}
/>

Single Row Selection

New in v1.1!

By default, the enableMultiRowSelection prop is set to true, which means that multiple rows can be selected at once with a checkbox. If you want to only allow a single row to be selected at a time, you can set this prop to false and a radio button will be used instead of a checkbox.

<MaterialReactTable
  columns={columns}
  data={data}
  enableMultiRowSelection={false} //shows radio buttons instead of checkboxes
  enableRowSelection
/>

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

Select	First Name	Last Name	Age	Address	City	State
	Dylan	Murray	22	261 Erdman Ford	East Daphne	Kentucky
	Raquel	Kohler	18	769 Dominic Grove	Columbus	Ohio

Source Code

1import React, { useMemo, useState } from 'react';
2import MaterialReactTable, {
3  MRT_ColumnDef,
4  MRT_RowSelectionState,
5} from 'material-react-table';
6
7const data = [
8  //data definitions...
9  {
10    userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
11    firstName: 'Dylan',
12    lastName: 'Murray',
13    age: 22,
14    address: '261 Erdman Ford',
15    city: 'East Daphne',
16    state: 'Kentucky',
17  },
18  {
19    userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
20    firstName: 'Raquel',
21    lastName: 'Kohler',
22    age: 18,
23    address: '769 Dominic Grove',
24    city: 'Columbus',
25    state: 'Ohio',
26  },
27  
28];
29
30const Example = () => {
31  const columns = useMemo(
32    //column definitions...
33    () =>
34      [
35        {
36          accessorKey: 'firstName',
37          header: 'First Name',
38        },
39        {
40          accessorKey: 'lastName',
41          header: 'Last Name',
42        },
43        {
44          accessorKey: 'age',
45          header: 'Age',
46        },
47        {
48          accessorKey: 'address',
49          header: 'Address',
50        },
51        {
52          accessorKey: 'city',
53          header: 'City',
54        },
55        {
56          accessorKey: 'state',
57          header: 'State',
58        },
59      ] as MRT_ColumnDef<(typeof data)[0]>[],
60    [], 
61  );
62
63  //optionally, you can manage the row selection state yourself
64  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
65
66  return (
67    <MaterialReactTable
68      columns={columns}
69      data={data}
70      enableMultiRowSelection={false} //use radio buttons instead of checkboxes
71      enableRowSelection
72      getRowId={(row) => row.userId} //give each row a more useful id
73      muiTableBodyRowProps={({ row }) => ({
74        //add onClick to row to select upon clicking anywhere in the row
75        onClick: row.getToggleSelectedHandler(),
76        sx: { cursor: 'pointer' },
77      })}
78      onRowSelectionChange={setRowSelection} //connect internal row selection state to your own
79      state={{ rowSelection }} //pass our managed row selection state to the table to use
80    />
81  );
82};
83
84export default Example;
85

Customize Select Checkboxes or Radio Buttons

The selection checkboxes can be customized with the muiSelectCheckboxProps prop. Any prop that can be passed to a Mui Checkbox component can be specified here. For example, you may want to use a different color for the checkbox, or use some logic to disable certain rows from being selected.

<MaterialReactTable
  columns={columns}
  data={data}
  enableRowSelection
  muiSelectCheckboxProps={{
    color: 'secondary',
  }}
/>

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

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

Source Code

1import React, { useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { data } from './makeData';
4
5const Example = () => {
6  const columns = useMemo(
7    () =>
8      [
9        //column definitions...
10        {
11          accessorKey: 'firstName',
12          header: 'First Name',
13        },
14        {
15          accessorKey: 'lastName',
16          header: 'Last Name',
17        },
18        {
19          accessorKey: 'age',
20          header: 'Age',
21        },
22        {
23          accessorKey: 'address',
24          header: 'Address',
25        },
26        {
27          accessorKey: 'city',
28          header: 'City',
29        },
30        {
31          accessorKey: 'state',
32          header: 'State',
33        },
34        
35      ] as MRT_ColumnDef<(typeof data)[0]>[],
36    [],
37  );
38
39  return (
40    <MaterialReactTable
41      columns={columns}
42      data={data}
43      enableSelectAll={false}
44      enableRowSelection={(row) => row.original.age >= 21} //enable row selection conditionally per row
45      muiSelectCheckboxProps={{ color: 'secondary' }}
46    />
47  );
48};
49
50export default Example;
51

Manual Row Selection Without Checkboxes

You may have a use case where you want to be able to select rows by clicking them, but you do not want to show any checkboxes or radio buttons. You can do this by implementing a row selection feature yourself, while keeping the enableRowSelection prop false so that the default selection behavior is disabled.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

First Name	Last Name	Age	Address	City	State
Dylan	Murray	22	261 Erdman Ford	East Daphne	Kentucky
Raquel	Kohler	18	769 Dominic Grove	Columbus	Ohio

Source Code

1import React, { useEffect, useMemo, useState } from 'react';
2import MaterialReactTable, {
3  MRT_ColumnDef,
4  MRT_RowSelectionState,
5} from 'material-react-table';
6
7const data = [
8  //data definitions...
9  {
10    userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
11    firstName: 'Dylan',
12    lastName: 'Murray',
13    age: 22,
14    address: '261 Erdman Ford',
15    city: 'East Daphne',
16    state: 'Kentucky',
17  },
18  {
19    userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
20    firstName: 'Raquel',
21    lastName: 'Kohler',
22    age: 18,
23    address: '769 Dominic Grove',
24    city: 'Columbus',
25    state: 'Ohio',
26  },
27  
28];
29
30const Example = () => {
31  const columns = useMemo<MRT_ColumnDef<(typeof data)[0]>[]>(
32    //column definitions...
33    () => [
34      {
35        accessorKey: 'firstName',
36        header: 'First Name',
37      },
38      {
39        accessorKey: 'lastName',
40        header: 'Last Name',
41      },
42      {
43        accessorKey: 'age',
44        header: 'Age',
45      },
46      {
47        accessorKey: 'address',
48        header: 'Address',
49      },
50      {
51        accessorKey: 'city',
52        header: 'City',
53      },
54      {
55        accessorKey: 'state',
56        header: 'State',
57      },
58    ],
59    [], 
60  );
61
62  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
63
64  return (
65    <MaterialReactTable
66      columns={columns}
67      data={data}
68      getRowId={(row) => row.userId}
69      muiTableBodyRowProps={({ row }) => ({
70        //implement row selection click events manually
71        onClick: () =>
72          setRowSelection((prev) => ({
73            ...prev,
74            [row.id]: !prev[row.id],
75          })),
76        selected: rowSelection[row.id],
77        sx: {
78          cursor: 'pointer',
79        },
80      })}
81      state={{ rowSelection }}
82    />
83  );
84};
85
86export default Example;
87

View Extra Storybook Examples