{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-table", "title": "Data Table", "description": "A TanStack Table kit in the shadcn data-table idiom, styled to the Untitled UI look: sorting, faceted and multi-column filters, global search, row selection with a bulk-action bar, pagination, column visibility, pinning, expandable sub-rows, loading skeletons and an empty state.", "dependencies": [ "@tanstack/react-table@^8.21.3", "@untitledui/icons@^0.0.22" ], "registryDependencies": [ "@nx-ui/badge", "@nx-ui/button", "@nx-ui/checkbox", "@nx-ui/dropdown-menu", "@nx-ui/empty", "@nx-ui/input", "@nx-ui/popover", "@nx-ui/select", "@nx-ui/separator", "@nx-ui/skeleton", "@nx-ui/table", "@nx-ui/utils" ], "files": [ { "path": "components/blocks/data-table/bulk-actions.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Table } from \"@tanstack/react-table\"\nimport { XClose } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\n\n/**\n * DataTableBulkActions — the floating bar that appears when one or more rows are\n * selected. Shows the selection count, a clear-selection control, and a slot for\n * bulk-action buttons.\n *\n * Render it just above (or below) the table; it returns `null` when nothing is\n * selected, so it can be mounted unconditionally.\n */\nexport function DataTableBulkActions({\n table,\n children,\n className,\n}: {\n table: Table\n /** Bulk-action buttons; receive the selected rows via the table instance. */\n children?: React.ReactNode\n className?: string\n}) {\n const selectedCount = table.getFilteredSelectedRowModel().rows.length\n if (selectedCount === 0) return null\n\n return (\n \n
\n \n {selectedCount}\n \n \n selected\n \n table.resetRowSelection()}\n className=\"text-fg-quaternary\"\n >\n \n \n
\n\n {children ? (\n <>\n \n
{children}
\n \n ) : null}\n \n )\n}\n", "type": "registry:component", "target": "components/blocks/data-table/bulk-actions.tsx" }, { "path": "components/blocks/data-table/column-header.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Column } from \"@tanstack/react-table\"\nimport {\n ArrowDown,\n ArrowUp,\n ChevronSelectorVertical,\n EyeOff,\n Pin01,\n Pin02,\n} from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\n/**\n * DataTableColumnHeader — a sortable, pinnable column header cell.\n *\n * When the column is sortable it renders a button that opens a small menu\n * offering ascending/descending sort, hide, and (optionally) left/right pin.\n * When it is not sortable it renders plain header text with the UUI header\n * treatment (text-xs, medium, quaternary). Drop this into a column def's\n * `header` render.\n */\nexport function DataTableColumnHeader({\n column,\n title,\n className,\n /** Show the pin left/right actions in the menu. */\n enablePinning = false,\n align = \"start\",\n}: {\n column: Column\n title: string\n className?: string\n enablePinning?: boolean\n align?: \"start\" | \"end\"\n}) {\n const canSort = column.getCanSort()\n const canHide = column.getCanHide()\n const sorted = column.getIsSorted()\n const isPinned = column.getIsPinned()\n\n if (!canSort && !canHide && !enablePinning) {\n return (\n \n {title}\n \n )\n }\n\n return (\n \n \n \n {title}\n {sorted === \"desc\" ? (\n \n ) : sorted === \"asc\" ? (\n \n ) : (\n \n )}\n \n \n {canSort ? (\n <>\n column.toggleSorting(false)}>\n \n Ascending\n \n column.toggleSorting(true)}>\n \n Descending\n \n {sorted ? (\n column.clearSorting()}>\n \n Clear sort\n \n ) : null}\n \n ) : null}\n\n {enablePinning ? (\n <>\n {(canSort || canHide) && }\n {isPinned !== \"left\" ? (\n column.pin(\"left\")}>\n \n Pin to left\n \n ) : null}\n {isPinned !== \"right\" ? (\n column.pin(\"right\")}>\n \n Pin to right\n \n ) : null}\n {isPinned ? (\n column.pin(false)}>\n \n Unpin\n \n ) : null}\n \n ) : null}\n\n {canHide ? (\n <>\n \n column.toggleVisibility(false)}>\n \n Hide column\n \n \n ) : null}\n \n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/data-table/column-header.tsx" }, { "path": "components/blocks/data-table/columns.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n type ColumnDef,\n type FilterFn,\n type Row,\n} from \"@tanstack/react-table\"\nimport { ChevronDown, ChevronRight } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\n/**\n * Reusable column-definition factories and filter functions for the data-table\n * kit. These keep the per-table column files terse while guaranteeing the\n * selection / expand columns look and behave identically everywhere.\n */\n\n/** A leading checkbox column: header selects the page, cells select the row. */\nexport function selectionColumn(): ColumnDef {\n return {\n id: \"select\",\n size: 40,\n enableSorting: false,\n enableHiding: false,\n header: ({ table }) => (\n
\n \n table.toggleAllPageRowsSelected(!!value)\n }\n aria-label=\"Select all rows on this page\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n }\n}\n\n/** A leading chevron column that toggles an expandable sub-row. */\nexport function expandColumn(): ColumnDef {\n return {\n id: \"expand\",\n size: 36,\n enableSorting: false,\n enableHiding: false,\n header: () => null,\n cell: ({ row }) =>\n row.getCanExpand() ? (\n \n \n \n ) : null,\n }\n}\n\n/** A row-expand chevron rendered inline (for use inside a data cell). */\nexport function ExpandChevron({ row }: { row: Row }) {\n return (\n \n )\n}\n\n/**\n * `arrIncludesSome` — a faceted-filter function: keep the row when the cell\n * value is one of the selected values. Assign it to a column's `filterFn`.\n *\n * Generic so it slots into any `ColumnDef.filterFn` without a type\n * mismatch — TanStack keys filter functions to the row's data type.\n */\nexport const facetedFilterFn: FilterFn = (\n row,\n columnId,\n filterValue: string[]\n) => {\n if (!filterValue?.length) return true\n const value = row.getValue(columnId)\n return filterValue.includes(String(value))\n}\n\n/**\n * `globalContains` — a case-insensitive global filter that stringifies every\n * cell of the row and checks for a substring match. Pass it as the table's\n * `globalFilterFn`.\n */\nexport const globalFilterFn: FilterFn = (\n row,\n _columnId,\n filterValue: string\n) => {\n const search = String(filterValue ?? \"\").toLowerCase()\n if (!search) return true\n return row.getAllCells().some((cell) => {\n const value = cell.getValue()\n if (value == null) return false\n return String(value).toLowerCase().includes(search)\n })\n}\n", "type": "registry:component", "target": "components/blocks/data-table/columns.tsx" }, { "path": "components/blocks/data-table/data-table.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n type Cell,\n type ColumnDef,\n type Header,\n flexRender,\n type Row,\n type Table as TanstackTable,\n} from \"@tanstack/react-table\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableFooter,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\"\nimport {\n Empty,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/components/ui/empty\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\n/**\n * DataTable — the render surface for a TanStack `Table` instance, styled to the\n * Untitled UI look (rounded-xl card container, gray-50 header, row hover,\n * sticky-pinnable columns).\n *\n * This component is deliberately headless-agnostic: it takes a fully-configured\n * `table` instance (built by the consumer with `useReactTable`) and paints it.\n * The sibling pieces — {@link DataTableToolbar}, {@link DataTablePagination},\n * {@link DataTableViewOptions}, {@link DataTableColumnHeader},\n * {@link DataTableRowActions} and {@link DataTableBulkActions} — compose around\n * it to form the full kit. See the `tables/*` showcase pages for end-to-end use.\n */\n\n/** Resolve the sticky-pinning styles for a pinned column cell/header. */\nfunction getPinningStyles(\n column: Cell[\"column\"]\n): React.CSSProperties {\n const isPinned = column.getIsPinned()\n if (!isPinned) return {}\n const isLastLeft =\n isPinned === \"left\" && column.getIsLastColumn(\"left\")\n const isFirstRight =\n isPinned === \"right\" && column.getIsFirstColumn(\"right\")\n return {\n left: isPinned === \"left\" ? `${column.getStart(\"left\")}px` : undefined,\n right: isPinned === \"right\" ? `${column.getAfter(\"right\")}px` : undefined,\n position: \"sticky\",\n zIndex: 1,\n // A hairline shadow marks the pinned edge, matching the UUI \"frozen column\".\n boxShadow: isLastLeft\n ? \"inset -1px 0 0 0 var(--color-border)\"\n : isFirstRight\n ? \"inset 1px 0 0 0 var(--color-border)\"\n : undefined,\n }\n}\n\nexport interface DataTableProps {\n /** A configured TanStack table instance (from `useReactTable`). */\n table: TanstackTable\n /** The column definitions — used only to size the empty/loading colspan. */\n columns: ColumnDef[]\n /** Show a skeleton body instead of rows. */\n isLoading?: boolean\n /** Number of skeleton rows to render while loading. */\n loadingRowCount?: number\n /** Render an expanded sub-row panel beneath an expanded row. */\n renderSubComponent?: (props: { row: Row }) => React.ReactNode\n /** Callback when a body row is clicked (ignores clicks on interactive cells). */\n onRowClick?: (row: Row) => void\n /** Empty-state content shown when there are no rows and not loading. */\n emptyState?: React.ReactNode\n className?: string\n}\n\nexport function DataTable({\n table,\n columns,\n isLoading = false,\n loadingRowCount = 8,\n renderSubComponent,\n onRowClick,\n emptyState,\n className,\n}: DataTableProps) {\n const rows = table.getRowModel().rows\n const colCount = table.getVisibleFlatColumns().length\n\n return (\n \n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => (\n \n ))}\n \n ))}\n \n\n \n {isLoading ? (\n Array.from({ length: loadingRowCount }).map((_, rowIndex) => (\n \n {table.getVisibleFlatColumns().map((column) => (\n (\n column as unknown as Cell[\"column\"]\n )}\n >\n \n \n ))}\n \n ))\n ) : rows.length === 0 ? (\n \n \n {emptyState ?? }\n \n \n ) : (\n rows.map((row) => (\n \n {\n // Ignore clicks originating from interactive cells\n // (checkboxes, buttons, links, menus).\n const target = event.target as HTMLElement\n if (\n target.closest(\n \"button, a, input, [role=checkbox], [role=menuitem]\"\n )\n ) {\n return\n }\n onRowClick(row)\n }\n : undefined\n }\n >\n {row.getVisibleCells().map((cell) => (\n (cell.column)}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n\n {renderSubComponent && row.getIsExpanded() ? (\n \n \n {renderSubComponent({ row })}\n \n \n ) : null}\n \n ))\n )}\n \n\n {table.getFooterGroups().some((group) =>\n group.headers.some(\n (header) => header.column.columnDef.footer != null\n )\n ) ? (\n \n {table.getFooterGroups().map((footerGroup) => (\n \n {footerGroup.headers.map((header) => (\n (\n header.column as unknown as Cell<\n TData,\n unknown\n >[\"column\"]\n )}\n >\n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.footer,\n header.getContext()\n )}\n \n ))}\n \n ))}\n \n ) : null}\n
\n
\n \n )\n}\n\n/** A single header cell, wiring up pinning styles and the flex-rendered head. */\nfunction DataTableHeadCell({\n header,\n}: {\n header: Header\n}) {\n return (\n (\n header.column as unknown as Cell[\"column\"]\n )}\n >\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n \n )\n}\n\n/** The default empty state, composed from the `ui/empty` primitive. */\nfunction DataTableEmpty() {\n return (\n \n \n \n \n \n No results\n \n No records match your filters. Try adjusting or clearing them.\n \n \n \n )\n}\n\nfunction SearchOff() {\n // Local icon to avoid an extra import in the empty fallback.\n return (\n \n \n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/data-table/data-table.tsx" }, { "path": "components/blocks/data-table/index.ts", "content": "\"use client\"\n\n/**\n * data-table — a production-grade TanStack Table kit in the shadcn data-table\n * idiom, styled to the Untitled UI look.\n *\n * Covers: sorting, multi-column + faceted filters (with badge counts), global\n * search, row selection with a bulk-action bar, pagination, column visibility,\n * column pinning, expanding sub-rows, a loading skeleton state and an empty\n * state (composed from `ui/empty`).\n *\n * The pieces are decoupled: build a table instance with `useReactTable`, paint\n * it with {@link DataTable}, then compose {@link DataTableToolbar},\n * {@link DataTablePagination}, {@link DataTableViewOptions},\n * {@link DataTableBulkActions} and {@link DataTableRowActions} around it. Column\n * defs use {@link DataTableColumnHeader} for sortable/pinnable headers and the\n * {@link selectionColumn} / {@link expandColumn} factories.\n */\n\nexport { DataTable, type DataTableProps } from \"./data-table\"\nexport { DataTableColumnHeader } from \"./column-header\"\nexport {\n DataTableToolbar,\n DataTableFacetedFilter,\n type FacetedFilterConfig,\n type FacetedFilterOption,\n} from \"./toolbar\"\nexport { DataTableViewOptions } from \"./view-options\"\nexport { DataTablePagination } from \"./pagination\"\nexport { DataTableBulkActions } from \"./bulk-actions\"\nexport { DataTableRowActions, type RowAction } from \"./row-actions\"\nexport {\n selectionColumn,\n expandColumn,\n ExpandChevron,\n facetedFilterFn,\n globalFilterFn,\n} from \"./columns\"\n", "type": "registry:component", "target": "components/blocks/data-table/index.ts" }, { "path": "components/blocks/data-table/pagination.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Table } from \"@tanstack/react-table\"\nimport {\n ChevronLeft,\n ChevronLeftDouble,\n ChevronRight,\n ChevronRightDouble,\n} from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\n/**\n * DataTablePagination — the table footer with a page-size selector, a\n * human-readable row range (\"1–10 of 128\"), an optional selection count, and\n * first/prev/next/last controls.\n */\nexport function DataTablePagination({\n table,\n pageSizeOptions = [10, 20, 30, 50],\n /** Show \"N of M row(s) selected\" on the left. */\n showSelectionCount = true,\n className,\n}: {\n table: Table\n pageSizeOptions?: number[]\n showSelectionCount?: boolean\n className?: string\n}) {\n const { pageIndex, pageSize } = table.getState().pagination\n const totalRows = table.getFilteredRowModel().rows.length\n const selectedCount = table.getFilteredSelectedRowModel().rows.length\n const firstRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1\n const lastRow = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n return (\n \n
\n {showSelectionCount && selectedCount > 0 ? (\n \n {selectedCount} of {totalRows} row{totalRows === 1 ? \"\" : \"s\"}{\" \"}\n selected\n \n ) : (\n \n {firstRow}\n {\"–\"}\n {lastRow} of {totalRows}\n \n )}\n
\n\n
\n
\n

\n Rows per page\n

\n table.setPageSize(Number(value))}\n >\n \n \n \n \n {pageSizeOptions.map((option) => (\n \n {option}\n \n ))}\n \n \n
\n\n
\n \n Page {pageIndex + 1} of {Math.max(1, table.getPageCount())}\n \n table.firstPage()}\n disabled={!table.getCanPreviousPage()}\n >\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n \n \n table.lastPage()}\n disabled={!table.getCanNextPage()}\n >\n \n \n
\n
\n \n )\n}\n", "type": "registry:component", "target": "components/blocks/data-table/pagination.tsx" }, { "path": "components/blocks/data-table/row-actions.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DotsHorizontal } from \"@untitledui/icons\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\n/** A single row action; a `separator` entry renders a divider instead. */\nexport type RowAction =\n | {\n type?: \"item\"\n label: string\n icon?: React.ComponentType<{ className?: string }>\n shortcut?: string\n destructive?: boolean\n onSelect?: () => void\n disabled?: boolean\n }\n | { type: \"separator\" }\n | { type: \"label\"; label: string }\n\n/**\n * DataTableRowActions — the trailing \"⋯\" menu on each table row.\n *\n * Renders a compact icon-button trigger and a dropdown built from a declarative\n * `actions` array (items, separators and section labels). Destructive items get\n * the destructive treatment.\n */\nexport function DataTableRowActions({\n actions,\n label = \"Open row actions\",\n}: {\n actions: RowAction[]\n label?: string\n}) {\n return (\n \n \n \n \n }\n />\n \n {renderActions(actions)}\n \n \n )\n}\n\n/** A single item entry — one interactive row in the menu. */\nfunction ActionItem({\n action,\n}: {\n action: Extract\n}) {\n const Icon = action.icon\n return (\n action.onSelect?.()}\n >\n {Icon ? : null}\n {action.label}\n {action.shortcut ? (\n {action.shortcut}\n ) : null}\n \n )\n}\n\n/**\n * Render the declarative actions array into menu parts. A `label` entry opens a\n * DropdownMenuGroup that captures the label and every following item up to the\n * next label or separator — Base UI requires a GroupLabel to live inside a\n * Group, so a bare label would otherwise throw when the menu mounts. Items with\n * no preceding label render directly (items need no group).\n */\nfunction renderActions(actions: RowAction[]): React.ReactNode {\n const nodes: React.ReactNode[] = []\n let index = 0\n\n while (index < actions.length) {\n const action = actions[index]\n\n if (action.type === \"separator\") {\n nodes.push()\n index += 1\n continue\n }\n\n if (action.type === \"label\") {\n const groupChildren: React.ReactNode[] = [\n \n {action.label}\n ,\n ]\n let cursor = index + 1\n while (cursor < actions.length) {\n const next = actions[cursor]\n if (next.type === \"label\" || next.type === \"separator\") break\n groupChildren.push()\n cursor += 1\n }\n nodes.push(\n \n {groupChildren}\n \n )\n index = cursor\n continue\n }\n\n nodes.push()\n index += 1\n }\n\n return nodes\n}\n", "type": "registry:component", "target": "components/blocks/data-table/row-actions.tsx" }, { "path": "components/blocks/data-table/toolbar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Column, type Table } from \"@tanstack/react-table\"\nimport { CheckSquare, PlusCircle, SearchLg, XClose } from \"@untitledui/icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\n\n/** A selectable option for a faceted filter. */\nexport interface FacetedFilterOption {\n label: string\n value: string\n icon?: React.ComponentType<{ className?: string }>\n}\n\nexport interface FacetedFilterConfig {\n /** The column id to filter on. */\n columnId: string\n /** The trigger label, e.g. \"Status\". */\n title: string\n options: FacetedFilterOption[]\n}\n\n/**\n * DataTableToolbar — the row above the table: a global search input, one or\n * more faceted (multi-select) filters showing badge counts of the active\n * selection, and a \"Clear\" button that appears when any filter is active.\n */\nexport function DataTableToolbar({\n table,\n /** Placeholder for the global search input. */\n searchPlaceholder = \"Search…\",\n /** Bind the search box to the table's global filter (default) or a column. */\n searchColumnId,\n facetedFilters = [],\n children,\n className,\n}: {\n table: Table\n searchPlaceholder?: string\n searchColumnId?: string\n facetedFilters?: FacetedFilterConfig[]\n /** Trailing content, e.g. the view-options / export buttons. */\n children?: React.ReactNode\n className?: string\n}) {\n const isFiltered =\n table.getState().columnFilters.length > 0 ||\n (table.getState().globalFilter?.length ?? 0) > 0\n\n const searchValue = searchColumnId\n ? ((table.getColumn(searchColumnId)?.getFilterValue() as string) ?? \"\")\n : ((table.getState().globalFilter as string) ?? \"\")\n\n const setSearch = (value: string) => {\n if (searchColumnId) {\n table.getColumn(searchColumnId)?.setFilterValue(value)\n } else {\n table.setGlobalFilter(value)\n }\n }\n\n return (\n \n
\n
\n \n setSearch(event.target.value)}\n placeholder={searchPlaceholder}\n className=\"h-9 pl-9 text-sm\"\n aria-label=\"Search\"\n />\n
\n\n {facetedFilters.map((filter) => {\n const column = table.getColumn(filter.columnId)\n if (!column) return null\n return (\n \n )\n })}\n\n {isFiltered ? (\n {\n table.resetColumnFilters()\n table.setGlobalFilter(\"\")\n }}\n className=\"text-secondary-foreground\"\n >\n Clear\n \n \n ) : null}\n
\n\n {children ? (\n
{children}
\n ) : null}\n \n )\n}\n\n/**\n * DataTableFacetedFilter — a popover multi-select for a single column, with a\n * badge showing the count / labels of the active selection. Uses the column's\n * faceted unique-value counts to show a per-option tally.\n */\nexport function DataTableFacetedFilter({\n column,\n title,\n options,\n}: {\n column: Column\n title: string\n options: FacetedFilterOption[]\n}) {\n const facets = column.getFacetedUniqueValues()\n const selectedValues = new Set(\n (column.getFilterValue() as string[]) ?? []\n )\n\n const toggle = (value: string) => {\n const next = new Set(selectedValues)\n if (next.has(value)) {\n next.delete(value)\n } else {\n next.add(value)\n }\n const filterValues = Array.from(next)\n column.setFilterValue(filterValues.length ? filterValues : undefined)\n }\n\n return (\n \n \n \n {title}\n {selectedValues.size > 0 ? (\n <>\n \n \n {selectedValues.size}\n \n
\n {selectedValues.size > 2 ? (\n \n {selectedValues.size} selected\n \n ) : (\n options\n .filter((option) => selectedValues.has(option.value))\n .map((option) => (\n \n {option.label}\n \n ))\n )}\n
\n \n ) : null}\n \n }\n />\n \n
\n \n \n {title}\n \n
\n
\n {options.map((option) => {\n const isSelected = selectedValues.has(option.value)\n const Icon = option.icon\n const count = facets.get(option.value)\n return (\n toggle(option.value)}\n className=\"flex w-full cursor-default items-center gap-2 rounded-md px-2.5 py-2 text-sm font-medium text-secondary-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent\"\n aria-pressed={isSelected}\n >\n \n {Icon ? (\n \n ) : null}\n {option.label}\n {count ? (\n \n {count}\n \n ) : null}\n \n )\n })}\n
\n {selectedValues.size > 0 ? (\n
\n column.setFilterValue(undefined)}\n className=\"w-full rounded-md px-2.5 py-2 text-center text-sm font-medium text-secondary-foreground outline-none hover:bg-accent focus-visible:bg-accent\"\n >\n Clear filters\n \n
\n ) : null}\n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/data-table/toolbar.tsx" }, { "path": "components/blocks/data-table/view-options.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Table } from \"@tanstack/react-table\"\nimport { Columns03 } from \"@untitledui/icons\"\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\"\n\n/** Title-case a camelCase / snake column id for the visibility menu label. */\nfunction humaniseColumnId(id: string): string {\n return id\n .replace(/([a-z])([A-Z])/g, \"$1 $2\")\n .replace(/[_-]+/g, \" \")\n .replace(/^\\w/, (character) => character.toUpperCase())\n}\n\n/**\n * DataTableViewOptions — the \"Columns\" dropdown that toggles column visibility.\n *\n * Lists every hideable column as a checkbox item. Column display names come\n * from an optional `columnLabels` map, falling back to a humanised column id.\n */\nexport function DataTableViewOptions({\n table,\n columnLabels,\n}: {\n table: Table\n columnLabels?: Record\n}) {\n const columns = table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" && column.getCanHide()\n )\n\n return (\n \n \n \n Columns\n \n }\n />\n \n \n Toggle columns\n \n {columns.map((column) => (\n column.toggleVisibility(!!value)}\n // Keep the menu open across multiple toggles.\n closeOnClick={false}\n >\n {columnLabels?.[column.id] ?? humaniseColumnId(column.id)}\n \n ))}\n \n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/data-table/view-options.tsx" } ], "type": "registry:block" }