{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table-advanced",
  "title": "Advanced Data Table",
  "description": "Full-featured data table with search, faceted filters, sorting, pagination, and row selection",
  "dependencies": [
    "@tanstack/react-table"
  ],
  "registryDependencies": [
    "table",
    "button",
    "input",
    "badge",
    "checkbox",
    "command",
    "popover",
    "dropdown-menu",
    "select",
    "separator"
  ],
  "files": [
    {
      "path": "registry/blocks/data-table-advanced/page.tsx",
      "content": "\"use client\"\n\nimport { type ColumnDef } from \"@tanstack/react-table\"\nimport { PlayIcon } from \"lucide-react\"\n\nimport { Badge } from \"@/registry/ui/badge\"\nimport { Checkbox } from \"@/registry/ui/checkbox\"\nimport { DataTable } from \"@/registry/blocks/data-table-advanced/components/data-table\"\nimport { DataTableColumnHeader } from \"@/registry/blocks/data-table-advanced/components/data-table-column-header\"\nimport { DataTableColumnCell } from \"@/registry/blocks/data-table-advanced/components/data-table-column-cell\"\nimport { DataTableToolbar } from \"@/registry/blocks/data-table-advanced/components/data-table-toolbar\"\nimport { DataTableSelectionToolbar } from \"@/registry/blocks/data-table-advanced/components/data-table-selection-toolbar\"\nimport {\n  tasks,\n  statuses,\n  priorities,\n  labels,\n  type Task,\n} from \"@/registry/blocks/data-table-advanced/lib/demo-data\"\n\nconst columns: ColumnDef<Task>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    id: \"very_long_column_name_that_should_truncate_in_the_view_options_menu_to_prevent_layout_breakage\",\n    accessorFn: (row) => row.title,\n    header: ({ column }) => (\n      <DataTableColumnHeader column={column} title=\"Long Column\" />\n    ),\n    cell: ({ row }) => (\n      <DataTableColumnCell\n        value={row.original.title}\n        className=\"w-[150px]\"\n        label=\"Full Title\"\n      />\n    ),\n  },\n  {\n    accessorKey: \"id\",\n    header: ({ column }) => (\n      <DataTableColumnHeader column={column} title=\"Task\" />\n    ),\n    cell: ({ row }) => <div className=\"w-[80px]\">{row.getValue(\"id\")}</div>,\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"title\",\n    header: ({ column }) => (\n      <DataTableColumnHeader column={column} title=\"Title\" />\n    ),\n    cell: ({ row }) => {\n      const label = labels.find((label) => label.value === row.original.label)\n\n      return (\n        <div className=\"flex gap-2\">\n          {label && <Badge variant=\"outline\">{label.label}</Badge>}\n          <span className=\"max-w-[500px] truncate font-medium\">\n            {row.getValue(\"title\")}\n          </span>\n        </div>\n      )\n    },\n  },\n  {\n    accessorKey: \"status\",\n    header: ({ column }) => (\n      <DataTableColumnHeader column={column} title=\"Status\" />\n    ),\n    cell: ({ row }) => {\n      const status = statuses.find(\n        (status) => status.value === row.getValue(\"status\")\n      )\n\n      if (!status) {\n        return null\n      }\n\n      return (\n        <div className=\"flex w-[100px] items-center\">\n          <span>{status.label}</span>\n        </div>\n      )\n    },\n    filterFn: (row, id, value) => {\n      return value.includes(row.getValue(id))\n    },\n  },\n  {\n    accessorKey: \"priority\",\n    header: ({ column }) => (\n      <DataTableColumnHeader column={column} title=\"Priority\" />\n    ),\n    cell: ({ row }) => {\n      const priority = priorities.find(\n        (priority) => priority.value === row.getValue(\"priority\")\n      )\n\n      if (!priority) {\n        return null\n      }\n\n      return (\n        <div className=\"flex items-center\">\n          <span>{priority.label}</span>\n        </div>\n      )\n    },\n    filterFn: (row, id, value) => {\n      return value.includes(row.getValue(id))\n    },\n  },\n  {\n    accessorKey: \"createdAt\",\n    header: ({ column }) => (\n      <DataTableColumnHeader column={column} title=\"Created\" />\n    ),\n    cell: ({ row }) => {\n      return <div className=\"w-[100px]\">{row.getValue(\"createdAt\")}</div>\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const handleProcessSelected = (selectedTasks: Task[]) => {\n    console.log(\"Processing tasks:\", selectedTasks)\n    alert(`Processing ${selectedTasks.length} task(s)`)\n  }\n\n  return (\n    <div className=\"container mx-auto py-10\">\n      <div className=\"mb-6\">\n        <h1 className=\"text-2xl font-bold\">Tasks</h1>\n        <p className=\"text-muted-foreground\">\n          Manage your tasks with search, filters, sorting, and pagination.\n        </p>\n      </div>\n      <DataTable\n        columns={columns}\n        data={tasks}\n        toolbar={(table) => (\n          <div className=\"flex flex-col gap-4\">\n            <DataTableToolbar\n              table={table}\n              searchColumn=\"title\"\n              searchPlaceholder=\"Search tasks...\"\n              filters={[\n                {\n                  column: \"status\",\n                  title: \"Status\",\n                  options: statuses,\n                },\n                {\n                  column: \"priority\",\n                  title: \"Priority\",\n                  options: priorities,\n                },\n              ]}\n            />\n            <DataTableSelectionToolbar\n              table={table}\n              onProcessSelected={handleProcessSelected}\n              processLabel=\"Process Selected\"\n              processIcon={<PlayIcon className=\"mr-1.5 size-4\" />}\n            />\n          </div>\n        )}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/data-table-demo/page.tsx"
    },
    {
      "path": "registry/blocks/data-table-advanced/components/data-table.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type SortingState,\n  type VisibilityState,\n  type Table as TanStackTable,\n} from \"@tanstack/react-table\"\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/ui/table\"\nimport { DataTablePagination } from \"@/registry/blocks/data-table-advanced/components/data-table-pagination\"\n\ninterface DataTableProps<TData, TValue> {\n  columns: ColumnDef<TData, TValue>[]\n  data: TData[]\n  toolbar?: (table: TanStackTable<TData>) => React.ReactNode\n  showPagination?: boolean\n  pageSize?: number\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  toolbar,\n  showPagination = true,\n  pageSize = 10,\n}: DataTableProps<TData, TValue>) {\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n    },\n    initialState: {\n      pagination: {\n        pageSize,\n      },\n    },\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      {toolbar?.(table)}\n      <div className=\"overflow-hidden\">\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} colSpan={header.colSpan} className={header.column.id === \"select\" ? \"!px-4\" : \"\"}>\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                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id} className={cell.column.id === \"select\" ? \"!px-4\" : \"\"}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      {showPagination && <DataTablePagination table={table} />}\n    </div>\n  )\n}\n\nexport { useReactTable, type ColumnDef, type TanStackTable as Table }\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/data-table-advanced/components/data-table-column-header.tsx",
      "content": "\"use client\"\n\nimport { type Column } from \"@tanstack/react-table\"\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, EyeOffIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/lib/utils\"\nimport { Button } from \"@/registry/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\"\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n  extends React.HTMLAttributes<HTMLDivElement> {\n  column: Column<TData, TValue>\n  title: string\n}\n\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>\n  }\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"default\"\n            className=\"data-[state=open]:bg-treasury-base-light -ml-3 h-8 px-3\"\n          >\n            <span>{title}</span>\n            {column.getIsSorted() === \"desc\" ? (\n              <ArrowDownIcon className=\"size-4\" />\n            ) : column.getIsSorted() === \"asc\" ? (\n              <ArrowUpIcon className=\"size-4\" />\n            ) : (\n              <ChevronsUpDownIcon className=\"size-4\" />\n            )}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>\n            <ArrowUpIcon className=\"size-4\" />\n            Asc\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>\n            <ArrowDownIcon className=\"size-4\" />\n            Desc\n          </DropdownMenuItem>\n          {column.getCanHide() && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>\n                <EyeOffIcon className=\"size-4\" />\n                Hide\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/data-table-advanced/components/data-table-faceted-filter.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Column } from \"@tanstack/react-table\"\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/lib/utils\"\nimport { Badge } from \"@/registry/ui/badge\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/registry/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/ui/popover\"\nimport { Separator } from \"@/registry/ui/separator\"\n\ninterface DataTableFacetedFilterProps<TData, TValue> {\n  column?: Column<TData, TValue>\n  title?: string\n  options: {\n    label: string\n    value: string\n  }[]\n}\n\nexport function DataTableFacetedFilter<TData, TValue>({\n  column,\n  title,\n  options,\n}: DataTableFacetedFilterProps<TData, TValue>) {\n  const facets = column?.getFacetedUniqueValues()\n  const selectedValues = new Set(column?.getFilterValue() as string[])\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button className=\"flex items-center gap-2 border border-treasury-base-darkest bg-transparent h-10 rounded-none px-3 py-2 text-base shadow-xs hover:bg-muted/50 transition-colors min-w-[200px]\">\n          <span className=\"flex-1 text-left\">{title}</span>\n          {selectedValues?.size > 0 && (\n            <>\n              <Separator orientation=\"vertical\" className=\"mx-2 self-stretch\" />\n              <Badge\n                variant=\"secondary\"\n                className=\"rounded-sm px-1 font-normal lg:hidden\"\n              >\n                {selectedValues.size}\n              </Badge>\n              <div className=\"hidden gap-1 lg:flex\">\n                {selectedValues.size > 2 ? (\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"rounded-sm px-1 font-normal\"\n                  >\n                    {selectedValues.size} selected\n                  </Badge>\n                ) : (\n                  options\n                    .filter((option) => selectedValues.has(option.value))\n                    .map((option) => (\n                      <Badge\n                        variant=\"secondary\"\n                        key={option.value}\n                        className=\"rounded-sm px-1 font-normal\"\n                      >\n                        {option.label}\n                      </Badge>\n                    ))\n                )}\n              </div>\n            </>\n          )}\n          <ChevronDownIcon className=\"size-4 text-muted-foreground\" />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-fit min-w-[200px] p-0 rounded-none border border-treasury-base-darkest border-t-0 shadow-md ring-0\"\n        align=\"start\"\n        sideOffset={0}\n      >\n        <Command className=\"rounded-none p-0 bg-white\">\n          <CommandList\n            style={{\n              background: `\n                linear-gradient(white 30%, rgba(255,255,255,0)),\n                linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,\n                radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),\n                radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%\n              `,\n              backgroundRepeat: \"no-repeat\",\n              backgroundColor: \"white\",\n              backgroundSize: \"100% 40px, 100% 40px, 100% 14px, 100% 14px\",\n              backgroundAttachment: \"local, local, scroll, scroll\",\n            }}\n          >\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup className=\"p-0\">\n              {options.map((option, index) => {\n                const isSelected = selectedValues.has(option.value)\n                return (\n                  <CommandItem\n                    key={option.value}\n                    onSelect={() => {\n                      if (isSelected) {\n                        selectedValues.delete(option.value)\n                      } else {\n                        selectedValues.add(option.value)\n                      }\n                      const filterValues = Array.from(selectedValues)\n                      column?.setFilterValue(\n                        filterValues.length ? filterValues : undefined\n                      )\n                    }}\n                    className={cn(\n                      \"rounded-none data-[selected=true]:bg-transparent [&>svg:last-child]:hidden px-3 py-2.5\",\n                      index > 0 && \"border-t border-treasury-base-darkest\"\n                    )}\n                  >\n                    <div\n                      className={cn(\n                        \"flex size-4 items-center justify-center rounded-[2px] border\",\n                        isSelected\n                          ? \"bg-primary border-primary text-primary-foreground\"\n                          : \"border-treasury-base-darkest [&_svg]:invisible\"\n                      )}\n                    >\n                      <CheckIcon className=\"size-3.5 !text-white\" />\n                    </div>\n                    <span className=\"flex-1\">{option.label}</span>\n                    {facets?.get(option.value) !== undefined && facets.get(option.value)! > 0 && (\n                      <span className=\"font-mono text-xs text-muted-foreground tabular-nums\">\n                        {facets.get(option.value)}\n                      </span>\n                    )}\n                  </CommandItem>\n                )\n              })}\n            </CommandGroup>\n            {selectedValues.size > 0 && (\n              <CommandGroup className=\"p-0\">\n                <CommandItem\n                  onSelect={() => column?.setFilterValue(undefined)}\n                  className=\"justify-center text-center rounded-none border-t border-treasury-base-darkest data-[selected=true]:bg-transparent px-3 py-2.5\"\n                >\n                  Clear filters\n                </CommandItem>\n              </CommandGroup>\n            )}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/data-table-advanced/components/data-table-pagination.tsx",
      "content": "\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/ui/select\"\nimport { Separator } from \"@/registry/ui/separator\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DataTablePaginationProps<TData> {\n  table: Table<TData>\n  pageSizeOptions?: number[]\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [10, 20, 25, 30, 40, 50],\n}: DataTablePaginationProps<TData>) {\n  const pageCount = table.getPageCount()\n  const currentPage = table.getState().pagination.pageIndex + 1\n\n  // Generate page numbers to display\n  const getPageNumbers = () => {\n    const pages: (number | \"ellipsis\")[] = []\n    const maxVisiblePages = 9\n\n    if (pageCount <= maxVisiblePages) {\n      // Show all pages if there are few enough\n      for (let i = 1; i <= pageCount; i++) {\n        pages.push(i)\n      }\n    } else {\n      // Always show first few pages, then ellipsis, then last page\n      for (let i = 1; i <= Math.min(maxVisiblePages - 1, pageCount - 1); i++) {\n        pages.push(i)\n      }\n      if (pageCount > maxVisiblePages) {\n        pages.push(\"ellipsis\")\n      }\n    }\n\n    return pages\n  }\n\n  const pageNumbers = getPageNumbers()\n\n  return (\n    <div className=\"w-full\">\n      <Separator className=\"mb-4\" />\n      <div className=\"flex items-center justify-between\">\n        {/* Previous button */}\n        <button\n          className={cn(\n            \"inline-flex items-center justify-center h-9 w-9 transition-colors\",\n            table.getCanPreviousPage()\n              ? \"text-treasury-base-dark hover:text-treasury-primary\"\n              : \"text-treasury-base-light cursor-not-allowed\"\n          )}\n          onClick={() => table.previousPage()}\n          disabled={!table.getCanPreviousPage()}\n          aria-label=\"Go to previous page\"\n        >\n          <ArrowLeftIcon className=\"h-5 w-5\" />\n        </button>\n\n        {/* Page numbers */}\n        <div className=\"flex items-center gap-2\">\n          {pageNumbers.map((page, index) =>\n            page === \"ellipsis\" ? (\n              <span\n                key={`ellipsis-${index}`}\n                className=\"h-9 min-w-9 px-2 inline-flex items-center justify-center text-sm text-treasury-base-dark\"\n              >\n                ...\n              </span>\n            ) : (\n              <button\n                key={page}\n                onClick={() => table.setPageIndex(page - 1)}\n                className={cn(\n                  \"inline-flex items-center justify-center h-9 min-w-9 px-2 text-sm font-medium transition-colors\",\n                  currentPage === page\n                    ? \"text-treasury-primary font-bold\"\n                    : \"text-treasury-base-dark hover:text-treasury-primary\"\n                )}\n                aria-label={`Go to page ${page}`}\n                aria-current={currentPage === page ? \"page\" : undefined}\n              >\n                {page}\n              </button>\n            )\n          )}\n        </div>\n\n        {/* Next button */}\n        <button\n          className={cn(\n            \"inline-flex items-center justify-center h-9 w-9 transition-colors\",\n            table.getCanNextPage()\n              ? \"text-treasury-base-dark hover:text-treasury-primary\"\n              : \"text-treasury-base-light cursor-not-allowed\"\n          )}\n          onClick={() => table.nextPage()}\n          disabled={!table.getCanNextPage()}\n          aria-label=\"Go to next page\"\n        >\n          <ArrowRightIcon className=\"h-5 w-5\" />\n        </button>\n      </div>\n\n      {/* Row info and page size selector */}\n      <div className=\"flex items-center justify-between mt-4 text-sm text-treasury-base-dark\">\n        <div>\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <span>Rows per page</span>\n          <Select\n            value={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value))\n            }}\n          >\n            <SelectTrigger className=\"h-8 w-[70px]\">\n              <SelectValue placeholder={table.getState().pagination.pageSize} />\n            </SelectTrigger>\n            <SelectContent side=\"top\">\n              {pageSizeOptions.map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/data-table-advanced/components/data-table-toolbar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Table } from \"@tanstack/react-table\"\nimport { XIcon, SearchIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/ui/button\"\nimport { Input } from \"@/registry/ui/input\"\nimport { DataTableViewOptions } from \"@/registry/blocks/data-table-advanced/components/data-table-view-options\"\nimport { DataTableFacetedFilter } from \"@/registry/blocks/data-table-advanced/components/data-table-faceted-filter\"\nimport { useDebounce } from \"@/registry/blocks/data-table-advanced/hooks/use-debounce\"\n\ninterface DataTableToolbarProps<TData> {\n  table: Table<TData>\n  searchColumn?: string\n  searchPlaceholder?: string\n  filters?: {\n    column: string\n    title: string\n    options: {\n      label: string\n      value: string\n    }[]\n  }[]\n  actions?: React.ReactNode\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  searchColumn,\n  searchPlaceholder = \"Search...\",\n  filters = [],\n  actions,\n}: DataTableToolbarProps<TData>) {\n  const isFiltered = table.getState().columnFilters.length > 0\n\n  // Local state for search input (for debouncing)\n  const currentValue = searchColumn\n    ? (table.getColumn(searchColumn)?.getFilterValue() as string) ?? \"\"\n    : \"\"\n  const [searchInput, setSearchInput] = React.useState(currentValue)\n  const debouncedSearch = useDebounce(searchInput, 300)\n\n  // Sync local state when external filter changes\n  React.useEffect(() => {\n    setSearchInput(currentValue)\n  }, [currentValue])\n\n  // Update table filter when debounced search changes\n  React.useEffect(() => {\n    if (searchColumn && debouncedSearch !== currentValue) {\n      table.getColumn(searchColumn)?.setFilterValue(debouncedSearch || undefined)\n    }\n  }, [debouncedSearch, searchColumn, table, currentValue])\n\n  const handleClearFilters = () => {\n    setSearchInput(\"\")\n    table.resetColumnFilters()\n  }\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <div className=\"flex flex-1 items-center gap-2\">\n        {searchColumn && (\n          <div className=\"relative\">\n            <SearchIcon className=\"absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n            <Input\n              placeholder={searchPlaceholder}\n              value={searchInput}\n              onChange={(e) => setSearchInput(e.target.value)}\n              className=\"h-10 w-[200px] pl-8 lg:w-[300px]\"\n            />\n          </div>\n        )}\n        {filters.map((filter) => {\n          const column = table.getColumn(filter.column)\n          if (!column) return null\n          return (\n            <DataTableFacetedFilter\n              key={filter.column}\n              column={column}\n              title={filter.title}\n              options={filter.options}\n            />\n          )\n        })}\n        {isFiltered && (\n          <Button\n            variant=\"ghost\"\n            size=\"default\"\n            onClick={handleClearFilters}\n            className=\"h-8 px-3\"\n          >\n            Clear filters\n            <XIcon className=\"ml-1 size-4\" />\n          </Button>\n        )}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        <DataTableViewOptions table={table} />\n        {actions}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/data-table-advanced/components/data-table-view-options.tsx",
      "content": "\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Settings2Icon, ChevronDownIcon, CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/lib/utils\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandList,\n} from \"@/registry/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/ui/popover\"\n\ninterface DataTableViewOptionsProps<TData> {\n  table: Table<TData>\n}\n\nexport function DataTableViewOptions<TData>({\n  table,\n}: DataTableViewOptionsProps<TData>) {\n  const columns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== \"undefined\" && column.getCanHide()\n    )\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button className=\"hidden lg:flex items-center justify-between gap-2 border border-treasury-base-darkest bg-white h-10 rounded-none px-3 py-2 text-base shadow-xs hover:bg-muted/50 transition-colors w-[150px]\">\n          <div className=\"flex items-center gap-2\">\n            <Settings2Icon className=\"size-4\" />\n            <span>View</span>\n          </div>\n          <ChevronDownIcon className=\"size-4 text-muted-foreground\" />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-[150px] p-0 rounded-none border border-treasury-base-darkest border-t-0 shadow-md ring-0 -mt-[1px]\"\n        align=\"end\"\n        sideOffset={0}\n      >\n        <Command className=\"rounded-none p-0 bg-white w-auto\">\n          <CommandList className=\"max-h-none\">\n            <CommandEmpty>No columns.</CommandEmpty>\n            <CommandGroup className=\"p-0\">\n              {columns.map((column, index) => {\n                const isVisible = column.getIsVisible()\n                return (\n                  <CommandItem\n                    key={column.id}\n                    onSelect={() => column.toggleVisibility(!isVisible)}\n                    className={cn(\n                      \"rounded-none data-[selected=true]:bg-transparent [&>svg:last-child]:hidden px-3 py-2.5 capitalize\",\n                      index > 0 && \"border-t border-treasury-base-darkest\"\n                    )}\n                  >\n                    <div\n                      className={cn(\n                        \"flex size-4 items-center justify-center rounded-[2px] border shrink-0\",\n                        isVisible\n                          ? \"bg-primary border-primary text-primary-foreground\"\n                          : \"border-treasury-base-darkest [&_svg]:invisible\"\n                      )}\n                    >\n                      <CheckIcon className=\"size-3.5 !text-white\" />\n                    </div>\n                    <span className=\"truncate\">{column.id}</span>\n                  </CommandItem>\n                )\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/data-table-advanced/components/data-table-selection-toolbar.tsx",
      "content": "\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/ui/button\"\n\ninterface DataTableSelectionToolbarProps<TData> {\n  table: Table<TData>\n  onProcessSelected?: (rows: TData[]) => void\n  processLabel?: string\n  processIcon?: React.ReactNode\n}\n\nexport function DataTableSelectionToolbar<TData>({\n  table,\n  onProcessSelected,\n  processLabel = \"Process Selected\",\n  processIcon,\n}: DataTableSelectionToolbarProps<TData>) {\n  const selectedRows = table.getFilteredSelectedRowModel().rows\n  const selectedCount = selectedRows.length\n\n  const handleProcessSelected = () => {\n    if (onProcessSelected) {\n      onProcessSelected(selectedRows.map((row) => row.original))\n    }\n    table.resetRowSelection()\n  }\n\n  const handleClearSelection = () => {\n    table.resetRowSelection()\n  }\n\n  if (selectedCount === 0) {\n    return null\n  }\n\n  return (\n    <div className=\"flex items-center justify-between rounded-md border border-treasury-primary-light bg-treasury-primary-lightest px-4 py-3\">\n      <span className=\"text-sm font-medium text-treasury-ink\">\n        {selectedCount} item{selectedCount !== 1 ? \"s\" : \"\"} selected\n      </span>\n      <div className=\"flex items-center gap-2\">\n        <Button variant=\"base\" onClick={handleClearSelection}>\n          <XIcon className=\"mr-1.5 size-4\" />\n          Clear Selection\n        </Button>\n        {onProcessSelected && (\n          <Button variant=\"primary\" onClick={handleProcessSelected}>\n            {processIcon}\n            {processLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/data-table-advanced/hooks/use-debounce.ts",
      "content": "\"use client\"\n\nimport { useState, useEffect } from \"react\"\n\nexport function useDebounce<T>(value: T, delay: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value)\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [value, delay])\n\n  return debouncedValue\n}\n",
      "type": "registry:hook"
    },
    {
      "path": "registry/blocks/data-table-advanced/lib/demo-data.ts",
      "content": "export interface Task {\n  id: string\n  title: string\n  status: \"todo\" | \"in-progress\" | \"done\" | \"cancelled\"\n  priority: \"low\" | \"medium\" | \"high\"\n  label: \"bug\" | \"feature\" | \"documentation\"\n  createdAt: string\n}\n\nexport const statuses = [\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in-progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"cancelled\",\n    label: \"Cancelled\",\n  },\n]\n\nexport const priorities = [\n  {\n    value: \"low\",\n    label: \"Low\",\n  },\n  {\n    value: \"medium\",\n    label: \"Medium\",\n  },\n  {\n    value: \"high\",\n    label: \"High\",\n  },\n]\n\nexport const labels = [\n  {\n    value: \"bug\",\n    label: \"Bug\",\n  },\n  {\n    value: \"feature\",\n    label: \"Feature\",\n  },\n  {\n    value: \"documentation\",\n    label: \"Documentation\",\n  },\n]\n\nexport const tasks: Task[] = [\n  {\n    id: \"TASK-8782\",\n    title: \"You can't compress the program without quantifying the open-source SSD pixel!\",\n    status: \"in-progress\",\n    priority: \"medium\",\n    label: \"documentation\",\n    createdAt: \"2024-01-15\",\n  },\n  {\n    id: \"TASK-7878\",\n    title: \"Try to calculate the EXE feed, maybe it will index the multi-byte pixel!\",\n    status: \"todo\",\n    priority: \"high\",\n    label: \"feature\",\n    createdAt: \"2024-01-14\",\n  },\n  {\n    id: \"TASK-7839\",\n    title: \"We need to bypass the neural TCP card!\",\n    status: \"done\",\n    priority: \"low\",\n    label: \"bug\",\n    createdAt: \"2024-01-13\",\n  },\n  {\n    id: \"TASK-5562\",\n    title: \"The SAS interface is down, bypass the open-source sensor so we can get the SAS bandwidth!\",\n    status: \"todo\",\n    priority: \"medium\",\n    label: \"feature\",\n    createdAt: \"2024-01-12\",\n  },\n  {\n    id: \"TASK-8686\",\n    title: \"I'll parse the wireless SSL protocol, that should driver the API panel!\",\n    status: \"cancelled\",\n    priority: \"medium\",\n    label: \"documentation\",\n    createdAt: \"2024-01-11\",\n  },\n  {\n    id: \"TASK-1280\",\n    title: \"Use the digital TLS panel, then you can transmit the haptic system!\",\n    status: \"done\",\n    priority: \"high\",\n    label: \"bug\",\n    createdAt: \"2024-01-10\",\n  },\n  {\n    id: \"TASK-7262\",\n    title: \"The UTF8 application is down, parse the neural bandwidth so we can get the UTF8 matrix!\",\n    status: \"in-progress\",\n    priority: \"low\",\n    label: \"feature\",\n    createdAt: \"2024-01-09\",\n  },\n  {\n    id: \"TASK-1138\",\n    title: \"Generating the driver won't do anything, we need to quantify the 1080p SMTP bandwidth!\",\n    status: \"todo\",\n    priority: \"high\",\n    label: \"bug\",\n    createdAt: \"2024-01-08\",\n  },\n  {\n    id: \"TASK-7184\",\n    title: \"We need to program the back-end THX pixel!\",\n    status: \"done\",\n    priority: \"medium\",\n    label: \"documentation\",\n    createdAt: \"2024-01-07\",\n  },\n  {\n    id: \"TASK-5160\",\n    title: \"Calculating the bus won't do anything, we need to navigate the back-end JSON protocol!\",\n    status: \"in-progress\",\n    priority: \"low\",\n    label: \"feature\",\n    createdAt: \"2024-01-06\",\n  },\n  {\n    id: \"TASK-5618\",\n    title: \"I'll compress the virtual JSON pixel, that should card the JBOD transmitter!\",\n    status: \"todo\",\n    priority: \"high\",\n    label: \"bug\",\n    createdAt: \"2024-01-05\",\n  },\n  {\n    id: \"TASK-6699\",\n    title: \"Parsing the firewall won't do anything, we need to program the primary RAM bus!\",\n    status: \"cancelled\",\n    priority: \"low\",\n    label: \"documentation\",\n    createdAt: \"2024-01-04\",\n  },\n  {\n    id: \"TASK-2858\",\n    title: \"We need to hack the multi-byte CSS interface!\",\n    status: \"done\",\n    priority: \"medium\",\n    label: \"feature\",\n    createdAt: \"2024-01-03\",\n  },\n  {\n    id: \"TASK-9864\",\n    title: \"Try to override the ASCII protocol, maybe it will parse the virtual matrix!\",\n    status: \"in-progress\",\n    priority: \"high\",\n    label: \"bug\",\n    createdAt: \"2024-01-02\",\n  },\n  {\n    id: \"TASK-8404\",\n    title: \"The IP bandwidth is down, synthesize the neural hard drive so we can get the IP capacitor!\",\n    status: \"todo\",\n    priority: \"low\",\n    label: \"documentation\",\n    createdAt: \"2024-01-01\",\n  },\n]\n",
      "type": "registry:lib"
    }
  ],
  "type": "registry:block"
}