MRT logoMaterial React Table

On This Page

    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

    1
    boolean
    true
    MRT Row Selection Docs
    2
    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

    1
    Record<string, boolean>
    {}
    TanStack Table Row Selection Docs

    Enable Selection

    Selection checkboxes can be enabled with the enableRowSelection prop.

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

    Access 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 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 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 StackblitzOpen Code SandboxOpen on GitHub
    DylanMurray22261 Erdman FordEast DaphneKentucky
    RaquelKohler18769 Dominic GroveColumbusOhio

    Rows per page

    1-2 of 2

    Source Code

    1import React, { FC, useEffect, useMemo, useState } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3import { RowSelectionState } from '@tanstack/react-table';
    4
    5const data = [
    6 {
    7 userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
    8 firstName: 'Dylan',
    9 lastName: 'Murray',
    10 age: 22,
    11 address: '261 Erdman Ford',
    12 city: 'East Daphne',
    13 state: 'Kentucky',
    14 }, //data definitions...
    25];
    26
    27const Example: FC = () => {
    28 const columns = useMemo(
    29 //column definitions...
    58 );
    59
    60 //optionally, you can manage the row selection state yourself
    61 const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
    62
    63 useEffect(() => {
    64 //do something when the row selection changes...
    65 console.info({ rowSelection });
    66 }, [rowSelection]);
    67
    68 return (
    69 <MaterialReactTable
    70 columns={columns}
    71 data={data}
    72 enableRowSelection
    73 getRowId={(row) => row.userId} //give each row a more useful id
    74 onRowSelectionChange={setRowSelection} //connect internal row selection state to your own
    75 state={{ rowSelection }} //pass our managed row selection state to the table to use
    76 />
    77 );
    78};
    79
    80export default Example;
    81

    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
    />

    DylanMurray22261 Erdman FordEast DaphneKentucky
    RaquelKohler18769 Dominic GroveColumbusOhio

    Rows per page

    1-2 of 2

    Source Code

    1import React, { FC, useMemo, useState } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3import { RowSelectionState } from '@tanstack/react-table';
    4
    5const data = [
    6 //data definitions...
    26];
    27
    28const Example: FC = () => {
    29 const columns = useMemo(
    30 //column definitions...
    59 );
    60
    61 //optionally, you can manage the row selection state yourself
    62 const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
    63
    64 return (
    65 <MaterialReactTable
    66 columns={columns}
    67 data={data}
    68 enableMultiRowSelection={false} //use radio buttons instead of checkboxes
    69 enableRowSelection
    70 getRowId={(row) => row.userId} //give each row a more useful id
    71 muiTableBodyRowProps={({ row }) => ({
    72 //add onClick to row to select upon clicking anywhere in the row
    73 onClick: row.getToggleSelectedHandler(),
    74 sx: { cursor: 'pointer' },
    75 })}
    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

    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',
    }}
    />

    DylanMurray22261 Erdman FordEast DaphneKentucky
    RaquelKohler18769 Dominic GroveColumbusOhio
    ErvinReinger20566 Brakus InletSouth LindaWest Virginia
    BrittanyMcCullough21722 Emie StreamLincolnNebraska
    BransonFrami3232188 Larkin TurnpikeCharlestonSouth Carolina

    Rows per page

    1-5 of 5

    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...
    34 ] as MRT_ColumnDef<typeof data[0]>[],
    35 [],
    36 );
    37
    38 const data = useMemo(
    39 () => [
    40 //data definitions...
    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

    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.


    DylanMurray22261 Erdman FordEast DaphneKentucky
    RaquelKohler18769 Dominic GroveColumbusOhio

    Rows per page

    1-2 of 2

    Source Code

    1import React, { FC, useEffect, useMemo, useState } from 'react';
    2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
    3import { RowSelectionState } from '@tanstack/react-table';
    4
    5const data = [
    6 //data definitions...
    26];
    27
    28const Example: FC = () => {
    29 const columns = useMemo<MRT_ColumnDef<typeof data[0]>[]>(
    30 //column definitions...
    58 );
    59
    60 const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
    61
    62 return (
    63 <MaterialReactTable
    64 columns={columns}
    65 data={data}
    66 getRowId={(row) => row.userId}
    67 muiTableBodyRowProps={({ row }) => ({
    68 //implement row selection click events manually
    69 onClick: () =>
    70 setRowSelection((prev) => ({
    71 ...prev,
    72 [row.id]: !prev[row.id],
    73 })),
    74 selected: rowSelection[row.id],
    75 sx: {
    76 cursor: 'pointer',
    77 },
    78 })}
    79 state={{ rowSelection }}
    80 />
    81 );
    82};
    83
    84export default Example;
    85

    View Extra Storybook Examples