// src/components/ui/DataTable.tsx "use client"; import { useMemo, useState, type ReactNode } from "react"; import { Table, SortableTh, type SortDirection } from "./Table"; import EmptyState from "./EmptyState"; export interface Column { key: string; header: ReactNode; /** Cell renderer. */ cell: (row: T) => ReactNode; /** Provide to make the column sortable. */ sortValue?: (row: T) => string | number; /** Right-align + tabular numerals. */ numeric?: boolean; } export interface DataTableProps { columns: Column[]; rows: T[]; rowKey: (row: T) => string; onRowOpen?: (row: T) => void; /** Shown when rows is empty (post-filtering). */ empty: { title: string; description?: string; action?: ReactNode }; initialSort?: { key: string; direction: Exclude }; } /** Sortable, keyboard-navigable data table on the Table primitive. Whole rows * are targets when onRowOpen is provided; the empty state is designed, not an * accident. */ export default function DataTable({ columns, rows, rowKey, onRowOpen, empty, initialSort, }: DataTableProps) { const [sortKey, setSortKey] = useState(initialSort?.key ?? null); const [direction, setDirection] = useState(initialSort?.direction ?? null); const sorted = useMemo(() => { if (!sortKey || !direction) return rows; const col = columns.find((c) => c.key === sortKey); if (!col?.sortValue) return rows; return [...rows].sort((a, b) => { const av = col.sortValue!(a); const bv = col.sortValue!(b); const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv)); return direction === "ascending" ? cmp : -cmp; }); }, [rows, columns, sortKey, direction]); const onSort = (key: string) => { if (sortKey !== key) { setSortKey(key); setDirection("ascending"); } else { setDirection(direction === "ascending" ? "descending" : "ascending"); } }; if (rows.length === 0) { return (

); } return ( {columns.map((col) => col.sortValue ? ( onSort(col.key)} /> ) : ( ) )} {sorted.map((row) => ( { // Clicks on interactive cell content (menus, checkboxes, // links) act on that control, never ALSO open the row. const el = e.target as HTMLElement; if (el.closest("button, a, input, select, textarea, label, [role='menu'], [role='dialog']")) return; onRowOpen(row); } : undefined } onKeyDown={ onRowOpen ? (e) => { if (e.key === "Enter" && e.target === e.currentTarget) onRowOpen(row); } : undefined } > {columns.map((col) => ( ))} ))}

{col.header}
{col.cell(row)}

); }