@jinaan/uikit 0.1.42 → 0.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -141,6 +141,14 @@ interface DataTableProps<T> {
   onRowClick?: (row: T) => void;
 
   defaultSort?: { id: string; dir: "asc" | "desc" };
+  /**
+   * Controlled sort state. Pass together with `onSortChange`: header caret
+   * clicks then report through the callback instead of mutating internal
+   * state, so an external control (e.g. a toolbar "Sort by" select) and the
+   * headers can drive one shared state.
+   */
+  sort?: { id: string; dir: "asc" | "desc" };
+  onSortChange?: (sort: { id: string; dir: "asc" | "desc" } | null) => void;
   pageSize?: number;
   pageSizeOptions?: number[];
 
@@ -223,6 +231,8 @@ export function DataTable<T>({
   rowActions,
   onRowClick,
   defaultSort,
+  sort: sortProp,
+  onSortChange,
   pageSize: initialPageSize = 25,
   pageSizeOptions = [10, 25, 50, 100],
   pagination = "auto",
@@ -240,9 +250,15 @@ export function DataTable<T>({
   // Column order and runtime pins are per-mount, like `hidden`.
   const [order, setOrder] = useState<string[] | null>(null);
   const [dragId, setDragId] = useState<string | null>(null);
-  const [sort, setSort] = useState<{ id: string; dir: "asc" | "desc" } | null>(
+  const [internalSort, setInternalSort] = useState<{ id: string; dir: "asc" | "desc" } | null>(
     defaultSort ?? null,
   );
+  // Controlled when the caller passes onSortChange; uncontrolled otherwise.
+  const sort = onSortChange ? sortProp ?? null : internalSort;
+  const setSort = (next: { id: string; dir: "asc" | "desc" } | null) => {
+    if (onSortChange) onSortChange(next);
+    else setInternalSort(next);
+  };
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(initialPageSize);
   const [selected, setSelected] = useState<Set<string>>(new Set());
@@ -323,7 +339,8 @@ export function DataTable<T>({
 
   const toggleSort = (col: Column<T>) => {
     if (!col.sortable) return;
-    setSort((prev) =>
+    const prev = sort;
+    setSort(
       prev?.id === col.id
         ? prev.dir === "asc"
           ? { id: col.id, dir: "desc" }