Data Table

1"use client";
2 
3import * as React from "react";
4import {
5  ChevronLeft,
6  ChevronRight,
7  ChevronsLeft,
8  ChevronsRight,
9  Search,
10  SlidersHorizontal,
11  Check,
12} from "lucide-react";
13 
14import { cn } from "@/lib/utils";
15import { Button } from "@/components/ui/atoms/button";
16import { Input } from "@/components/ui/atoms/input";
17import { Badge } from "@/components/ui/atoms/badge";
18import {
19  DataTableCore,
20  getDataTableCellValue,
21  stringifyDataTableValue,
22  type DataTableColumnDef,
23  type DataTableState,
24  type SortDirection,
25} from "@/components/ui/organisms/data-table-core";
26 
27/* ================================================================== */
28/*  DATA TABLE — Full-featured table with sort, filter, pagination     */
29/* ================================================================== */
30 
31/* ── Types ────────────────────────────────────────────────────────── */
32 
33export interface DataTableProps<T> {
34  /** Column definitions */
35  columns: DataTableColumnDef<T>[];
36  /** Data rows */
37  data: T[];
38  /** Unique key extractor for each row */
39  getRowId?: (row: T, index: number) => string;
40  /** Rows per page (default: 10) */
41  pageSize?: number;
42  /** Show pagination (default: true) */
43  pagination?: boolean;
44  /** Show global search (default: true) */
45  searchable?: boolean;
46  /** Search placeholder */
47  searchPlaceholder?: string;
48  /** Enable row selection (default: false) */
49  selectable?: boolean;
50  /** Callback when selection changes */
51  onSelectionChange?: (selectedRows: T[]) => void;
52  /** Show column visibility toggle (default: false) */
53  columnToggle?: boolean;
54  /** Additional class for the wrapper */
55  className?: string;
56  /** Caption for accessibility */
57  caption?: string;
58  /** Empty state message */
59  emptyMessage?: string;
60  loading?: boolean;
61  error?: React.ReactNode;
62  stickyHeader?: boolean;
63  tableMaxHeight?: string | number;
64  density?: "compact" | "default" | "spacious";
65  surface?: "solid" | "soft" | "glass";
66  radius?: "none" | "sm" | "md" | "lg" | "xl";
67  toolbar?: React.ReactNode;
68}
69 
70/* ================================================================== */
71/*  MAIN COMPONENT                                                     */
72/* ================================================================== */
73 
74function DataTableInner<T>(
75  {
76    columns,
77    data,
78    getRowId,
79    pageSize = 10,
80    pagination = true,
81// … truncated