Row Selection Feature Guide - Material React Table Docs

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
No Description Provided... Yet...
	2	boolean
No Description Provided... Yet...
	3	boolean	true
No Description Provided... Yet...
	4	boolean	true
No Description Provided... Yet...
	5	CheckboxProps \| ({ table }) => CheckboxProps		Material UI Checkbox Props
No Description Provided... Yet...
	6	CheckboxProps \| ({ row, table }) => CheckboxProps		Material UI Checkbox Props
No Description Provided... Yet...
	7
No Description Provided... Yet...
	8	'all' \| 'page'	page
No Description Provided... Yet...

Enable Selection

Selection checkboxes can be enabled with the enableRowSelection prop.

Manage 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. If you are not already fully managing the table state, like in this guide, then here is how you can simply get access to the row selection state, specifically.

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

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

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
  data={data}
  columns={columns}
  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 Code Sandbox Open on GitHub

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

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
  data={data}
  columns={columns}
  enableSelectAll={false}
  enableRowSelection
/>

Customize Select Checkboxes

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
  data={data}
  columns={columns}
  enableRowSelection
  muiSelectCheckboxProps={{
    color: 'secondary',
  }}
/>

Demo

Open Code Sandbox Open on GitHub

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, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3
4const Example: FC = () => {
5  const columns = useMemo(
6    () =>
7      [
8        //column definitions...
9        {
10          accessorKey: 'firstName',
11          header: 'First Name',
12        },
13        {
14          accessorKey: 'lastName',
15          header: 'Last Name',
16        },
17        {
18          accessorKey: 'age',
19          header: 'Age',
20        },
21        {
22          accessorKey: 'address',
23          header: 'Address',
24        },
25        {
26          accessorKey: 'city',
27          header: 'City',
28        },
29        {
30          accessorKey: 'state',
31          header: 'State',
32        },
33        
34      ] as MRT_ColumnDef<typeof data[0]>[],
35    [],
36  );
37
38  const data = useMemo(
39    () => [
40      //data definitions...
41      {
42        firstName: 'Dylan',
43        lastName: 'Murray',
44        age: 22,
45        address: '261 Erdman Ford',
46        city: 'East Daphne',
47        state: 'Kentucky',
48      },
49      {
50        firstName: 'Raquel',
51        lastName: 'Kohler',
52        age: 18,
53        address: '769 Dominic Grove',
54        city: 'Columbus',
55        state: 'Ohio',
56      },
57      {
58        firstName: 'Ervin',
59        lastName: 'Reinger',
60        age: 20,
61        address: '566 Brakus Inlet',
62        city: 'South Linda',
63        state: 'West Virginia',
64      },
65      {
66        firstName: 'Brittany',
67        lastName: 'McCullough',
68        age: 21,
69        address: '722 Emie Stream',
70        city: 'Lincoln',
71        state: 'Nebraska',
72      },
73      {
74        firstName: 'Branson',
75        lastName: 'Frami',
76        age: 32,
77        address: '32188 Larkin Turnpike',
78        city: 'Charleston',
79        state: 'South Carolina',
80      },
81      
82    ],
83    [],
84  );
85  return (
86    <MaterialReactTable
87      columns={columns}
88      data={data}
89      enableSelectAll={false}
90      enableRowSelection
91      muiSelectCheckboxProps={({ row }) => ({
92        color: 'secondary',
93        disabled: row.getValue<number>('age') < 21,
94      })}
95    />
96  );
97};
98
99export default Example;
100