Row Actions Feature Guide

The Row Actions feature is simply a pre-built Display Column feature that adds a column as a place to store either a row action menu, or other row action buttons.

Using the built-in Row Actions column is optional, as you can just simply create your own display columns, but this feature has some built-in conveniences that make it easy to add row actions to your table.

Relevant Table Options

#	Type	More Info Links
1	{ [key: string]: MRT_ColumnDef<TData> }	MRT Display Columns Docs

2	boolean

3	'first' \| 'last'

4	({ closeMenu, row, table }) => ReactNode

5	({ cell, row, table }) => ReactNode

Enable Row Actions

You can enable the row actions feature by setting the enableRowActions prop to true.

You can then add your row action components with either the renderRowActions or renderRowActionMenuItems props.

If you want to embed all of your row actions into a single menu, then you can use the renderRowActionMenuItems prop.

const table = useMantineReactTable({
  columns,
  data,
  enableRowActions: true,
  renderRowActionMenuItems: ({ row }) => (
    <>
      <Menu.Item onClick={() => console.info('Edit')}>Edit</Menu.Item>
      <Menu.Item onClick={() => console.info('Delete')}>Delete</Menu.Item>
    </>
  ),
});

return <MantineReactTable table={table} />;

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 { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
2
import { columns, data } from './makeData';
3
import { Menu } from '@mantine/core';
4

5
export const Example = () => {
6
  const table = useMantineReactTable({
7
    columns,
8
    data,
9
    enableRowActions: true,
10
    renderRowActionMenuItems: ({ row }) => (
11
      <>
12
        <Menu.Item onClick={() => console.info('Deactivate')}>
13
          Deactivate
14
        </Menu.Item>
15
        <Menu.Item onClick={() => console.info('Delete')}>Delete</Menu.Item>
16
      </>
17
    ),
18
  });
19

20
  return <MantineReactTable table={table} />;
21
};
22

23
export default Example;

1
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
2
import { columns, data } from './makeData';
3
import { Menu } from '@mantine/core';
4

5
export const Example = () => {
6
  const table = useMantineReactTable({
7
    columns,
8
    data,
9
    enableRowActions: true,
10
    renderRowActionMenuItems: ({ row }) => (
11
      <>
12
        <Menu.Item onClick={() => console.info('Deactivate')}>
13
          Deactivate
14
        </Menu.Item>
15
        <Menu.Item onClick={() => console.info('Delete')}>Delete</Menu.Item>
16
      </>
17
    ),
18
  });
19

20
  return <MantineReactTable table={table} />;
21
};
22

23
export default Example;

Add Row Action Buttons

If you want to add row action buttons, then you can use the renderRowActions prop.

const table = useMantineReactTable({
  columns,
  data,
  enableRowActions: true,
  renderRowActions: ({ row }) => (
    <Box>
      <ActionIcon onClick={() => console.info('Edit')}>
        <IconEdit />
      </ActionIcon>
      <ActionIcon onClick={() => console.info('Delete')}>
        <DeleteIcon />
      </ActionIcon>
    </Box>
  ),
});

return <MantineReactTable table={table} />;

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 { useState } from 'react';
2
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
3
import { columns, data as initialData } from './makeData';
4
import { ActionIcon, Box } from '@mantine/core';
5
import { IconEdit, IconSend, IconTrash } from '@tabler/icons-react';
6

7
export const Example = () => {
8
  const [data, setData] = useState(initialData);
9

10
  const table = useMantineReactTable({
11
    columns,
12
    data,
13
    enableRowActions: true,
14
    renderRowActions: ({ row }) => (
15
      <Box sx={{ display: 'flex', flexWrap: 'nowrap', gap: '8px' }}>
16
        <ActionIcon
17
          color="blue"
18
          onClick={() =>
19
            window.open(
20
              `mailto:kevinvandy@mailinator.com?subject=Hello ${row.original.firstName}!`,
21
            )
22
          }
23
        >
24
          <IconSend />
25
        </ActionIcon>
26
        <ActionIcon
27
          color="orange"
28
          onClick={() => {
29
            table.setEditingRow(row);
30
          }}
31
        >
32
          <IconEdit />
33
        </ActionIcon>
34
        <ActionIcon
35
          color="red"
36
          onClick={() => {
37
            data.splice(row.index, 1); //assuming simple data table
38
            setData([...data]);
39
          }}
40
        >
41
          <IconTrash />
42
        </ActionIcon>
43
      </Box>
44
    ),
45
  });
46

47
  return <MantineReactTable table={table} />;
48
};
49

50
export default Example;

1
import { useState } from 'react';
2
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
3
import { columns, data as initialData } from './makeData';
4
import { ActionIcon, Box } from '@mantine/core';
5
import { IconEdit, IconSend, IconTrash } from '@tabler/icons-react';
6

7
export const Example = () => {
8
  const [data, setData] = useState(initialData);
9

10
  const table = useMantineReactTable({
11
    columns,
12
    data,
13
    enableRowActions: true,
14
    renderRowActions: ({ row }) => (
15
      <Box sx={{ display: 'flex', flexWrap: 'nowrap', gap: '8px' }}>
16
        <ActionIcon
17
          color="blue"
18
          onClick={() =>
19
            window.open(
20
              `mailto:kevinvandy@mailinator.com?subject=Hello ${row.original.firstName}!`,
21
            )
22
          }
23
        >
24
          <IconSend />
25
        </ActionIcon>
26
        <ActionIcon
27
          color="orange"
28
          onClick={() => {
29
            table.setEditingRow(row);
30
          }}
31
        >
32
          <IconEdit />
33
        </ActionIcon>
34
        <ActionIcon
35
          color="red"
36
          onClick={() => {
37
            data.splice(row.index, 1); //assuming simple data table
38
            setData([...data]);
39
          }}
40
        >
41
          <IconTrash />
42
        </ActionIcon>
43
      </Box>
44
    ),
45
  });
46

47
  return <MantineReactTable table={table} />;
48
};
49

50
export default Example;

Customize Row Actions Column

Change Row Actions Display Column Options

You can customize all column def options for the row actions column, including the column width, header text, and more using the displayColumnDefOptions prop.

const table = useMantineReactTable({
  columns,
  data,
  enableRowActions: true,
  displayColumnDefOptions: {
    'mrt-row-actions': {
      header: 'Change Account Settings', //change header text
      size: 300, //make actions column wider
    },
  },
  renderRowActions: ({ row }) => (
    <Box>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Box>
  ),
});

Position Row Actions Column

You can position the row actions column to the left or right (first or last column) of the table using the positionActionsColumn prop. The default is as the first column.

const table = useMantineReactTable({
  columns,
  data,
  enableRowActions: true,
  positionActionsColumn: 'last',
  renderRowActions: ({ row }) => <Button>Button</Button>,
});