@kong-ui-public/table-data-grid 0.4.1 → 0.4.2-pr.3761.746da2082.0

package/README.md

@@ -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` is the current single-column sort, or `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,35 @@ 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. |
+
+## 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 +286,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 +311,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-2bcd2d90]{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-2bcd2d90]{--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,512 @@
-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 N, ref as K, shallowRef as x, readonly as O, defineComponent as P, onMounted as j, onUnmounted as H, nextTick as Q, resolveComponent as $, openBlock as R, createBlock as q, resolveDynamicComponent as J, createElementBlock as z, createVNode as U, withCtx as X, createElementVNode as Y, toDisplayString as Z, useSlots as ee, toRef as I, renderSlot as V, unref as g } 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 ce = (e) => !!e?.length;
+function ie(e, n, t, l = ce) {
+  const r = S(() => l(e.value)), s = S(() => {
+    const m = e.value !== void 0, a = n.value !== void 0 && n.value !== null;
+    return t.value ? "LOADING" : r.value ? "SUCCESS" : a ? "ERROR" : m ? "SUCCESS" : "PENDING";
   });
   return {
-    fetchState: F,
+    fetchState: T,
     hasData: r,
-    state: i
+    state: s
   };
 }
-const se = ({
+const ue = ({
   emitState: e,
-  fetchLifecycleState: c,
+  fetchLifecycleState: n,
   hasData: t
 }) => {
-  T(
+  N(
     () => ({
       hasData: t.value,
-      state: c.value
+      state: n.value
     }),
-    ({ hasData: a, state: r }) => {
-      if (r !== F.PENDING) {
-        if (r === F.LOADING) {
+    ({ hasData: l, state: r }) => {
+      if (r !== T.PENDING) {
+        if (r === T.LOADING) {
           e({
-            hasData: a,
+            hasData: l,
             state: "loading"
           });
           return;
         }
-        if (r === F.ERROR) {
+        if (r === 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: n }) => {
+  const t = n - e;
   return {
     blockIndex: t > 0 ? Math.floor(e / t) : 0,
     pageSize: t
   };
-}, ie = ({
+}, me = ({
   startRow: e,
-  rowsLength: c,
+  rowsLength: n,
   pageSize: t,
-  total: a,
+  total: l,
   hasMore: r
 }) => {
-  if (typeof a == "number")
-    return a;
-  if (r !== !0 && (r === !1 || c < t))
-    return e + c;
-}, ue = ({
+  if (typeof l == "number")
+    return l;
+  if (r !== !0 && (r === !1 || n < t))
+    return e + n;
+}, fe = ({
   fetcher: e,
-  resetKey: c
+  resetKey: n,
+  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(), r = /* @__PURE__ */ new Map(), s = K(0), o = x(), m = x(), a = x(), c = K(0), f = K(!1), y = (i) => i === s.value, k = () => {
+    f.value = c.value > 0;
+  }, D = () => {
+    a.value = void 0, c.value += 1, k();
   }, w = () => {
-    o.value = Math.max(0, o.value - 1), k();
-  }, D = (l) => {
-    const s = a.get(l);
-    if (s)
-      return s;
-    let d;
+    c.value = Math.max(0, c.value - 1), k();
+  }, p = (i) => {
+    const v = r.get(i);
+    if (v)
+      return v;
+    let u;
     const h = {
-      promise: new Promise((f) => {
-        d = f;
+      promise: new Promise((C) => {
+        u = C;
       }),
-      resolve: (f) => d(f)
+      resolve: (C) => u(C)
     };
-    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,
-    datasourceId: d
+    return r.set(i, h), h;
+  }, b = (i, v) => {
+    v.resolve(!1), r.get(i) === v && r.delete(i);
+  }, E = async ({
+    blockIndex: i,
+    currentBlockCompletion: v,
+    datasourceId: u
   }) => {
-    if (l === 0)
+    if (i === 0)
       return "ready";
-    const h = a.get(l - 1);
+    const h = r.get(i - 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,
-    getRowsParams: d,
+      return b(i, v), "failed";
+    const C = await h.promise;
+    return y(u) ? C ? "ready" : (b(i, v), "failed") : (b(i, v), "stale");
+  }, B = ({
+    blockIndex: i,
+    currentBlockCompletion: v,
+    getRowsParams: u,
     pageSize: h,
-    result: f
+    result: C
   }) => {
-    f.cursor !== void 0 && t.set(l, f.cursor), d.successCallback(f.data, ie({
-      startRow: d.startRow,
-      rowsLength: f.data.length,
+    C.cursor !== void 0 && l.set(i, C.cursor), u.successCallback(C.data, me({
+      startRow: u.startRow,
+      rowsLength: C.data.length,
       pageSize: h,
-      total: f.total,
-      hasMore: f.hasMore
-    })), d.startRow === 0 && (v.value = f.data), s.resolve(!0);
-  }, _ = ({
-    blockIndex: l,
-    currentBlockCompletion: s,
-    fetchError: d,
+      total: C.total,
+      hasMore: C.hasMore
+    })), u.startRow === 0 && (m.value = C.data), v.resolve(!0);
+  }, M = ({
+    blockIndex: i,
+    currentBlockCompletion: v,
+    fetchError: u,
     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 = u, h.failCallback(), b(i, v);
+  }, _ = () => {
+    const i = s.value + 1;
+    return s.value = i, l.clear(), r.clear(), m.value = void 0, a.value = void 0, c.value = 0, k(), {
+      async getRows(v) {
         const {
-          blockIndex: d,
+          blockIndex: u,
           pageSize: h
-        } = ce({
-          startRow: s.startRow,
-          endRow: s.endRow
-        }), f = D(d), z = await b({
-          blockIndex: d,
-          currentBlockCompletion: f,
-          datasourceId: l
+        } = de({
+          startRow: v.startRow,
+          endRow: v.endRow
+        }), C = p(u), G = await E({
+          blockIndex: u,
+          currentBlockCompletion: C,
+          datasourceId: i
         });
-        if (z !== "ready") {
-          z === "failed" && s.failCallback();
+        if (G !== "ready") {
+          G === "failed" && v.failCallback();
           return;
         }
-        E();
+        D();
         try {
-          const M = d > 0 ? t.get(d - 1) : void 0, W = await e({
+          const d = u > 0 ? l.get(u - 1) : void 0, F = await e({
             mode: "infinite",
             pageSize: h,
-            cursor: M
+            cursor: d,
+            sort: t?.value
           });
-          if (!m(l)) {
-            n(d, f);
+          if (!y(i)) {
+            b(u, C);
             return;
           }
-          S({
-            blockIndex: d,
-            currentBlockCompletion: f,
-            getRowsParams: s,
+          B({
+            blockIndex: u,
+            currentBlockCompletion: C,
+            getRowsParams: v,
             pageSize: h,
-            result: W
+            result: F
           });
-        } catch (M) {
-          if (!m(l)) {
-            n(d, f);
+        } catch (d) {
+          if (!y(i)) {
+            b(u, C);
             return;
           }
-          _({
-            blockIndex: d,
-            currentBlockCompletion: f,
-            fetchError: M,
-            getRowsParams: s
+          M({
+            blockIndex: u,
+            currentBlockCompletion: C,
+            fetchError: d,
+            getRowsParams: v
           });
         } finally {
-          m(l) && w();
+          y(i) && w();
         }
       }
     };
-  }, p = () => {
-    i.value = B();
+  }, A = () => {
+    o.value = _();
   };
-  return T(
-    () => c?.value,
+  return N(
+    () => n?.value,
     () => {
-      p();
+      A();
     },
     { immediate: !0 }
   ), {
-    datasource: G(i),
-    data: G(v),
-    error: G(y),
-    isFetching: G(u)
+    datasource: O(o),
+    data: O(m),
+    error: O(a),
+    isFetching: O(f)
   };
-}, de = {
+}, ve = {
   key: 1,
   class: "table-data-grid-cell-renderer"
-}, fe = /* @__PURE__ */ L({
+}, Ce = /* @__PURE__ */ P({
   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: n }) {
+    const t = x(e.params), l = K(null), r = K(!1), s = S(() => t.value.valueFormatted ?? String(t.value.value ?? "")), o = S(() => {
+      const p = t.value.colDef?.colId;
+      return p ? t.value.context?.cells?.slots?.[p] : void 0;
+    }), m = S(() => ({
       column: t.value.headerDef,
       refreshCell: () => {
-        const n = t.value.node;
-        n && t.value.api.refreshCells({ force: !0, rowNodes: [n] });
+        const p = t.value.node;
+        p && t.value.api.refreshCells({ force: !0, rowNodes: [p] });
       },
       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?.(m.value);
+    let c, f, y = !1;
+    const k = () => {
+      const p = l.value;
+      r.value = !!p && p.scrollWidth > p.clientWidth;
+    }, D = () => {
+      y || (f !== void 0 && cancelAnimationFrame(f), f = requestAnimationFrame(() => {
+        f = void 0, k();
       }));
-    }, D = (n) => {
-      if (u?.disconnect(), n) {
-        u?.observe(n);
-        const b = n.closest(".ag-cell");
-        b && u?.observe(b);
+    }, w = (p) => {
+      if (c?.disconnect(), p) {
+        c?.observe(p);
+        const b = p.closest(".ag-cell");
+        b && c?.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(() => {
+      c = new ResizeObserver(D), w(l.value);
+    }), N(l, w, { flush: "post" }), H(() => {
+      y = !0, c?.disconnect(), f !== void 0 && cancelAnimationFrame(f);
+    }), n({
+      refresh(p) {
+        return t.value = p, Q(D), !0;
       }
-    }), (n, b) => {
-      const S = U("KTooltip");
-      return v.value ? (R(), V(q(o), { key: 0 })) : (R(), x("span", de, [
-        O(S, {
+    }), (p, b) => {
+      const E = $("KTooltip");
+      return o.value ? (R(), q(J(a), { key: 0 })) : (R(), z("span", ve, [
+        U(E, {
           class: "table-data-grid-cell-tooltip",
           disabled: !r.value,
           "kpop-attributes": { popoverDelay: 400 },
           "max-width": "300",
           placement: "bottom-start",
           target: "body",
-          text: i.value
+          text: s.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(s.value), 513)
           ]),
           _: 1
         }, 8, ["disabled", "text"])
       ]));
     };
   }
-}), me = ({
+}), pe = ({
   headers: e,
-  slots: c
+  slots: n,
+  initialSort: t
 }) => {
-  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 l = S(() => ({
+    cells: { slots: n }
+  })), r = (o) => {
+    const m = 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,
+      ...m ? { sort: t?.sortColumnOrder, sortIndex: 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(r)),
+    gridContext: l
+  };
+}, he = ({
+  config: e,
+  headers: n,
+  pageSize: t
+}) => {
+  const l = new Set(n.filter((s) => s.sortable).map((s) => s.key)), r = e?.sortColumnKey && l.has(e.sortColumnKey) ? e.sortColumnKey : void 0;
+  return {
+    sortColumnKey: r,
+    sortColumnOrder: r ? e?.sortColumnOrder : void 0,
+    pageSize: e?.pageSize ?? t
+  };
+}, W = (e, n) => e.sortColumnKey === n.sortColumnKey && e.sortColumnOrder === n.sortColumnOrder && e.pageSize === n.pageSize, ge = ({
+  headers: e,
+  pageSize: n,
+  tableConfig: t,
+  emitTableConfigUpdate: l,
+  onExternalConfigChange: r
+}) => {
+  const s = (f) => he({ config: f, headers: e.value, pageSize: n.value }), o = K(s(t.value));
+  N(() => s(t.value), (f) => {
+    W(f, o.value) || (o.value = f, r?.(f));
   });
+  const m = (f) => {
+    const y = s({ ...o.value, ...f });
+    W(y, o.value) || (o.value = y, l(y));
+  }, a = S(() => ({
+    sortColumnKey: o.value.sortColumnKey,
+    sortColumnOrder: o.value.sortColumnOrder
+  })), c = S(() => o.value.pageSize ?? n.value);
   return {
-    columnDefs: g(() => e.value.map(a)),
-    gridContext: t
+    activeTableConfig: O(o),
+    activeSort: a,
+    activePageSize: c,
+    patchTableConfig: m
   };
-}, ve = ({
+}, ye = ({
   cellClick: e,
-  headers: c,
+  headers: n,
   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(
+    n.value.filter((a) => a.disableRowClick).map((a) => a.key)
+  )), r = (a) => {
+    const c = a.event?.target;
+    return c instanceof Element ? c.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
+  }, s = (a) => {
+    const c = r(a);
+    return !!(c && l.value.has(c));
   };
   return {
-    onCellClick: (o) => {
-      const u = o.colDef.colId;
-      !o.data || !u || e({
-        columnKey: u,
-        row: o.data,
-        value: o.value
+    onCellClick: (a) => {
+      const c = a.colDef.colId;
+      !a.data || !c || e({
+        columnKey: c,
+        row: a.data,
+        value: a.value
       });
     },
-    onRowClick: (o) => {
-      o.data && !i(o) && t(o.data, o);
+    onRowClick: (a) => {
+      a.data && !s(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
+}, Se = ({
+  activeSort: e,
+  emitSort: n,
+  patchTableConfig: t
+}) => {
+  const l = (s, o) => {
+    s.applyColumnState({
+      state: o.sortColumnKey ? [{ colId: o.sortColumnKey, sort: o.sortColumnOrder ?? null, sortIndex: 0 }] : [],
+      defaultState: { sort: null, sortIndex: null }
+    });
+  };
+  return { onSortChanged: (s) => {
+    const o = s.api.getColumnState().filter((c) => c.sort).sort((c, f) => (c.sortIndex ?? 0) - (f.sortIndex ?? 0)), m = o[o.length - 1], a = m ? { sortColumnKey: m.colId, sortColumnOrder: m.sort } : {};
+    a.sortColumnKey === e.value.sortColumnKey && a.sortColumnOrder === e.value.sortColumnOrder || (n(a), t(a), o.length > 1 && l(s.api, a));
+  }, applySortToGrid: l };
+}, be = { title: "No Data", message: "There is no data to display." }, ke = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, De = {
+  emptyState: be,
+  errorState: ke
 };
-function ye() {
-  const e = oe("en-us", Ce);
+function we() {
+  const e = ne("en-us", De);
   return {
     i18n: e,
-    i18nT: le(e)
+    i18nT: se(e)
     // Translation component <i18n-t>
   };
 }
-const ge = {
+const Re = {
   class: "kong-ui-public-table-data-grid",
   "data-testid": "table-data-grid"
-}, ke = {
+}, Ke = {
   key: 0,
   class: "table-error-state",
   "data-testid": "table-error-state"
-}, be = {
+}, Ee = {
   key: 1,
   class: "table-empty-state",
   "data-testid": "table-empty-state"
-}, we = /* @__PURE__ */ L({
+}, Ie = /* @__PURE__ */ P({
   __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({
-      cellClick: (p) => t("cell:click", p),
-      headers: A(() => e.headers),
-      rowClick: (p, l) => t("row:click", p, l)
-    }), u = {
+  emits: ["grid:ready", "state", "row:click", "cell:click", "sort", "update:tableConfig"],
+  setup(e, { emit: n }) {
+    oe.registerModules([ae, le]);
+    const t = n, { i18n: { t: l } } = we(), r = ee(), s = x(), { activeTableConfig: o, activeSort: m, activePageSize: a, patchTableConfig: c } = ge({
+      headers: I(() => e.headers),
+      pageSize: I(() => e.pageSize),
+      tableConfig: I(() => e.tableConfig),
+      emitTableConfigUpdate: (d) => t("update:tableConfig", d),
+      onExternalConfigChange: (d) => {
+        s.value && y(s.value, { sortColumnKey: d.sortColumnKey, sortColumnOrder: d.sortColumnOrder });
+      }
+    }), { onSortChanged: f, applySortToGrid: y } = Se({
+      activeSort: m,
+      emitSort: (d) => t("sort", d),
+      patchTableConfig: c
+    }), { columnDefs: k, gridContext: D } = pe({
+      headers: I(() => e.headers),
+      slots: r,
+      // A snapshot, not the reactive activeSort: only the initial resolved sort
+      // (e.g. from a host-controlled tableConfig prop at mount) needs seeding
+      // into column defs. See useTableDataGridColumnDefs for why.
+      initialSort: m.value
+    }), { onCellClick: w, onRowClick: p } = ye({
+      cellClick: (d) => t("cell:click", d),
+      headers: I(() => e.headers),
+      rowClick: (d, F) => t("row:click", d, F)
+    }), b = {
       resizable: !1,
       sortable: !1,
       suppressMovable: !0
-    }, m = g(() => [e.fetcher, e.pageSize, e.refreshKey]), {
-      data: k,
-      datasource: E,
-      error: w,
-      isFetching: D
-    } = ue({
+    }, E = S(() => [
+      e.fetcher,
+      a.value,
+      e.refreshKey,
+      o.value.sortColumnKey,
+      o.value.sortColumnOrder
+    ]), B = S(() => m.value.sortColumnKey ? m.value : void 0), {
+      data: M,
+      datasource: _,
+      error: A,
+      isFetching: i
+    } = fe({
       fetcher: e.fetcher,
-      resetKey: m
+      resetKey: E,
+      sort: B
     }), {
-      fetchState: n,
-      hasData: b,
-      state: S
-    } = re(k, w, D), _ = g(() => S.value === n.SUCCESS && !b.value);
-    se({
-      emitState: (p) => t("state", p),
-      fetchLifecycleState: S,
-      hasData: b
+      fetchState: v,
+      hasData: u,
+      state: h
+    } = ie(M, A, i), C = S(() => h.value === v.SUCCESS && !u.value);
+    ue({
+      emitState: (d) => t("state", d),
+      fetchLifecycleState: h,
+      hasData: u
     });
-    const B = (p) => {
-      t("grid:ready", p.api);
+    const G = (d) => {
+      s.value = d.api, t("grid:ready", d.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 (d, F) => {
+      const L = $("KEmptyState");
+      return R(), z("div", Re, [
+        e.error ? (R(), z("div", Ke, [
+          V(d.$slots, "error-state", {}, () => [
+            U(L, {
               "icon-variant": "error",
-              message: C(a)("errorState.message"),
-              title: C(a)("errorState.title")
+              message: g(l)("errorState.message"),
+              title: g(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")
+        ])) : C.value ? (R(), z("div", Ee, [
+          V(d.$slots, "empty-state", {}, () => [
+            U(L, {
+              message: g(l)("emptyState.message"),
+              title: g(l)("emptyState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : (R(), V(C(Y), {
+        ])) : (R(), q(g(te), {
           key: 2,
-          "cache-block-size": e.pageSize,
+          "cache-block-size": g(a),
           class: "table-data-grid-grid",
-          "column-defs": C(i),
-          context: C(v),
-          datasource: C(E),
-          "default-col-def": u,
+          "column-defs": g(k),
+          context: g(D),
+          datasource: g(_),
+          "default-col-def": b,
           "infinite-initial-row-count": 1,
-          loading: C(D),
+          loading: g(i),
           "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: g(re),
+          onCellClicked: g(w),
+          onGridReady: G,
+          onRowClicked: g(p),
+          onSortChanged: g(f)
+        }, null, 8, ["cache-block-size", "column-defs", "context", "datasource", "loading", "theme", "onCellClicked", "onRowClicked", "onSortChanged"]))
       ]);
     };
   }
-}), De = (e, c) => {
+}), Oe = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [a, r] of c)
-    t[a] = r;
+  for (const [l, r] of n)
+    t[l] = r;
   return t;
-}, Fe = /* @__PURE__ */ De(we, [["__scopeId", "data-v-e14d8346"]]);
+}, ze = /* @__PURE__ */ Oe(Ie, [["__scopeId", "data-v-2bcd2d90"]]);
 export {
-  Fe as TableDataGrid
+  ze 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(k,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):(k=typeof globalThis<"u"?globalThis:k||self,e(k["kong-ui-public-table-data-grid"]={},k.Vue,k.AgGridVue,k.agGridCommunity,k["kong-ui-public-i18n"]))})(this,(function(k,e,_,K,N){"use strict";var R=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(R||{});const M=t=>!!t?.length;function A(t,s,o,n=M){const l=e.computed(()=>n(t.value)),c=e.computed(()=>{const m=t.value!==void 0,r=s.value!==void 0&&s.value!==null;return o.value?"LOADING":l.value?"SUCCESS":r?"ERROR":m?"SUCCESS":"PENDING"});return{fetchState:R,hasData:l,state:c}}const V=({emitState:t,fetchLifecycleState:s,hasData:o})=>{e.watch(()=>({hasData:o.value,state:s.value}),({hasData:n,state:l})=>{if(l!==R.PENDING){if(l===R.LOADING){t({hasData:n,state:"loading"});return}if(l===R.ERROR){t({hasData:n,state:"error"});return}t({hasData:n,state:"success"})}})},U=({startRow:t,endRow:s})=>{const o=s-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},L=({startRow:t,rowsLength:s,pageSize:o,total:n,hasMore:l})=>{if(typeof n=="number")return n;if(l!==!0&&(l===!1||s<o))return t+s},W=({fetcher:t,resetKey:s,sort:o})=>{const n=new Map,l=new Map,c=e.ref(0),a=e.shallowRef(),m=e.shallowRef(),r=e.shallowRef(),i=e.ref(0),C=e.ref(!1),S=d=>d===c.value,v=()=>{C.value=i.value>0},w=()=>{r.value=void 0,i.value+=1,v()},D=()=>{i.value=Math.max(0,i.value-1),v()},g=d=>{const p=l.get(d);if(p)return p;let u;const y={promise:new Promise(h=>{u=h}),resolve:h=>u(h)};return l.set(d,y),y},b=(d,p)=>{p.resolve(!1),l.get(d)===p&&l.delete(d)},E=async({blockIndex:d,currentBlockCompletion:p,datasourceId:u})=>{if(d===0)return"ready";const y=l.get(d-1);if(!y)return b(d,p),"failed";const h=await y.promise;return S(u)?h?"ready":(b(d,p),"failed"):(b(d,p),"stale")},x=({blockIndex:d,currentBlockCompletion:p,getRowsParams:u,pageSize:y,result:h})=>{h.cursor!==void 0&&n.set(d,h.cursor),u.successCallback(h.data,L({startRow:u.startRow,rowsLength:h.data.length,pageSize:y,total:h.total,hasMore:h.hasMore})),u.startRow===0&&(m.value=h.data),p.resolve(!0)},T=({blockIndex:d,currentBlockCompletion:p,fetchError:u,getRowsParams:y})=>{r.value=u,y.failCallback(),b(d,p)},B=()=>{const d=c.value+1;return c.value=d,n.clear(),l.clear(),m.value=void 0,r.value=void 0,i.value=0,v(),{async getRows(p){const{blockIndex:u,pageSize:y}=U({startRow:p.startRow,endRow:p.endRow}),h=g(u),O=await E({blockIndex:u,currentBlockCompletion:h,datasourceId:d});if(O!=="ready"){O==="failed"&&p.failCallback();return}w();try{const f=u>0?n.get(u-1):void 0,I=await t({mode:"infinite",pageSize:y,cursor:f,sort:o?.value});if(!S(d)){b(u,h);return}x({blockIndex:u,currentBlockCompletion:h,getRowsParams:p,pageSize:y,result:I})}catch(f){if(!S(d)){b(u,h);return}T({blockIndex:u,currentBlockCompletion:h,fetchError:f,getRowsParams:p})}finally{S(d)&&D()}}}},G=()=>{a.value=B()};return e.watch(()=>s?.value,()=>{G()},{immediate:!0}),{datasource:e.readonly(a),data:e.readonly(m),error:e.readonly(r),isFetching:e.readonly(C)}},q={key:1,class:"table-data-grid-cell-renderer"},P=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:s}){const o=e.shallowRef(t.params),n=e.ref(null),l=e.ref(!1),c=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}),m=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})),r=()=>a.value?.(m.value);let i,C,S=!1;const v=()=>{const g=n.value;l.value=!!g&&g.scrollWidth>g.clientWidth},w=()=>{S||(C!==void 0&&cancelAnimationFrame(C),C=requestAnimationFrame(()=>{C=void 0,v()}))},D=g=>{if(i?.disconnect(),g){i?.observe(g);const b=g.closest(".ag-cell");b&&i?.observe(b)}w()};return e.onMounted(()=>{i=new ResizeObserver(w),D(n.value)}),e.watch(n,D,{flush:"post"}),e.onUnmounted(()=>{S=!0,i?.disconnect(),C!==void 0&&cancelAnimationFrame(C)}),s({refresh(g){return o.value=g,e.nextTick(w),!0}}),(g,b)=>{const E=e.resolveComponent("KTooltip");return a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r),{key:0})):(e.openBlock(),e.createElementBlock("span",q,[e.createVNode(E,{class:"table-data-grid-cell-tooltip",disabled:!l.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:"body",text:c.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:n,class:"table-data-grid-cell-content"},e.toDisplayString(c.value),513)]),_:1},8,["disabled","text"])]))}}}),$=({headers:t,slots:s,initialSort:o})=>{const n=e.computed(()=>({cells:{slots:s}})),l=a=>{const m=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,...m?{sort:o?.sortColumnOrder,sortIndex:0}:{},valueGetter:r=>r.data?.[a.key],width:a.width,cellRenderer:P,cellRendererParams:{headerDef:a}}};return{columnDefs:e.computed(()=>t.value.map(l)),gridContext:n}},j=({config:t,headers:s,pageSize:o})=>{const n=new Set(s.filter(c=>c.sortable).map(c=>c.key)),l=t?.sortColumnKey&&n.has(t.sortColumnKey)?t.sortColumnKey:void 0;return{sortColumnKey:l,sortColumnOrder:l?t?.sortColumnOrder:void 0,pageSize:t?.pageSize??o}},F=(t,s)=>t.sortColumnKey===s.sortColumnKey&&t.sortColumnOrder===s.sortColumnOrder&&t.pageSize===s.pageSize,H=({headers:t,pageSize:s,tableConfig:o,emitTableConfigUpdate:n,onExternalConfigChange:l})=>{const c=C=>j({config:C,headers:t.value,pageSize:s.value}),a=e.ref(c(o.value));e.watch(()=>c(o.value),C=>{F(C,a.value)||(a.value=C,l?.(C))});const m=C=>{const S=c({...a.value,...C});F(S,a.value)||(a.value=S,n(S))},r=e.computed(()=>({sortColumnKey:a.value.sortColumnKey,sortColumnOrder:a.value.sortColumnOrder})),i=e.computed(()=>a.value.pageSize??s.value);return{activeTableConfig:e.readonly(a),activeSort:r,activePageSize:i,patchTableConfig:m}},Q=({cellClick:t,headers:s,rowClick:o})=>{const n=e.computed(()=>new Set(s.value.filter(r=>r.disableRowClick).map(r=>r.key))),l=r=>{const i=r.event?.target;return i instanceof Element?i.closest(".ag-cell")?.getAttribute("col-id")??void 0:void 0},c=r=>{const i=l(r);return!!(i&&n.value.has(i))};return{onCellClick:r=>{const i=r.colDef.colId;!r.data||!i||t({columnKey:i,row:r.data,value:r.value})},onRowClick:r=>{r.data&&!c(r)&&o(r.data,r)}}},J=({activeSort:t,emitSort:s,patchTableConfig:o})=>{const n=(c,a)=>{c.applyColumnState({state:a.sortColumnKey?[{colId:a.sortColumnKey,sort:a.sortColumnOrder??null,sortIndex:0}]:[],defaultState:{sort:null,sortIndex:null}})};return{onSortChanged:c=>{const a=c.api.getColumnState().filter(i=>i.sort).sort((i,C)=>(i.sortIndex??0)-(C.sortIndex??0)),m=a[a.length-1],r=m?{sortColumnKey:m.colId,sortColumnOrder:m.sort}:{};r.sortColumnKey===t.value.sortColumnKey&&r.sortColumnOrder===t.value.sortColumnOrder||(s(r),o(r),a.length>1&&n(c.api,r))},applySortToGrid:n}},X={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 Y(){const t=N.createI18n("en-us",X);return{i18n:t,i18nT:N.i18nTComponent(t)}}const Z={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},ee={key:0,class:"table-error-state","data-testid":"table-error-state"},te={key:1,class:"table-empty-state","data-testid":"table-empty-state"},oe=((t,s)=>{const o=t.__vccOpts||t;for(const[n,l]of s)o[n]=l;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:s}){K.ModuleRegistry.registerModules([K.AllCommunityModule,K.InfiniteRowModelModule]);const o=s,{i18n:{t:n}}=Y(),l=e.useSlots(),c=e.shallowRef(),{activeTableConfig:a,activeSort:m,activePageSize:r,patchTableConfig:i}=H({headers:e.toRef(()=>t.headers),pageSize:e.toRef(()=>t.pageSize),tableConfig:e.toRef(()=>t.tableConfig),emitTableConfigUpdate:f=>o("update:tableConfig",f),onExternalConfigChange:f=>{c.value&&S(c.value,{sortColumnKey:f.sortColumnKey,sortColumnOrder:f.sortColumnOrder})}}),{onSortChanged:C,applySortToGrid:S}=J({activeSort:m,emitSort:f=>o("sort",f),patchTableConfig:i}),{columnDefs:v,gridContext:w}=$({headers:e.toRef(()=>t.headers),slots:l,initialSort:m.value}),{onCellClick:D,onRowClick:g}=Q({cellClick:f=>o("cell:click",f),headers:e.toRef(()=>t.headers),rowClick:(f,I)=>o("row:click",f,I)}),b={resizable:!1,sortable:!1,suppressMovable:!0},E=e.computed(()=>[t.fetcher,r.value,t.refreshKey,a.value.sortColumnKey,a.value.sortColumnOrder]),x=e.computed(()=>m.value.sortColumnKey?m.value:void 0),{data:T,datasource:B,error:G,isFetching:d}=W({fetcher:t.fetcher,resetKey:E,sort:x}),{fetchState:p,hasData:u,state:y}=A(T,G,d),h=e.computed(()=>y.value===p.SUCCESS&&!u.value);V({emitState:f=>o("state",f),fetchLifecycleState:y,hasData:u});const O=f=>{c.value=f.api,o("grid:ready",f.api)};return(f,I)=>{const z=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",Z,[t.error?(e.openBlock(),e.createElementBlock("div",ee,[e.renderSlot(f.$slots,"error-state",{},()=>[e.createVNode(z,{"icon-variant":"error",message:e.unref(n)("errorState.message"),title:e.unref(n)("errorState.title")},null,8,["message","title"])],!0)])):h.value?(e.openBlock(),e.createElementBlock("div",te,[e.renderSlot(f.$slots,"empty-state",{},()=>[e.createVNode(z,{message:e.unref(n)("emptyState.message"),title:e.unref(n)("emptyState.title")},null,8,["message","title"])],!0)])):(e.openBlock(),e.createBlock(e.unref(_.AgGridVue),{key:2,"cache-block-size":e.unref(r),class:"table-data-grid-grid","column-defs":e.unref(v),context:e.unref(w),datasource:e.unref(B),"default-col-def":b,"infinite-initial-row-count":1,loading:e.unref(d),"row-model-type":"infinite","suppress-cell-focus":!0,"suppress-multi-sort":!0,theme:e.unref(K.themeQuartz),onCellClicked:e.unref(D),onGridReady:O,onRowClicked:e.unref(g),onSortChanged:e.unref(C)},null,8,["cache-block-size","column-defs","context","datasource","loading","theme","onCellClicked","onRowClicked","onSortChanged"]))])}}}),[["__scopeId","data-v-2bcd2d90"]]);k.TableDataGrid=oe,Object.defineProperty(k,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":"AAkQA,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;WA4RO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBAxR7C,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;;;;;;;;KAmRwD,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;;qCAtQoB,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;;EAgQ3D,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,12 @@ interface UseFetchInfiniteOptions<Row extends object = TableDataGridRow> {
      * the datasource and clears cursor/block state back to block 0.
      */
     resetKey?: Readonly<Ref<unknown>>;
+    /**
+     * Current resolved sort. Read once per datasource build (the component
+     * layer includes sort in `resetKey`, so a sort change always rebuilds the
+     * datasource) and forwarded to every fetcher call for that generation.
+     */
+    sort?: Readonly<Ref<TableDataGridSort | undefined>>;
 }
 /**
  * Owns AG Grid infinite datasource creation and cursor-backed fetch
@@ -30,7 +36,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;;;;OAIG;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;;;;;;;;;;;;;CAoU9B,CAAA"}

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

@@ -1,13 +1,24 @@
-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;
+    /**
+     * Sort to seed into AG Grid's initial column state, captured once (not a
+     * reactive ref). This only covers the very first render, e.g. a
+     * host-controlled `tableConfig` prop supplied at mount. Ongoing sort sync
+     * after mount goes through `applyColumnState` (see `useTableDataGridSort`),
+     * not through recomputing column defs — AG Grid already reflects a
+     * grid-driven sort change internally, and re-pushing column defs on every
+     * such change would redundantly re-trigger AG Grid's own column state
+     * handling.
+     */
+    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;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAA;CAChC;;;;;;;;;CAgCA,CAAA"}

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

@@ -0,0 +1,42 @@
+import type { TableDataGridConfig, TableDataGridHeader, TableDataGridRow, TableDataGridSort } from '../types';
+import type { Ref } from 'vue';
+/**
+ * Owns `TableDataGrid`'s current `tableConfig` state: resolves the
+ * host-supplied (or absent) `tableConfig` prop against the current headers
+ * and page size, mirrors it into an internal ref, and exposes a single
+ * write path (`patchTableConfig`) for grid-driven changes.
+ *
+ * Grid-driven writes go through `patchTableConfig`, which mutates
+ * `activeTableConfig` directly and never touches the prop, so they can
+ * never re-trigger the prop watcher below. Host-driven writes (a changed
+ * `tableConfig` prop) go through that watcher, which calls
+ * `onExternalConfigChange` so the caller can push the change into AG Grid
+ * imperatively, since it didn't originate from a grid interaction.
+ *
+ * @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;;;;;;;;;;;;;;;;;;GAkBG;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;;;;;;;;;;;;8BAckC,OAAO,CAAC,mBAAmB,CAAC;CAwB9D,CAAA"}

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

@@ -0,0 +1,27 @@
+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
+ * package-owned `sort` shape, and pushes a host- or package-driven sort
+ * back onto the grid.
+ *
+ * A grid-driven event is only acted on when it actually changes the
+ * current sort — comparing against `activeSort` (rather than a mutable
+ * re-entrancy flag) makes this idempotent, so it also absorbs the echo
+ * `sortChanged` event that `applySortToGrid`'s own `applyColumnState` call
+ * fires.
+ *
+ * @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;;;;;;;;;;;;;;GAcG;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,22 @@ 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;
+};
+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;CACnB,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.746da2082.0",
   "type": "module",
   "main": "./dist/table-data-grid.umd.js",
   "module": "./dist/table-data-grid.es.js",