{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "column-visibility-menu",
  "type": "registry:ui",
  "title": "Column visibility menu",
  "description": "Columns dropdown for data tables with a checkbox item per column. It returns the updated list of visible column ids so you can show or hide table columns.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/dropdown-menu.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/column-visibility-menu.tsx",
      "type": "registry:ui",
      "target": "components/ui/column-visibility-menu.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger, DropdownMenuGroup } from \"@/components/ui/dropdown-menu\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype Column = { id: string; label: string }\n\n/** A \"Columns\" button that opens a checklist of table columns to show or hide; uncontrolled unless `visible` is passed. */\ntype ColumnVisibilityMenuProps = {\n  columns?: Column[]\n  /** Controlled list of visible column ids. Leave undefined for an uncontrolled menu. */\n  visible?: string[]\n  /** Initial visible ids for the uncontrolled menu. Defaults to every column. */\n  defaultVisible?: string[]\n  onChange?: (ids: string[]) => void\n}\n\nconst SAMPLE_COLUMNS: Column[] = [\n  { id: \"invoice\", label: \"Invoice\" },\n  { id: \"customer\", label: \"Customer\" },\n  { id: \"amount\", label: \"Amount\" },\n  { id: \"status\", label: \"Status\" },\n  { id: \"due\", label: \"Due date\" },\n  { id: \"owner\", label: \"Owner\" },\n]\n\nfunction ColumnVisibilityMenu({ columns = SAMPLE_COLUMNS, visible, defaultVisible, onChange }: ColumnVisibilityMenuProps) {\n  const [inner, setInner] = React.useState<string[]>(() => defaultVisible ?? columns.map((c) => c.id))\n  const shown = visible ?? inner\n  const update = (ids: string[]) => {\n    if (visible === undefined) setInner(ids)\n    onChange?.(ids)\n  }\n  return (\n    <div data-slot=\"column-visibility-menu\">\n      <DropdownMenu>\n      <DropdownMenuTrigger className={cn(buttonVariants({ variant: \"outline\", size: \"sm\" }))}>Columns</DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"min-w-48\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n          {columns.map((c) => {\n            const on = shown.includes(c.id)\n            return (\n              <DropdownMenuCheckboxItem key={c.id} checked={on} onCheckedChange={(v) => update(v ? [...shown, c.id] : shown.filter((x) => x !== c.id))}>\n                {c.label}\n              </DropdownMenuCheckboxItem>\n            )\n          })}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n    </div>\n  )\n}\nexport { ColumnVisibilityMenu }\nexport type { ColumnVisibilityMenuProps, Column as ColumnVisibilityColumn }\n"
    }
  ]
}