Examples › Row actions cell | Mantine DataTable

Examples › Row actions cell

If a simple row click or cell click handler is not enough and context menus are not your thing, implementing a row actions cell using the column render function should’t be difficult.

Name	City	State
Feest, Bogan and Herzog	Stromanport	WY
Cummerata - Kuhlman	South Gate	NH
Goyette Inc	Dorthyside	ID
Runte Inc	McAllen	MA
Goldner, Rohan and Lehner	North Louie	WY

No records

Here is the code:

return (
  <DataTable
    withTableBorder
    columns={[
      { accessor: 'name' },
      { accessor: 'city' },
      { accessor: 'state' },
      {
        accessor: 'actions',
        title: <Box mr={6}>Row actions</Box>,
        textAlign: 'right',
        render: (company) => (
          <Group gap={4} justify="right" wrap="nowrap">
            <ActionIcon
              size="sm"
              variant="subtle"
              color="green"
              onClick={() => showModal({ company, action: 'view' })}
            >
              <IconEye size={16} />
            </ActionIcon>
            <ActionIcon
              size="sm"
              variant="subtle"
              color="blue"
              onClick={() => showModal({ company, action: 'edit' })}
            >
              <IconEdit size={16} />
            </ActionIcon>
            <ActionIcon
              size="sm"
              variant="subtle"
              color="red"
              onClick={() => showModal({ company, action: 'delete' })}
            >
              <IconTrash size={16} />
            </ActionIcon>
          </Group>
        ),
      },
    ]}
    records={records}
  />
);

Heads up

If you need to combine row actions with clickable rows, clickable cells, expandable rows or row context-menus triggered by click instead of right-click, make sure to intercept the click event on the actions and invoke its .stopPropagation() method.
See this example for more information.

Constraining the actions column width

If you want to constrain the actions column to be no wider than its content, you can set its width to '0%' and, if you have more than one action icon, make sure the actions are wrapped in a Mantine Group component with wrap='nowrap':

Name	City	State
Feest, Bogan and Herzog	Stromanport	WY
Cummerata - Kuhlman	South Gate	NH
Goyette Inc	Dorthyside	ID
Runte Inc	McAllen	MA
Goldner, Rohan and Lehner	North Louie	WY

No records

Here is the code:

<DataTable
  withTableBorder
  withColumnBorders
  columns={[
    // other columns...
    {
      accessor: 'actions',
      title: <Box mr={6}>Actions</Box>,
      width: '0%', // 👈 set width to 0%
      textAlign: 'right',
      render: (company) => (
        // 👇 make sure the actions don't wrap
        <Group gap={4} wrap="nowrap">
          {/* action icons... */}
        </Group>
      ),
    },
  ]}
  records={records}
/>