@yuno-payments/dashboard-design-system 0.0.138-beta.2 → 0.0.139

package/dist/components/organisms/data-table/data-table.d.ts

@@ -41,6 +41,15 @@ export interface DataTableProps<TData, TValue> {
      * @default false
      */
     manualSorting?: boolean;
+    /**
+     * Controlled sorting state (optional)
+     * If provided, component operates in controlled mode
+     */
+    sorting?: import('@tanstack/react-table').SortingState;
+    /**
+     * Callback when sorting changes (required for controlled mode)
+     */
+    onSortingChange?: (sorting: import('@tanstack/react-table').SortingState) => void;
     /**
      * Whether to enable column filtering
      * @default false
@@ -56,6 +65,11 @@ export interface DataTableProps<TData, TValue> {
      * @default 'onChange'
      */
     columnResizeMode?: ColumnResizeMode;
+    /**
+     * Whether to enable column pinning
+     * @default true
+     */
+    enableColumnPinning?: boolean;
     /**
      * Callback fired when a row is clicked
      */
@@ -81,6 +95,15 @@ export interface DataTableProps<TData, TValue> {
      * Unique key for persisting table state in localStorage
      */
     persistKey?: string;
+    /**
+     * Initial settings to load (from backend/profile)
+     * Takes precedence over localStorage
+     */
+    initialSettings?: import('./data-table.types').DataTableSettings;
+    /**
+     * Callback when table settings change (for syncing to backend)
+     */
+    onUpdate?: (settings: import('./data-table.types').DataTableSettings) => void;
 }
 /**
  * Advanced data table component built on TanStack Table.
@@ -103,4 +126,4 @@ export interface DataTableProps<TData, TValue> {
  * />
  * ```
  */
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, onRowSelectionChange, enableSorting, manualSorting, enableColumnFilters, enableColumnResizing, columnResizeMode, onRowClick, actions, height, rowHeight, className, persistKey, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/data-table/data-table.js

@@ -1,141 +1,165 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as L from "react";
-import { useReactTable as W } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { Table as _ } from "../../../vendor/shadcn/table.js";
-import { cn as u } from "../../../lib/utils.js";
-import { DataTableLoading as B } from "./components/states/data-table-loading.js";
-import { DataTableHeader as G } from "./components/data-table-header.js";
-import { DataTableBody as I } from "./components/data-table-body.js";
-import { useDataTableColumns as O } from "./hooks/use-data-table-columns.js";
-import { useDataTableState as U } from "./hooks/use-data-table-state.js";
-import { ROW_HEIGHT_DEFAULT as q } from "./utils/data-table-constants.js";
-import { getFilteredRowModel as J, getSortedRowModel as K, getCoreRowModel as Q } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
-import { Empty as X } from "../../molecules/empty/empty.js";
-function ae({
-  columns: a,
-  data: s,
-  isLoading: c = !1,
-  empty: g,
-  checkboxSelection: m = !1,
-  onRowSelectionChange: o,
-  enableSorting: p = !0,
-  manualSorting: C = !1,
-  enableColumnFilters: b = !1,
-  enableColumnResizing: i = !0,
-  columnResizeMode: h = "onChange",
-  onRowClick: x,
-  actions: n,
-  height: w,
-  rowHeight: d = q,
-  className: T,
-  persistKey: j
+import * as B from "react";
+import { useReactTable as I } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { Table as U } from "../../../vendor/shadcn/table.js";
+import { cn as x } from "../../../lib/utils.js";
+import { DataTableLoading as V } from "./components/states/data-table-loading.js";
+import { DataTableHeader as q } from "./components/data-table-header.js";
+import { DataTableBody as J } from "./components/data-table-body.js";
+import { useDataTableColumns as K } from "./hooks/use-data-table-columns.js";
+import { useDataTableState as Q } from "./hooks/use-data-table-state.js";
+import { ROW_HEIGHT_DEFAULT as X } from "./utils/data-table-constants.js";
+import { getFilteredRowModel as Y, getSortedRowModel as Z, getCoreRowModel as k } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { Empty as O } from "../../molecules/empty/empty.js";
+function fo({
+  columns: m,
+  data: c,
+  isLoading: C = !1,
+  empty: b,
+  checkboxSelection: d = !1,
+  onRowSelectionChange: l,
+  enableSorting: h = !0,
+  manualSorting: S = !1,
+  sorting: j,
+  onSortingChange: w,
+  enableColumnFilters: y = !1,
+  enableColumnResizing: s = !0,
+  columnResizeMode: R = "onChange",
+  enableColumnPinning: T = !0,
+  onRowClick: D,
+  actions: r,
+  height: F,
+  rowHeight: u = X,
+  className: M,
+  persistKey: v,
+  initialSettings: E,
+  onUpdate: N
 }) {
-  const y = O({
-    columns: a,
-    checkboxSelection: m,
-    actions: n
+  const H = K({
+    columns: m,
+    checkboxSelection: d,
+    actions: r
   }), {
-    sorting: R,
-    setSorting: S,
-    columnFilters: D,
-    setColumnFilters: F,
-    columnVisibility: M,
-    setColumnVisibility: E,
-    rowSelection: f,
-    setRowSelection: N,
-    columnPinning: v,
-    handleColumnPinningChange: P
-  } = U({
-    persistKey: j,
-    hasActions: !!n
-  }), t = W({
-    data: s,
-    columns: y,
-    getCoreRowModel: Q(),
-    enableColumnResizing: i,
-    columnResizeMode: h,
-    enableColumnPinning: !0,
+    sorting: f,
+    setSorting: g,
+    columnFilters: P,
+    setColumnFilters: W,
+    columnVisibility: _,
+    setColumnVisibility: $,
+    rowSelection: p,
+    setRowSelection: z,
+    columnPinning: A,
+    handleColumnPinningChange: G
+  } = Q({
+    persistKey: v,
+    hasActions: !!r,
+    externalSorting: j,
+    onExternalSortingChange: w,
+    initialSettings: E,
+    onUpdate: N
+  }), i = I({
+    data: c,
+    columns: H,
+    getCoreRowModel: k(),
+    enableColumnResizing: s,
+    columnResizeMode: R,
+    enableColumnPinning: T,
     defaultColumn: {
       enableSorting: !1,
       minSize: 50
     },
-    ...p && {
-      onSortingChange: S,
-      getSortedRowModel: K(),
-      manualSorting: C
+    ...h && {
+      onSortingChange: (o) => {
+        g(typeof o == "function" ? o(f) : o);
+      },
+      getSortedRowModel: Z(),
+      manualSorting: S
     },
-    ...b && {
-      onColumnFiltersChange: F,
-      getFilteredRowModel: J()
+    ...y && {
+      onColumnFiltersChange: W,
+      getFilteredRowModel: Y()
     },
-    onColumnVisibilityChange: E,
-    onRowSelectionChange: N,
-    onColumnPinningChange: P,
+    onColumnVisibilityChange: $,
+    onRowSelectionChange: z,
+    onColumnPinningChange: G,
     state: {
-      sorting: R,
-      columnFilters: D,
-      columnVisibility: M,
-      rowSelection: f,
-      columnPinning: v
+      sorting: f,
+      columnFilters: P,
+      columnVisibility: _,
+      rowSelection: p,
+      columnPinning: A
     }
   });
-  if (L.useEffect(() => {
-    if (o) {
-      const r = t.getFilteredSelectedRowModel().rows.map((l) => l.original);
-      o(r);
+  if (B.useEffect(() => {
+    if (l) {
+      const o = i.getFilteredSelectedRowModel().rows.map((t) => t.original);
+      l(o);
     }
-  }, [f, o, t]), c)
+  }, [p, l, i]), C)
     return /* @__PURE__ */ e.jsx(
-      B,
+      V,
       {
-        columns: a,
-        checkboxSelection: m,
-        actions: n,
-        rowHeight: d
+        columns: m,
+        checkboxSelection: d,
+        actions: r,
+        rowHeight: u
       }
     );
-  if (s.length === 0) {
-    const r = g || {}, {
-      title: l = "No results",
-      description: V = "No data available",
-      media: A,
-      actions: H
-    } = r;
+  if (c.length === 0) {
+    const o = b || {}, {
+      title: t = "No results",
+      description: a = "No data available",
+      media: n,
+      actions: L
+    } = o;
     return /* @__PURE__ */ e.jsx(
-      X,
+      O,
       {
-        media: A,
-        title: l,
-        description: V,
-        actions: H
+        media: n,
+        title: t,
+        description: a,
+        actions: L
       }
     );
   }
-  return /* @__PURE__ */ e.jsx("div", { className: u("space-y-4", T), children: /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ e.jsx("div", { className: x("space-y-4", M), children: /* @__PURE__ */ e.jsx(
     "div",
     {
       className: "rounded-md border overflow-x-auto",
-      style: { height: w || "auto" },
+      style: { height: F || "auto" },
       children: /* @__PURE__ */ e.jsxs(
-        _,
+        U,
         {
-          className: u("table-fixed"),
-          style: { width: "max-content", minWidth: "100%" },
+          className: x("table-fixed"),
           children: [
+            /* @__PURE__ */ e.jsx("colgroup", { children: i.getHeaderGroups()[0]?.headers.map((o) => {
+              const t = o.column.columnDef.enableResizing === !1, a = o.column.id === "_spacer", n = o.column.getSize();
+              return a ? /* @__PURE__ */ e.jsx("col", { style: { width: "auto" } }, o.id) : /* @__PURE__ */ e.jsx(
+                "col",
+                {
+                  style: {
+                    width: t ? `${n}px` : "auto",
+                    minWidth: t ? `${n}px` : void 0,
+                    maxWidth: t ? `${n}px` : void 0
+                  }
+                },
+                o.id
+              );
+            }) }),
             /* @__PURE__ */ e.jsx(
-              G,
+              q,
               {
-                table: t,
-                enableColumnResizing: i
+                table: i,
+                enableColumnResizing: s
               }
             ),
             /* @__PURE__ */ e.jsx(
-              I,
+              J,
               {
-                table: t,
-                enableColumnResizing: i,
-                onRowClick: x,
-                rowHeight: d
+                table: i,
+                enableColumnResizing: s,
+                onRowClick: D,
+                rowHeight: u
               }
             )
           ]
@@ -145,5 +169,5 @@ function ae({
   ) });
 }
 export {
-  ae as DataTable
+  fo as DataTable
 };

package/dist/components/organisms/data-table/data-table.types.d.ts

@@ -77,6 +77,23 @@ export type DataTableColumn<TData> = ColumnDef<TData> & {
     enableSorting?: boolean;
     enableHiding?: boolean;
 };
+/**
+ * Settings structure compatible with TableV2 format
+ * Used for initialSettings and onUpdate callback
+ */
+export interface DataTableSettings {
+    hide?: string[];
+    show?: string[];
+    width?: {
+        [key: string]: number;
+    };
+    pinnedColumns?: {
+        right: string[];
+        left: string[];
+    };
+    order?: string[];
+    sorting?: SortingState;
+}
 export interface DataTableProps<TData> {
     columns: DataTableColumn<TData>[];
     data: TData[];
@@ -97,12 +114,15 @@ export interface DataTableProps<TData> {
     enableColumnFilters?: boolean;
     columnFilters?: ColumnFiltersState;
     onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+    enableColumnPinning?: boolean;
     columnVisibility?: VisibilityState;
     onColumnVisibilityChange?: (visibility: VisibilityState) => void;
     onRowClick?: (row: TData) => void;
     height?: string | number;
     rowHeight?: number;
     persistKey?: string;
+    initialSettings?: DataTableSettings;
+    onUpdate?: (settings: DataTableSettings) => void;
     renderToolbar?: () => React.ReactNode;
     renderActions?: () => React.ReactNode;
     className?: string;

package/dist/components/organisms/data-table/hooks/use-data-table-columns.js

@@ -1,78 +1,82 @@
-import { j as n } from "../../../../_virtual/jsx-runtime.js";
+import { j as a } from "../../../../_virtual/jsx-runtime.js";
 import * as C from "react";
-import { Button as S } from "../../../atoms/button/button.js";
-import { DataTableColumnHeader as f } from "../components/column-header/data-table-column-header.js";
+import { Button as b } from "../../../atoms/button/button.js";
+import { DataTableColumnHeader as S } from "../components/column-header/data-table-column-header.js";
 import { isHeaderConfig as h } from "../utils/data-table-utils.js";
-import { ACTIONS_COLUMN_CONFIG as c } from "../utils/data-table-constants.js";
-import { Checkbox as u } from "../../../atoms/checkbox/checkbox.js";
-function P({
-  columns: g,
+import { COLUMN_MIN_SIZE_DEFAULT as p, CHECKBOX_COLUMN_CONFIG as c, ACTIONS_COLUMN_CONFIG as g } from "../utils/data-table-constants.js";
+import { Checkbox as z } from "../../../atoms/checkbox/checkbox.js";
+function _({
+  columns: f,
   checkboxSelection: d = !1,
-  actions: a
+  actions: l
 }) {
   return C.useMemo(() => {
-    let l = g.map((r) => {
-      const { header: e, enablePinning: i = !0, ...t } = r, o = t.size !== void 0 ? { ...t, minSize: t.minSize ?? t.size } : t;
+    let n = f.map((t) => {
+      const { header: e, enablePinning: i = !0, ...r } = t, s = r.size !== void 0 ? { ...r, minSize: r.minSize ?? p } : r;
       return typeof e == "string" ? {
-        ...o,
+        ...s,
         enablePinning: i,
-        header: ({ column: s, table: m }) => /* @__PURE__ */ n.jsx(
-          f,
+        header: ({ column: o, table: m }) => /* @__PURE__ */ a.jsx(
+          S,
           {
-            column: s,
+            column: o,
             table: m,
             title: e
           }
         )
       } : h(e) ? {
-        ...o,
+        ...s,
         enablePinning: i,
-        header: ({ column: s, table: m }) => /* @__PURE__ */ n.jsx(
-          f,
+        header: ({ column: o, table: m }) => /* @__PURE__ */ a.jsx(
+          S,
           {
-            column: s,
+            column: o,
             table: m,
             title: e.title,
             info: e.info,
             className: e.className
           }
         )
-      } : { ...o, header: e, enablePinning: i };
+      } : { ...s, header: e, enablePinning: i };
     });
-    if (d && (l = [{
+    if (d && (n = [{
       id: "select",
-      header: ({ table: e }) => /* @__PURE__ */ n.jsx(
-        u,
+      header: ({ table: e }) => /* @__PURE__ */ a.jsx(
+        z,
         {
           checked: e.getIsAllPageRowsSelected() || (e.getIsSomePageRowsSelected() ? "indeterminate" : !1),
-          onCheckedChange: (i) => e.toggleAllPageRowsSelected(!!i),
+          onChange: (i) => e.toggleAllPageRowsSelected(i.target.checked),
           "aria-label": "Select all"
         }
       ),
-      cell: ({ row: e }) => /* @__PURE__ */ n.jsx(
-        u,
+      cell: ({ row: e }) => /* @__PURE__ */ a.jsx(
+        z,
         {
           checked: e.getIsSelected(),
-          onCheckedChange: (i) => e.toggleSelected(!!i),
+          onChange: (i) => e.toggleSelected(i.target.checked),
           "aria-label": "Select row"
         }
       ),
       enableSorting: !1,
       enableHiding: !1,
-      enablePinning: !1
-    }, ...l]), a) {
-      const r = {
+      enablePinning: !1,
+      enableResizing: !1,
+      size: c.size,
+      minSize: c.minSize,
+      maxSize: c.maxSize
+    }, ...n]), l) {
+      const t = {
         id: "actions",
         header: "",
-        cell: ({ row: e }) => a.render ? /* @__PURE__ */ n.jsx(n.Fragment, { children: a.render(e.original) }) : /* @__PURE__ */ n.jsx(
-          S,
+        cell: ({ row: e }) => l.render ? /* @__PURE__ */ a.jsx(a.Fragment, { children: l.render(e.original) }) : /* @__PURE__ */ a.jsx(
+          b,
           {
             variant: "ghost",
             size: "icon",
             startIcon: "Eye",
             "aria-label": "Actions",
             onClick: (i) => {
-              i.stopPropagation(), a.onClick?.(e.original);
+              i.stopPropagation(), l.onClick?.(e.original);
             }
           }
         ),
@@ -80,15 +84,27 @@ function P({
         enableHiding: !1,
         enablePinning: !1,
         enableResizing: !1,
-        size: c.size,
-        minSize: c.minSize,
-        maxSize: c.maxSize
+        size: g.size,
+        minSize: g.minSize,
+        maxSize: g.maxSize
       };
-      l = [...l, r];
+      n = [...n, t];
     }
-    return l;
-  }, [d, a, g]);
+    const u = {
+      id: "_spacer",
+      header: "",
+      cell: () => null,
+      enableSorting: !1,
+      enableHiding: !1,
+      enablePinning: !1,
+      enableResizing: !1,
+      size: 100,
+      // Arbitrary value, colgroup will override with auto
+      minSize: 0
+    };
+    return n = [...n, u], n;
+  }, [d, l, f]);
 }
 export {
-  P as useDataTableColumns
+  _ as useDataTableColumns
 };

package/dist/components/organisms/data-table/hooks/use-data-table-state.d.ts

@@ -1,12 +1,17 @@
 import { ColumnFiltersState, SortingState, VisibilityState, RowSelectionState, ColumnPinningState } from '@tanstack/react-table';
+import { DataTableSettings } from '../data-table.types';
 import * as React from "react";
 interface UseDataTableStateProps {
     persistKey?: string;
     hasActions?: boolean;
+    externalSorting?: SortingState;
+    onExternalSortingChange?: (sorting: SortingState) => void;
+    initialSettings?: DataTableSettings;
+    onUpdate?: (settings: DataTableSettings) => void;
 }
-export declare function useDataTableState({ persistKey, hasActions, }: UseDataTableStateProps): {
+export declare function useDataTableState({ persistKey, hasActions, externalSorting, onExternalSortingChange, initialSettings, onUpdate, }: UseDataTableStateProps): {
     sorting: SortingState;
-    setSorting: React.Dispatch<React.SetStateAction<SortingState>>;
+    setSorting: (sorting: SortingState) => void;
     columnFilters: ColumnFiltersState;
     setColumnFilters: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
     columnVisibility: VisibilityState;