Cell actions

Add renderCellActionMenuItems to attach items to a right-click context menu on cells. Return ContextMenuItems; they receive { cell, row, table }.

Usage

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  renderCellActionMenuItems: ({ cell }) => (
    <ContextMenuItem
      onSelect={() => navigator.clipboard.writeText(String(cell.getValue()))}
    >
      Copy value
    </ContextMenuItem>
  ),
})

return <DataTable table={table} />

Click to copy

Enable click-to-copy on every cell with enableClickToCopy: true, or scope it to a single column through its meta.

const columns = [
  {
    accessorKey: "email",
    header: "Email",
    meta: { enableClickToCopy: true },
  },
]

Column actions menu

Append custom items to the bottom of every column header's actions menu with renderColumnActionsMenuItems. Return DropdownMenuItems; they receive { column, table }, and a separator is added before them.

import { DropdownMenuItem } from "@/components/ui/dropdown-menu"

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  renderColumnActionsMenuItems: ({ column }) => (
    <DropdownMenuItem onClick={() => exportColumn(column.id)}>
      Export column
    </DropdownMenuItem>
  ),
})

Related

• Row actions