{
  "name": "data-table-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "data-table"
  ],
  "files": [
    {
      "path": "examples/data-table-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport type { Column, ColumnDef } from \"@tanstack/react-table\";\n\nimport {\n  CheckCircle,\n  CheckCircle2,\n  DollarSign,\n  MoreHorizontal,\n  Text,\n  XCircle,\n} from \"lucide-react\";\nimport { parseAsArrayOf, parseAsString, useQueryState } from \"nuqs\";\nimport * as React from \"react\";\n\nimport { DataTable } from \"@/components/data-table/data-table\";\nimport { DataTableColumnHeader } from \"@/components/data-table/data-table-column-header\";\nimport { DataTableToolbar } from \"@/components/data-table/data-table-toolbar\";\nimport { useDataTable } from \"@/hooks/use-data-table\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\";\n\ninterface Project {\n  id: string;\n  title: string;\n  status: \"active\" | \"inactive\";\n  budget: number;\n}\n\nconst data: Project[] = [\n  {\n    id: \"1\",\n    title: \"Project Alpha\",\n    status: \"active\",\n    budget: 50000,\n  },\n  {\n    id: \"2\",\n    title: \"Project Beta\",\n    status: \"inactive\",\n    budget: 75000,\n  },\n  {\n    id: \"3\",\n    title: \"Project Gamma\",\n    status: \"active\",\n    budget: 25000,\n  },\n  {\n    id: \"4\",\n    title: \"Project Delta\",\n    status: \"active\",\n    budget: 100000,\n  },\n];\n\nexport default function DataTableDemo() {\n  const [title] = useQueryState(\"title\", parseAsString.withDefault(\"\"));\n  const [status] = useQueryState(\n    \"status\",\n    parseAsArrayOf(parseAsString).withDefault([]),\n  );\n\n  // Ideally we would filter the data server-side, but for the sake of this example, we'll filter the data client-side\n  const filteredData = React.useMemo(() => {\n    return data.filter((project) => {\n      const matchesTitle =\n        title === \"\" ||\n        project.title.toLowerCase().includes(title.toLowerCase());\n      const matchesStatus =\n        status.length === 0 || status.includes(project.status);\n\n      return matchesTitle && matchesStatus;\n    });\n  }, [title, status]);\n\n  const columns = React.useMemo<ColumnDef<Project>[]>(\n    () => [\n      {\n        id: \"select\",\n        header: ({ table }) => (\n          <Checkbox\n            checked={\n              table.getIsAllPageRowsSelected() ||\n              (table.getIsSomePageRowsSelected() && \"indeterminate\")\n            }\n            onCheckedChange={(value) =>\n              table.toggleAllPageRowsSelected(!!value)\n            }\n            aria-label=\"Select all\"\n          />\n        ),\n        cell: ({ row }) => (\n          <Checkbox\n            checked={row.getIsSelected()}\n            onCheckedChange={(value) => row.toggleSelected(!!value)}\n            aria-label=\"Select row\"\n          />\n        ),\n        size: 32,\n        enableSorting: false,\n        enableHiding: false,\n      },\n      {\n        id: \"title\",\n        accessorKey: \"title\",\n        header: ({ column }: { column: Column<Project> }) => (\n          <DataTableColumnHeader column={column} label=\"Title\" />\n        ),\n        cell: ({ cell }) => <div>{cell.getValue<Project[\"title\"]>()}</div>,\n        meta: {\n          label: \"Title\",\n          placeholder: \"Search titles...\",\n          variant: \"text\",\n          icon: Text,\n        },\n        enableColumnFilter: true,\n      },\n      {\n        id: \"status\",\n        accessorKey: \"status\",\n        header: ({ column }: { column: Column<Project> }) => (\n          <DataTableColumnHeader column={column} label=\"Status\" />\n        ),\n        cell: ({ cell }) => {\n          const status = cell.getValue<Project[\"status\"]>();\n          const Icon = status === \"active\" ? CheckCircle2 : XCircle;\n\n          return (\n            <Badge variant=\"outline\" className=\"capitalize\">\n              <Icon />\n              {status}\n            </Badge>\n          );\n        },\n        meta: {\n          label: \"Status\",\n          variant: \"multiSelect\",\n          options: [\n            { label: \"Active\", value: \"active\", icon: CheckCircle },\n            { label: \"Inactive\", value: \"inactive\", icon: XCircle },\n          ],\n        },\n        enableColumnFilter: true,\n      },\n      {\n        id: \"budget\",\n        accessorKey: \"budget\",\n        header: ({ column }: { column: Column<Project> }) => (\n          <DataTableColumnHeader column={column} label=\"Budget\" />\n        ),\n        cell: ({ cell }) => {\n          const budget = cell.getValue<Project[\"budget\"]>();\n\n          return (\n            <div className=\"flex items-center gap-1\">\n              <DollarSign className=\"size-4\" />\n              {budget.toLocaleString()}\n            </div>\n          );\n        },\n      },\n      {\n        id: \"actions\",\n        cell: function Cell() {\n          return (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <MoreHorizontal className=\"h-4 w-4\" />\n                  <span className=\"sr-only\">Open menu</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\">\n                <DropdownMenuItem>Edit</DropdownMenuItem>\n                <DropdownMenuItem variant=\"destructive\">\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          );\n        },\n        size: 32,\n      },\n    ],\n    [],\n  );\n\n  const { table } = useDataTable({\n    data: filteredData,\n    columns,\n    pageCount: 1,\n    initialState: {\n      sorting: [{ id: \"title\", desc: true }],\n      columnPinning: { right: [\"actions\"] },\n    },\n    getRowId: (row) => row.id,\n  });\n\n  return (\n    <div className=\"data-table-container\">\n      <DataTable table={table}>\n        <DataTableToolbar table={table} />\n      </DataTable>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}