{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-table", "title": "Data Table", "type": "registry:ui", "files": [ { "path": "packages/registry-react/components/data-table/DataTable.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport type {\n ColumnDef,\n ColumnFiltersState,\n ColumnPinningState,\n FilterFn,\n SortingState,\n VisibilityState,\n ExpandedState,\n GroupingState,\n Table as TanstackTable,\n Row,\n} from '@tanstack/react-table'\nimport {\n flexRender,\n getCoreRowModel,\n getExpandedRowModel,\n getFilteredRowModel,\n getGroupedRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table'\nimport type { DateRange } from 'react-day-picker'\n// `valueUpdater` lives next to the low-level table primitive (which\n// data-table depends on transitively via registryDependencies). Keep\n// `@/lib/utils` reserved for the cn() helper shipped by the init\n// bootstrap -- importing valueUpdater from there would force every\n// consumer to hand-edit lib/utils.ts on install.\nimport { valueUpdater } from '@/components/ui/table/utils'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nimport { DataTableToolbar } from './DataTableToolbar'\nimport { DataTableFilterSheet } from './DataTableFilterSheet'\nimport { DataTablePagination } from './DataTablePagination'\nimport { type FilterDefinition, type FilterOption, resolveOption } from './types'\nimport { isoToDate, dateToIso } from './date-utils'\n\nexport type { FilterDefinition, FilterOption }\n\ninterface DateRangeValue {\n from?: string\n to?: string\n}\n\nexport interface DataTableState {\n page: number\n pageSize: number\n sortBy: string\n sortOrder: 'asc' | 'desc'\n filters: Record\n search: string\n}\n\nexport interface DataTableProps {\n columns: ColumnDef[]\n data: TData[]\n filterColumn?: string\n filterPlaceholder?: string\n filters?: FilterDefinition[]\n filterMode?: 'inline' | 'modal' | 'popover'\n /** Show the global search input. Default true. */\n enableSearch?: boolean\n /** Show the View column-visibility dropdown. Default false. */\n enableColumnVisibility?: boolean\n /** Show the pagination footer. Default true. */\n enablePagination?: boolean\n /** Hide the entire toolbar (search + filters + view). Default false. */\n hideToolbar?: boolean\n /** Show Export-CSV button in toolbar. Default false. */\n enableExport?: boolean\n /** Infinite-scroll mode: calls `onFetchMore` when last row enters viewport,\n * hides the pagination footer. Combine with append-on-success on the\n * consumer side. */\n infinite?: boolean\n /** Allow drag-to-resize on column borders. */\n enableResize?: boolean\n /** Initial column pinning. Each column id is pinned to the given side. */\n defaultColumnPinning?: { left?: string[]; right?: string[] }\n /** Allow drag-to-reorder on column headers. */\n enableReorder?: boolean\n /** Initial column ids to group by. Pass an empty array to disable grouping. */\n defaultGrouping?: string[]\n /** Virtual-scrolling mode (CSS content-visibility based). Best with large\n * datasets and `maxHeight` for a scroll container. */\n virtual?: boolean\n /** Sticky header — keeps `` visible when scrolling. Pair with `maxHeight`. */\n stickyHeader?: boolean\n /** Density of cell padding: 'compact' | 'cozy' | 'comfortable'. Default cozy.\n * Treated as the INITIAL density when `enableDensityToggle` is on; the user\n * can override it at runtime from the toolbar. */\n density?: 'compact' | 'cozy' | 'comfortable'\n /** Show the density toggle in the toolbar. Default false. */\n enableDensityToggle?: boolean\n /** Strip the DataTable's borders.\n * - `'inner'` removes toolbar bottom-divider, pagination top-divider,\n * and filter-sheet section bgs/borders. The outer container border\n * is kept.\n * - `'full'` additionally removes the outer container border + rounded\n * corners so the table renders completely flat on the canvas. */\n borderless?: 'inner' | 'full'\n /** Where the toolbar renders. `'inside'` (default) lives inside the\n * bordered container; `'above'` floats outside it. */\n toolbarPosition?: 'inside' | 'above'\n /** Where the pagination footer renders. `'inside'` (default) or `'below'`. */\n paginationPosition?: 'inside' | 'below'\n /** Max height; enables vertical scroll inside the card. */\n maxHeight?: string\n /** Row click — when set, rows become clickable + cursor-pointer. */\n onRowClick?: (row: TData) => void\n /** Server-side mode: total row count from API (enables manual pagination) */\n totalRows?: number\n /** Server-side mode: loading state indicator */\n loading?: boolean\n /** Emitted when server-side state changes (pagination, sorting, filters) */\n onStateChange?: (state: DataTableState) => void\n /** Infinite-scroll: last row entered viewport, time to load more */\n onFetchMore?: () => void\n /** Custom empty-state content (replaces \"No results.\"). */\n emptyState?: React.ReactNode\n /** Expanded-row content. Receives the original row + the TanStack row. */\n renderExpanded?: (row: TData, tanstackRow: Row) => React.ReactNode\n /** Bulk action bar content (shown above the table when rows are selected). */\n renderBulkActions?: (rows: Row[], clear: () => void) => React.ReactNode\n /** Footer () content. */\n renderFooter?: (rows: Row[]) => React.ReactNode\n /** Extra toolbar controls (e.g. group-by selector). */\n toolbarExtra?: React.ReactNode\n /** Consumer-supplied custom filter UI inside the filter surface. */\n customFilters?: React.ReactNode\n}\n\nexport interface DataTableHandle {\n table: TanstackTable\n exportCsv: () => void\n exportJson: () => void\n}\n\nfunction DataTableInner(\n props: DataTableProps,\n forwardedRef: React.Ref>,\n) {\n const {\n columns,\n data,\n filterColumn = '',\n filterPlaceholder = 'Filter...',\n filters = [],\n filterMode = 'modal',\n enableSearch = true,\n enableColumnVisibility = false,\n enablePagination = true,\n hideToolbar = false,\n enableExport = false,\n infinite = false,\n enableResize = false,\n defaultColumnPinning = { left: [], right: [] },\n enableReorder = false,\n defaultGrouping = [],\n virtual = false,\n stickyHeader = false,\n density = 'cozy',\n enableDensityToggle = false,\n borderless,\n toolbarPosition = 'inside',\n paginationPosition = 'inside',\n maxHeight = '',\n onRowClick,\n totalRows = -1,\n loading = false,\n onStateChange,\n onFetchMore,\n emptyState,\n renderExpanded,\n renderBulkActions,\n renderFooter,\n toolbarExtra,\n customFilters,\n } = props\n\n // User-mutable density -- initial value from prop, toggleable via toolbar\n // when `enableDensityToggle` is on. Sync the prop so parents can still\n // drive it externally.\n const [currentDensity, setCurrentDensity] = React.useState<'compact' | 'cozy' | 'comfortable'>(density)\n React.useEffect(() => {\n setCurrentDensity(density)\n }, [density])\n\n // `borderless` is an enum (`'inner'` vs `'full'`); children only need a\n // boolean \"should I drop my borders?\".\n const dropInnerBorders = !!borderless\n\n const densityClass =\n currentDensity === 'compact'\n ? '[&_td]:py-1.5 [&_td]:px-3 [&_td]:text-xs [&_th]:h-8 [&_th]:px-3 [&_th]:text-xs'\n : currentDensity === 'comfortable'\n ? '[&_td]:py-3 [&_th]:h-12'\n : // cozy -- tightens TableCell/TableHead defaults (py-3 / h-12)\n '[&_td]:py-2 [&_th]:h-10'\n\n const isServerSide = totalRows >= 0\n const [isFilterSheetOpen, setIsFilterSheetOpen] = React.useState(false)\n\n // ── Filter snapshot (restore on close without apply) ───────────────────\n const filterSnapshot = React.useRef(null)\n const dateRangeSnapshot = React.useRef | null>(null)\n const filterApplied = React.useRef(false)\n\n // ── Timers ──────────────────────────────────────────────────────────────\n const searchDebounceTimer = React.useRef | null>(null)\n const paginationEmitTimer = React.useRef | null>(null)\n\n // Custom filter functions for multiselect and date range\n const multiSelectFilterFn: FilterFn = (row, columnId, filterValue: string[]) => {\n if (!filterValue || filterValue.length === 0) return true\n const cellValue = String(row.getValue(columnId)).toLowerCase()\n return filterValue.some((v: string) => v.toLowerCase() === cellValue)\n }\n\n const dateRangeFilterFn: FilterFn = (row, columnId, filterValue: DateRangeValue) => {\n if (!filterValue) return true\n const { from, to } = filterValue\n if (!from && !to) return true\n const cellValue = String(row.getValue(columnId))\n if (from && cellValue < from) return false\n if (to && cellValue > to) return false\n return true\n }\n\n // Augment columns with custom filter functions based on filter definitions\n const processedColumns = React.useMemo(() => {\n return columns.map((col) => {\n const colId = (col as any).accessorKey || (col as any).id\n const filter = filters.find((f) => f.column === colId)\n if (!filter) return col\n if (filter.type === 'multiselect') return { ...col, filterFn: multiSelectFilterFn }\n if (filter.type === 'date') return { ...col, filterFn: dateRangeFilterFn }\n return col\n })\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [columns, filters])\n\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState([])\n const [columnVisibility, setColumnVisibility] = React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n const [expanded, setExpanded] = React.useState({})\n const [columnPinning, setColumnPinning] = React.useState({\n left: defaultColumnPinning.left ?? [],\n right: defaultColumnPinning.right ?? [],\n })\n const [columnOrder, setColumnOrder] = React.useState([])\n const [grouping, setGrouping] = React.useState(defaultGrouping)\n const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 })\n\n // Per-filter reactive range calendar model (ISO strings), keyed by column.\n const [dateRangeModels, setDateRangeModels] = React.useState>({})\n\n const table = useReactTable({\n data,\n columns: processedColumns,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: isServerSide ? undefined : getPaginationRowModel(),\n getSortedRowModel: isServerSide ? undefined : getSortedRowModel(),\n getFilteredRowModel: isServerSide ? undefined : getFilteredRowModel(),\n getExpandedRowModel: getExpandedRowModel(),\n getGroupedRowModel: getGroupedRowModel(),\n enableColumnResizing: enableResize,\n columnResizeMode: 'onChange',\n manualPagination: isServerSide,\n manualSorting: isServerSide,\n manualFiltering: isServerSide,\n rowCount: isServerSide ? totalRows : undefined,\n onSortingChange: (updaterOrValue) => {\n valueUpdater(updaterOrValue, setSorting)\n if (isServerSide) queueMicrotask(emitStateUpdate)\n },\n onColumnFiltersChange: (updaterOrValue) => {\n // Server-side: never auto-emit on filter change — handled by Apply / search debounce\n // Client-side inline: filters apply locally via TanStack, no emit needed\n valueUpdater(updaterOrValue, setColumnFilters)\n },\n onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, setColumnVisibility),\n onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, setRowSelection),\n onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, setExpanded),\n onPaginationChange: (updaterOrValue) => {\n valueUpdater(updaterOrValue, setPagination)\n if (isServerSide) {\n if (paginationEmitTimer.current) clearTimeout(paginationEmitTimer.current)\n paginationEmitTimer.current = setTimeout(() => emitStateUpdate(), 0)\n }\n },\n onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, setColumnPinning),\n onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, setColumnOrder),\n onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, setGrouping),\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n pagination,\n rowSelection,\n expanded,\n columnPinning,\n columnOrder,\n grouping,\n },\n })\n\n /** Build and emit current server-side state */\n function emitStateUpdate() {\n const s = sorting[0]\n const filterMap: Record = {}\n for (const cf of columnFilters) {\n filterMap[cf.id] = cf.value\n }\n onStateChange?.({\n page: table.getState().pagination.pageIndex + 1,\n pageSize: table.getState().pagination.pageSize,\n sortBy: s?.id || '',\n sortOrder: s?.desc ? 'desc' : 'asc',\n filters: filterMap,\n search: (filterColumn && (table.getColumn(filterColumn)?.getFilterValue() as string)) || '',\n })\n }\n\n function onSearchInput(val: string) {\n if (!filterColumn || !table.getColumn(filterColumn)) return\n table.getColumn(filterColumn)?.setFilterValue(val || undefined)\n if (isServerSide) {\n if (searchDebounceTimer.current) clearTimeout(searchDebounceTimer.current)\n searchDebounceTimer.current = setTimeout(() => {\n table.setPageIndex(0)\n emitStateUpdate()\n }, 500)\n }\n }\n\n // ── Filter snapshot helpers ──────────────────────────────────────────────\n function snapshotFilters() {\n filterApplied.current = false\n filterSnapshot.current = JSON.parse(JSON.stringify(columnFilters))\n dateRangeSnapshot.current = JSON.parse(JSON.stringify(dateRangeModels))\n }\n\n function maybeRestoreFilters() {\n if (!filterApplied.current && filterSnapshot.current) {\n setColumnFilters(filterSnapshot.current)\n setDateRangeModels(dateRangeSnapshot.current ?? {})\n }\n filterSnapshot.current = null\n dateRangeSnapshot.current = null\n }\n\n function onFilterSheetOpen() {\n snapshotFilters()\n setIsFilterSheetOpen(true)\n }\n\n function onFilterSheetClose(open: boolean) {\n if (!open) maybeRestoreFilters()\n setIsFilterSheetOpen(open)\n }\n\n // ── Filter helpers ─────────────────────────────────────────────────────\n function getMultiSelectValue(column: string): string[] {\n return (table.getColumn(column)?.getFilterValue() as string[]) ?? []\n }\n\n function getDateRangeValue(column: string): DateRangeValue {\n return (table.getColumn(column)?.getFilterValue() as DateRangeValue) ?? {}\n }\n\n function getCalendarModel(column: string): DateRange | undefined {\n const dr = getDateRangeValue(column)\n if (!dr.from && !dr.to) return undefined\n return { from: isoToDate(dr.from), to: isoToDate(dr.to) }\n }\n\n function onCalendarUpdate(column: string, val: DateRange | undefined) {\n const from = val?.from ? dateToIso(val.from) : undefined\n const to = val?.to ? dateToIso(val.to) : undefined\n setDateRangeModels((m) => ({ ...m, [column]: { from, to } }))\n const hasValue = from || to\n table.getColumn(column)?.setFilterValue(hasValue ? { from, to } : undefined)\n }\n\n function formatDateRange(column: string): string {\n const dr = getDateRangeValue(column)\n if (dr.from && dr.to) return `${dr.from} - ${dr.to}`\n if (dr.from) return `From ${dr.from}`\n if (dr.to) return `Until ${dr.to}`\n return ''\n }\n\n function toggleMultiSelectValue(column: string, option: string) {\n const current = getMultiSelectValue(column)\n const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option]\n table.getColumn(column)?.setFilterValue(next.length > 0 ? next : undefined)\n }\n\n function clearAllFilters() {\n filterApplied.current = true\n if (searchDebounceTimer.current) clearTimeout(searchDebounceTimer.current)\n filters.forEach((f) => {\n table.getColumn(f.column)?.setFilterValue(undefined)\n if (f.type === 'date') {\n setDateRangeModels((m) => ({ ...m, [f.column]: {} }))\n }\n })\n if (filterColumn && table.getColumn(filterColumn)) {\n table.getColumn(filterColumn)?.setFilterValue(undefined)\n }\n if (isServerSide) {\n table.setPageIndex(0)\n queueMicrotask(() => emitStateUpdate())\n }\n }\n\n function isFilterActive(filter: FilterDefinition): boolean {\n const value = table.getColumn(filter.column)?.getFilterValue()\n if (value === undefined || value === '') return false\n if (filter.type === 'multiselect') return Array.isArray(value) && value.length > 0\n if (filter.type === 'date') {\n const d = value as DateRangeValue\n return !!(d.from || d.to)\n }\n return true\n }\n\n const hasSearchValue = !!(filterColumn && (table.getColumn(filterColumn)?.getFilterValue() as string))\n const isAnyFilterActive = hasSearchValue || filters.some(isFilterActive)\n\n function getFilterSelectedLabels(filter: FilterDefinition): string[] {\n const vals = getMultiSelectValue(filter.column)\n return vals.map((v) => {\n const opt = filter.options?.find((o) => resolveOption(o).value === v)\n return opt ? resolveOption(opt).label : v\n })\n }\n\n function clearFilter(filter: FilterDefinition) {\n table.getColumn(filter.column)?.setFilterValue(undefined)\n }\n\n const activeFilterCount = filters.filter(isFilterActive).length\n\n function clearDateFilter(filter: FilterDefinition) {\n clearFilter(filter)\n setDateRangeModels((m) => ({ ...m, [filter.column]: {} }))\n }\n\n function onApplyFilters() {\n filterApplied.current = true\n if (isServerSide) {\n if (table.getState().pagination.pageIndex === 0) {\n emitStateUpdate()\n } else {\n table.setPageIndex(0)\n }\n }\n setIsFilterSheetOpen(false)\n }\n\n /**\n * Popover filter mode: handle the staged-edit commit. Walk the draft,\n * write each column's value via `setFilterValue`, and sync the calendar\n * model for date filters so a subsequent reopen reflects the just-applied\n * range.\n */\n function onCommitDraft(draft: Record) {\n for (const f of filters) {\n if (!(f.column in draft)) continue\n const val = draft[f.column]\n if (f.type === 'date') {\n const dr = (val ?? {}) as DateRangeValue\n setDateRangeModels((m) => ({ ...m, [f.column]: { from: dr.from, to: dr.to } }))\n table.getColumn(f.column)?.setFilterValue(val)\n } else {\n table.getColumn(f.column)?.setFilterValue(val)\n }\n }\n onApplyFilters()\n }\n\n // ── Column reorder (HTML5 drag/drop swaps dragged column with drop target) ──\n const [dragColId, setDragColId] = React.useState(null)\n const [dragOverColId, setDragOverColId] = React.useState(null)\n\n function onColDragStart(id: string, e: React.DragEvent) {\n setDragColId(id)\n document.body.style.cursor = 'grabbing'\n if (e.dataTransfer) {\n e.dataTransfer.effectAllowed = 'move'\n e.dataTransfer.setData('text/plain', id)\n }\n }\n\n function onColDragOver(targetId: string, e: React.DragEvent) {\n if (!enableReorder || !dragColId) return\n e.preventDefault()\n setDragOverColId(targetId)\n if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'\n }\n\n function onColDragEnd() {\n document.body.style.cursor = ''\n setDragColId(null)\n setDragOverColId(null)\n }\n\n function onColDrop(targetId: string) {\n const src = dragColId\n onColDragEnd()\n if (!src || src === targetId) return\n const order = (columnOrder.length ? columnOrder : table.getAllLeafColumns().map((c) => c.id)).slice()\n const from = order.indexOf(src)\n const to = order.indexOf(targetId)\n if (from === -1 || to === -1) return\n order.splice(to, 0, ...order.splice(from, 1))\n setColumnOrder(order)\n }\n\n // ── Pinning — return style for sticky pinned cells (header or body) ──\n function pinStyle(col: any): React.CSSProperties | undefined {\n const side = col.getIsPinned()\n if (!side) return undefined\n if (side === 'left') return { position: 'sticky', left: `${col.getStart('left')}px`, zIndex: 2 }\n return { position: 'sticky', right: `${col.getAfter('right')}px`, zIndex: 2 }\n }\n\n // ── Infinite scroll — sentinel row triggers fetch-more when visible ──\n const sentinelEl = React.useRef(null)\n React.useEffect(() => {\n if (!infinite || !sentinelEl.current) return\n const io = new IntersectionObserver(\n (entries) => {\n if (entries[0]?.isIntersecting) onFetchMore?.()\n },\n { rootMargin: '100px' },\n )\n io.observe(sentinelEl.current)\n return () => io.disconnect()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [infinite])\n\n // ── CSV export — currently filtered + visible data, skips select/actions/expander cols. ──\n function exportCsv() {\n const visibleCols = table\n .getVisibleLeafColumns()\n .filter((c) => c.id !== 'select' && c.id !== 'actions' && c.id !== 'expander')\n const headers = visibleCols.map((c) =>\n String(c.columnDef.header && typeof c.columnDef.header === 'string' ? c.columnDef.header : c.id),\n )\n const rows = table.getFilteredRowModel().rows.map((row) =>\n visibleCols.map((c) => {\n const v = row.getValue(c.id)\n const s = v == null ? '' : String(v)\n return /[\",\\n]/.test(s) ? `\"${s.replace(/\"/g, '\"\"')}\"` : s\n }),\n )\n const csv = [headers.join(','), ...rows.map((r) => r.join(','))].join('\\n')\n downloadBlob(csv, 'text/csv;charset=utf-8;', `export-${Date.now()}.csv`)\n }\n\n // ── JSON export — same scope as CSV, but emits underlying row.original objects ──\n function exportJson() {\n const visibleColIds = table\n .getVisibleLeafColumns()\n .filter((c) => c.id !== 'select' && c.id !== 'actions' && c.id !== 'expander')\n .map((c) => c.id)\n const rows = table.getFilteredRowModel().rows.map((row) => {\n const original = row.original as Record\n const out: Record = {}\n for (const id of visibleColIds) {\n out[id] = id in original ? original[id] : row.getValue(id)\n }\n return out\n })\n const json = JSON.stringify(rows, null, 2)\n downloadBlob(json, 'application/json;charset=utf-8;', `export-${Date.now()}.json`)\n }\n\n function downloadBlob(content: string, type: string, filename: string) {\n const blob = new Blob([content], { type })\n const url = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = url\n a.download = filename\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n URL.revokeObjectURL(url)\n }\n\n React.useImperativeHandle(forwardedRef, () => ({ table, exportCsv, exportJson }))\n\n const selectedRows = table.getSelectedRowModel().rows\n\n const toolbarProps = {\n table: table as TanstackTable,\n filterColumn,\n filterPlaceholder,\n filters,\n filterMode,\n enableSearch,\n enableColumnVisibility,\n enableExport,\n enableDensityToggle,\n density: currentDensity,\n activeFilterCount,\n isAnyFilterActive,\n isServerSide,\n getMultiSelectValue,\n getDateRangeValue,\n getFilterSelectedLabels,\n formatDateRange,\n getCalendarModel,\n onSearch: onSearchInput,\n onOpenFilterSheet: onFilterSheetOpen,\n onApplyFilters,\n onClearAllFilters: clearAllFilters,\n onToggleMultiselect: toggleMultiSelectValue,\n onClearFilter: clearFilter,\n onClearDateFilter: clearDateFilter,\n onCalendarUpdate,\n onTextFilterUpdate: (col: string, val: string | undefined) => table.getColumn(col)?.setFilterValue(val),\n onCommitFilters: onCommitDraft,\n onExportCsv: exportCsv,\n onExportJson: exportJson,\n onDensityChange: setCurrentDensity,\n toolbarExtra,\n customFilters,\n }\n\n return (\n
\n {/* Toolbar (above-mode: floats outside the bordered card). */}\n {!hideToolbar && toolbarPosition === 'above' && }\n\n \n {/* Toolbar (inside-mode, default). */}\n {!hideToolbar && toolbarPosition === 'inside' && (\n \n )}\n\n {/* Filter Sheet (modal mode) */}\n }\n filters={filters}\n activeFilterCount={activeFilterCount}\n isAnyFilterActive={isAnyFilterActive}\n isServerSide={isServerSide}\n borderless={dropInnerBorders}\n getMultiSelectValue={getMultiSelectValue}\n getDateRangeValue={getDateRangeValue}\n formatDateRange={formatDateRange}\n getCalendarModel={getCalendarModel}\n onApply={onApplyFilters}\n onClearAll={clearAllFilters}\n onToggleMultiselect={toggleMultiSelectValue}\n onClearFilter={clearFilter}\n onClearDateFilter={clearDateFilter}\n onCalendarUpdate={onCalendarUpdate}\n onTextFilterUpdate={(col, val) => table.getColumn(col)?.setFilterValue(val)}\n customFilters={customFilters}\n />\n\n {/* Bulk action bar (shown above table when rows selected) */}\n {renderBulkActions && selectedRows.length > 0 && (\n
\n {selectedRows.length} selected \n {renderBulkActions(selectedRows, () => table.toggleAllRowsSelected(false))}\n table.toggleAllRowsSelected(false)}\n >\n Clear selection\n \n
\n )}\n\n {/* Table. The Table primitive wraps the in its own overflow-auto\n div; neutralize that inner overflow and let the outer scroll\n container own the scroll region. */}\n \n {/* Loading overlay */}\n {loading && (\n
\n
\n
\n )}\n
\n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n const reorderable =\n enableReorder &&\n header.column.id !== 'select' &&\n header.column.id !== 'actions' &&\n header.column.id !== 'expander'\n return (\n onColDragStart(header.column.id, e) : undefined}\n onDragOver={reorderable ? (e) => onColDragOver(header.column.id, e) : undefined}\n onDragEnd={reorderable ? () => onColDragEnd() : undefined}\n onDrop={reorderable ? () => onColDrop(header.column.id) : undefined}\n >\n {!header.isPlaceholder &&\n flexRender(header.column.columnDef.header, header.getContext())}\n {enableResize && header.column.getCanResize() && (\n \n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n onRowClick?.(row.original)}\n >\n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n {row.getIsExpanded() && renderExpanded && (\n \n \n {renderExpanded(row.original, row)}\n \n \n )}\n \n ))\n ) : (\n \n \n {emptyState ??
No results.
}\n \n \n )}\n \n {renderFooter && (\n {renderFooter(table.getRowModel().rows)}\n )}\n
\n {/* Infinite scroll sentinel */}\n {infinite &&
}\n {infinite && loading && (\n
\n Loading more…\n
\n )}\n
\n\n {/* Pagination (inside-mode, default) */}\n {enablePagination && !infinite && paginationPosition === 'inside' && (\n }\n totalRows={totalRows}\n isServerSide={isServerSide}\n borderless={dropInnerBorders}\n />\n )}\n
\n\n {/* Pagination (below-mode: floats outside the bordered card). */}\n {enablePagination && !infinite && paginationPosition === 'below' && (\n }\n totalRows={totalRows}\n isServerSide={isServerSide}\n borderless\n />\n )}\n \n )\n}\n\n// forwardRef + generics: cast the wrapped component back to a generic-aware\n// signature so consumers keep `>` inference.\nexport const DataTable = React.forwardRef(DataTableInner) as (\n props: DataTableProps & { ref?: React.Ref> },\n) => React.ReactElement\n", "type": "registry:ui", "target": "~/components/ui/data-table/DataTable.tsx" }, { "path": "packages/registry-react/components/data-table/DataTableColumnHeader.tsx", "content": "'use client'\n\n/**\n * Sortable / hideable header cell for TanStack DataTable columns. Use it from\n * a column definition like:\n * header: ({ column }) => \n *\n * Click on the label cycles sort asc → desc → none.\n *\n * Optional per-column filter:\n * header: ({ column }) => (\n * \n * )\n *\n * When `filter` is provided, a funnel icon renders next to the sort button.\n * Click opens a popover with the right filter UI for the type (text / select\n * / multiselect / date). The funnel shows a primary-coloured dot when the\n * column has an active filter.\n */\nimport * as React from 'react'\nimport type { Column } from '@tanstack/react-table'\nimport { ArrowUp, ArrowUpDown, Check, Filter, FilterX } from 'lucide-react'\nimport type { DateRange } from 'react-day-picker'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\nimport { RangeCalendar } from '@/components/ui/range-calendar'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'\nimport { isoToDate, dateToIso } from './date-utils'\n\ninterface FilterOption {\n value: string\n label: string\n}\ninterface FilterDefinition {\n column: string\n label: string\n type: 'text' | 'select' | 'multiselect' | 'date'\n options?: (string | FilterOption)[]\n}\n\nexport interface DataTableColumnHeaderProps {\n column: Column\n label: string\n align?: 'left' | 'right' | 'center'\n filter?: FilterDefinition\n className?: string\n}\n\nfunction resolveOption(opt: string | FilterOption): FilterOption {\n return typeof opt === 'string' ? { value: opt, label: opt } : opt\n}\n\nexport function DataTableColumnHeader({\n column,\n label,\n align = 'left',\n filter,\n className,\n}: DataTableColumnHeaderProps) {\n const [open, setOpen] = React.useState(false)\n\n function next() {\n const current = column.getIsSorted()\n if (!current) column.toggleSorting(false)\n else if (current === 'asc') column.toggleSorting(true)\n else column.clearSorting()\n }\n\n const filterValue = column.getFilterValue()\n\n const isFilterActive = (() => {\n const v = filterValue\n if (v === undefined || v === null || v === '') return false\n if (Array.isArray(v)) return v.length > 0\n if (typeof v === 'object') return Object.keys(v).length > 0\n return true\n })()\n\n // Text-input bound separately so we can apply on blur / Enter rather than\n // thrashing the column filter on every keystroke.\n const [textDraft, setTextDraft] = React.useState('')\n React.useEffect(() => {\n if (open && filter?.type === 'text') {\n setTextDraft((filterValue as string) ?? '')\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open])\n\n function applyText() {\n column.setFilterValue(textDraft || undefined)\n }\n\n function clearText() {\n setTextDraft('')\n column.setFilterValue(undefined)\n }\n\n function toggleMultiselect(value: string) {\n const current = (filterValue as string[]) ?? []\n const nextVal = current.includes(value) ? current.filter((v) => v !== value) : [...current, value]\n column.setFilterValue(nextVal.length > 0 ? nextVal : undefined)\n }\n\n function selectOne(value: string) {\n column.setFilterValue(value || undefined)\n setOpen(false)\n }\n\n function clearFilter() {\n column.setFilterValue(undefined)\n setTextDraft('')\n }\n\n // Date-range bridging. The column stores ISO strings; the calendar wants\n // native Date instances. Reads/writes both shapes.\n const dateModel: DateRange | undefined = (() => {\n const v = filterValue as { from?: string; to?: string } | undefined\n if (!v?.from && !v?.to) return undefined\n return {\n from: v.from ? isoToDate(v.from) : undefined,\n to: v.to ? isoToDate(v.to) : undefined,\n }\n })()\n\n function onDateSelect(range: DateRange | undefined) {\n const isoFrom = range?.from ? dateToIso(range.from) : undefined\n const isoTo = range?.to ? dateToIso(range.to) : undefined\n if (!isoFrom && !isoTo) {\n column.setFilterValue(undefined)\n } else {\n column.setFilterValue({ from: isoFrom, to: isoTo })\n }\n }\n\n function selectedLabels(): string[] {\n if (!filter?.options) return []\n const selected = (filterValue as string[]) ?? []\n return filter.options\n .map(resolveOption)\n .filter((o) => selected.includes(o.value))\n .map((o) => o.label)\n }\n\n return (\n \n {column.getCanSort() ? (\n \n {label}\n {column.getIsSorted() ? (\n \n ) : (\n \n )}\n \n ) : (\n {label}\n )}\n\n {/* Optional per-column header filter */}\n {filter && (\n \n \n \n \n {isFilterActive && (\n \n )}\n \n \n \n
\n Filter · {filter.label}\n {isFilterActive && (\n \n \n Clear\n \n )}\n
\n\n {/* TEXT */}\n {filter.type === 'text' && (\n
\n setTextDraft(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n applyText()\n setOpen(false)\n }\n }}\n onBlur={applyText}\n />\n
\n {\n applyText()\n setOpen(false)\n }}\n >\n Apply\n \n \n
\n
\n )}\n\n {/* SELECT / MULTISELECT */}\n {(filter.type === 'select' || filter.type === 'multiselect') && (\n \n \n \n No matches.\n \n {(filter.options ?? []).map((opt) => {\n const o = resolveOption(opt)\n return (\n \n filter.type === 'multiselect' ? toggleMultiselect(o.value) : selectOne(o.value)\n }\n >\n {filter.type === 'multiselect' ? (\n \n \n \n ) : (\n \n )}\n {o.label}\n \n )\n })}\n \n \n \n )}\n\n {/* DATE RANGE */}\n {filter.type === 'date' && (\n
\n \n
\n \n \n
\n
\n )}\n\n {/* Active selection summary */}\n {isFilterActive && (filter.type === 'multiselect' || filter.type === 'select') && (\n
\n {filter.type === 'multiselect' ? (\n \n {selectedLabels().length} selected:{' '}\n {selectedLabels().join(', ')}\n \n ) : (\n \n {filterValue as string}\n \n )}\n
\n )}\n \n \n )}\n \n )\n}\n", "type": "registry:ui", "target": "~/components/ui/data-table/DataTableColumnHeader.tsx" }, { "path": "packages/registry-react/components/data-table/DataTableFilterPopover.tsx", "content": "'use client'\n\n/**\n * Popover variant of DataTableFilterSheet. Same filter UI (text /\n * multiselect / date) packed into a Popover instead of a side Sheet.\n * Slot in via `filterMode=\"popover\"` on .\n *\n * Trigger button is rendered inline by the toolbar; this component owns\n * the popover surface and content.\n *\n * ── Draft semantics ──────────────────────────────────────────────────\n * Unlike the Sheet (which mutates live TanStack column filters and rolls\n * back on cancel via a parent snapshot), this popover stages every edit\n * inside a local `draft` map. Real `columnFilters` are never touched\n * until the user clicks Apply -- at which point we emit `onCommitDraft`\n * with the full draft and the parent walks the entries calling\n * `setFilterValue` per column. Closing the popover (Escape / click out)\n * simply discards the draft.\n */\nimport * as React from 'react'\nimport type { Table } from '@tanstack/react-table'\nimport type { DateRange } from 'react-day-picker'\nimport { Check, SlidersHorizontal, X } from 'lucide-react'\nimport { Input } from '@/components/ui/input'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Label } from '@/components/ui/label'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\nimport { RangeCalendar } from '@/components/ui/range-calendar'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'\nimport { type FilterDefinition, resolveOption } from './types'\nimport { isoToDate, dateToIso } from './date-utils'\n\ntype DraftDateValue = { from?: string; to?: string }\ntype DraftValue = string[] | string | DraftDateValue | undefined\ntype Draft = Record\n\nexport interface DataTableFilterPopoverProps {\n table: Table\n filters: FilterDefinition[]\n activeFilterCount: number\n isAnyFilterActive: boolean\n isServerSide: boolean\n getMultiSelectValue: (column: string) => string[]\n getDateRangeValue: (column: string) => { from?: string; to?: string }\n formatDateRange: (column: string) => string\n getCalendarModel: (column: string) => DateRange | undefined\n // Committed draft on Apply -- a `Record` where each\n // value is the final shape TanStack's `setFilterValue` expects.\n onCommitDraft: (draft: Draft) => void\n onClearAll: () => void\n customFilters?: React.ReactNode\n}\n\nexport function DataTableFilterPopover({\n table,\n filters,\n activeFilterCount,\n isAnyFilterActive: _isAnyFilterActive,\n isServerSide,\n getMultiSelectValue,\n getDateRangeValue,\n formatDateRange: _formatDateRange,\n getCalendarModel: _getCalendarModel,\n onCommitDraft,\n onClearAll: _onClearAll,\n customFilters,\n}: DataTableFilterPopoverProps) {\n const [open, setOpen] = React.useState(false)\n const [draft, setDraft] = React.useState({})\n const filterScrollRef = React.useRef(null)\n\n function seedDraft(): Draft {\n const next: Draft = {}\n for (const f of filters) {\n if (f.type === 'multiselect' || f.type === 'select') {\n next[f.column] = [...getMultiSelectValue(f.column)]\n } else if (f.type === 'date') {\n const dr = getDateRangeValue(f.column)\n next[f.column] = { from: dr.from, to: dr.to }\n } else if (f.type === 'text') {\n const v = table.getColumn(f.column)?.getFilterValue() as string | undefined\n next[f.column] = v ?? ''\n }\n }\n return next\n }\n\n function getDraftMulti(column: string): string[] {\n const v = draft[column]\n return Array.isArray(v) ? v : []\n }\n\n function getDraftText(column: string): string {\n const v = draft[column]\n return typeof v === 'string' ? v : ''\n }\n\n function getDraftDate(column: string): DraftDateValue {\n const v = draft[column]\n if (v && typeof v === 'object' && !Array.isArray(v)) return v as DraftDateValue\n return {}\n }\n\n function toggleDraftMulti(column: string, option: string) {\n const current = getDraftMulti(column)\n const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option]\n setDraft((d) => ({ ...d, [column]: next }))\n }\n\n function setDraftText(column: string, value: string) {\n setDraft((d) => ({ ...d, [column]: value }))\n }\n\n function clearDraftSection(filter: FilterDefinition) {\n if (filter.type === 'multiselect' || filter.type === 'select') {\n setDraft((d) => ({ ...d, [filter.column]: [] }))\n } else if (filter.type === 'date') {\n setDraft((d) => ({ ...d, [filter.column]: {} }))\n } else if (filter.type === 'text') {\n setDraft((d) => ({ ...d, [filter.column]: '' }))\n }\n }\n\n function resetDraft() {\n const next: Draft = {}\n for (const f of filters) {\n if (f.type === 'multiselect' || f.type === 'select') next[f.column] = []\n else if (f.type === 'date') next[f.column] = {}\n else if (f.type === 'text') next[f.column] = ''\n }\n setDraft(next)\n }\n\n // ── Date helpers (local; popover is fully self-contained for draft) ──\n function getDraftCalendarModel(column: string): DateRange | undefined {\n const dr = getDraftDate(column)\n if (!dr.from && !dr.to) return undefined\n return {\n from: isoToDate(dr.from),\n to: isoToDate(dr.to),\n }\n }\n\n function onDraftCalendarUpdate(column: string, val: DateRange | undefined) {\n const from = val?.from ? dateToIso(val.from) : undefined\n const to = val?.to ? dateToIso(val.to) : undefined\n setDraft((d) => ({ ...d, [column]: { from, to } }))\n }\n\n function formatDraftDateRange(column: string): string {\n const dr = getDraftDate(column)\n if (dr.from && dr.to) return `${dr.from} - ${dr.to}`\n if (dr.from) return `From ${dr.from}`\n if (dr.to) return `Until ${dr.to}`\n return ''\n }\n\n function isDraftSectionActive(filter: FilterDefinition): boolean {\n if (filter.type === 'multiselect' || filter.type === 'select') {\n return getDraftMulti(filter.column).length > 0\n }\n if (filter.type === 'date') {\n const dr = getDraftDate(filter.column)\n return !!(dr.from || dr.to)\n }\n if (filter.type === 'text') {\n return !!getDraftText(filter.column)\n }\n return false\n }\n\n // `Reset` is disabled when the draft has nothing to clear.\n const isDraftDirty = filters.some(isDraftSectionActive)\n\n function handleOpenChange(isOpen: boolean) {\n if (isOpen) {\n setDraft(seedDraft())\n setOpen(true)\n setTimeout(() => filterScrollRef.current?.scrollTo({ top: 0 }), 50)\n } else {\n // Close-without-apply: nothing to commit. Real column filters were never\n // mutated by the popover; the draft is local and discarded.\n setDraft({})\n setOpen(false)\n }\n }\n\n function applyAndClose() {\n const snapshot: Draft = {}\n for (const f of filters) {\n const v = draft[f.column]\n if (f.type === 'multiselect' || f.type === 'select') {\n const arr = Array.isArray(v) ? v : []\n snapshot[f.column] = arr.length > 0 ? arr : undefined\n } else if (f.type === 'date') {\n const dr = v && typeof v === 'object' && !Array.isArray(v) ? (v as DraftDateValue) : {}\n snapshot[f.column] = dr.from || dr.to ? { from: dr.from, to: dr.to } : undefined\n } else if (f.type === 'text') {\n const s = typeof v === 'string' ? v : ''\n snapshot[f.column] = s || undefined\n }\n }\n onCommitDraft(snapshot)\n setOpen(false)\n }\n\n const filteredRowCount = table.getFilteredRowModel().rows.length\n\n return (\n \n \n \n \n \n {/* Header */}\n
\n
\n
\n \n
\n
\n

Filters

\n

\n {activeFilterCount > 0 ? (\n <>\n {activeFilterCount} active\n {!isServerSide && (\n <>\n {' '}· {filteredRowCount} result{filteredRowCount !== 1 ? 's' : ''}\n \n )}\n \n ) : (\n 'Narrow down results'\n )}\n

\n
\n
\n
\n\n {/* Scrollable filter sections */}\n
\n
\n {filters.map((filter) => {\n if (filter.type === 'text') {\n return (\n
\n
\n \n {getDraftText(filter.column) && (\n clearDraftSection(filter)}\n >\n Clear\n \n )}\n
\n setDraftText(filter.column, e.target.value ?? '')}\n />\n
\n )\n }\n\n if (filter.type === 'multiselect' || filter.type === 'select') {\n const multi = getDraftMulti(filter.column)\n return (\n 0 ? 'bg-primary/[0.04] ring-primary/20 ring-1' : 'bg-muted/40',\n ].join(' ')}\n >\n
\n
\n \n {multi.length > 0 && (\n \n {multi.length}\n \n )}\n
\n {multi.length > 0 && (\n clearDraftSection(filter)}\n >\n Clear\n \n )}\n
\n \n \n \n No results.\n \n {filter.options?.map((rawOpt) => {\n const opt = resolveOption(rawOpt)\n const OptIcon = opt.icon\n return (\n toggleDraftMulti(filter.column, opt.value)}\n >\n \n \n
\n {OptIcon && }\n {opt.label}\n \n )\n })}\n \n \n \n
\n )\n }\n\n if (filter.type === 'date') {\n const dr = getDraftDate(filter.column)\n const hasDate = !!(dr.from || dr.to)\n return (\n \n
\n
\n \n {hasDate && (\n \n {formatDraftDateRange(filter.column)}\n \n )}\n
\n {hasDate && (\n clearDraftSection(filter)}\n >\n Clear\n \n )}\n
\n
\n onDraftCalendarUpdate(filter.column, range)}\n />\n
\n \n )\n }\n\n return null\n })}\n\n {/* Consumer-supplied custom filter UI */}\n {customFilters}\n \n \n\n {/* Footer */}\n
\n \n \n
\n \n \n )\n}\n", "type": "registry:ui", "target": "~/components/ui/data-table/DataTableFilterPopover.tsx" }, { "path": "packages/registry-react/components/data-table/DataTableFilterSheet.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport type { Table } from '@tanstack/react-table'\nimport type { DateRange } from 'react-day-picker'\nimport { Check, SlidersHorizontal, X } from 'lucide-react'\nimport { Input } from '@/components/ui/input'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Label } from '@/components/ui/label'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/ui/sheet'\nimport { RangeCalendar } from '@/components/ui/range-calendar'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'\nimport { type FilterDefinition, resolveOption } from './types'\n\nexport interface DataTableFilterSheetProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n table: Table\n filters: FilterDefinition[]\n activeFilterCount: number\n isAnyFilterActive: boolean\n isServerSide: boolean\n /** Strip section bgs / rings / dividers / SheetContent side border. */\n borderless?: boolean\n getMultiSelectValue: (column: string) => string[]\n getDateRangeValue: (column: string) => { from?: string; to?: string }\n formatDateRange: (column: string) => string\n getCalendarModel: (column: string) => DateRange | undefined\n onApply: () => void\n onClearAll: () => void\n onToggleMultiselect: (column: string, value: string) => void\n onClearFilter: (filter: FilterDefinition) => void\n onClearDateFilter: (filter: FilterDefinition) => void\n onCalendarUpdate: (column: string, value: DateRange | undefined) => void\n onTextFilterUpdate: (column: string, value: string | undefined) => void\n customFilters?: React.ReactNode\n}\n\nexport function DataTableFilterSheet({\n open,\n onOpenChange,\n table,\n filters,\n activeFilterCount,\n isAnyFilterActive,\n isServerSide,\n borderless = false,\n getMultiSelectValue,\n getDateRangeValue,\n formatDateRange,\n getCalendarModel,\n onApply,\n onClearAll,\n onToggleMultiselect,\n onClearFilter,\n onClearDateFilter,\n onCalendarUpdate,\n onTextFilterUpdate,\n customFilters,\n}: DataTableFilterSheetProps) {\n const filterScrollRef = React.useRef(null)\n\n React.useEffect(() => {\n if (open) {\n setTimeout(() => {\n filterScrollRef.current?.scrollTo({ top: 0 })\n }, 50)\n }\n }, [open])\n\n const filteredRowCount = table.getFilteredRowModel().rows.length\n\n return (\n \n \n {/* Header */}\n
\n
\n
\n \n
\n
\n \n Filters\n \n {activeFilterCount > 0 ? (\n <>\n {activeFilterCount} active filter{activeFilterCount > 1 ? 's' : ''}\n {!isServerSide && (\n <>\n {' '}· {filteredRowCount} result{filteredRowCount !== 1 ? 's' : ''}\n \n )}\n \n ) : (\n 'Narrow down results'\n )}\n \n \n
\n
\n
\n\n {/* Scrollable filter sections */}\n
\n
\n {filters.map((filter) => {\n const textValue = (table.getColumn(filter.column)?.getFilterValue() as string) ?? ''\n const multi = getMultiSelectValue(filter.column)\n const dr = getDateRangeValue(filter.column)\n const hasDate = !!(dr.from || dr.to)\n\n if (filter.type === 'text') {\n return (\n
\n
\n \n {textValue && (\n onTextFilterUpdate(filter.column, undefined)}\n >\n Clear\n \n )}\n
\n onTextFilterUpdate(filter.column, e.target.value || undefined)}\n />\n
\n )\n }\n\n if (filter.type === 'multiselect' || filter.type === 'select') {\n return (\n 0 ? 'bg-primary/[0.04] ring-primary/20 ring-1' : 'bg-muted/40',\n ].join(' ')\n }\n >\n
\n
\n \n {multi.length > 0 && (\n \n {multi.length}\n \n )}\n
\n {multi.length > 0 && (\n onClearFilter(filter)}\n >\n Clear\n \n )}\n
\n \n \n \n No results.\n \n {filter.options?.map((rawOpt) => {\n const opt = resolveOption(rawOpt)\n const OptIcon = opt.icon\n return (\n onToggleMultiselect(filter.column, opt.value)}\n >\n \n \n
\n {OptIcon && }\n {opt.label}\n \n )\n })}\n \n \n \n
\n )\n }\n\n if (filter.type === 'date') {\n return (\n \n
\n
\n \n {hasDate && (\n \n {formatDateRange(filter.column)}\n \n )}\n
\n {hasDate && (\n onClearDateFilter(filter)}\n >\n Clear\n \n )}\n
\n
\n onCalendarUpdate(filter.column, range)}\n />\n
\n \n )\n }\n\n return null\n })}\n\n {/* Consumer-supplied custom filter UI */}\n {customFilters}\n \n \n\n {/* Footer */}\n
\n \n \n
\n \n \n )\n}\n", "type": "registry:ui", "target": "~/components/ui/data-table/DataTableFilterSheet.tsx" }, { "path": "packages/registry-react/components/data-table/DataTablePagination.tsx", "content": "'use client'\n\nimport type { Table } from '@tanstack/react-table'\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\n\nexport interface DataTablePaginationProps {\n table: Table\n totalRows: number\n isServerSide: boolean\n borderless?: boolean\n}\n\nexport function DataTablePagination({ table, totalRows, isServerSide, borderless = false }: DataTablePaginationProps) {\n return (\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{' '}\n {isServerSide ? totalRows : table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n

Rows per page

\n {\n table.setPageSize(Number(value))\n table.setPageIndex(0)\n }}\n >\n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n >\n \n First page\n \n table.previousPage()}\n >\n \n Previous page\n \n table.nextPage()}\n >\n \n Next page\n \n table.setPageIndex(table.getPageCount() - 1)}\n >\n \n Last page\n \n
\n
\n
\n )\n}\n", "type": "registry:ui", "target": "~/components/ui/data-table/DataTablePagination.tsx" }, { "path": "packages/registry-react/components/data-table/DataTableToolbar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport type { Table } from '@tanstack/react-table'\nimport type { DateRange } from 'react-day-picker'\nimport {\n CalendarIcon,\n Check,\n ChevronDown,\n Download,\n ListFilter,\n Plus,\n Rows3,\n SlidersHorizontal,\n X,\n} from 'lucide-react'\nimport { Input } from '@/components/ui/input'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n} from '@/components/ui/command'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\nimport { RangeCalendar } from '@/components/ui/range-calendar'\nimport { DataTableFilterPopover } from './DataTableFilterPopover'\nimport { type FilterDefinition, resolveOption } from './types'\n\nexport interface DataTableToolbarProps {\n table: Table\n filterColumn: string\n filterPlaceholder: string\n filters: FilterDefinition[]\n filterMode: 'inline' | 'modal' | 'popover'\n enableSearch?: boolean\n enableColumnVisibility?: boolean\n enableExport?: boolean\n enableDensityToggle?: boolean\n density?: 'compact' | 'cozy' | 'comfortable'\n borderless?: boolean\n activeFilterCount: number\n isAnyFilterActive: boolean\n isServerSide: boolean\n getMultiSelectValue: (column: string) => string[]\n getDateRangeValue: (column: string) => { from?: string; to?: string }\n getFilterSelectedLabels: (filter: FilterDefinition) => string[]\n formatDateRange: (column: string) => string\n getCalendarModel: (column: string) => DateRange | undefined\n onSearch: (value: string) => void\n onOpenFilterSheet: () => void\n onApplyFilters: () => void\n onClearAllFilters: () => void\n onToggleMultiselect: (column: string, value: string) => void\n onClearFilter: (filter: FilterDefinition) => void\n onClearDateFilter: (filter: FilterDefinition) => void\n onCalendarUpdate: (column: string, value: DateRange | undefined) => void\n onTextFilterUpdate: (column: string, value: string | undefined) => void\n onCommitFilters: (draft: Record) => void\n onExportCsv: () => void\n onExportJson: () => void\n onDensityChange: (value: 'compact' | 'cozy' | 'comfortable') => void\n toolbarExtra?: React.ReactNode\n customFilters?: React.ReactNode\n}\n\nexport function DataTableToolbar({\n table,\n filterColumn,\n filterPlaceholder,\n filters,\n filterMode,\n enableSearch = true,\n enableColumnVisibility = true,\n enableExport = false,\n enableDensityToggle = false,\n density = 'cozy',\n borderless = false,\n activeFilterCount,\n isAnyFilterActive,\n isServerSide,\n getMultiSelectValue,\n getDateRangeValue,\n getFilterSelectedLabels,\n formatDateRange,\n getCalendarModel,\n onSearch,\n onOpenFilterSheet,\n onApplyFilters: _onApplyFilters,\n onClearAllFilters,\n onToggleMultiselect,\n onClearFilter,\n onClearDateFilter,\n onCalendarUpdate,\n onTextFilterUpdate,\n onCommitFilters,\n onExportCsv,\n onExportJson,\n onDensityChange,\n toolbarExtra,\n customFilters,\n}: DataTableToolbarProps) {\n return (\n
\n
\n {/* Search only renders when filterColumn maps to an actual column. */}\n {enableSearch && filterColumn && table.getColumn(filterColumn) && (\n onSearch(e.target.value)}\n />\n )}\n\n {/* ── INLINE filter mode ── */}\n {filterMode === 'inline' &&\n filters.map((filter) => {\n if (filter.type === 'multiselect' || filter.type === 'select') {\n const multi = getMultiSelectValue(filter.column)\n return (\n \n \n \n \n \n \n \n \n No results.\n \n {filter.options?.map((rawOpt) => {\n const opt = resolveOption(rawOpt)\n const OptIcon = opt.icon\n return (\n onToggleMultiselect(filter.column, opt.value)}\n >\n \n \n
\n {OptIcon && }\n {opt.label}\n \n )\n })}\n \n {multi.length > 0 && (\n <>\n \n \n onClearFilter(filter)}\n >\n Clear filter\n \n \n \n )}\n \n \n \n \n )\n }\n\n if (filter.type === 'date') {\n const dr = getDateRangeValue(filter.column)\n const hasDate = !!(dr.from || dr.to)\n return (\n \n \n \n \n \n onCalendarUpdate(filter.column, range)}\n />\n {hasDate && (\n
\n onClearDateFilter(filter)}\n >\n Clear dates\n \n
\n )}\n \n \n )\n }\n\n if (filter.type === 'text') {\n const textValue = table.getColumn(filter.column)?.getFilterValue() as string | undefined\n return (\n \n \n \n \n \n
\n

{filter.label}

\n onTextFilterUpdate(filter.column, e.target.value || undefined)}\n />\n
\n \n \n )\n }\n\n return null\n })}\n\n {/* ── MODAL filter mode (Sheet from the right) ── */}\n {filterMode === 'modal' && (\n 0 ? 'border-primary/40 bg-primary/5 text-primary hover:bg-primary/10' : '',\n ].join(' ')}\n onClick={onOpenFilterSheet}\n >\n \n Filters\n {activeFilterCount > 0 && (\n \n {activeFilterCount}\n \n )}\n \n )}\n\n {/* ── POPOVER filter mode ── */}\n {filterMode === 'popover' && filters.length > 0 && (\n onCommitFilters(d)}\n onClearAll={onClearAllFilters}\n customFilters={customFilters}\n />\n )}\n\n {/* Inline custom filters (when filterMode === 'inline') */}\n {filterMode === 'inline' && customFilters}\n\n {/* Toolbar extras (e.g. group-by selector, density toggle) */}\n {toolbarExtra}\n\n {/* Reset button */}\n {isAnyFilterActive && (\n \n )}\n\n {/* Export (CSV / JSON) */}\n {enableExport && (\n
\n \n \n \n \n \n Export as CSV\n Export as JSON\n \n \n
\n )}\n\n {/* Density toggle */}\n {enableDensityToggle && (\n
\n \n \n \n \n \n onDensityChange(v as 'compact' | 'cozy' | 'comfortable')}\n >\n Compact\n Cozy\n Comfortable\n \n \n \n
\n )}\n\n {/* Column Visibility */}\n {enableColumnVisibility && (\n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => (\n column.toggleVisibility(!!value)}\n >\n {column.id}\n \n ))}\n \n \n
\n )}\n
\n \n )\n}\n", "type": "registry:ui", "target": "~/components/ui/data-table/DataTableToolbar.tsx" }, { "path": "packages/registry-react/components/data-table/types.ts", "content": "import type * as React from 'react'\n\nexport interface FilterOption {\n value: string\n label: string\n icon?: React.ComponentType<{ className?: string }>\n}\n\nexport interface FilterDefinition {\n column: string\n label: string\n type: 'text' | 'select' | 'multiselect' | 'date'\n options?: (string | FilterOption)[]\n}\n\nexport function resolveOption(opt: string | FilterOption): FilterOption {\n if (typeof opt === 'string') return { value: opt, label: opt }\n return opt\n}\n", "type": "registry:ui", "target": "~/components/ui/data-table/types.ts" }, { "path": "packages/registry-react/components/data-table/date-utils.ts", "content": "/**\n * ISO-string ↔ native Date helpers shared across the DataTable filter\n * surfaces. The Vue registry leaned on `@internationalized/date`'s\n * CalendarDate because its RangeCalendar (reka-ui) speaks DateValue; the\n * React RangeCalendar wraps react-day-picker, which speaks native `Date`.\n * So instead of pulling `@internationalized/date` into the React tree we\n * keep these two tiny converters local. Column filter values are still\n * stored as `YYYY-MM-DD` ISO strings on the wire, identical to Vue, so\n * server-side payloads match 1:1.\n */\nexport function isoToDate(str: string | undefined): Date | undefined {\n if (!str) return undefined\n const [y, m, d] = str.split('-').map(Number)\n if (y === undefined || m === undefined || d === undefined) return undefined\n return new Date(y, m - 1, d)\n}\n\nexport function dateToIso(date: Date | undefined): string {\n if (!date) return ''\n return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`\n}\n", "type": "registry:ui", "target": "~/components/ui/data-table/date-utils.ts" }, { "path": "packages/registry-react/components/data-table/index.ts", "content": "export { DataTable, type DataTableProps, type DataTableHandle, type DataTableState } from './DataTable'\nexport { DataTableColumnHeader, type DataTableColumnHeaderProps } from './DataTableColumnHeader'\nexport { DataTableToolbar, type DataTableToolbarProps } from './DataTableToolbar'\nexport { DataTableFilterSheet, type DataTableFilterSheetProps } from './DataTableFilterSheet'\nexport { DataTableFilterPopover, type DataTableFilterPopoverProps } from './DataTableFilterPopover'\nexport { DataTablePagination, type DataTablePaginationProps } from './DataTablePagination'\nexport type { FilterDefinition, FilterOption } from './types'\n", "type": "registry:ui", "target": "~/components/ui/data-table/index.ts" } ], "dependencies": [ "@tanstack/react-table", "react-day-picker", "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/command.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/label.json", "https://uipkge.dev/r/react/popover.json", "https://uipkge.dev/r/react/range-calendar.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/sheet.json", "https://uipkge.dev/r/react/table.json" ], "description": "Full-feature table with sorting, filtering, column pinning, pagination, row selection, and an opinionated header/toolbar. Built on TanStack Table — pass `columns` + `data` and configure as needed.", "categories": [ "data" ] }