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
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’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 }) => (
        // ...
      ),
    }}
  />
);