{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-11",
  "title": "Columns Visibility Table",
  "description": "A table with columns visibility control",
  "dependencies": [
    "@tanstack/react-table",
    "lucide-react"
  ],
  "registryDependencies": [
    "table",
    "button",
    "checkbox",
    "dropdown-menu",
    "input"
  ],
  "files": [
    {
      "path": "src/components/customized/table/table-11.tsx",
      "content": "\"use client\";\n\nimport {\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  ArrowUpDown,\n  ChevronDown,\n  Columns3,\n  MoreHorizontal,\n  RefreshCcw,\n  SearchIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/ui/button\";\nimport { Checkbox } from \"@/registry/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\";\nimport { Input } from \"@/registry/ui/input\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/ui/table\";\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@yahoo.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@gmail.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@gmail.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@gmail.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@hotmail.com\",\n  },\n];\n\nexport interface Payment {\n  id: string;\n  amount: number;\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\";\n  email: string;\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        aria-label=\"Select all\"\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n          variant=\"ghost\"\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      );\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue(\"amount\"));\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount);\n\n      return <div className=\"text-right font-medium\">{formatted}</div>;\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original;\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button className=\"h-8 w-8 p-0\" variant=\"ghost\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      );\n    },\n  },\n];\n\nexport default function DataTableColumnsVisibilityDemo() {\n  const [searchQuery, setSearchQuery] = React.useState<string>();\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({});\n  const [rowSelection, setRowSelection] = React.useState({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  });\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center gap-2 py-4\">\n        <Input\n          className=\"max-w-sm\"\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button className=\"ml-auto\" variant=\"outline\">\n              <Columns3 /> Columns <ChevronDown className=\"ml-3\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <div className=\"relative\">\n              <Input\n                className=\"pl-8\"\n                onChange={(e) => setSearchQuery(e.target.value)}\n                onKeyDown={(e) => e.stopPropagation()}\n                placeholder=\"Search\"\n                value={searchQuery}\n              />\n              <SearchIcon className=\"absolute inset-y-0 left-2 my-auto h-4 w-4\" />\n            </div>\n            <DropdownMenuSeparator />\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                if (\n                  searchQuery &&\n                  !column.id.toLowerCase().includes(searchQuery.toLowerCase())\n                ) {\n                  return null;\n                }\n\n                return (\n                  <DropdownMenuCheckboxItem\n                    checked={column.getIsVisible()}\n                    className=\"capitalize\"\n                    key={column.id}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                    onSelect={(e) => e.preventDefault()}\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                );\n              })}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem\n              onClick={() => {\n                table.resetColumnVisibility();\n                setSearchQuery(\"\");\n              }}\n            >\n              <RefreshCcw /> Reset\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  data-state={row.getIsSelected() && \"selected\"}\n                  key={row.id}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  className=\"h-24 text-center\"\n                  colSpan={columns.length}\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"flex-1 text-muted-foreground text-sm\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n            size=\"sm\"\n            variant=\"outline\"\n          >\n            Previous\n          </Button>\n          <Button\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n            size=\"sm\"\n            variant=\"outline\"\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}