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 should’t be difficult. Here’s how you could do it, unsing the column render function:

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
    shadow="xs"
    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="green" onClick={() => showInfo(company)}>
              <IconEye size={16} />
            </ActionIcon>
            <ActionIcon color="blue" onClick={() => editInfo(company)}>
              <IconEdit size={16} />
            </ActionIcon>
            <ActionIcon color="red" onClick={() => deleteCompany(company)}>
              <IconTrash size={16} />
            </ActionIcon>
          </Group>
        ),
      },
    ]}
    records={records}
  />
);