Mantine React Table

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.

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

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

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

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

export default Example;

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

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

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

  const table = useMantineReactTable({
    columns,
    data,
    enableRowActions: true,
    renderRowActions: ({ row }) => (
      <Box style={{ display: 'flex', flexWrap: 'nowrap', gap: '8px' }}>
        <ActionIcon
          color="blue"
          onClick={() =>
            window.open(
              `mailto:kevinvandy@mailinator.com?subject=Hello ${row.original.firstName}!`,
            )
          }
        >
          <IconSend />
        </ActionIcon>
        <ActionIcon
          color="orange"
          onClick={() => {
            table.setEditingRow(row);
          }}
        >
          <IconEdit />
        </ActionIcon>
        <ActionIcon
          color="red"
          onClick={() => {
            data.splice(row.index, 1); //assuming simple data table
            setData([...data]);
          }}
        >
          <IconTrash />
        </ActionIcon>
      </Box>
    ),
  });

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

export default Example;

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>
  ),
});

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>,
});