Row Selection Feature Guide

Mantine 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 Table Options

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

2	`boolean`	`true`	MRT Row Selection Docs

3	`boolean \| (row: MRT_Row) => boolean`

4	`boolean`	`true`

5	`boolean`	`true`

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

7	`CheckboxProps \| ({ table }) => CheckboxProps`		Mantine Checkbox Docs

8	`CheckboxProps \| ({ row, table }) => CheckboxProps`		Mantine Checkbox Docs

9	`OnChangeFn<RowSelectionState>`		TanStack Table Row Selection Docs

10	`'bottom' \| 'top' \| 'head-overlay' \| 'none'`

11	`'all' \| 'page'`	`'page'`

12	`'checkbox' \| 'radio' \| 'switch'`	`'checkbox'`	MRT Editing Docs

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 table option.

const table = useMantineReactTable({ columns, data, enableRowSelection: true });

Batch Row Selection

By default, when the user holds down the Shift key and clicks a row, all rows between the last selected row and the clicked row will be selected. This can be disabled with the enableBatchRowSelection table option.

const table = useMantineReactTable({
  columns,
  data,
  enableRowSelection: true,
  enableBatchRowSelection: false, //disable batch row selection with shift key
});

Enable Row Selection Conditionally Per Row

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

const table = useMantineReactTable({
  columns,
  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<MRT_RowSelectionState>({}); //ts type available

const table = useMantineReactTable({
  columns,
  data,
  enableRowSelection: true,
  onRowSelectionChange: setRowSelection,
  state: { rowSelection },
});

return <MantineReactTable table={table} />;

Read Row Selection State or rows from Table Instance

Alternatively, you can read the selection state directly from the table instance like so:

const table = useMantineReactTable({
  columns,
  data,
  enableRowSelection: true,
  renderTopToolbarCustomActions: ({ table }) => (
    <Button
      onClick={() => {
        const rowSelection = table.getState().rowSelection; //read state
        const selectedRows = table.getSelectedRowModel().rows; //or read entire rows
      }}
    >
      Download Selected Users
    </Button>
  ),
});

useEffect(() => {
  //fetch data based on row selection state or something
}, [table.getState().rowSelection]);

return <MantineReactTable table={table} />;

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 Mantine React Table to use a more useful Row ID with the getRowId table option. For example, you may want some like this:

const table = useMantineReactTable({
  columns,
  data,
  enableRowSelection: true,
  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

	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

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useEffect, useMemo, useState } from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  type MRT_ColumnDef,
  type MRT_RowSelectionState,
} from 'mantine-react-table';

const data = [
  {
    userId: '3f25309c-8fa1-470f-811e-cdb082ab9017', //we'll use this as a unique row id
    firstName: 'Dylan',
    lastName: 'Murray',
    age: 22,
    address: '261 Erdman Ford',
    city: 'East Daphne',
    state: 'Kentucky',
  },
  {
    userId: 'be731030-df83-419c-b3d6-9ef04e7f4a9f',
    firstName: 'Raquel',
    lastName: 'Kohler',
    age: 18,
    address: '769 Dominic Grove',
    city: 'Columbus',
    state: 'Ohio',
  },
];

const Example = () => {
  const columns = useMemo(
    () =>
      [
        {
          accessorKey: 'firstName',
          header: 'First Name',
        },
        {
          accessorKey: 'lastName',
          header: 'Last Name',
        },
        {
          accessorKey: 'age',
          header: 'Age',
        },
        {
          accessorKey: 'address',
          header: 'Address',
        },
        {
          accessorKey: 'city',
          header: 'City',
        },
        {
          accessorKey: 'state',
          header: 'State',
        },
      ] as MRT_ColumnDef<(typeof data)[0]>[],
    [],
  );

  //optionally, you can manage the row selection state yourself
  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});

  useEffect(() => {
    //do something when the row selection changes...
    console.info({ rowSelection });
  }, [rowSelection]);

  const table = useMantineReactTable({
    columns,
    data,
    enableRowSelection: true,
    getRowId: (row) => row.userId,
    onRowSelectionChange: setRowSelection,
    state: { rowSelection },
  });

  return <MantineReactTable table={table} />;
};

export default Example;

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:

const table = useMantineReactTable({
  columns,
  data,
  enableRowSelection: true,
  //clicking anywhere on the row will select it
  mantineTableBodyRowProps: ({ row }) => ({
    onClick: row.getToggleSelectedHandler(),
    style: { 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 table option.

const table = useMantineReactTable({
  columns,
  data,
  enableRowSelection: true,
  enableSelectAll: false,
});

Position or Hide Alert Banner Selection Message

By default, an alert banner will be show as rows are selected. You can use the positionToolbarAlertBanner table option to show the alert banner in the top toolbar, bottom toolbar, as an overlay in the table head, or hide it completely.

const table = useMantineReactTable({
  columns,
  data,
  enableRowSelection: true,
  positionToolbarAlertBanner: 'head-overlay', //show alert banner in bottom toolbar instead of top
});

Alternate Switch and Radio Variants

By default, the selection inputs are Mantine checkboxes, but you can use switch or radio buttons instead with the selectDisplayMode table option.

Demo

	First Name	Last Name	Age
	Dylan	Murray	22
	Raquel	Kohler	18

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  type MRT_ColumnDef,
} from 'mantine-react-table';
import { type Person, data } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'age',
        header: 'Age',
      },
    ],
    [],
  );

  const table = useMantineReactTable({
    columns,
    data,
    enableRowSelection: true,
    getRowId: (row) => row.userId,
    positionToolbarAlertBanner: 'bottom',
    selectDisplayMode: 'switch',
  });

  return <MantineReactTable table={table} />;
};

export default Example;

Single Row Selection

By default, the enableMultiRowSelection table option 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 table option to false and a radio button will be used instead of a checkbox.

const table = useMantineReactTable({
  columns,
  data,
  enableMultiRowSelection: false, //shows radio buttons instead of checkboxes
  enableRowSelection: true,
  positionToolbarAlertBanner: 'none', //hide alert banner selection message
});

Demo

Select	First Name	Last Name	Age
	Dylan	Murray	22
	Raquel	Kohler	18

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo, useState } from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  type MRT_ColumnDef,
  type MRT_RowSelectionState,
} from 'mantine-react-table';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'age',
        header: 'Age',
      },
    ],
    [],
  );

  //optionally, you can manage the row selection state yourself
  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});

  const table = useMantineReactTable({
    columns,
    data,
    enableMultiRowSelection: false, //use radio buttons instead of checkboxes
    enableRowSelection: true,
    positionToolbarAlertBanner: 'none', //don't show the toolbar alert banner
    getRowId: (row) => row.userId, //give each row a more useful id
    mantineTableBodyRowProps: ({ row }) => ({
      //add onClick to row to select upon clicking anywhere in the row
      onClick: row.getToggleSelectedHandler(),
      style: { cursor: 'pointer' },
    }),
    onRowSelectionChange: setRowSelection, //connect internal row selection state to your own
    state: { rowSelection }, //pass our managed row selection state to the table to use
  });

  return <MantineReactTable table={table} />;
};

export default Example;

Customize Select Checkboxes or Radio Buttons

The selection checkboxes can be customized with the mantineSelectCheckboxProps table option. Any prop that can be passed to a Mantine 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.

const table = useMantineReactTable({
  columns,
  data,
  enableRowSelection: true,
  mantineSelectCheckboxProps: {
    color: 'orange',
  },
});

Demo

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo } from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  type MRT_ColumnDef,
} from 'mantine-react-table';
import { data } from './makeData';

const Example = () => {
  const columns = useMemo(
    () =>
      [
        {
          accessorKey: 'firstName',
          header: 'First Name',
        },
        {
          accessorKey: 'lastName',
          header: 'Last Name',
        },
        {
          accessorKey: 'age',
          header: 'Age',
        },
      ] as MRT_ColumnDef<(typeof data)[0]>[],
    [],
  );

  const table = useMantineReactTable({
    columns,
    data,
    enableSelectAll: false,
    enableRowSelection: (row) => row.original.age >= 21, //enable row selection conditionally per row
    mantineSelectCheckboxProps: { color: 'red', size: 'lg' },
    positionToolbarAlertBanner: 'head-overlay',
  });

  return <MantineReactTable table={table} />;
};

export default Example;

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 table option false so that the default selection behavior is disabled.

Demo

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

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
import { useMemo, useState } from 'react';
import {
  MantineReactTable,
  useMantineReactTable,
  type MRT_ColumnDef,
  type MRT_RowSelectionState,
} from 'mantine-react-table';
import { data, type Person } from './makeData';

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'age',
        header: 'Age',
      },
      {
        accessorKey: 'address',
        header: 'Address',
      },
      {
        accessorKey: 'city',
        header: 'City',
      },
      {
        accessorKey: 'state',
        header: 'State',
      },
    ],
    [],
  );

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

  const table = useMantineReactTable({
    columns,
    data,
    getRowId: (row) => row.userId,
    mantineTableBodyRowProps: ({ row }) => ({
      //implement row selection click events manually
      onClick: () =>
        setRowSelection((prev) => ({
          ...prev,
          [row.id]: !prev[row.id],
        })),
      selected: rowSelection[row.id],
      style: {
        cursor: 'pointer',
      },
    }),
    state: { rowSelection },
  });

  return <MantineReactTable table={table} />;
};

export default Example;

View Extra Storybook Examples