Examples › Links or buttons inside clickable rows or cells

If you need to add links, buttons or any kind of clickable components inside clickable 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 clickable components and invoke its .stopPropagation() method.

For example, the following table implements both expandable rows and row actions:

Name
City
State
Row actions
Feest, Bogan and HerzogStromanportWY
Cummerata - KuhlmanSouth GateNH
Goyette IncDorthysideID
Runte IncMcAllenMA
Goldner, Rohan and LehnerNorth LouieWY

No records

Here’s the code:

return (
  <DataTable
    striped
    withTableBorder
    withColumnBorders
    records={records}
    columns={[
      { accessor: 'name', noWrap: true },
      { accessor: 'city' },
      { accessor: 'state' },
      {
        accessor: 'actions',
        width: '0%',
        title: <Box mx={6}>Row actions</Box>,
        textAlign: 'right',
        render: (company) => (
          <Group gap={4} justify="right" wrap="nowrap">
            <ActionIcon
              size="sm"
              variant="subtle"
              color="blue"
              onClick={(e: React.MouseEvent) => {
                e.stopPropagation();
                showModal({ company, action: 'edit' });
              }}
            >
              <IconEdit size={16} />
            </ActionIcon>
            <ActionIcon
              size="sm"
              variant="subtle"
              color="red"
              onClick={(e: React.MouseEvent) => {
                e.stopPropagation();
                showModal({ company, action: 'delete' });
              }}
            >
              <IconTrash size={16} />
            </ActionIcon>
          </Group>
        ),
      },
    ]}
    rowExpansion={{
      content: ({ record }) => (
        // ...
      ),
    }}
  />
);

Head over to the next example to discover more features.