DataTableViewOptions() — ui Function Reference

Architecture documentation for the DataTableViewOptions() function in data-table-view-options.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ DataTableViewOptions() — ui Function Reference

Dependency Diagram

graph TD
  9be8554c_40c8_ace6_98b2_6e2e19f8fc67["DataTableViewOptions()"]
  8b8b6842_dda3_5e86_faa0_c5437f174d77["data-table-view-options.tsx"]
  9be8554c_40c8_ace6_98b2_6e2e19f8fc67 -->|defined in| 8b8b6842_dda3_5e86_faa0_c5437f174d77
  style 9be8554c_40c8_ace6_98b2_6e2e19f8fc67 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/examples/tasks/components/data-table-view-options.tsx lines 20–59

export function DataTableViewOptions<TData>({
  table,
}: DataTableViewOptionsProps<TData>) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className="ml-auto hidden h-8 lg:flex"
        >
          <Settings2 />
          View
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[150px]">
        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {table
          .getAllColumns()
          .filter(
            (column) =>
              typeof column.accessorFn !== "undefined" && column.getCanHide()
          )
          .map((column) => {
            return (
              <DropdownMenuCheckboxItem
                key={column.id}
                className="capitalize"
                checked={column.getIsVisible()}
                onCheckedChange={(value) => column.toggleVisibility(!!value)}
              >
                {column.id}
              </DropdownMenuCheckboxItem>
            )
          })}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}