Cell actions

Cells can have a right-click menu. Turn on the built-in one with enableCellActions: true — it offers Copy (when click-to-copy is on) and Edit (when the cell is editable) — or decide per cell with enableCellActions: (cell) => boolean.

Your own items

renderCellActionMenuItems sets the menu's contents (and turns the menu on). It receives { cell, row, table, internalMenuItems, closeMenu }: place internalMenuItems where the built-in items should go, or leave it out to replace them, and call closeMenu() from anything that isn't a menu item.

import { ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu"

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  enableCellActions: true,
  enableEditing: true,
  renderCellActionMenuItems: ({ cell, internalMenuItems }) => (
    <>
      {internalMenuItems}
      <ContextMenuSeparator />
      <ContextMenuItem onSelect={() => search(String(cell.getValue()))}>
        Search for this
      </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. Set it to "context-menu" to copy from the cell menu instead of on click, or pass (cell) => boolean | "context-menu" to decide per cell.

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

Column actions menu

renderColumnActionsMenuItems sets the contents of every column header's actions menu. It receives { column, table, internalMenuItems, closeMenu }: put internalMenuItems where the built-in sort / filter / hide / group / pin items should go, or leave it out to replace them.

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

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

Related