Aurora Data Table

1"use client";
2 
3import * as React from "react";
4import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
5import { Button } from "@/registry/aurora/ui/button";
6import { cn } from "@/lib/utils";
7 
8// ---------------------------------------------------------------------------
9// Types
10// ---------------------------------------------------------------------------
11 
12export type SortState = { column: string; direction: "asc" | "desc" } | null;
13 
14export interface Column<TRow extends Record<string, unknown> = Record<string, unknown>> {
15  key: string;
16  label: string;
17  sortable?: boolean;
18  numeric?: boolean;
19  render?: (value: unknown, row: TRow) => React.ReactNode;
20}
21 
22export interface DataTableProps<TRow extends Record<string, unknown> = Record<string, unknown>>
23  extends React.HTMLAttributes<HTMLDivElement> {
24  columns: Column<TRow>[];
25  data: TRow[];
26}
27 
28// ---------------------------------------------------------------------------
29// Sort icon
30// ---------------------------------------------------------------------------
31 
32function SortIcon({ active, direction }: { active: boolean; direction: "asc" | "desc" | null }) {
33  const color = active ? "var(--aurora-accent-primary)" : "var(--aurora-text-muted)";
34  const Icon = !active || direction === null ? ArrowUpDown : direction === "asc" ? ArrowUp : ArrowDown;
35 
36  return <Icon aria-hidden style={{ color, width: 14, height: 14, flexShrink: 0 }} />;
37}
38 
39// ---------------------------------------------------------------------------
40// DataTable
41// ---------------------------------------------------------------------------
42 
43export function DataTable<TRow extends Record<string, unknown>>({
44  columns,
45  data,
46  className,
47  ...rest
48}: DataTableProps<TRow>) {
49  const [sortState, setSortState] = React.useState<SortState>(null);
50 
51  function handleSort(col: Column<TRow>) {
52    if (!col.sortable) return;
53    setSortState((prev) => {
54      if (prev === null || prev.column !== col.key) {
55        // New column — start ascending
56        return { column: col.key, direction: "asc" };
57      }
58      if (prev.direction === "asc") {
59        // asc → desc
60        return { column: col.key, direction: "desc" };
61      }
62      // desc → null (clear sort)
63      return null;
64    });
65  }
66 
67  const sorted = React.useMemo(() => {
68    if (sortState === null) return data;
69    const { column, direction } = sortState;
70    return [...data].sort((a, b) => {
71      const av = a[column];
72      const bv = b[column];
73      const cmp =
74// … truncated