Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
2.3 kB · 86 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687"use client";"use no memo";
import type { Table } from "@tanstack/react-table";import { Check, Settings2 } from "lucide-react";import * as React from "react";import { Button } from "@/components/ui/button";import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList,} from "@/components/ui/command";import { Popover, PopoverContent, PopoverTrigger,} from "@/components/ui/popover";import { cn } from "@/lib/utils";
interface DataTableViewOptionsProps<TData> extends React.ComponentProps<typeof PopoverContent> { table: Table<TData>; disabled?: boolean;}
export function DataTableViewOptions<TData>({ table, disabled, ...props}: DataTableViewOptionsProps<TData>) { const columns = table .getAllColumns() .filter( (column) => typeof column.accessorFn !== "undefined" && column.getCanHide(), );
return ( <Popover> <PopoverTrigger asChild> <Button aria-label="Toggle columns" role="combobox" variant="outline" size="sm" className="ml-auto hidden h-8 font-normal lg:flex" disabled={disabled} > <Settings2 className="text-muted-foreground" /> View </Button> </PopoverTrigger> <PopoverContent className="w-44 p-0" {...props}> <Command> <CommandInput placeholder="Search columns..." /> <CommandList> <CommandEmpty>No columns found.</CommandEmpty> <CommandGroup> {columns.map((column) => ( <CommandItem key={column.id} onSelect={() => column.toggleVisibility(!column.getIsVisible()) } > <span className="truncate"> {column.columnDef.meta?.label ?? column.id} </span> <Check className={cn( "ml-auto size-4 shrink-0", column.getIsVisible() ? "opacity-100" : "opacity-0", )} /> </CommandItem> ))} </CommandGroup> </CommandList> </Command> </PopoverContent> </Popover> );}