{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-table", "title": "Data Table", "description": "A feature-rich data table component with server-side filtering, sorting, and pagination", "dependencies": [ "@tanstack/react-table", "lucide-react", "nuqs" ], "registryDependencies": [ "badge", "button", "calendar", "command", "dropdown-menu", "input", "popover", "select", "separator", "slider", "table" ], "files": [ { "path": "src/components/data-table/data-table.tsx", "content": "import { flexRender, type Table as TanstackTable } from \"@tanstack/react-table\";\nimport type * as React from \"react\";\n\nimport { DataTablePagination } from \"@/components/data-table/data-table-pagination\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\";\nimport { getColumnPinningStyle } from \"@/lib/data-table\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTableProps extends React.ComponentProps<\"div\"> {\n table: TanstackTable;\n actionBar?: React.ReactNode;\n}\n\nexport function DataTable({\n table,\n actionBar,\n children,\n className,\n ...props\n}: DataTableProps) {\n return (\n \n {children}\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n \n {actionBar &&\n table.getFilteredSelectedRowModel().rows.length > 0 &&\n actionBar}\n
\n \n );\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table.tsx" }, { "path": "src/components/data-table/data-table-column-header.tsx", "content": "\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport {\n ChevronDown,\n ChevronsUpDown,\n ChevronUp,\n EyeOff,\n X,\n} from \"lucide-react\";\n\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTableColumnHeaderProps\n extends React.ComponentProps {\n column: Column;\n label: string;\n}\n\nexport function DataTableColumnHeader({\n column,\n label,\n className,\n ...props\n}: DataTableColumnHeaderProps) {\n if (!column.getCanSort() && !column.getCanHide()) {\n return
{label}
;\n }\n\n return (\n \n \n {label}\n {column.getCanSort() &&\n (column.getIsSorted() === \"desc\" ? (\n \n ) : column.getIsSorted() === \"asc\" ? (\n \n ) : (\n \n ))}\n \n \n {column.getCanSort() && (\n <>\n span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n checked={column.getIsSorted() === \"asc\"}\n onClick={() => column.toggleSorting(false)}\n >\n \n Asc\n \n span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n checked={column.getIsSorted() === \"desc\"}\n onClick={() => column.toggleSorting(true)}\n >\n \n Desc\n \n {column.getIsSorted() && (\n column.clearSorting()}\n >\n \n Reset\n \n )}\n \n )}\n {column.getCanHide() && (\n span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground\"\n checked={!column.getIsVisible()}\n onClick={() => column.toggleVisibility(false)}\n >\n \n Hide\n \n )}\n \n \n );\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table-column-header.tsx" }, { "path": "src/components/data-table/data-table-pagination.tsx", "content": "import type { Table } from \"@tanstack/react-table\";\nimport {\n ChevronLeft,\n ChevronRight,\n ChevronsLeft,\n ChevronsRight,\n} from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTablePaginationProps extends React.ComponentProps<\"div\"> {\n table: Table;\n pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination({\n table,\n pageSizeOptions = [10, 20, 30, 40, 50],\n className,\n ...props\n}: DataTablePaginationProps) {\n return (\n \n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n

Rows per page

\n {\n table.setPageSize(Number(value));\n }}\n >\n \n \n \n \n \n {pageSizeOptions.map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\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.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n \n \n
\n
\n \n );\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table-pagination.tsx" }, { "path": "src/components/data-table/data-table-view-options.tsx", "content": "\"use client\";\n\nimport type { Table } from \"@tanstack/react-table\";\nimport { Settings2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/components/ui/command\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTableViewOptionsProps\n extends React.ComponentProps {\n table: Table;\n disabled?: boolean;\n}\n\nexport function DataTableViewOptions({\n table,\n disabled,\n className,\n ...props\n}: DataTableViewOptionsProps) {\n const columns = React.useMemo(\n () =>\n table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" && column.getCanHide(),\n ),\n [table],\n );\n\n return (\n \n \n \n \n \n \n \n No columns found.\n \n {columns.map((column) => (\n \n column.toggleVisibility(!column.getIsVisible())\n }\n >\n \n {column.columnDef.meta?.label ?? column.id}\n \n \n ))}\n \n \n \n \n \n );\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table-view-options.tsx" }, { "path": "src/components/data-table/data-table-faceted-filter.tsx", "content": "\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { Check, PlusCircle, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n} from \"@/components/ui/command\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\nimport type { Option } from \"@/types/data-table\";\n\ninterface DataTableFacetedFilterProps {\n column?: Column;\n title?: string;\n options: Option[];\n multiple?: boolean;\n}\n\nexport function DataTableFacetedFilter({\n column,\n title,\n options,\n multiple,\n}: DataTableFacetedFilterProps) {\n const [open, setOpen] = React.useState(false);\n\n const columnFilterValue = column?.getFilterValue();\n const selectedValues = new Set(\n Array.isArray(columnFilterValue) ? columnFilterValue : [],\n );\n\n const onItemSelect = React.useCallback(\n (option: Option, isSelected: boolean) => {\n if (!column) return;\n\n if (multiple) {\n const newSelectedValues = new Set(selectedValues);\n if (isSelected) {\n newSelectedValues.delete(option.value);\n } else {\n newSelectedValues.add(option.value);\n }\n const filterValues = Array.from(newSelectedValues);\n column.setFilterValue(filterValues.length ? filterValues : undefined);\n } else {\n column.setFilterValue(isSelected ? undefined : [option.value]);\n setOpen(false);\n }\n },\n [column, multiple, selectedValues],\n );\n\n const onReset = React.useCallback(\n (event?: React.MouseEvent) => {\n event?.stopPropagation();\n column?.setFilterValue(undefined);\n },\n [column],\n );\n\n return (\n \n \n \n \n \n \n \n \n No results found.\n \n {options.map((option) => {\n const isSelected = selectedValues.has(option.value);\n\n return (\n svg:last-child]:hidden\"\n onSelect={() => onItemSelect(option, isSelected)}\n >\n \n \n \n {option.icon && }\n {option.label}\n {option.count && (\n \n {option.count}\n \n )}\n \n );\n })}\n \n {selectedValues.size > 0 && (\n <>\n \n \n onReset()}\n className=\"justify-center text-center\"\n >\n Clear filters\n \n \n \n )}\n \n \n \n \n );\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table-faceted-filter.tsx" }, { "path": "src/components/data-table/data-table-toolbar.tsx", "content": "\"use client\";\n\nimport type { Column, Table } from \"@tanstack/react-table\";\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { DataTableDateFilter } from \"@/components/data-table/data-table-date-filter\";\nimport { DataTableFacetedFilter } from \"@/components/data-table/data-table-faceted-filter\";\nimport { DataTableSliderFilter } from \"@/components/data-table/data-table-slider-filter\";\nimport { DataTableViewOptions } from \"@/components/data-table/data-table-view-options\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTableToolbarProps extends React.ComponentProps<\"div\"> {\n table: Table;\n}\n\nexport function DataTableToolbar({\n table,\n children,\n className,\n ...props\n}: DataTableToolbarProps) {\n const isFiltered = table.getState().columnFilters.length > 0;\n\n const columns = React.useMemo(\n () => table.getAllColumns().filter((column) => column.getCanFilter()),\n [table],\n );\n\n const onReset = React.useCallback(() => {\n table.resetColumnFilters();\n }, [table]);\n\n return (\n \n
\n {columns.map((column) => (\n \n ))}\n {isFiltered && (\n \n \n Reset\n \n )}\n
\n
\n {children}\n \n
\n \n );\n}\ninterface DataTableToolbarFilterProps {\n column: Column;\n}\n\nfunction DataTableToolbarFilter({\n column,\n}: DataTableToolbarFilterProps) {\n {\n const columnMeta = column.columnDef.meta;\n\n const onFilterRender = React.useCallback(() => {\n if (!columnMeta?.variant) return null;\n\n switch (columnMeta.variant) {\n case \"text\":\n return (\n column.setFilterValue(event.target.value)}\n className=\"h-8 w-40 lg:w-56\"\n />\n );\n\n case \"number\":\n return (\n
\n column.setFilterValue(event.target.value)}\n className={cn(\"h-8 w-[120px]\", columnMeta.unit && \"pr-8\")}\n />\n {columnMeta.unit && (\n \n {columnMeta.unit}\n \n )}\n
\n );\n\n case \"range\":\n return (\n \n );\n\n case \"date\":\n case \"dateRange\":\n return (\n \n );\n\n case \"select\":\n case \"multiSelect\":\n return (\n \n );\n\n default:\n return null;\n }\n }, [column, columnMeta]);\n\n return onFilterRender();\n }\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table-toolbar.tsx" }, { "path": "src/components/data-table/data-table-slider-filter.tsx", "content": "\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { PlusCircle, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Range {\n min: number;\n max: number;\n}\n\ntype RangeValue = [number, number];\n\nfunction getIsValidRange(value: unknown): value is RangeValue {\n return (\n Array.isArray(value) &&\n value.length === 2 &&\n typeof value[0] === \"number\" &&\n typeof value[1] === \"number\"\n );\n}\n\nfunction parseValuesAsNumbers(value: unknown): RangeValue | undefined {\n if (\n Array.isArray(value) &&\n value.length === 2 &&\n value.every(\n (v) =>\n (typeof v === \"string\" || typeof v === \"number\") && !Number.isNaN(v),\n )\n ) {\n return [Number(value[0]), Number(value[1])];\n }\n\n return undefined;\n}\n\ninterface DataTableSliderFilterProps {\n column: Column;\n title?: string;\n}\n\nexport function DataTableSliderFilter({\n column,\n title,\n}: DataTableSliderFilterProps) {\n const id = React.useId();\n\n const columnFilterValue = parseValuesAsNumbers(column.getFilterValue());\n\n const defaultRange = column.columnDef.meta?.range;\n const unit = column.columnDef.meta?.unit;\n\n const { min, max, step } = React.useMemo(() => {\n let minValue = 0;\n let maxValue = 100;\n\n if (defaultRange && getIsValidRange(defaultRange)) {\n [minValue, maxValue] = defaultRange;\n } else {\n const values = column.getFacetedMinMaxValues();\n if (values && Array.isArray(values) && values.length === 2) {\n const [facetMinValue, facetMaxValue] = values;\n if (\n typeof facetMinValue === \"number\" &&\n typeof facetMaxValue === \"number\"\n ) {\n minValue = facetMinValue;\n maxValue = facetMaxValue;\n }\n }\n }\n\n const rangeSize = maxValue - minValue;\n const step =\n rangeSize <= 20\n ? 1\n : rangeSize <= 100\n ? Math.ceil(rangeSize / 20)\n : Math.ceil(rangeSize / 50);\n\n return { min: minValue, max: maxValue, step };\n }, [column, defaultRange]);\n\n const range = React.useMemo((): RangeValue => {\n return columnFilterValue ?? [min, max];\n }, [columnFilterValue, min, max]);\n\n const formatValue = React.useCallback((value: number) => {\n return value.toLocaleString(undefined, { maximumFractionDigits: 0 });\n }, []);\n\n const onFromInputChange = React.useCallback(\n (event: React.ChangeEvent) => {\n const numValue = Number(event.target.value);\n if (!Number.isNaN(numValue) && numValue >= min && numValue <= range[1]) {\n column.setFilterValue([numValue, range[1]]);\n }\n },\n [column, min, range],\n );\n\n const onToInputChange = React.useCallback(\n (event: React.ChangeEvent) => {\n const numValue = Number(event.target.value);\n if (!Number.isNaN(numValue) && numValue <= max && numValue >= range[0]) {\n column.setFilterValue([range[0], numValue]);\n }\n },\n [column, max, range],\n );\n\n const onSliderValueChange = React.useCallback(\n (value: RangeValue) => {\n if (Array.isArray(value) && value.length === 2) {\n column.setFilterValue(value);\n }\n },\n [column],\n );\n\n const onReset = React.useCallback(\n (event: React.MouseEvent) => {\n if (event.target instanceof HTMLDivElement) {\n event.stopPropagation();\n }\n column.setFilterValue(undefined);\n },\n [column],\n );\n\n return (\n \n \n \n \n \n
\n

\n {title}\n

\n
\n \n
\n \n {unit && (\n \n {unit}\n \n )}\n
\n \n
\n \n {unit && (\n \n {unit}\n \n )}\n
\n
\n \n \n
\n \n Clear\n \n \n \n );\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table-slider-filter.tsx" }, { "path": "src/components/data-table/data-table-date-filter.tsx", "content": "\"use client\";\n\nimport type { Column } from \"@tanstack/react-table\";\nimport { CalendarIcon, XCircle } from \"lucide-react\";\nimport * as React from \"react\";\nimport type { DateRange } from \"react-day-picker\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { formatDate } from \"@/lib/format\";\n\ntype DateSelection = Date[] | DateRange;\n\nfunction getIsDateRange(value: DateSelection): value is DateRange {\n return value && typeof value === \"object\" && !Array.isArray(value);\n}\n\nfunction parseAsDate(timestamp: number | string | undefined): Date | undefined {\n if (!timestamp) return undefined;\n const numericTimestamp =\n typeof timestamp === \"string\" ? Number(timestamp) : timestamp;\n const date = new Date(numericTimestamp);\n return !Number.isNaN(date.getTime()) ? date : undefined;\n}\n\nfunction parseColumnFilterValue(value: unknown) {\n if (value === null || value === undefined) {\n return [];\n }\n\n if (Array.isArray(value)) {\n return value.map((item) => {\n if (typeof item === \"number\" || typeof item === \"string\") {\n return item;\n }\n return undefined;\n });\n }\n\n if (typeof value === \"string\" || typeof value === \"number\") {\n return [value];\n }\n\n return [];\n}\n\ninterface DataTableDateFilterProps {\n column: Column;\n title?: string;\n multiple?: boolean;\n}\n\nexport function DataTableDateFilter({\n column,\n title,\n multiple,\n}: DataTableDateFilterProps) {\n const columnFilterValue = column.getFilterValue();\n\n const selectedDates = React.useMemo(() => {\n if (!columnFilterValue) {\n return multiple ? { from: undefined, to: undefined } : [];\n }\n\n if (multiple) {\n const timestamps = parseColumnFilterValue(columnFilterValue);\n return {\n from: parseAsDate(timestamps[0]),\n to: parseAsDate(timestamps[1]),\n };\n }\n\n const timestamps = parseColumnFilterValue(columnFilterValue);\n const date = parseAsDate(timestamps[0]);\n return date ? [date] : [];\n }, [columnFilterValue, multiple]);\n\n const onSelect = React.useCallback(\n (date: Date | DateRange | undefined) => {\n if (!date) {\n column.setFilterValue(undefined);\n return;\n }\n\n if (multiple && !(\"getTime\" in date)) {\n const from = date.from?.getTime();\n const to = date.to?.getTime();\n column.setFilterValue(from || to ? [from, to] : undefined);\n } else if (!multiple && \"getTime\" in date) {\n column.setFilterValue(date.getTime());\n }\n },\n [column, multiple],\n );\n\n const onReset = React.useCallback(\n (event: React.MouseEvent) => {\n event.stopPropagation();\n column.setFilterValue(undefined);\n },\n [column],\n );\n\n const hasValue = React.useMemo(() => {\n if (multiple) {\n if (!getIsDateRange(selectedDates)) return false;\n return selectedDates.from || selectedDates.to;\n }\n if (!Array.isArray(selectedDates)) return false;\n return selectedDates.length > 0;\n }, [multiple, selectedDates]);\n\n const formatDateRange = React.useCallback((range: DateRange) => {\n if (!range.from && !range.to) return \"\";\n if (range.from && range.to) {\n return `${formatDate(range.from)} - ${formatDate(range.to)}`;\n }\n return formatDate(range.from ?? range.to);\n }, []);\n\n const label = React.useMemo(() => {\n if (multiple) {\n if (!getIsDateRange(selectedDates)) return null;\n\n const hasSelectedDates = selectedDates.from || selectedDates.to;\n const dateText = hasSelectedDates\n ? formatDateRange(selectedDates)\n : \"Select date range\";\n\n return (\n \n {title}\n {hasSelectedDates && (\n <>\n \n {dateText}\n \n )}\n \n );\n }\n\n if (getIsDateRange(selectedDates)) return null;\n\n const hasSelectedDate = selectedDates.length > 0;\n const dateText = hasSelectedDate\n ? formatDate(selectedDates[0])\n : \"Select date\";\n\n return (\n \n {title}\n {hasSelectedDate && (\n <>\n \n {dateText}\n \n )}\n \n );\n }, [selectedDates, multiple, formatDateRange, title]);\n\n return (\n \n \n \n \n \n {multiple ? (\n \n ) : (\n \n )}\n \n \n );\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table-date-filter.tsx" }, { "path": "src/components/data-table/data-table-skeleton.tsx", "content": "import { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DataTableSkeletonProps extends React.ComponentProps<\"div\"> {\n columnCount: number;\n rowCount?: number;\n filterCount?: number;\n cellWidths?: string[];\n withViewOptions?: boolean;\n withPagination?: boolean;\n shrinkZero?: boolean;\n}\n\nexport function DataTableSkeleton({\n columnCount,\n rowCount = 10,\n filterCount = 0,\n cellWidths = [\"auto\"],\n withViewOptions = true,\n withPagination = true,\n shrinkZero = false,\n className,\n ...props\n}: DataTableSkeletonProps) {\n const cozyCellWidths = Array.from(\n { length: columnCount },\n (_, index) => cellWidths[index % cellWidths.length] ?? \"auto\",\n );\n\n return (\n \n
\n
\n {filterCount > 0\n ? Array.from({ length: filterCount }).map((_, i) => (\n \n ))\n : null}\n
\n {withViewOptions ? (\n
\n
\n \n \n {Array.from({ length: 1 }).map((_, i) => (\n \n {Array.from({ length: columnCount }).map((_, j) => (\n \n \n \n ))}\n \n ))}\n \n \n {Array.from({ length: rowCount }).map((_, i) => (\n \n {Array.from({ length: columnCount }).map((_, j) => (\n \n \n \n ))}\n \n ))}\n \n
\n
\n {withPagination ? (\n
\n \n
\n
\n \n \n
\n
\n \n
\n
\n \n \n \n \n
\n
\n
\n ) : null}\n \n );\n}\n", "type": "registry:component", "target": "src/components/data-table/data-table-skeleton.tsx" }, { "path": "src/hooks/use-callback-ref.ts", "content": "import * as React from \"react\";\n\n/**\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx\n */\n\n/**\n * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a\n * prop or avoid re-executing effects when passed as a dependency\n */\nfunction useCallbackRef unknown>(\n callback: T | undefined,\n): T {\n const callbackRef = React.useRef(callback);\n\n React.useEffect(() => {\n callbackRef.current = callback;\n });\n\n // https://github.com/facebook/react/issues/19240\n return React.useMemo(\n () => ((...args) => callbackRef.current?.(...args)) as T,\n [],\n );\n}\n\nexport { useCallbackRef };\n", "type": "registry:hook" }, { "path": "src/hooks/use-data-table.ts", "content": "import {\n type ColumnFiltersState,\n getCoreRowModel,\n getFacetedMinMaxValues,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type PaginationState,\n type RowSelectionState,\n type SortingState,\n type TableOptions,\n type TableState,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n parseAsArrayOf,\n parseAsInteger,\n parseAsString,\n type SingleParser,\n type UseQueryStateOptions,\n useQueryState,\n useQueryStates,\n} from \"nuqs\";\nimport * as React from \"react\";\n\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getSortingStateParser } from \"@/lib/parsers\";\nimport type { ExtendedColumnSort, QueryKeys } from \"@/types/data-table\";\n\nconst PAGE_KEY = \"page\";\nconst PER_PAGE_KEY = \"perPage\";\nconst SORT_KEY = \"sort\";\nconst FILTERS_KEY = \"filters\";\nconst JOIN_OPERATOR_KEY = \"joinOperator\";\nconst ARRAY_SEPARATOR = \",\";\nconst DEBOUNCE_MS = 300;\nconst THROTTLE_MS = 50;\n\ninterface UseDataTableProps\n extends Omit<\n TableOptions,\n | \"state\"\n | \"pageCount\"\n | \"getCoreRowModel\"\n | \"manualFiltering\"\n | \"manualPagination\"\n | \"manualSorting\"\n >,\n Required, \"pageCount\">> {\n initialState?: Omit, \"sorting\"> & {\n sorting?: ExtendedColumnSort[];\n };\n queryKeys?: Partial;\n history?: \"push\" | \"replace\";\n debounceMs?: number;\n throttleMs?: number;\n clearOnDefault?: boolean;\n enableAdvancedFilter?: boolean;\n scroll?: boolean;\n shallow?: boolean;\n startTransition?: React.TransitionStartFunction;\n}\n\nexport function useDataTable(props: UseDataTableProps) {\n const {\n columns,\n pageCount = -1,\n initialState,\n queryKeys,\n history = \"replace\",\n debounceMs = DEBOUNCE_MS,\n throttleMs = THROTTLE_MS,\n clearOnDefault = false,\n enableAdvancedFilter = false,\n scroll = false,\n shallow = true,\n startTransition,\n ...tableProps\n } = props;\n const pageKey = queryKeys?.page ?? PAGE_KEY;\n const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;\n const sortKey = queryKeys?.sort ?? SORT_KEY;\n const filtersKey = queryKeys?.filters ?? FILTERS_KEY;\n const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;\n\n const queryStateOptions = React.useMemo<\n Omit, \"parse\">\n >(\n () => ({\n history,\n scroll,\n shallow,\n throttleMs,\n debounceMs,\n clearOnDefault,\n startTransition,\n }),\n [\n history,\n scroll,\n shallow,\n throttleMs,\n debounceMs,\n clearOnDefault,\n startTransition,\n ],\n );\n\n const [rowSelection, setRowSelection] = React.useState(\n initialState?.rowSelection ?? {},\n );\n const [columnVisibility, setColumnVisibility] =\n React.useState(initialState?.columnVisibility ?? {});\n\n const [page, setPage] = useQueryState(\n pageKey,\n parseAsInteger.withOptions(queryStateOptions).withDefault(1),\n );\n const [perPage, setPerPage] = useQueryState(\n perPageKey,\n parseAsInteger\n .withOptions(queryStateOptions)\n .withDefault(initialState?.pagination?.pageSize ?? 10),\n );\n\n const pagination: PaginationState = React.useMemo(() => {\n return {\n pageIndex: page - 1, // zero-based index -> one-based index\n pageSize: perPage,\n };\n }, [page, perPage]);\n\n const onPaginationChange = React.useCallback(\n (updaterOrValue: Updater) => {\n if (typeof updaterOrValue === \"function\") {\n const newPagination = updaterOrValue(pagination);\n void setPage(newPagination.pageIndex + 1);\n void setPerPage(newPagination.pageSize);\n } else {\n void setPage(updaterOrValue.pageIndex + 1);\n void setPerPage(updaterOrValue.pageSize);\n }\n },\n [pagination, setPage, setPerPage],\n );\n\n const columnIds = React.useMemo(() => {\n return new Set(\n columns.map((column) => column.id).filter(Boolean) as string[],\n );\n }, [columns]);\n\n const [sorting, setSorting] = useQueryState(\n sortKey,\n getSortingStateParser(columnIds)\n .withOptions(queryStateOptions)\n .withDefault(initialState?.sorting ?? []),\n );\n\n const onSortingChange = React.useCallback(\n (updaterOrValue: Updater) => {\n if (typeof updaterOrValue === \"function\") {\n const newSorting = updaterOrValue(sorting);\n setSorting(newSorting as ExtendedColumnSort[]);\n } else {\n setSorting(updaterOrValue as ExtendedColumnSort[]);\n }\n },\n [sorting, setSorting],\n );\n\n const filterableColumns = React.useMemo(() => {\n if (enableAdvancedFilter) return [];\n\n return columns.filter((column) => column.enableColumnFilter);\n }, [columns, enableAdvancedFilter]);\n\n const filterParsers = React.useMemo(() => {\n if (enableAdvancedFilter) return {};\n\n return filterableColumns.reduce<\n Record | SingleParser>\n >((acc, column) => {\n if (column.meta?.options) {\n acc[column.id ?? \"\"] = parseAsArrayOf(\n parseAsString,\n ARRAY_SEPARATOR,\n ).withOptions(queryStateOptions);\n } else {\n acc[column.id ?? \"\"] = parseAsString.withOptions(queryStateOptions);\n }\n return acc;\n }, {});\n }, [filterableColumns, queryStateOptions, enableAdvancedFilter]);\n\n const [filterValues, setFilterValues] = useQueryStates(filterParsers);\n\n const debouncedSetFilterValues = useDebouncedCallback(\n (values: typeof filterValues) => {\n void setPage(1);\n void setFilterValues(values);\n },\n debounceMs,\n );\n\n const initialColumnFilters: ColumnFiltersState = React.useMemo(() => {\n if (enableAdvancedFilter) return [];\n\n return Object.entries(filterValues).reduce(\n (filters, [key, value]) => {\n if (value !== null) {\n const processedValue = Array.isArray(value)\n ? value\n : typeof value === \"string\" && /[^a-zA-Z0-9]/.test(value)\n ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean)\n : [value];\n\n filters.push({\n id: key,\n value: processedValue,\n });\n }\n return filters;\n },\n [],\n );\n }, [filterValues, enableAdvancedFilter]);\n\n const [columnFilters, setColumnFilters] =\n React.useState(initialColumnFilters);\n\n const onColumnFiltersChange = React.useCallback(\n (updaterOrValue: Updater) => {\n if (enableAdvancedFilter) return;\n\n setColumnFilters((prev) => {\n const next =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(prev)\n : updaterOrValue;\n\n const filterUpdates = next.reduce<\n Record\n >((acc, filter) => {\n if (filterableColumns.find((column) => column.id === filter.id)) {\n acc[filter.id] = filter.value as string | string[];\n }\n return acc;\n }, {});\n\n for (const prevFilter of prev) {\n if (!next.some((filter) => filter.id === prevFilter.id)) {\n filterUpdates[prevFilter.id] = null;\n }\n }\n\n debouncedSetFilterValues(filterUpdates);\n return next;\n });\n },\n [debouncedSetFilterValues, filterableColumns, enableAdvancedFilter],\n );\n\n const table = useReactTable({\n ...tableProps,\n columns,\n initialState,\n pageCount,\n state: {\n pagination,\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n },\n defaultColumn: {\n ...tableProps.defaultColumn,\n enableColumnFilter: false,\n },\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onPaginationChange,\n onSortingChange,\n onColumnFiltersChange,\n onColumnVisibilityChange: setColumnVisibility,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getFacetedMinMaxValues: getFacetedMinMaxValues(),\n manualPagination: true,\n manualSorting: true,\n manualFiltering: true,\n meta: {\n ...tableProps.meta,\n queryKeys: {\n page: pageKey,\n perPage: perPageKey,\n sort: sortKey,\n filters: filtersKey,\n joinOperator: joinOperatorKey,\n },\n },\n });\n\n return React.useMemo(\n () => ({ table, shallow, debounceMs, throttleMs }),\n [table, shallow, debounceMs, throttleMs],\n );\n}\n", "type": "registry:hook" }, { "path": "src/hooks/use-debounced-callback.ts", "content": "/**\n * @see https://github.com/mantinedev/mantine/blob/master/packages/@mantine/hooks/src/use-debounced-callback/use-debounced-callback.ts\n */\n\nimport * as React from \"react\";\n\nimport { useCallbackRef } from \"@/hooks/use-callback-ref\";\n\nexport function useDebouncedCallback unknown>(\n callback: T,\n delay: number,\n) {\n const handleCallback = useCallbackRef(callback);\n const debounceTimerRef = React.useRef(0);\n React.useEffect(\n () => () => window.clearTimeout(debounceTimerRef.current),\n [],\n );\n\n const setValue = React.useCallback(\n (...args: Parameters) => {\n window.clearTimeout(debounceTimerRef.current);\n debounceTimerRef.current = window.setTimeout(\n () => handleCallback(...args),\n delay,\n );\n },\n [handleCallback, delay],\n );\n\n return setValue;\n}\n", "type": "registry:hook" }, { "path": "src/lib/data-table.ts", "content": "import type { Column } from \"@tanstack/react-table\";\nimport { dataTableConfig } from \"@/config/data-table\";\nimport type {\n ExtendedColumnFilter,\n FilterOperator,\n FilterVariant,\n} from \"@/types/data-table\";\n\nexport function getColumnPinningStyle({\n column,\n withBorder = false,\n}: {\n column: Column;\n withBorder?: boolean;\n}): React.CSSProperties {\n const isPinned = column.getIsPinned();\n const isLastLeftPinnedColumn =\n isPinned === \"left\" && column.getIsLastColumn(\"left\");\n const isFirstRightPinnedColumn =\n isPinned === \"right\" && column.getIsFirstColumn(\"right\");\n\n return {\n boxShadow: withBorder\n ? isLastLeftPinnedColumn\n ? \"-4px 0 4px -4px var(--border) inset\"\n : isFirstRightPinnedColumn\n ? \"4px 0 4px -4px var(--border) inset\"\n : undefined\n : undefined,\n left: isPinned === \"left\" ? `${column.getStart(\"left\")}px` : undefined,\n right: isPinned === \"right\" ? `${column.getAfter(\"right\")}px` : undefined,\n opacity: isPinned ? 0.97 : 1,\n position: isPinned ? \"sticky\" : \"relative\",\n background: isPinned ? \"var(--background)\" : \"var(--background)\",\n width: column.getSize(),\n zIndex: isPinned ? 1 : undefined,\n };\n}\n\nexport function getFilterOperators(filterVariant: FilterVariant) {\n const operatorMap: Record<\n FilterVariant,\n { label: string; value: FilterOperator }[]\n > = {\n text: dataTableConfig.textOperators,\n number: dataTableConfig.numericOperators,\n range: dataTableConfig.numericOperators,\n date: dataTableConfig.dateOperators,\n dateRange: dataTableConfig.dateOperators,\n boolean: dataTableConfig.booleanOperators,\n select: dataTableConfig.selectOperators,\n multiSelect: dataTableConfig.multiSelectOperators,\n };\n\n return operatorMap[filterVariant] ?? dataTableConfig.textOperators;\n}\n\nexport function getDefaultFilterOperator(filterVariant: FilterVariant) {\n const operators = getFilterOperators(filterVariant);\n\n return operators[0]?.value ?? (filterVariant === \"text\" ? \"iLike\" : \"eq\");\n}\n\nexport function getValidFilters(\n filters: ExtendedColumnFilter[],\n): ExtendedColumnFilter[] {\n return filters.filter(\n (filter) =>\n filter.operator === \"isEmpty\" ||\n filter.operator === \"isNotEmpty\" ||\n (Array.isArray(filter.value)\n ? filter.value.length > 0\n : filter.value !== \"\" &&\n filter.value !== null &&\n filter.value !== undefined),\n );\n}\n", "type": "registry:lib" }, { "path": "src/lib/format.ts", "content": "export function formatDate(\n date: Date | string | number | undefined,\n opts: Intl.DateTimeFormatOptions = {},\n) {\n if (!date) return \"\";\n\n try {\n return new Intl.DateTimeFormat(\"en-US\", {\n month: opts.month ?? \"long\",\n day: opts.day ?? \"numeric\",\n year: opts.year ?? \"numeric\",\n ...opts,\n }).format(new Date(date));\n } catch (_err) {\n return \"\";\n }\n}\n", "type": "registry:lib" }, { "path": "src/lib/parsers.ts", "content": "import { createParser } from \"nuqs/server\";\nimport { z } from \"zod\";\n\nimport { dataTableConfig } from \"@/config/data-table\";\n\nimport type {\n ExtendedColumnFilter,\n ExtendedColumnSort,\n} from \"@/types/data-table\";\n\nconst sortingItemSchema = z.object({\n id: z.string(),\n desc: z.boolean(),\n});\n\nexport const getSortingStateParser = (\n columnIds?: string[] | Set,\n) => {\n const validKeys = columnIds\n ? columnIds instanceof Set\n ? columnIds\n : new Set(columnIds)\n : null;\n\n return createParser({\n parse: (value) => {\n try {\n const parsed = JSON.parse(value);\n const result = z.array(sortingItemSchema).safeParse(parsed);\n\n if (!result.success) return null;\n\n if (validKeys && result.data.some((item) => !validKeys.has(item.id))) {\n return null;\n }\n\n return result.data as ExtendedColumnSort[];\n } catch {\n return null;\n }\n },\n serialize: (value) => JSON.stringify(value),\n eq: (a, b) =>\n a.length === b.length &&\n a.every(\n (item, index) =>\n item.id === b[index]?.id && item.desc === b[index]?.desc,\n ),\n });\n};\n\nconst filterItemSchema = z.object({\n id: z.string(),\n value: z.union([z.string(), z.array(z.string())]),\n variant: z.enum(dataTableConfig.filterVariants),\n operator: z.enum(dataTableConfig.operators),\n filterId: z.string(),\n});\n\nexport type FilterItemSchema = z.infer;\n\nexport const getFiltersStateParser = (\n columnIds?: string[] | Set,\n) => {\n const validKeys = columnIds\n ? columnIds instanceof Set\n ? columnIds\n : new Set(columnIds)\n : null;\n\n return createParser({\n parse: (value) => {\n try {\n const parsed = JSON.parse(value);\n const result = z.array(filterItemSchema).safeParse(parsed);\n\n if (!result.success) return null;\n\n if (validKeys && result.data.some((item) => !validKeys.has(item.id))) {\n return null;\n }\n\n return result.data as ExtendedColumnFilter[];\n } catch {\n return null;\n }\n },\n serialize: (value) => JSON.stringify(value),\n eq: (a, b) =>\n a.length === b.length &&\n a.every(\n (filter, index) =>\n filter.id === b[index]?.id &&\n filter.value === b[index]?.value &&\n filter.variant === b[index]?.variant &&\n filter.operator === b[index]?.operator,\n ),\n });\n};\n", "type": "registry:lib" }, { "path": "src/config/data-table.ts", "content": "export type DataTableConfig = typeof dataTableConfig;\n\nexport const dataTableConfig = {\n textOperators: [\n { label: \"Contains\", value: \"iLike\" as const },\n { label: \"Does not contain\", value: \"notILike\" as const },\n { label: \"Is\", value: \"eq\" as const },\n { label: \"Is not\", value: \"ne\" as const },\n { label: \"Is empty\", value: \"isEmpty\" as const },\n { label: \"Is not empty\", value: \"isNotEmpty\" as const },\n ],\n numericOperators: [\n { label: \"Is\", value: \"eq\" as const },\n { label: \"Is not\", value: \"ne\" as const },\n { label: \"Is less than\", value: \"lt\" as const },\n { label: \"Is less than or equal to\", value: \"lte\" as const },\n { label: \"Is greater than\", value: \"gt\" as const },\n { label: \"Is greater than or equal to\", value: \"gte\" as const },\n { label: \"Is between\", value: \"isBetween\" as const },\n { label: \"Is empty\", value: \"isEmpty\" as const },\n { label: \"Is not empty\", value: \"isNotEmpty\" as const },\n ],\n dateOperators: [\n { label: \"Is\", value: \"eq\" as const },\n { label: \"Is not\", value: \"ne\" as const },\n { label: \"Is before\", value: \"lt\" as const },\n { label: \"Is after\", value: \"gt\" as const },\n { label: \"Is on or before\", value: \"lte\" as const },\n { label: \"Is on or after\", value: \"gte\" as const },\n { label: \"Is between\", value: \"isBetween\" as const },\n { label: \"Is relative to today\", value: \"isRelativeToToday\" as const },\n { label: \"Is empty\", value: \"isEmpty\" as const },\n { label: \"Is not empty\", value: \"isNotEmpty\" as const },\n ],\n selectOperators: [\n { label: \"Is\", value: \"eq\" as const },\n { label: \"Is not\", value: \"ne\" as const },\n { label: \"Is empty\", value: \"isEmpty\" as const },\n { label: \"Is not empty\", value: \"isNotEmpty\" as const },\n ],\n multiSelectOperators: [\n { label: \"Has any of\", value: \"inArray\" as const },\n { label: \"Has none of\", value: \"notInArray\" as const },\n { label: \"Is empty\", value: \"isEmpty\" as const },\n { label: \"Is not empty\", value: \"isNotEmpty\" as const },\n ],\n booleanOperators: [\n { label: \"Is\", value: \"eq\" as const },\n { label: \"Is not\", value: \"ne\" as const },\n ],\n sortOrders: [\n { label: \"Asc\", value: \"asc\" as const },\n { label: \"Desc\", value: \"desc\" as const },\n ],\n filterVariants: [\n \"text\",\n \"number\",\n \"range\",\n \"date\",\n \"dateRange\",\n \"boolean\",\n \"select\",\n \"multiSelect\",\n ] as const,\n operators: [\n \"iLike\",\n \"notILike\",\n \"eq\",\n \"ne\",\n \"inArray\",\n \"notInArray\",\n \"isEmpty\",\n \"isNotEmpty\",\n \"lt\",\n \"lte\",\n \"gt\",\n \"gte\",\n \"isBetween\",\n \"isRelativeToToday\",\n ] as const,\n joinOperators: [\"and\", \"or\"] as const,\n};\n", "type": "registry:file", "target": "src/config/data-table.ts" }, { "path": "src/types/data-table.ts", "content": "import type { ColumnSort, Row, RowData } from \"@tanstack/react-table\";\nimport type { DataTableConfig } from \"@/config/data-table\";\nimport type { FilterItemSchema } from \"@/lib/parsers\";\n\ndeclare module \"@tanstack/react-table\" {\n interface TableMeta {\n queryKeys?: QueryKeys;\n }\n\n interface ColumnMeta {\n label?: string;\n placeholder?: string;\n variant?: FilterVariant;\n options?: Option[];\n range?: [number, number];\n unit?: string;\n icon?: React.ComponentType>;\n }\n}\n\nexport interface QueryKeys {\n page: string;\n perPage: string;\n sort: string;\n filters: string;\n joinOperator: string;\n}\n\nexport interface Option {\n label: string;\n value: string;\n count?: number;\n icon?: React.ComponentType>;\n}\n\nexport type FilterOperator = DataTableConfig[\"operators\"][number];\nexport type FilterVariant = DataTableConfig[\"filterVariants\"][number];\nexport type JoinOperator = DataTableConfig[\"joinOperators\"][number];\n\nexport interface ExtendedColumnSort extends Omit {\n id: Extract;\n}\n\nexport interface ExtendedColumnFilter extends FilterItemSchema {\n id: Extract;\n}\n\nexport interface DataTableRowAction {\n row: Row;\n variant: \"update\" | \"delete\";\n}\n", "type": "registry:file", "target": "src/types/data-table.ts" } ], "type": "registry:component" }