@kong-ui-public/table-data-grid 0.4.1 → 0.4.2-pr.3761.40358052a.0

package/README.md

@@ -3,8 +3,8 @@
 Reusable Vue wrapper around AG Grid for Kong table data grids.
 
 This package currently supports AG Grid infinite row loading with a cursor-first
-fetcher contract, basic column definitions, empty/error presentation states, and
-state lifecycle emits.
+fetcher contract, basic column definitions, single-column sorting, empty/error
+presentation states, and state lifecycle emits.
 
 ## Peer Dependencies
 
@@ -115,8 +115,9 @@ const handleState = (payload: TableDataGridStatePayload) => {
 | `headers` | `Array<TableDataGridHeader<Row>>` | Yes | - | Basic column definitions mapped to AG Grid columns. |
 | `fetcher` | `TableDataGridFetcher<Row>` | Yes | - | Async row loader called by the AG Grid infinite datasource. |
 | `error` | `boolean` | No | `false` | Host-controlled visible error state. Internal fetch failures emit state but do not render error UI unless this prop is true. |
-| `pageSize` | `number` | No | `25` | AG Grid cache block size and fetcher request size. |
+| `pageSize` | `number` | No | `25` | AG Grid cache block size and fetcher request size. `tableConfig.pageSize` wins when present. |
 | `refreshKey` | `string \| number \| boolean` | No | - | Parent invalidation signal that rebuilds the datasource from the beginning. |
+| `tableConfig` | `TableDataGridConfig` | No | - | Host-controlled current sort and page size. Restores a previously-chosen sort on mount, or moves it after mount, without a click. Uncontrolled (internal state) when omitted. |
 
 ## Fetcher Contract
 
@@ -128,6 +129,7 @@ type TableDataGridInfiniteFetcherParams = {
   mode: 'infinite'
   pageSize: number
   cursor?: unknown
+  sort?: TableDataGridSort
 }
 
 type TableDataGridFetcherResult<Row> = {
@@ -145,6 +147,12 @@ type TableDataGridFetcher<Row> = (
 `cursor` is an opaque token returned by the previous response. The first request
 uses `cursor: undefined`; later requests receive the previous response cursor.
 
+`sort` carries the current single-column sort, with `sortColumnKey` and
+`sortColumnOrder` left `undefined` when nothing is sorted. A sort change is a
+request-context change like `refreshKey` or `pageSize`: it rebuilds the
+datasource and restarts the cursor chain from the beginning, because a cursor
+produced under one sort order is not valid under another.
+
 AG Grid range details are datasource internals. Consumers should not depend on,
 or return, datasource request positions or AG Grid row-count callback values in
 the public fetcher contract.
@@ -213,6 +221,36 @@ should opt out of the default flexible fill behavior.
 | `minWidth` | `number` | No | Minimum AG Grid column width in pixels. Columns with only `minWidth` still fill available width by default. |
 | `maxWidth` | `number` | No | Maximum AG Grid column width in pixels. Columns with `maxWidth` do not receive default flex sizing. |
 | `disableRowClick` | `boolean` | No | Suppresses `row:click` for clicks landing in this column's cells, e.g. an actions column. `cell:click` still fires. |
+| `sortable` | `boolean` | No | Enables sorting on this column via AG Grid's built-in header sort control. Only one column can be sorted at a time. |
+| `showSortIcon` | `boolean` | No | Shows the unsorted sort icon on this column even when it isn't the active sort, instead of only on hover or once sorted. Only relevant when `sortable` is true. |
+
+## Sorting
+
+`TableDataGrid` supports sorting by a single column at a time. Mark a column
+sortable with `header.sortable`, and AG Grid renders its built-in sort icon
+and handles the click. Sorting a second column replaces the first; AG Grid's
+shift-click multi-sort gesture is disabled.
+
+```vue
+<TableDataGrid
+  :fetcher="fetchRows"
+  :headers="[
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'status', label: 'Status', sortable: true },
+  ]"
+  :table-config="tableConfig"
+  @sort="handleSort"
+  @update:table-config="tableConfig = $event"
+/>
+```
+
+The current sort lives in `tableConfig` (`sortColumnKey`, `sortColumnOrder`),
+alongside `pageSize`. Pass `tableConfig` to restore a previously-chosen sort
+on mount, or to move the sort after mount without a click; omit it to let the
+component own the sort internally. A sort change emits `sort` (the narrower,
+sort-only payload) and then `update:tableConfig` (the full current config),
+and rebuilds the infinite datasource from the beginning — a cursor produced
+under one sort order is not valid under another.
 
 ## Custom Cell Content
 
@@ -249,6 +287,8 @@ Columns without a matching slot render their raw `rowValue`.
 | `state` | `{ state: 'loading' \| 'success' \| 'error', hasData: boolean }` | Internal fetch lifecycle changes after the datasource starts requesting rows. |
 | `row:click` | `(row: TableDataGridRowClickPayload<Row>, event: RowClickedEvent<Row>)` | A row is clicked, unless the click landed in a `disableRowClick` column. |
 | `cell:click` | `TableDataGridCellClickPayload<Row>` | Any cell is clicked, including cells in `disableRowClick` columns. |
+| `sort` | `TableDataGridSort` | The current single-column sort changes. Fires before `update:tableConfig`. |
+| `update:tableConfig` | `TableDataGridConfig` | A meaningful change to the current table configuration (sort or page size). |
 
 ## Slots
 
@@ -272,3 +312,6 @@ Columns without a matching slot render their raw `rowValue`.
 - `TableDataGridFetcherResult`
 - `TableDataGridFetcher`
 - `TableDataGridReadyPayload`
+- `TableDataGridSortDirection`
+- `TableDataGridSort`
+- `TableDataGridConfig`

package/dist/style.css

@@ -1 +1 @@
-.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content{display:block;min-width:0;width:100%}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-e14d8346]{border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;width:100%}.table-data-grid-grid[data-v-e14d8346]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-foreground-color: var(--kui-color-text, #0d0e14);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-weight: var(--kui-font-weight-semibold, 600);--ag-header-text-color: var(--kui-color-text-neutral, #6c7489);--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 auto;min-height:0;width:100%}.ag-cell{align-items:center;display:flex;min-width:0}.ag-cell-wrapper,.ag-cell-value{min-width:0;width:100%}
+.table-data-grid-cell-renderer,.table-data-grid-cell-tooltip,.table-data-grid-cell-content{display:block;min-width:0;width:100%}.table-data-grid-cell-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kong-ui-public-table-data-grid[data-v-d8328fe5]{border:none;border-radius:4px;border-radius:var(--kui-border-radius-20, 4px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;width:100%}.table-data-grid-grid[data-v-d8328fe5]{--ag-background-color: var(--kui-color-background, #ffffff);--ag-border-color: var(--kui-color-border, #e0e4ea);--ag-foreground-color: var(--kui-color-text, #0d0e14);--ag-header-background-color: var(--kui-color-background, #ffffff);--ag-header-column-border: 1px solid var(--kui-color-border, #e0e4ea);--ag-header-column-border-height: 30%;--ag-header-column-resize-handle-color: transparent;--ag-header-font-weight: var(--kui-font-weight-semibold, 600);--ag-header-text-color: var(--kui-color-text-neutral, #6c7489);--ag-wrapper-border: none;--ag-wrapper-border-radius: 0;flex:1 1 auto;min-height:0;width:100%}.ag-cell{align-items:center;display:flex;min-width:0}.ag-cell-wrapper,.ag-cell-value{min-width:0;width:100%}

package/dist/table-data-grid.es.js

@@ -1,428 +1,517 @@
-import { computed as g, watch as T, ref as I, shallowRef as N, readonly as G, defineComponent as L, onMounted as $, onUnmounted as P, nextTick as j, resolveComponent as U, openBlock as R, createBlock as V, resolveDynamicComponent as q, createElementBlock as x, createVNode as O, withCtx as H, createElementVNode as Q, toDisplayString as J, useSlots as X, toRef as A, renderSlot as K, unref as C } from "vue";
-import { AgGridVue as Y } from "ag-grid-vue3";
-import { ModuleRegistry as Z, AllCommunityModule as ee, InfiniteRowModelModule as te, themeQuartz as ae } from "ag-grid-community";
-import { createI18n as oe, i18nTComponent as le } from "@kong-ui-public/i18n";
-var F = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(F || {});
-const ne = (e) => !!e?.length;
-function re(e, c, t, a = ne) {
-  const r = g(() => a(e.value)), i = g(() => {
-    const y = e.value !== void 0, o = c.value !== void 0 && c.value !== null;
-    return t.value ? "LOADING" : r.value ? "SUCCESS" : o ? "ERROR" : y ? "SUCCESS" : "PENDING";
+import { computed as S, watch as B, ref as E, shallowRef as G, readonly as x, defineComponent as $, onMounted as j, onUnmounted as H, nextTick as Q, resolveComponent as q, openBlock as I, createBlock as P, resolveDynamicComponent as J, createElementBlock as N, createVNode as L, withCtx as X, createElementVNode as Y, toDisplayString as Z, useSlots as ee, toRef as O, renderSlot as V, unref as y } from "vue";
+import { AgGridVue as te } from "ag-grid-vue3";
+import { ModuleRegistry as oe, AllCommunityModule as ae, InfiniteRowModelModule as le, themeQuartz as re } from "ag-grid-community";
+import { createI18n as ne, i18nTComponent as se } from "@kong-ui-public/i18n";
+var T = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(T || {});
+const ie = (e) => !!e?.length;
+function ce(e, r, t, l = ie) {
+  const n = S(() => l(e.value)), i = S(() => {
+    const f = e.value !== void 0, a = r.value !== void 0 && r.value !== null;
+    return t.value ? "LOADING" : n.value ? "SUCCESS" : a ? "ERROR" : f ? "SUCCESS" : "PENDING";
   });
   return {
-    fetchState: F,
-    hasData: r,
+    fetchState: T,
+    hasData: n,
     state: i
   };
 }
-const se = ({
+const ue = ({
   emitState: e,
-  fetchLifecycleState: c,
+  fetchLifecycleState: r,
   hasData: t
 }) => {
-  T(
+  B(
     () => ({
       hasData: t.value,
-      state: c.value
+      state: r.value
     }),
-    ({ hasData: a, state: r }) => {
-      if (r !== F.PENDING) {
-        if (r === F.LOADING) {
+    ({ hasData: l, state: n }) => {
+      if (n !== T.PENDING) {
+        if (n === T.LOADING) {
           e({
-            hasData: a,
+            hasData: l,
             state: "loading"
           });
           return;
         }
-        if (r === F.ERROR) {
+        if (n === T.ERROR) {
           e({
-            hasData: a,
+            hasData: l,
             state: "error"
           });
           return;
         }
         e({
-          hasData: a,
+          hasData: l,
           state: "success"
         });
       }
     }
   );
-}, ce = ({ startRow: e, endRow: c }) => {
-  const t = c - e;
+}, de = ({ startRow: e, endRow: r }) => {
+  const t = r - e;
   return {
     blockIndex: t > 0 ? Math.floor(e / t) : 0,
     pageSize: t
   };
-}, ie = ({
+}, me = ({
   startRow: e,
-  rowsLength: c,
+  rowsLength: r,
   pageSize: t,
-  total: a,
-  hasMore: r
+  total: l,
+  hasMore: n
 }) => {
-  if (typeof a == "number")
-    return a;
-  if (r !== !0 && (r === !1 || c < t))
-    return e + c;
-}, ue = ({
+  if (typeof l == "number")
+    return l;
+  if (n !== !0 && (n === !1 || r < t))
+    return e + r;
+}, fe = ({
   fetcher: e,
-  resetKey: c
+  resetKey: r,
+  sort: t
 }) => {
-  const t = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), r = I(0), i = N(), v = N(), y = N(), o = I(0), u = I(!1), m = (l) => l === r.value, k = () => {
-    u.value = o.value > 0;
-  }, E = () => {
-    y.value = void 0, o.value += 1, k();
+  const l = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), i = E(0), o = G(), f = G(), a = G(), s = E(0), v = E(!1), g = (c) => c === i.value, k = () => {
+    v.value = s.value > 0;
+  }, D = () => {
+    a.value = void 0, s.value += 1, k();
   }, w = () => {
-    o.value = Math.max(0, o.value - 1), k();
-  }, D = (l) => {
-    const s = a.get(l);
-    if (s)
-      return s;
+    s.value = Math.max(0, s.value - 1), k();
+  }, C = (c) => {
+    const u = n.get(c);
+    if (u)
+      return u;
     let d;
     const h = {
-      promise: new Promise((f) => {
-        d = f;
+      promise: new Promise((m) => {
+        d = m;
       }),
-      resolve: (f) => d(f)
+      resolve: (m) => d(m)
     };
-    return a.set(l, h), h;
-  }, n = (l, s) => {
-    s.resolve(!1), a.get(l) === s && a.delete(l);
-  }, b = async ({
-    blockIndex: l,
-    currentBlockCompletion: s,
+    return n.set(c, h), h;
+  }, b = (c, u) => {
+    u.resolve(!1), n.get(c) === u && n.delete(c);
+  }, K = async ({
+    blockIndex: c,
+    currentBlockCompletion: u,
     datasourceId: d
   }) => {
-    if (l === 0)
+    if (c === 0)
       return "ready";
-    const h = a.get(l - 1);
+    const h = n.get(c - 1);
     if (!h)
-      return n(l, s), "failed";
-    const f = await h.promise;
-    return m(d) ? f ? "ready" : (n(l, s), "failed") : (n(l, s), "stale");
-  }, S = ({
-    blockIndex: l,
-    currentBlockCompletion: s,
+      return b(c, u), "failed";
+    const m = await h.promise;
+    return g(d) ? m ? "ready" : (b(c, u), "failed") : (b(c, u), "stale");
+  }, M = ({
+    blockIndex: c,
+    currentBlockCompletion: u,
     getRowsParams: d,
     pageSize: h,
-    result: f
+    result: m
   }) => {
-    f.cursor !== void 0 && t.set(l, f.cursor), d.successCallback(f.data, ie({
+    m.cursor !== void 0 && l.set(c, m.cursor), d.successCallback(m.data, me({
       startRow: d.startRow,
-      rowsLength: f.data.length,
+      rowsLength: m.data.length,
       pageSize: h,
-      total: f.total,
-      hasMore: f.hasMore
-    })), d.startRow === 0 && (v.value = f.data), s.resolve(!0);
+      total: m.total,
+      hasMore: m.hasMore
+    })), d.startRow === 0 && (f.value = m.data), u.resolve(!0);
   }, _ = ({
-    blockIndex: l,
-    currentBlockCompletion: s,
+    blockIndex: c,
+    currentBlockCompletion: u,
     fetchError: d,
     getRowsParams: h
   }) => {
-    y.value = d, h.failCallback(), n(l, s);
-  }, B = () => {
-    const l = r.value + 1;
-    return r.value = l, t.clear(), a.clear(), v.value = void 0, y.value = void 0, o.value = 0, k(), {
-      async getRows(s) {
+    a.value = d, h.failCallback(), b(c, u);
+  }, A = () => {
+    const c = i.value + 1;
+    return i.value = c, l.clear(), n.clear(), f.value = void 0, a.value = void 0, s.value = 0, k(), {
+      async getRows(u) {
         const {
           blockIndex: d,
           pageSize: h
-        } = ce({
-          startRow: s.startRow,
-          endRow: s.endRow
-        }), f = D(d), z = await b({
+        } = de({
+          startRow: u.startRow,
+          endRow: u.endRow
+        }), m = C(d);
+        if (await K({
           blockIndex: d,
-          currentBlockCompletion: f,
-          datasourceId: l
-        });
-        if (z !== "ready") {
-          z === "failed" && s.failCallback();
+          currentBlockCompletion: m,
+          datasourceId: c
+        }) !== "ready") {
+          u.failCallback();
           return;
         }
-        E();
+        g(c) && D();
         try {
-          const M = d > 0 ? t.get(d - 1) : void 0, W = await e({
+          const R = d > 0 ? l.get(d - 1) : void 0, z = await e({
             mode: "infinite",
             pageSize: h,
-            cursor: M
+            cursor: R,
+            // Always read the latest sort, not a stale one.
+            sort: t?.value
           });
-          if (!m(l)) {
-            n(d, f);
+          if (!g(c)) {
+            u.failCallback(), b(d, m);
             return;
           }
-          S({
+          M({
             blockIndex: d,
-            currentBlockCompletion: f,
-            getRowsParams: s,
+            currentBlockCompletion: m,
+            getRowsParams: u,
             pageSize: h,
-            result: W
+            result: z
           });
-        } catch (M) {
-          if (!m(l)) {
-            n(d, f);
+        } catch (R) {
+          if (!g(c)) {
+            u.failCallback(), b(d, m);
             return;
           }
           _({
             blockIndex: d,
-            currentBlockCompletion: f,
-            fetchError: M,
-            getRowsParams: s
+            currentBlockCompletion: m,
+            fetchError: R,
+            getRowsParams: u
           });
         } finally {
-          m(l) && w();
+          g(c) && w();
         }
       }
     };
-  }, p = () => {
-    i.value = B();
+  }, F = () => {
+    o.value = A();
   };
-  return T(
-    () => c?.value,
+  return B(
+    () => r?.value,
     () => {
-      p();
+      F();
     },
     { immediate: !0 }
   ), {
-    datasource: G(i),
-    data: G(v),
-    error: G(y),
-    isFetching: G(u)
+    datasource: x(o),
+    data: x(f),
+    error: x(a),
+    isFetching: x(v)
   };
-}, de = {
+}, ve = {
   key: 1,
   class: "table-data-grid-cell-renderer"
-}, fe = /* @__PURE__ */ L({
+}, Ce = /* @__PURE__ */ $({
   name: "TableDataGridCellRenderer",
   __name: "TableDataGridCellRenderer",
   props: {
     params: {}
   },
-  setup(e, { expose: c }) {
-    const t = N(e.params), a = I(null), r = I(!1), i = g(() => t.value.valueFormatted ?? String(t.value.value ?? "")), v = g(() => {
-      const n = t.value.colDef?.colId;
-      return n ? t.value.context?.cells?.slots?.[n] : void 0;
-    }), y = g(() => ({
+  setup(e, { expose: r }) {
+    const t = G(e.params), l = E(null), n = E(!1), i = S(() => t.value.valueFormatted ?? String(t.value.value ?? "")), o = S(() => {
+      const C = t.value.colDef?.colId;
+      return C ? t.value.context?.cells?.slots?.[C] : void 0;
+    }), f = S(() => ({
       column: t.value.headerDef,
       refreshCell: () => {
-        const n = t.value.node;
-        n && t.value.api.refreshCells({ force: !0, rowNodes: [n] });
+        const C = t.value.node;
+        C && t.value.api.refreshCells({ force: !0, rowNodes: [C] });
       },
       row: t.value.data ?? {},
       rowIndex: t.value.node?.rowIndex ?? 0,
       rowValue: t.value.value,
       selected: t.value.node?.isSelected() ?? !1
-    })), o = () => v.value?.(y.value);
-    let u, m, k = !1;
-    const E = () => {
-      const n = a.value;
-      r.value = !!n && n.scrollWidth > n.clientWidth;
-    }, w = () => {
-      k || (m !== void 0 && cancelAnimationFrame(m), m = requestAnimationFrame(() => {
-        m = void 0, E();
+    })), a = () => o.value?.(f.value);
+    let s, v, g = !1;
+    const k = () => {
+      const C = l.value;
+      n.value = !!C && C.scrollWidth > C.clientWidth;
+    }, D = () => {
+      g || (v !== void 0 && cancelAnimationFrame(v), v = requestAnimationFrame(() => {
+        v = void 0, k();
       }));
-    }, D = (n) => {
-      if (u?.disconnect(), n) {
-        u?.observe(n);
-        const b = n.closest(".ag-cell");
-        b && u?.observe(b);
+    }, w = (C) => {
+      if (s?.disconnect(), C) {
+        s?.observe(C);
+        const b = C.closest(".ag-cell");
+        b && s?.observe(b);
       }
-      w();
+      D();
     };
-    return $(() => {
-      u = new ResizeObserver(w), D(a.value);
-    }), T(a, D, { flush: "post" }), P(() => {
-      k = !0, u?.disconnect(), m !== void 0 && cancelAnimationFrame(m);
-    }), c({
-      refresh(n) {
-        return t.value = n, j(w), !0;
+    return j(() => {
+      s = new ResizeObserver(D), w(l.value);
+    }), B(l, w, { flush: "post" }), H(() => {
+      g = !0, s?.disconnect(), v !== void 0 && cancelAnimationFrame(v);
+    }), r({
+      refresh(C) {
+        return t.value = C, Q(D), !0;
       }
-    }), (n, b) => {
-      const S = U("KTooltip");
-      return v.value ? (R(), V(q(o), { key: 0 })) : (R(), x("span", de, [
-        O(S, {
+    }), (C, b) => {
+      const K = q("KTooltip");
+      return o.value ? (I(), P(J(a), { key: 0 })) : (I(), N("span", ve, [
+        L(K, {
           class: "table-data-grid-cell-tooltip",
-          disabled: !r.value,
+          disabled: !n.value,
           "kpop-attributes": { popoverDelay: 400 },
           "max-width": "300",
           placement: "bottom-start",
           target: "body",
           text: i.value
         }, {
-          default: H(() => [
-            Q("span", {
+          default: X(() => [
+            Y("span", {
               ref_key: "contentElement",
-              ref: a,
+              ref: l,
               class: "table-data-grid-cell-content"
-            }, J(i.value), 513)
+            }, Z(i.value), 513)
           ]),
           _: 1
         }, 8, ["disabled", "text"])
       ]));
     };
   }
-}), me = ({
+}), pe = ({
+  headers: e,
+  slots: r,
+  initialSort: t
+}) => {
+  const l = S(() => ({
+    cells: { slots: r }
+  })), n = (o) => {
+    const f = t?.sortColumnKey === o.key;
+    return {
+      colId: o.key,
+      // Columns with no explicit width constraint share remaining space equally.
+      flex: !o.width && !o.maxWidth ? 1 : void 0,
+      headerName: o.label,
+      maxWidth: o.maxWidth,
+      minWidth: o.minWidth,
+      sortable: o.sortable ?? !1,
+      unSortIcon: o.showSortIcon,
+      ...f ? { initialSort: t?.sortColumnOrder, initialSortIndex: 0 } : {},
+      valueGetter: (a) => a.data?.[o.key],
+      width: o.width,
+      cellRenderer: Ce,
+      // custom params passed to the cell renderer.
+      cellRendererParams: { headerDef: o }
+    };
+  };
+  return {
+    columnDefs: S(() => e.value.map(n)),
+    gridContext: l
+  };
+}, U = ({
+  config: e,
+  headers: r,
+  pageSize: t
+}) => {
+  const l = new Set(r.filter((i) => i.sortable).map((i) => i.key)), n = e?.sortColumnKey && l.has(e.sortColumnKey) ? e.sortColumnKey : void 0;
+  return {
+    sortColumnKey: n,
+    sortColumnOrder: n ? e?.sortColumnOrder : void 0,
+    pageSize: e?.pageSize ?? t
+  };
+}, W = (e, r) => e.sortColumnKey === r.sortColumnKey && e.sortColumnOrder === r.sortColumnOrder && e.pageSize === r.pageSize, ge = ({
   headers: e,
-  slots: c
+  pageSize: r,
+  tableConfig: t,
+  emitTableConfigUpdate: l,
+  onExternalConfigChange: n
 }) => {
-  const t = g(() => ({
-    cells: { slots: c }
-  })), a = (i) => ({
-    colId: i.key,
-    // Columns with no explicit width constraint share remaining space equally.
-    flex: !i.width && !i.maxWidth ? 1 : void 0,
-    headerName: i.label,
-    maxWidth: i.maxWidth,
-    minWidth: i.minWidth,
-    valueGetter: (v) => v.data?.[i.key],
-    width: i.width,
-    cellRenderer: fe,
-    // custom params passed to the cell renderer.
-    cellRendererParams: { headerDef: i }
+  const i = S(() => t.value ? U({ config: t.value, headers: e.value, pageSize: r.value }) : void 0), o = E(
+    i.value ?? U({ config: void 0, headers: e.value, pageSize: r.value })
+  );
+  B(i, (v) => {
+    v && !W(v, o.value) && (o.value = v, n?.(v));
   });
+  const f = (v) => {
+    const g = U({
+      config: { ...o.value, ...v },
+      headers: e.value,
+      pageSize: r.value
+    });
+    W(g, o.value) || (o.value = g, l(g));
+  }, a = S(() => ({
+    sortColumnKey: o.value.sortColumnKey,
+    sortColumnOrder: o.value.sortColumnOrder
+  })), s = S(() => t.value?.pageSize ?? r.value);
   return {
-    columnDefs: g(() => e.value.map(a)),
-    gridContext: t
+    activeTableConfig: x(o),
+    activeSort: a,
+    activePageSize: s,
+    patchTableConfig: f
   };
-}, ve = ({
+}, he = ({
   cellClick: e,
-  headers: c,
+  headers: r,
   rowClick: t
 }) => {
-  const a = g(() => new Set(
-    c.value.filter((o) => o.disableRowClick).map((o) => o.key)
-  )), r = (o) => {
-    const u = o.event?.target;
-    return u instanceof Element ? u.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
-  }, i = (o) => {
-    const u = r(o);
-    return !!(u && a.value.has(u));
+  const l = S(() => new Set(
+    r.value.filter((a) => a.disableRowClick).map((a) => a.key)
+  )), n = (a) => {
+    const s = a.event?.target;
+    return s instanceof Element ? s.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
+  }, i = (a) => {
+    const s = n(a);
+    return !!(s && l.value.has(s));
   };
   return {
-    onCellClick: (o) => {
-      const u = o.colDef.colId;
-      !o.data || !u || e({
-        columnKey: u,
-        row: o.data,
-        value: o.value
+    onCellClick: (a) => {
+      const s = a.colDef.colId;
+      !a.data || !s || e({
+        columnKey: s,
+        row: a.data,
+        value: a.value
       });
     },
-    onRowClick: (o) => {
-      o.data && !i(o) && t(o.data, o);
+    onRowClick: (a) => {
+      a.data && !i(a) && t(a.data, a);
     }
   };
-}, pe = { title: "No Data", message: "There is no data to display." }, he = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, Ce = {
-  emptyState: pe,
-  errorState: he
+}, ye = ({
+  activeSort: e,
+  emitSort: r,
+  patchTableConfig: t
+}) => {
+  const l = (i, o) => {
+    i.applyColumnState({
+      state: o.sortColumnKey ? [{ colId: o.sortColumnKey, sort: o.sortColumnOrder ?? null, sortIndex: 0 }] : [],
+      defaultState: { sort: null, sortIndex: null }
+    });
+  };
+  return { onSortChanged: (i) => {
+    const o = i.api.getColumnState().filter((s) => s.sort).sort((s, v) => (s.sortIndex ?? 0) - (v.sortIndex ?? 0)), f = o[o.length - 1], a = f ? { sortColumnKey: f.colId, sortColumnOrder: f.sort } : { sortColumnKey: void 0, sortColumnOrder: void 0 };
+    a.sortColumnKey === e.value.sortColumnKey && a.sortColumnOrder === e.value.sortColumnOrder || (r(a), t(a), o.length > 1 && l(i.api, a));
+  }, applySortToGrid: l };
+}, Se = { title: "No Data", message: "There is no data to display." }, be = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, ke = {
+  emptyState: Se,
+  errorState: be
 };
-function ye() {
-  const e = oe("en-us", Ce);
+function De() {
+  const e = ne("en-us", ke);
   return {
     i18n: e,
-    i18nT: le(e)
+    i18nT: se(e)
     // Translation component <i18n-t>
   };
 }
-const ge = {
+const we = {
   class: "kong-ui-public-table-data-grid",
   "data-testid": "table-data-grid"
-}, ke = {
+}, Re = {
   key: 0,
   class: "table-error-state",
   "data-testid": "table-error-state"
-}, be = {
+}, Ie = {
   key: 1,
   class: "table-empty-state",
   "data-testid": "table-empty-state"
-}, we = /* @__PURE__ */ L({
+}, Ee = /* @__PURE__ */ $({
   __name: "TableDataGrid",
   props: {
     headers: {},
     fetcher: { type: Function },
     error: { type: Boolean, default: !1 },
     pageSize: { default: 25 },
-    refreshKey: { type: [String, Number, Boolean] }
+    refreshKey: { type: [String, Number, Boolean] },
+    tableConfig: {}
   },
-  emits: ["grid:ready", "state", "row:click", "cell:click"],
-  setup(e, { emit: c }) {
-    Z.registerModules([ee, te]);
-    const t = c, { i18n: { t: a } } = ye(), r = X(), { columnDefs: i, gridContext: v } = me({
-      headers: A(() => e.headers),
-      slots: r
-    }), { onCellClick: y, onRowClick: o } = ve({
+  emits: ["grid:ready", "state", "row:click", "cell:click", "sort", "update:tableConfig"],
+  setup(e, { emit: r }) {
+    oe.registerModules([ae, le]);
+    const t = r, { i18n: { t: l } } = De(), n = ee(), i = G(), { activeTableConfig: o, activeSort: f, activePageSize: a, patchTableConfig: s } = ge({
+      headers: O(() => e.headers),
+      pageSize: O(() => e.pageSize),
+      tableConfig: O(() => e.tableConfig),
+      emitTableConfigUpdate: (p) => t("update:tableConfig", p),
+      onExternalConfigChange: (p) => {
+        i.value && g(i.value, p);
+      }
+    }), { onSortChanged: v, applySortToGrid: g } = ye({
+      activeSort: f,
+      emitSort: (p) => t("sort", p),
+      patchTableConfig: s
+    }), { columnDefs: k, gridContext: D } = pe({
+      headers: O(() => e.headers),
+      slots: n,
+      initialSort: f.value
+    }), { onCellClick: w, onRowClick: C } = he({
       cellClick: (p) => t("cell:click", p),
-      headers: A(() => e.headers),
-      rowClick: (p, l) => t("row:click", p, l)
-    }), u = {
+      headers: O(() => e.headers),
+      rowClick: (p, R) => t("row:click", p, R)
+    }), b = {
       resizable: !1,
       sortable: !1,
       suppressMovable: !0
-    }, m = g(() => [e.fetcher, e.pageSize, e.refreshKey]), {
-      data: k,
-      datasource: E,
-      error: w,
-      isFetching: D
-    } = ue({
+    }, K = S(() => [
+      e.fetcher,
+      a.value,
+      e.refreshKey,
+      o.value.sortColumnKey,
+      o.value.sortColumnOrder
+    ]), {
+      data: M,
+      datasource: _,
+      error: A,
+      isFetching: F
+    } = fe({
       fetcher: e.fetcher,
-      resetKey: m
+      resetKey: K,
+      sort: f
     }), {
-      fetchState: n,
-      hasData: b,
-      state: S
-    } = re(k, w, D), _ = g(() => S.value === n.SUCCESS && !b.value);
-    se({
+      fetchState: c,
+      hasData: u,
+      state: d
+    } = ce(M, A, F), h = S(() => d.value === c.SUCCESS && !u.value);
+    ue({
       emitState: (p) => t("state", p),
-      fetchLifecycleState: S,
-      hasData: b
+      fetchLifecycleState: d,
+      hasData: u
     });
-    const B = (p) => {
-      t("grid:ready", p.api);
+    const m = (p) => {
+      i.value = p.api, t("grid:ready", p.api);
     };
-    return (p, l) => {
-      const s = U("KEmptyState");
-      return R(), x("div", ge, [
-        e.error ? (R(), x("div", ke, [
-          K(p.$slots, "error-state", {}, () => [
-            O(s, {
+    return (p, R) => {
+      const z = q("KEmptyState");
+      return I(), N("div", we, [
+        e.error ? (I(), N("div", Re, [
+          V(p.$slots, "error-state", {}, () => [
+            L(z, {
               "icon-variant": "error",
-              message: C(a)("errorState.message"),
-              title: C(a)("errorState.title")
+              message: y(l)("errorState.message"),
+              title: y(l)("errorState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : _.value ? (R(), x("div", be, [
-          K(p.$slots, "empty-state", {}, () => [
-            O(s, {
-              message: C(a)("emptyState.message"),
-              title: C(a)("emptyState.title")
+        ])) : h.value ? (I(), N("div", Ie, [
+          V(p.$slots, "empty-state", {}, () => [
+            L(z, {
+              message: y(l)("emptyState.message"),
+              title: y(l)("emptyState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : (R(), V(C(Y), {
+        ])) : (I(), P(y(te), {
           key: 2,
-          "cache-block-size": e.pageSize,
+          "cache-block-size": y(a),
           class: "table-data-grid-grid",
-          "column-defs": C(i),
-          context: C(v),
-          datasource: C(E),
-          "default-col-def": u,
+          "column-defs": y(k),
+          context: y(D),
+          datasource: y(_),
+          "default-col-def": b,
           "infinite-initial-row-count": 1,
-          loading: C(D),
+          loading: y(F),
           "row-model-type": "infinite",
           "suppress-cell-focus": !0,
-          theme: C(ae),
-          onCellClicked: C(y),
-          onGridReady: B,
-          onRowClicked: C(o)
-        }, null, 8, ["cache-block-size", "column-defs", "context", "datasource", "loading", "theme", "onCellClicked", "onRowClicked"]))
+          "suppress-multi-sort": !0,
+          theme: y(re),
+          onCellClicked: y(w),
+          onGridReady: m,
+          onRowClicked: y(C),
+          onSortChanged: y(v)
+        }, null, 8, ["cache-block-size", "column-defs", "context", "datasource", "loading", "theme", "onCellClicked", "onRowClicked", "onSortChanged"]))
       ]);
     };
   }
-}), De = (e, c) => {
+}), Ke = (e, r) => {
   const t = e.__vccOpts || e;
-  for (const [a, r] of c)
-    t[a] = r;
+  for (const [l, n] of r)
+    t[l] = n;
   return t;
-}, Fe = /* @__PURE__ */ De(we, [["__scopeId", "data-v-e14d8346"]]);
+}, Fe = /* @__PURE__ */ Ke(Ee, [["__scopeId", "data-v-d8328fe5"]]);
 export {
   Fe as TableDataGrid
 };

package/dist/table-data-grid.umd.js

@@ -1 +1 @@
-(function(y,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("ag-grid-vue3"),require("ag-grid-community"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","ag-grid-vue3","ag-grid-community","@kong-ui-public/i18n"],e):(y=typeof globalThis<"u"?globalThis:y||self,e(y["kong-ui-public-table-data-grid"]={},y.Vue,y.AgGridVue,y.agGridCommunity,y["kong-ui-public-i18n"]))})(this,(function(y,e,G,B,x){"use strict";var v=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(v||{});const M=t=>!!t?.length;function T(t,i,o,a=M){const s=e.computed(()=>a(t.value)),d=e.computed(()=>{const k=t.value!==void 0,n=i.value!==void 0&&i.value!==null;return o.value?"LOADING":s.value?"SUCCESS":n?"ERROR":k?"SUCCESS":"PENDING"});return{fetchState:v,hasData:s,state:d}}const O=({emitState:t,fetchLifecycleState:i,hasData:o})=>{e.watch(()=>({hasData:o.value,state:i.value}),({hasData:a,state:s})=>{if(s!==v.PENDING){if(s===v.LOADING){t({hasData:a,state:"loading"});return}if(s===v.ERROR){t({hasData:a,state:"error"});return}t({hasData:a,state:"success"})}})},A=({startRow:t,endRow:i})=>{const o=i-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},z=({startRow:t,rowsLength:i,pageSize:o,total:a,hasMore:s})=>{if(typeof a=="number")return a;if(s!==!0&&(s===!1||i<o))return t+i},K=({fetcher:t,resetKey:i})=>{const o=new Map,a=new Map,s=e.ref(0),d=e.shallowRef(),h=e.shallowRef(),k=e.shallowRef(),n=e.ref(0),u=e.ref(!1),p=l=>l===s.value,b=()=>{u.value=n.value>0},E=()=>{k.value=void 0,n.value+=1,b()},S=()=>{n.value=Math.max(0,n.value-1),b()},D=l=>{const c=a.get(l);if(c)return c;let f;const g={promise:new Promise(m=>{f=m}),resolve:m=>f(m)};return a.set(l,g),g},r=(l,c)=>{c.resolve(!1),a.get(l)===c&&a.delete(l)},w=async({blockIndex:l,currentBlockCompletion:c,datasourceId:f})=>{if(l===0)return"ready";const g=a.get(l-1);if(!g)return r(l,c),"failed";const m=await g.promise;return p(f)?m?"ready":(r(l,c),"failed"):(r(l,c),"stale")},R=({blockIndex:l,currentBlockCompletion:c,getRowsParams:f,pageSize:g,result:m})=>{m.cursor!==void 0&&o.set(l,m.cursor),f.successCallback(m.data,z({startRow:f.startRow,rowsLength:m.data.length,pageSize:g,total:m.total,hasMore:m.hasMore})),f.startRow===0&&(h.value=m.data),c.resolve(!0)},I=({blockIndex:l,currentBlockCompletion:c,fetchError:f,getRowsParams:g})=>{k.value=f,g.failCallback(),r(l,c)},N=()=>{const l=s.value+1;return s.value=l,o.clear(),a.clear(),h.value=void 0,k.value=void 0,n.value=0,b(),{async getRows(c){const{blockIndex:f,pageSize:g}=A({startRow:c.startRow,endRow:c.endRow}),m=D(f),F=await w({blockIndex:f,currentBlockCompletion:m,datasourceId:l});if(F!=="ready"){F==="failed"&&c.failCallback();return}E();try{const _=f>0?o.get(f-1):void 0,J=await t({mode:"infinite",pageSize:g,cursor:_});if(!p(l)){r(f,m);return}R({blockIndex:f,currentBlockCompletion:m,getRowsParams:c,pageSize:g,result:J})}catch(_){if(!p(l)){r(f,m);return}I({blockIndex:f,currentBlockCompletion:m,fetchError:_,getRowsParams:c})}finally{p(l)&&S()}}}},C=()=>{d.value=N()};return e.watch(()=>i?.value,()=>{C()},{immediate:!0}),{datasource:e.readonly(d),data:e.readonly(h),error:e.readonly(k),isFetching:e.readonly(u)}},V={key:1,class:"table-data-grid-cell-renderer"},L=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:i}){const o=e.shallowRef(t.params),a=e.ref(null),s=e.ref(!1),d=e.computed(()=>o.value.valueFormatted??String(o.value.value??"")),h=e.computed(()=>{const r=o.value.colDef?.colId;return r?o.value.context?.cells?.slots?.[r]:void 0}),k=e.computed(()=>({column:o.value.headerDef,refreshCell:()=>{const r=o.value.node;r&&o.value.api.refreshCells({force:!0,rowNodes:[r]})},row:o.value.data??{},rowIndex:o.value.node?.rowIndex??0,rowValue:o.value.value,selected:o.value.node?.isSelected()??!1})),n=()=>h.value?.(k.value);let u,p,b=!1;const E=()=>{const r=a.value;s.value=!!r&&r.scrollWidth>r.clientWidth},S=()=>{b||(p!==void 0&&cancelAnimationFrame(p),p=requestAnimationFrame(()=>{p=void 0,E()}))},D=r=>{if(u?.disconnect(),r){u?.observe(r);const w=r.closest(".ag-cell");w&&u?.observe(w)}S()};return e.onMounted(()=>{u=new ResizeObserver(S),D(a.value)}),e.watch(a,D,{flush:"post"}),e.onUnmounted(()=>{b=!0,u?.disconnect(),p!==void 0&&cancelAnimationFrame(p)}),i({refresh(r){return o.value=r,e.nextTick(S),!0}}),(r,w)=>{const R=e.resolveComponent("KTooltip");return h.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n),{key:0})):(e.openBlock(),e.createElementBlock("span",V,[e.createVNode(R,{class:"table-data-grid-cell-tooltip",disabled:!s.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:"body",text:d.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:a,class:"table-data-grid-cell-content"},e.toDisplayString(d.value),513)]),_:1},8,["disabled","text"])]))}}}),U=({headers:t,slots:i})=>{const o=e.computed(()=>({cells:{slots:i}})),a=d=>({colId:d.key,flex:!d.width&&!d.maxWidth?1:void 0,headerName:d.label,maxWidth:d.maxWidth,minWidth:d.minWidth,valueGetter:h=>h.data?.[d.key],width:d.width,cellRenderer:L,cellRendererParams:{headerDef:d}});return{columnDefs:e.computed(()=>t.value.map(a)),gridContext:o}},W=({cellClick:t,headers:i,rowClick:o})=>{const a=e.computed(()=>new Set(i.value.filter(n=>n.disableRowClick).map(n=>n.key))),s=n=>{const u=n.event?.target;return u instanceof Element?u.closest(".ag-cell")?.getAttribute("col-id")??void 0:void 0},d=n=>{const u=s(n);return!!(u&&a.value.has(u))};return{onCellClick:n=>{const u=n.colDef.colId;!n.data||!u||t({columnKey:u,row:n.data,value:n.value})},onRowClick:n=>{n.data&&!d(n)&&o(n.data,n)}}},q={emptyState:{title:"No Data",message:"There is no data to display."},errorState:{title:"An error occurred",message:"Data cannot be displayed due to an error."}};function $(){const t=x.createI18n("en-us",q);return{i18n:t,i18nT:x.i18nTComponent(t)}}const P={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},j={key:0,class:"table-error-state","data-testid":"table-error-state"},H={key:1,class:"table-empty-state","data-testid":"table-empty-state"},Q=((t,i)=>{const o=t.__vccOpts||t;for(const[a,s]of i)o[a]=s;return o})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},fetcher:{type:Function},error:{type:Boolean,default:!1},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]}},emits:["grid:ready","state","row:click","cell:click"],setup(t,{emit:i}){B.ModuleRegistry.registerModules([B.AllCommunityModule,B.InfiniteRowModelModule]);const o=i,{i18n:{t:a}}=$(),s=e.useSlots(),{columnDefs:d,gridContext:h}=U({headers:e.toRef(()=>t.headers),slots:s}),{onCellClick:k,onRowClick:n}=W({cellClick:C=>o("cell:click",C),headers:e.toRef(()=>t.headers),rowClick:(C,l)=>o("row:click",C,l)}),u={resizable:!1,sortable:!1,suppressMovable:!0},p=e.computed(()=>[t.fetcher,t.pageSize,t.refreshKey]),{data:b,datasource:E,error:S,isFetching:D}=K({fetcher:t.fetcher,resetKey:p}),{fetchState:r,hasData:w,state:R}=T(b,S,D),I=e.computed(()=>R.value===r.SUCCESS&&!w.value);O({emitState:C=>o("state",C),fetchLifecycleState:R,hasData:w});const N=C=>{o("grid:ready",C.api)};return(C,l)=>{const c=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",P,[t.error?(e.openBlock(),e.createElementBlock("div",j,[e.renderSlot(C.$slots,"error-state",{},()=>[e.createVNode(c,{"icon-variant":"error",message:e.unref(a)("errorState.message"),title:e.unref(a)("errorState.title")},null,8,["message","title"])],!0)])):I.value?(e.openBlock(),e.createElementBlock("div",H,[e.renderSlot(C.$slots,"empty-state",{},()=>[e.createVNode(c,{message:e.unref(a)("emptyState.message"),title:e.unref(a)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(G.AgGridVue),{key:2,"cache-block-size":t.pageSize,class:"table-data-grid-grid","column-defs":e.unref(d),context:e.unref(h),datasource:e.unref(E),"default-col-def":u,"infinite-initial-row-count":1,loading:e.unref(D),"row-model-type":"infinite","suppress-cell-focus":!0,theme:e.unref(B.themeQuartz),onCellClicked:e.unref(k),onGridReady:N,onRowClicked:e.unref(n)},null,8,["cache-block-size","column-defs","context","datasource","loading","theme","onCellClicked","onRowClicked"]))])}}}),[["__scopeId","data-v-e14d8346"]]);y.TableDataGrid=Q,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
+(function(b,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("ag-grid-vue3"),require("ag-grid-community"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","ag-grid-vue3","ag-grid-community","@kong-ui-public/i18n"],e):(b=typeof globalThis<"u"?globalThis:b||self,e(b["kong-ui-public-table-data-grid"]={},b.Vue,b.AgGridVue,b.agGridCommunity,b["kong-ui-public-i18n"]))})(this,(function(b,e,_,K,F){"use strict";var E=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(E||{});const M=t=>!!t?.length;function A(t,r,o,l=M){const s=e.computed(()=>l(t.value)),i=e.computed(()=>{const C=t.value!==void 0,n=r.value!==void 0&&r.value!==null;return o.value?"LOADING":s.value?"SUCCESS":n?"ERROR":C?"SUCCESS":"PENDING"});return{fetchState:E,hasData:s,state:i}}const V=({emitState:t,fetchLifecycleState:r,hasData:o})=>{e.watch(()=>({hasData:o.value,state:r.value}),({hasData:l,state:s})=>{if(s!==E.PENDING){if(s===E.LOADING){t({hasData:l,state:"loading"});return}if(s===E.ERROR){t({hasData:l,state:"error"});return}t({hasData:l,state:"success"})}})},U=({startRow:t,endRow:r})=>{const o=r-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},L=({startRow:t,rowsLength:r,pageSize:o,total:l,hasMore:s})=>{if(typeof l=="number")return l;if(s!==!0&&(s===!1||r<o))return t+r},W=({fetcher:t,resetKey:r,sort:o})=>{const l=new Map,s=new Map,i=e.ref(0),a=e.shallowRef(),C=e.shallowRef(),n=e.shallowRef(),c=e.ref(0),p=e.ref(!1),y=d=>d===i.value,v=()=>{p.value=c.value>0},w=()=>{n.value=void 0,c.value+=1,v()},D=()=>{c.value=Math.max(0,c.value-1),v()},g=d=>{const u=s.get(d);if(u)return u;let f;const S={promise:new Promise(m=>{f=m}),resolve:m=>f(m)};return s.set(d,S),S},k=(d,u)=>{u.resolve(!1),s.get(d)===u&&s.delete(d)},I=async({blockIndex:d,currentBlockCompletion:u,datasourceId:f})=>{if(d===0)return"ready";const S=s.get(d-1);if(!S)return k(d,u),"failed";const m=await S.promise;return y(f)?m?"ready":(k(d,u),"failed"):(k(d,u),"stale")},B=({blockIndex:d,currentBlockCompletion:u,getRowsParams:f,pageSize:S,result:m})=>{m.cursor!==void 0&&l.set(d,m.cursor),f.successCallback(m.data,L({startRow:f.startRow,rowsLength:m.data.length,pageSize:S,total:m.total,hasMore:m.hasMore})),f.startRow===0&&(C.value=m.data),u.resolve(!0)},G=({blockIndex:d,currentBlockCompletion:u,fetchError:f,getRowsParams:S})=>{n.value=f,S.failCallback(),k(d,u)},N=()=>{const d=i.value+1;return i.value=d,l.clear(),s.clear(),C.value=void 0,n.value=void 0,c.value=0,v(),{async getRows(u){const{blockIndex:f,pageSize:S}=U({startRow:u.startRow,endRow:u.endRow}),m=g(f);if(await I({blockIndex:f,currentBlockCompletion:m,datasourceId:d})!=="ready"){u.failCallback();return}y(d)&&w();try{const R=f>0?l.get(f-1):void 0,x=await t({mode:"infinite",pageSize:S,cursor:R,sort:o?.value});if(!y(d)){u.failCallback(),k(f,m);return}B({blockIndex:f,currentBlockCompletion:m,getRowsParams:u,pageSize:S,result:x})}catch(R){if(!y(d)){u.failCallback(),k(f,m);return}G({blockIndex:f,currentBlockCompletion:m,fetchError:R,getRowsParams:u})}finally{y(d)&&D()}}}},O=()=>{a.value=N()};return e.watch(()=>r?.value,()=>{O()},{immediate:!0}),{datasource:e.readonly(a),data:e.readonly(C),error:e.readonly(n),isFetching:e.readonly(p)}},q={key:1,class:"table-data-grid-cell-renderer"},$=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:r}){const o=e.shallowRef(t.params),l=e.ref(null),s=e.ref(!1),i=e.computed(()=>o.value.valueFormatted??String(o.value.value??"")),a=e.computed(()=>{const g=o.value.colDef?.colId;return g?o.value.context?.cells?.slots?.[g]:void 0}),C=e.computed(()=>({column:o.value.headerDef,refreshCell:()=>{const g=o.value.node;g&&o.value.api.refreshCells({force:!0,rowNodes:[g]})},row:o.value.data??{},rowIndex:o.value.node?.rowIndex??0,rowValue:o.value.value,selected:o.value.node?.isSelected()??!1})),n=()=>a.value?.(C.value);let c,p,y=!1;const v=()=>{const g=l.value;s.value=!!g&&g.scrollWidth>g.clientWidth},w=()=>{y||(p!==void 0&&cancelAnimationFrame(p),p=requestAnimationFrame(()=>{p=void 0,v()}))},D=g=>{if(c?.disconnect(),g){c?.observe(g);const k=g.closest(".ag-cell");k&&c?.observe(k)}w()};return e.onMounted(()=>{c=new ResizeObserver(w),D(l.value)}),e.watch(l,D,{flush:"post"}),e.onUnmounted(()=>{y=!0,c?.disconnect(),p!==void 0&&cancelAnimationFrame(p)}),r({refresh(g){return o.value=g,e.nextTick(w),!0}}),(g,k)=>{const I=e.resolveComponent("KTooltip");return a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n),{key:0})):(e.openBlock(),e.createElementBlock("span",q,[e.createVNode(I,{class:"table-data-grid-cell-tooltip",disabled:!s.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:"body",text:i.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:l,class:"table-data-grid-cell-content"},e.toDisplayString(i.value),513)]),_:1},8,["disabled","text"])]))}}}),j=({headers:t,slots:r,initialSort:o})=>{const l=e.computed(()=>({cells:{slots:r}})),s=a=>{const C=o?.sortColumnKey===a.key;return{colId:a.key,flex:!a.width&&!a.maxWidth?1:void 0,headerName:a.label,maxWidth:a.maxWidth,minWidth:a.minWidth,sortable:a.sortable??!1,unSortIcon:a.showSortIcon,...C?{initialSort:o?.sortColumnOrder,initialSortIndex:0}:{},valueGetter:n=>n.data?.[a.key],width:a.width,cellRenderer:$,cellRendererParams:{headerDef:a}}};return{columnDefs:e.computed(()=>t.value.map(s)),gridContext:l}},T=({config:t,headers:r,pageSize:o})=>{const l=new Set(r.filter(i=>i.sortable).map(i=>i.key)),s=t?.sortColumnKey&&l.has(t.sortColumnKey)?t.sortColumnKey:void 0;return{sortColumnKey:s,sortColumnOrder:s?t?.sortColumnOrder:void 0,pageSize:t?.pageSize??o}},z=(t,r)=>t.sortColumnKey===r.sortColumnKey&&t.sortColumnOrder===r.sortColumnOrder&&t.pageSize===r.pageSize,P=({headers:t,pageSize:r,tableConfig:o,emitTableConfigUpdate:l,onExternalConfigChange:s})=>{const i=e.computed(()=>o.value?T({config:o.value,headers:t.value,pageSize:r.value}):void 0),a=e.ref(i.value??T({config:void 0,headers:t.value,pageSize:r.value}));e.watch(i,p=>{p&&!z(p,a.value)&&(a.value=p,s?.(p))});const C=p=>{const y=T({config:{...a.value,...p},headers:t.value,pageSize:r.value});z(y,a.value)||(a.value=y,l(y))},n=e.computed(()=>({sortColumnKey:a.value.sortColumnKey,sortColumnOrder:a.value.sortColumnOrder})),c=e.computed(()=>o.value?.pageSize??r.value);return{activeTableConfig:e.readonly(a),activeSort:n,activePageSize:c,patchTableConfig:C}},H=({cellClick:t,headers:r,rowClick:o})=>{const l=e.computed(()=>new Set(r.value.filter(n=>n.disableRowClick).map(n=>n.key))),s=n=>{const c=n.event?.target;return c instanceof Element?c.closest(".ag-cell")?.getAttribute("col-id")??void 0:void 0},i=n=>{const c=s(n);return!!(c&&l.value.has(c))};return{onCellClick:n=>{const c=n.colDef.colId;!n.data||!c||t({columnKey:c,row:n.data,value:n.value})},onRowClick:n=>{n.data&&!i(n)&&o(n.data,n)}}},Q=({activeSort:t,emitSort:r,patchTableConfig:o})=>{const l=(i,a)=>{i.applyColumnState({state:a.sortColumnKey?[{colId:a.sortColumnKey,sort:a.sortColumnOrder??null,sortIndex:0}]:[],defaultState:{sort:null,sortIndex:null}})};return{onSortChanged:i=>{const a=i.api.getColumnState().filter(c=>c.sort).sort((c,p)=>(c.sortIndex??0)-(p.sortIndex??0)),C=a[a.length-1],n=C?{sortColumnKey:C.colId,sortColumnOrder:C.sort}:{sortColumnKey:void 0,sortColumnOrder:void 0};n.sortColumnKey===t.value.sortColumnKey&&n.sortColumnOrder===t.value.sortColumnOrder||(r(n),o(n),a.length>1&&l(i.api,n))},applySortToGrid:l}},J={emptyState:{title:"No Data",message:"There is no data to display."},errorState:{title:"An error occurred",message:"Data cannot be displayed due to an error."}};function X(){const t=F.createI18n("en-us",J);return{i18n:t,i18nT:F.i18nTComponent(t)}}const Y={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},Z={key:0,class:"table-error-state","data-testid":"table-error-state"},ee={key:1,class:"table-empty-state","data-testid":"table-empty-state"},te=((t,r)=>{const o=t.__vccOpts||t;for(const[l,s]of r)o[l]=s;return o})(e.defineComponent({__name:"TableDataGrid",props:{headers:{},fetcher:{type:Function},error:{type:Boolean,default:!1},pageSize:{default:25},refreshKey:{type:[String,Number,Boolean]},tableConfig:{}},emits:["grid:ready","state","row:click","cell:click","sort","update:tableConfig"],setup(t,{emit:r}){K.ModuleRegistry.registerModules([K.AllCommunityModule,K.InfiniteRowModelModule]);const o=r,{i18n:{t:l}}=X(),s=e.useSlots(),i=e.shallowRef(),{activeTableConfig:a,activeSort:C,activePageSize:n,patchTableConfig:c}=P({headers:e.toRef(()=>t.headers),pageSize:e.toRef(()=>t.pageSize),tableConfig:e.toRef(()=>t.tableConfig),emitTableConfigUpdate:h=>o("update:tableConfig",h),onExternalConfigChange:h=>{i.value&&y(i.value,h)}}),{onSortChanged:p,applySortToGrid:y}=Q({activeSort:C,emitSort:h=>o("sort",h),patchTableConfig:c}),{columnDefs:v,gridContext:w}=j({headers:e.toRef(()=>t.headers),slots:s,initialSort:C.value}),{onCellClick:D,onRowClick:g}=H({cellClick:h=>o("cell:click",h),headers:e.toRef(()=>t.headers),rowClick:(h,R)=>o("row:click",h,R)}),k={resizable:!1,sortable:!1,suppressMovable:!0},I=e.computed(()=>[t.fetcher,n.value,t.refreshKey,a.value.sortColumnKey,a.value.sortColumnOrder]),{data:B,datasource:G,error:N,isFetching:O}=W({fetcher:t.fetcher,resetKey:I,sort:C}),{fetchState:d,hasData:u,state:f}=A(B,N,O),S=e.computed(()=>f.value===d.SUCCESS&&!u.value);V({emitState:h=>o("state",h),fetchLifecycleState:f,hasData:u});const m=h=>{i.value=h.api,o("grid:ready",h.api)};return(h,R)=>{const x=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",Y,[t.error?(e.openBlock(),e.createElementBlock("div",Z,[e.renderSlot(h.$slots,"error-state",{},()=>[e.createVNode(x,{"icon-variant":"error",message:e.unref(l)("errorState.message"),title:e.unref(l)("errorState.title")},null,8,["message","title"])],!0)])):S.value?(e.openBlock(),e.createElementBlock("div",ee,[e.renderSlot(h.$slots,"empty-state",{},()=>[e.createVNode(x,{message:e.unref(l)("emptyState.message"),title:e.unref(l)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(_.AgGridVue),{key:2,"cache-block-size":e.unref(n),class:"table-data-grid-grid","column-defs":e.unref(v),context:e.unref(w),datasource:e.unref(G),"default-col-def":k,"infinite-initial-row-count":1,loading:e.unref(O),"row-model-type":"infinite","suppress-cell-focus":!0,"suppress-multi-sort":!0,theme:e.unref(K.themeQuartz),onCellClicked:e.unref(D),onGridReady:m,onRowClicked:e.unref(g),onSortChanged:e.unref(p)},null,8,["cache-block-size","column-defs","context","datasource","loading","theme","onCellClicked","onRowClicked","onSortChanged"]))])}}}),[["__scopeId","data-v-d8328fe5"]]);b.TableDataGrid=te,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/components/TableDataGrid.vue.d.ts

@@ -1,5 +1,5 @@
-import type { TableDataGridCellClickPayload, TableDataGridCellSlotProps, TableDataGridFetcher, TableDataGridHeader, TableDataGridStatePayload } from '../types';
-import type { GridReadyEvent, RowClickedEvent } from 'ag-grid-community';
+import type { TableDataGridCellClickPayload, TableDataGridCellSlotProps, TableDataGridConfig, TableDataGridFetcher, TableDataGridHeader, TableDataGridSort, TableDataGridStatePayload } from '../types';
+import type { GridApi, GridReadyEvent, RowClickedEvent } from 'ag-grid-community';
 declare const __VLS_export: <Row extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         headers: Array<TableDataGridHeader<Row>>;
@@ -7,10 +7,13 @@ declare const __VLS_export: <Row extends object>(__VLS_props: NonNullable<Awaite
         error?: boolean;
         pageSize?: number;
         refreshKey?: string | number | boolean;
+        tableConfig?: TableDataGridConfig;
     } & {
         onState?: ((payload: TableDataGridStatePayload) => any) | undefined;
-        "onGrid:ready"?: ((api: import("ag-grid-community").GridApi<Row>) => any) | undefined;
+        onSort?: ((payload: TableDataGridSort) => any) | undefined;
+        "onGrid:ready"?: ((api: GridApi<Row>) => any) | undefined;
         "onCell:click"?: ((payload: TableDataGridCellClickPayload<Row>) => any) | undefined;
+        "onUpdate:tableConfig"?: ((payload: TableDataGridConfig) => any) | undefined;
         "onRow:click"?: ((row: Row, event: RowClickedEvent<Row, any>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -27,6 +30,8 @@ declare const __VLS_export: <Row extends object>(__VLS_props: NonNullable<Awaite
         (e: "state", payload: TableDataGridStatePayload): void;
         (e: "row:click", row: Row, event: RowClickedEvent<Row>): void;
         (e: "cell:click", payload: TableDataGridCellClickPayload<Row>): void;
+        (e: "sort", payload: TableDataGridSort): void;
+        (e: "update:tableConfig", payload: TableDataGridConfig): void;
     };
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;

package/dist/types/components/TableDataGrid.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AAmNA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,cAAc,EACd,eAAe,EAChB,MAAM,mBAAmB,CAAA;AAgB1B,QAAA,MAAM,YAAY,GAAK,GAAG,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA0OO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBAtO7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;;;;;;KAkOmD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;qCAtNoB,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;uBAFzD,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAMxB,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;YAClD,WAAW,OAAO,GAAG,SAAS,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI;YACzD,YAAY,WAAW,6BAA6B,CAAC,GAAG,CAAC,GAAG,IAAI;;EAkNlE,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"TableDataGrid.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGrid.vue"],"names":[],"mappings":"AAgQA,OAAO,KAAK,EACV,6BAA6B,EAC7B,0BAA0B,EAC1B,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,EACjB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAEV,OAAO,EACP,cAAc,EACd,eAAe,EAChB,MAAM,mBAAmB,CAAA;AAkB1B,QAAA,MAAM,YAAY,GAAK,GAAG,SAAS,MAAM,EACxC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA0RO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBAtR7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;sBACxB,mBAAmB;;;;;;;;KAiRwD,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;qCApQoB,0BAA0B,CAAC,GAAG,CAAC,KAAK,OAAO;uBAFzD,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAMxB,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;YAClD,WAAW,OAAO,GAAG,SAAS,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI;YACzD,YAAY,WAAW,6BAA6B,CAAC,GAAG,CAAC,GAAG,IAAI;YAChE,MAAM,WAAW,iBAAiB,GAAG,IAAI;YACzC,oBAAoB,WAAW,mBAAmB,GAAG,IAAI;;EA8P3D,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/types/composables/useFetchInfinite.d.ts

@@ -1,4 +1,4 @@
-import type { TableDataGridFetcher, TableDataGridRow } from '../types';
+import type { TableDataGridFetcher, TableDataGridRow, TableDataGridSort } from '../types';
 import type { IGetRowsParams } from 'ag-grid-community';
 import type { Ref } from 'vue';
 interface UseFetchInfiniteOptions<Row extends object = TableDataGridRow> {
@@ -12,6 +12,10 @@ interface UseFetchInfiniteOptions<Row extends object = TableDataGridRow> {
      * the datasource and clears cursor/block state back to block 0.
      */
     resetKey?: Readonly<Ref<unknown>>;
+    /**
+     * Current resolved sort, forwarded to the fetcher.
+     */
+    sort?: Readonly<Ref<TableDataGridSort | undefined>>;
 }
 /**
  * Owns AG Grid infinite datasource creation and cursor-backed fetch
@@ -30,7 +34,7 @@ interface UseFetchInfiniteOptions<Row extends object = TableDataGridRow> {
  * @returns Readonly datasource, first-block data, error, and fetching state
  * refs for the active AG Grid infinite datasource.
  */
-export declare const useFetchInfinite: <Row extends object = TableDataGridRow>({ fetcher, resetKey, }: UseFetchInfiniteOptions<Row>) => {
+export declare const useFetchInfinite: <Row extends object = TableDataGridRow>({ fetcher, resetKey, sort, }: UseFetchInfiniteOptions<Row>) => {
     datasource: Readonly<Ref<{
         readonly rowCount?: number | undefined;
         readonly getRows: (params: IGetRowsParams) => void;

package/dist/types/composables/useFetchInfinite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchInfinite.d.ts","sourceRoot":"","sources":["../../../src/composables/useFetchInfinite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAEpB,gBAAgB,EACjB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAW9B,UAAU,uBAAuB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB;IACrE;;;OAGG;IACH,OAAO,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;CAClC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,wBAGrE,uBAAuB,CAAC,GAAG,CAAC;;;;;;;;;;;;;CA6T9B,CAAA"}
+{"version":3,"file":"useFetchInfinite.d.ts","sourceRoot":"","sources":["../../../src/composables/useFetchInfinite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EAEpB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAW9B,UAAU,uBAAuB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB;IACrE;;;OAGG;IACH,OAAO,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC,CAAA;CACpD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,8BAIrE,uBAAuB,CAAC,GAAG,CAAC;;;;;;;;;;;;;CAsU9B,CAAA"}

package/dist/types/composables/useTableDataGridColumnDefs.d.ts

@@ -1,13 +1,14 @@
-import type { TableDataGridHeader, TableDataGridRow } from '../types';
+import type { TableDataGridHeader, TableDataGridRow, TableDataGridSort } from '../types';
 import type { ColDef } from 'ag-grid-community';
 import type { Ref, Slots } from 'vue';
 /**
  * Converts `headers` into what AG Grid needs to render the table's columns:
  * the column definitions themselves, and the shared grid `context`.
  */
-export declare const useTableDataGridColumnDefs: <Row extends object = TableDataGridRow>({ headers, slots, }: {
+export declare const useTableDataGridColumnDefs: <Row extends object = TableDataGridRow>({ headers, slots, initialSort, }: {
     headers: Readonly<Ref<Array<TableDataGridHeader<Row>>>>;
     slots: Slots;
+    initialSort?: TableDataGridSort;
 }) => {
     columnDefs: import("vue").ComputedRef<ColDef<Row, any>[]>;
     gridContext: import("vue").ComputedRef<{

package/dist/types/composables/useTableDataGridColumnDefs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableDataGridColumnDefs.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridColumnDefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAIrC;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,qBAG/E;IACD,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,KAAK,EAAE,KAAK,CAAA;CACb;;;;;;;;;CA0BA,CAAA"}
+{"version":3,"file":"useTableDataGridColumnDefs.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridColumnDefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAIrC;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,kCAI/E;IACD,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,KAAK,EAAE,KAAK,CAAA;IACZ,WAAW,CAAC,EAAE,iBAAiB,CAAA;CAChC;;;;;;;;;CAiCA,CAAA"}

package/dist/types/composables/useTableDataGridConfig.d.ts

@@ -0,0 +1,34 @@
+import type { TableDataGridConfig, TableDataGridHeader, TableDataGridRow, TableDataGridSort } from '../types';
+import type { Ref } from 'vue';
+/**
+ * Owns `TableDataGrid`'s current `tableConfig` state, controlled or
+ * uncontrolled, with `patchTableConfig` as the single write path for
+ * grid-driven changes.
+ *
+ * @param headers Current column headers, used to validate the resolved sort key.
+ * @param pageSize Reactive component-level page size default.
+ * @param tableConfig Host-supplied `tableConfig` prop, or `undefined` when uncontrolled.
+ * @param emitTableConfigUpdate Called with the resolved config whenever `patchTableConfig` changes it.
+ * @param onExternalConfigChange Called when the host-supplied prop changes the resolved config.
+ */
+export declare const useTableDataGridConfig: <Row extends object = TableDataGridRow>({ headers, pageSize, tableConfig: tableConfigProp, emitTableConfigUpdate, onExternalConfigChange, }: {
+    headers: Readonly<Ref<Array<TableDataGridHeader<Row>>>>;
+    pageSize: Readonly<Ref<number>>;
+    tableConfig: Readonly<Ref<TableDataGridConfig | undefined>>;
+    emitTableConfigUpdate: (config: TableDataGridConfig) => void;
+    onExternalConfigChange?: (config: TableDataGridConfig) => void;
+}) => {
+    activeTableConfig: Readonly<Ref<{
+        readonly sortColumnKey?: string | undefined;
+        readonly sortColumnOrder?: import("..").TableDataGridSortDirection | undefined;
+        readonly pageSize?: number | undefined;
+    }, {
+        readonly sortColumnKey?: string | undefined;
+        readonly sortColumnOrder?: import("..").TableDataGridSortDirection | undefined;
+        readonly pageSize?: number | undefined;
+    }>>;
+    activeSort: import("vue").ComputedRef<TableDataGridSort>;
+    activePageSize: import("vue").ComputedRef<number>;
+    patchTableConfig: (patch: Partial<TableDataGridConfig>) => void;
+};
+//# sourceMappingURL=useTableDataGridConfig.d.ts.map

package/dist/types/composables/useTableDataGridConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableDataGridConfig.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAC7G,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAI9B;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,qGAM3E;IACD,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAC/B,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAA;IAC3D,qBAAqB,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC5D,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAC/D;;;;;;;;;;;;8BAsBkC,OAAO,CAAC,mBAAmB,CAAC;CA8B9D,CAAA"}

package/dist/types/composables/useTableDataGridSort.d.ts

@@ -0,0 +1,20 @@
+import type { TableDataGridRow, TableDataGridSort } from '../types';
+import type { GridApi, SortChangedEvent } from 'ag-grid-community';
+import type { Ref } from 'vue';
+/**
+ * Translates AG Grid's `sortChanged` event into `TableDataGrid`'s `sort`
+ * shape, and pushes a sort back onto the grid.
+ *
+ * @param activeSort Current resolved sort, read from `useTableDataGridConfig`.
+ * @param emitSort Called with the new sort whenever a grid interaction changes it.
+ * @param patchTableConfig Writes the new sort into the current `tableConfig`.
+ */
+export declare const useTableDataGridSort: <Row extends object = TableDataGridRow>({ activeSort, emitSort, patchTableConfig, }: {
+    activeSort: Readonly<Ref<TableDataGridSort>>;
+    emitSort: (sort: TableDataGridSort) => void;
+    patchTableConfig: (patch: Partial<TableDataGridSort>) => void;
+}) => {
+    onSortChanged: (event: SortChangedEvent<Row>) => void;
+    applySortToGrid: (api: GridApi<Row>, sort: TableDataGridSort) => void;
+};
+//# sourceMappingURL=useTableDataGridSort.d.ts.map

package/dist/types/composables/useTableDataGridSort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableDataGridSort.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridSort.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAA8B,MAAM,UAAU,CAAA;AAC/F,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,6CAIzE;IACD,UAAU,EAAE,QAAQ,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC3C,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;CAC9D;2BAU+B,gBAAgB,CAAC,GAAG,CAAC;2BATrB,OAAO,CAAC,GAAG,CAAC,QAAQ,iBAAiB;CAqCpE,CAAA"}

package/dist/types/types/index.d.ts

@@ -33,11 +33,28 @@ export type TableDataGridHeader<Row extends object = TableDataGridRow> = {
      * selection/click mechanics are unaffected.
      */
     disableRowClick?: boolean;
+    /** Enables sorting on this column via AG Grid's built-in header sort control. */
+    sortable?: boolean;
+    /**
+     * Shows the unsorted sort icon on this column's header even when it isn't
+     * the active sort, instead of only on hover or once sorted. Only relevant
+     * when `sortable` is true.
+     */
+    showSortIcon?: boolean;
+};
+export type TableDataGridSortDirection = 'asc' | 'desc';
+export type TableDataGridSort = {
+    sortColumnKey?: string;
+    sortColumnOrder?: TableDataGridSortDirection;
+};
+export type TableDataGridConfig = TableDataGridSort & {
+    pageSize?: number;
 };
 export interface TableDataGridInfiniteFetcherParams {
     mode: 'infinite';
     pageSize: number;
     cursor?: unknown;
+    sort?: TableDataGridSort;
 }
 export type TableDataGridFetcherResult<Row extends object = TableDataGridRow> = {
     data: Row[];

package/dist/types/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAA;AAC1C,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACtD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAEhE,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,kBAAkB,CAAA;IACzB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,4BAA4B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,GAAG,CAAA;AAErF,MAAM,MAAM,6BAA6B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IACjF,GAAG,EAAE,GAAG,CAAA;IACR,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,MAAM,0BAA0B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IAC9E,GAAG,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAA;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IACvE,GAAG,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,MAAM,CAAC,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,UAAU,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,MAAM,0BAA0B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IAC9E,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,oBAAoB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,CACxE,MAAM,EAAE,kCAAkC,KACvC,OAAO,CAAC,0BAA0B,CAAC,GAAG,CAAC,CAAC,CAAA;AAE7C,MAAM,MAAM,yBAAyB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,OAAO,CAAC,GAAG,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAEhD,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAA;AAC1C,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AACtD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAEhE,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,kBAAkB,CAAA;IACzB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,4BAA4B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,GAAG,CAAA;AAErF,MAAM,MAAM,6BAA6B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IACjF,GAAG,EAAE,GAAG,CAAA;IACR,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,MAAM,0BAA0B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IAC9E,GAAG,EAAE,GAAG,CAAA;IACR,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAA;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,WAAW,EAAE,MAAM,IAAI,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IACvE,GAAG,EAAE,OAAO,CAAC,MAAM,GAAG,EAAE,MAAM,CAAC,CAAA;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG,KAAK,GAAG,MAAM,CAAA;AAEvD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,0BAA0B,CAAA;CAC7C,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,UAAU,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,iBAAiB,CAAA;CACzB;AAED,MAAM,MAAM,0BAA0B,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI;IAC9E,IAAI,EAAE,GAAG,EAAE,CAAA;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,oBAAoB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,CACxE,MAAM,EAAE,kCAAkC,KACvC,OAAO,CAAC,0BAA0B,CAAC,GAAG,CAAC,CAAC,CAAA;AAE7C,MAAM,MAAM,yBAAyB,CAAC,GAAG,SAAS,MAAM,GAAG,gBAAgB,IAAI,OAAO,CAAC,GAAG,CAAC,CAAA"}

package/dist/types/utils/tableConfig.d.ts

@@ -0,0 +1,25 @@
+import type { TableDataGridConfig, TableDataGridHeader, TableDataGridRow } from '../types';
+/**
+ * Resolves a host-supplied (or absent) `tableConfig` into a config the
+ * component can trust: drops a `sortColumnKey` that no longer matches a
+ * `sortable` header, and falls back `pageSize` to the component default.
+ *
+ * @param config Host-supplied table config, or `undefined` when uncontrolled.
+ * @param headers Current column headers, used to validate the sort key.
+ * @param pageSize Component-level page size default.
+ * @returns A fully-resolved `TableDataGridConfig`.
+ */
+export declare const resolveTableConfig: <Row extends object = TableDataGridRow>({ config, headers, pageSize, }: {
+    config: TableDataGridConfig | undefined;
+    headers: Array<TableDataGridHeader<Row>>;
+    pageSize: number;
+}) => TableDataGridConfig;
+/**
+ * Structural equality for two resolved `TableDataGridConfig` values.
+ *
+ * @param a First config to compare.
+ * @param b Second config to compare.
+ * @returns Whether every field matches, including `undefined` values.
+ */
+export declare const tableConfigsEqual: (a: TableDataGridConfig, b: TableDataGridConfig) => boolean;
+//# sourceMappingURL=tableConfig.d.ts.map

package/dist/types/utils/tableConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableConfig.d.ts","sourceRoot":"","sources":["../../../src/utils/tableConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAE1F;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,gCAIvE;IACD,MAAM,EAAE,mBAAmB,GAAG,SAAS,CAAA;IACvC,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAA;IACxC,QAAQ,EAAE,MAAM,CAAA;CACjB,KAAG,mBAWH,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,GAAG,mBAAmB,EAAE,GAAG,mBAAmB,KAAG,OAIlF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/table-data-grid",
-  "version": "0.4.1",
+  "version": "0.4.2-pr.3761.40358052a.0",
   "type": "module",
   "main": "./dist/table-data-grid.umd.js",
   "module": "./dist/table-data-grid.es.js",