DataTableRowActions() — ui Function Reference

Architecture documentation for the DataTableRowActions() function in data-table-row-actions.tsx from the ui codebase.

Function tsx ApplicationExhibition TaskManagement

Entity Profile

ApplicationExhibition→ TaskManagement→ DataTableRowActions() — ui Function Reference

Dependency Diagram

graph TD
  403c615b_5d8a_4772_f2a7_872dfdf059a4["DataTableRowActions()"]
  44065ac3_d397_103c_a19c_808248c8f43d["data-table-row-actions.tsx"]
  403c615b_5d8a_4772_f2a7_872dfdf059a4 -->|defined in| 44065ac3_d397_103c_a19c_808248c8f43d
  style 403c615b_5d8a_4772_f2a7_872dfdf059a4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx lines 28–70

export function DataTableRowActions<TData>({
  row,
}: DataTableRowActionsProps<TData>) {
  const task = taskSchema.parse(row.original)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className="data-[state=open]:bg-muted size-8"
        >
          <MoreHorizontal />
          <span className="sr-only">Open menu</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[160px]">
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Make a copy</DropdownMenuItem>
        <DropdownMenuItem>Favorite</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuRadioGroup value={task.label}>
              {labels.map((label) => (
                <DropdownMenuRadioItem key={label.value} value={label.value}>
                  {label.label}
                </DropdownMenuRadioItem>
              ))}
            </DropdownMenuRadioGroup>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          Delete
          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}