{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-15",
  "title": "Column visibility",
  "description": "TanStack Table, toggle individual columns on or off from a dropdown menu.",
  "dependencies": [
    "@tanstack/react-table"
  ],
  "registryDependencies": [
    "table",
    "button",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/patterns/table/table-15.tsx",
      "content": "'use client'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\nimport {\n  type ColumnDef,\n  type VisibilityState,\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { SlidersHorizontalIcon } from 'lucide-react'\nimport { useState } from 'react'\n\ntype Lead = {\n  name: string\n  company: string\n  email: string\n  source: string\n}\n\nconst data: Lead[] = [\n  {\n    name: 'Ava Carter',\n    company: 'Acme',\n    email: 'ava@acme.com',\n    source: 'Referral',\n  },\n  {\n    name: 'Ben Lopez',\n    company: 'Globex',\n    email: 'ben@globex.com',\n    source: 'Ads',\n  },\n  {\n    name: 'Cara Diaz',\n    company: 'Soylent',\n    email: 'cara@soylent.com',\n    source: 'Organic',\n  },\n  {\n    name: 'Dan Wells',\n    company: 'Initech',\n    email: 'dan@initech.com',\n    source: 'Referral',\n  },\n]\n\nconst columns: ColumnDef<Lead>[] = [\n  {\n    accessorKey: 'name',\n    header: 'Name',\n    cell: ({ row }) => (\n      <span className=\"font-medium\">{row.getValue('name')}</span>\n    ),\n  },\n  { accessorKey: 'company', header: 'Company' },\n  {\n    accessorKey: 'email',\n    header: 'Email',\n    cell: ({ row }) => (\n      <span className=\"text-muted-foreground\">{row.getValue('email')}</span>\n    ),\n  },\n  { accessorKey: 'source', header: 'Source' },\n]\n\nexport function Table15() {\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { columnVisibility },\n    onColumnVisibilityChange: setColumnVisibility,\n    getCoreRowModel: getCoreRowModel(),\n  })\n\n  return (\n    <div className=\"flex w-full max-w-xl flex-col gap-3\">\n      <div className=\"flex justify-end\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"outline\" size=\"sm\">\n                <SlidersHorizontalIcon data-icon=\"inline-start\" />\n                Columns\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-40\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => (\n                <DropdownMenuCheckboxItem\n                  key={column.id}\n                  className=\"capitalize\"\n                  checked={column.getIsVisible()}\n                  closeOnClick={false}\n                  onCheckedChange={(value) => column.toggleVisibility(!!value)}\n                >\n                  {column.id}\n                </DropdownMenuCheckboxItem>\n              ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-lg border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/table/table-15.tsx"
    }
  ],
  "type": "registry:block"
}