Data Table Core

1"use client";
2 
3import * as React from "react";
4import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
5 
6import { Checkbox } from "@/components/ui/atoms/checkbox";
7import { cn } from "@/lib/utils";
8 
9export type SortDirection = "asc" | "desc" | null;
10export type DataTableState = "populated" | "empty" | "loading" | "error";
11 
12export interface DataTableColumnDef<T> {
13  id: string;
14  header: string;
15  accessorFn?: (row: T) => unknown;
16  accessorKey?: keyof T;
17  cell?: (row: T) => React.ReactNode;
18  sortable?: boolean;
19  filterable?: boolean;
20  className?: string;
21  hidden?: boolean;
22}
23 
24export function getDataTableCellValue<T>(row: T, column: DataTableColumnDef<T>): unknown {
25  if (column.accessorFn) return column.accessorFn(row);
26  if (column.accessorKey) return (row as Record<string, unknown>)[column.accessorKey as string];
27  return (row as Record<string, unknown>)[column.id];
28}
29 
30export function stringifyDataTableValue(value: unknown): string {
31  if (value == null) return "";
32  if (["string", "number", "boolean"].includes(typeof value)) return String(value);
33  return JSON.stringify(value);
34}
35 
36export interface DataTableCoreProps<T> extends Omit<
37  React.HTMLAttributes<HTMLDivElement>,
38  "children"
39> {
40  columns: DataTableColumnDef<T>[];
41  data: T[];
42  getRowId?: (row: T, index: number) => string;
43  state?: DataTableState;
44  emptyContent?: React.ReactNode;
45  errorContent?: React.ReactNode;
46  loadingRows?: number;
47  selectable?: boolean;
48  selectedIds?: ReadonlySet<string>;
49  onToggleRow?: (id: string, row: T) => void;
50  onToggleAll?: () => void;
51  sortColumn?: string | null;
52  sortDirection?: SortDirection;
53  onSort?: (columnId: string) => void;
54  caption?: string;
55  stickyHeader?: boolean;
56  density?: "compact" | "default" | "spacious";
57  surface?: "solid" | "soft" | "glass";
58  radius?: "none" | "sm" | "md" | "lg" | "xl";
59  maxHeight?: string | number;
60}
61 
62function DataTableCoreInner<T>(
63  {
64    caption,
65    className,
66    columns,
67    data,
68    density = "default",
69    emptyContent = "No results found.",
70    errorContent = "Unable to load data.",
71    getRowId,
72    loadingRows = 5,
73    maxHeight,
74    onSort,
75    onToggleAll,
76    onToggleRow,
77    radius = "lg",
78    selectable = false,
79    selectedIds = new Set<string>(),
80    sortColumn,
81    sortDirection,
82    state = data.length ? "populated" : "empty",
83    stickyHeader = false,
84    surface = "solid",
85    style,
86    ...props
87  }: DataTableCoreProps<T>,
88  ref: React.ForwardedRef<HTMLDivElement>,
89) {
90// … truncated