DataTableViewOptions() — ui Function Reference

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

Function tsx ApplicationExhibition TaskManagement

Entity Profile

ApplicationExhibition→ TaskManagement→ DataTableViewOptions() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/app/(app)/examples/tasks/components/data-table-view-options.tsx lines 16–57

export function DataTableViewOptions<TData>({
  table,
}: {
  table: Table<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>
  )
}