Examples › Links or buttons inside clickable rows/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, like so:

Name	City	State
Sipes Inc	Twin Falls	MT
Runolfsdottir - Cummerata	Missouri City	KY
Johnston LLC	Hartford	KY
Crist and Sons	Attleboro	WV
Schmidt and Sons	Collierville	AL

No records

return (
  <DataTable
    withBorder
    withColumnBorders
    records={records}
    columns={[
      { accessor: 'name' },
      { accessor: 'city' },
      { accessor: 'state' },
      {
        accessor: 'actions',
        title: <Text mr="xs">Row actions</Text>,
        textAlignment: 'right',
        render: (company) => (
          <Group spacing={4} position="right" noWrap>
            <ActionIcon
              color="blue"
              onClick={(e: MouseEvent) => {
                e.stopPropagation();
                editInfo(company);
              }}
            >
              <IconEdit size={16} />
            </ActionIcon>
            <ActionIcon
              color="red"
              onClick={(e: MouseEvent) => {
                e.stopPropagation();
                deleteCompany(company);
              }}
            >
              <IconTrash size={16} />
            </ActionIcon>
          </Group>
        ),
      },
    ]}
    rowExpansion={{
      content: ({ record }) => (
        // ...
      ),
    }}
  />
);