column-actions

Often users need to perform actions on a row's data, such as editing or deleting the row. You can add a column with actions by using the actions property on the column definition.

const columns: Columns<Cat> = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    actions: [
      {
        icon: faCopy,
        onClick: row => alert(`${row.id} is being duplicated!`),
        text: 'Duplicate',
      },
      {
        icon: faEdit,
        onClick: row => alert(`${row.id} is being edited!`),
        text: 'Edit',
      },
      {
        icon: faTrash,
        onClick: row => alert(`${row.id} is being deleted!`),
        text: 'Delete',
      },
    ],
    header: '', // Header is required, but can (and probably should) be empty
  },
]

Dropdown Actions

If you have many actions for a row, a list of buttons can take up a lot of space. You can set displayMode to 'dropdown' to render the actions in a dropdown menu instead.

const columns: Columns<Cat> = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    actions: [
      {
        icon: faCopy,
        onClick: row => alert(`${row.id} is being duplicated!`),
        text: 'Duplicate',
      },
      {
        icon: faEdit,
        onClick: row => alert(`${row.id} is being edited!`),
        text: 'Edit',
      },
      {
        icon: faTrash,
        onClick: row => alert(`${row.id} is being deleted!`),
        text: 'Delete',
      },
    ],
    displayMode: 'dropdown', // Add this!
    header: '',
  },
]

On Row Click

You might want to perform an action when a user clicks anywhere on a row, you can do this by passing a onClick handler to bifrostTableRowProps, which will be passed on to the underlying Bifrost Table row component. The onClick handler will receive the row as the second argument, the first being the click event.

<DataTable
  bifrostTableRowProps={{
    onClick: (_, row) => console.log('Row clicked:', row),
  }}