@kong-ui-public/table-data-grid 0.7.1 → 0.7.2-pr.3884.382d7835d.0

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

@@ -1,40 +1,40 @@
-import { computed as d, watch as A, ref as M, shallowRef as N, readonly as P, shallowReadonly as ge, defineComponent as re, onMounted as se, onUnmounted as Ce, nextTick as pe, resolveComponent as ie, openBlock as E, createElementBlock as K, normalizeClass as ue, createElementVNode as V, createBlock as q, resolveDynamicComponent as te, withCtx as ae, createVNode as Q, toDisplayString as le, createCommentVNode as L, normalizeStyle as he, h as be, renderSlot as U, useSlots as ye, useTemplateRef as Se, onBeforeUnmount as ke, toRef as z, unref as S } from "vue";
+import { computed as m, watch as M, ref as L, shallowRef as q, readonly as J, shallowReadonly as Ce, defineComponent as ie, onMounted as ue, onUnmounted as ge, nextTick as pe, resolveComponent as ce, openBlock as K, createElementBlock as _, normalizeClass as de, createElementVNode as H, createBlock as te, resolveDynamicComponent as oe, withCtx as le, createVNode as ae, toDisplayString as ne, createCommentVNode as Q, normalizeStyle as he, h as ye, renderSlot as X, useSlots as be, useTemplateRef as Se, onBeforeUnmount as ke, toRef as $, unref as D } from "vue";
 import { AgGridVue as we } from "ag-grid-vue3";
-import { ModuleRegistry as De, AllCommunityModule as Re, ClientSideRowModelModule as Te, InfiniteRowModelModule as Ee, themeQuartz as xe } from "ag-grid-community";
-import { createI18n as Oe, i18nTComponent as Ie } from "@kong-ui-public/i18n";
-var $ = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))($ || {});
-const Fe = (e) => !!e?.length;
-function Ke(e, a, t, l = Fe) {
-  const n = d(() => l(e.value)), o = d(() => {
-    const h = e.value !== void 0, r = a.value !== void 0 && a.value !== null;
-    return t.value ? "LOADING" : n.value ? "SUCCESS" : r ? "ERROR" : h ? "SUCCESS" : "PENDING";
+import { ModuleRegistry as De, AllCommunityModule as Re, ClientSideRowModelModule as Oe, InfiniteRowModelModule as Te, themeQuartz as Ee } from "ag-grid-community";
+import { createI18n as xe, i18nTComponent as Ke } from "@kong-ui-public/i18n";
+var j = /* @__PURE__ */ ((e) => (e.PENDING = "PENDING", e.LOADING = "LOADING", e.SUCCESS = "SUCCESS", e.ERROR = "ERROR", e))(j || {});
+const Ie = (e) => !!e?.length;
+function Fe(e, a, t, l = Ie) {
+  const o = m(() => l(e.value)), n = m(() => {
+    const u = e.value !== void 0, r = a.value !== void 0 && a.value !== null;
+    return t.value ? "LOADING" : o.value ? "SUCCESS" : r ? "ERROR" : u ? "SUCCESS" : "PENDING";
   });
   return {
-    fetchState: $,
-    hasData: n,
-    state: o
+    fetchState: j,
+    hasData: o,
+    state: n
   };
 }
-const ze = ({
+const Ge = ({
   emitState: e,
   fetchLifecycleState: a,
   hasData: t
 }) => {
-  A(
+  M(
     () => ({
       hasData: t.value,
       state: a.value
     }),
-    ({ hasData: l, state: n }) => {
-      if (n !== $.PENDING) {
-        if (n === $.LOADING) {
+    ({ hasData: l, state: o }) => {
+      if (o !== j.PENDING) {
+        if (o === j.LOADING) {
           e({
             hasData: l,
             state: "loading"
           });
           return;
         }
-        if (n === $.ERROR) {
+        if (o === j.ERROR) {
           e({
             hasData: l,
             state: "error"
@@ -48,200 +48,217 @@ const ze = ({
       }
     }
   );
-}, Ge = ({ startRow: e, endRow: a }) => {
+}, ze = ({ startRow: e, endRow: a }) => {
   const t = a - e;
   return {
     blockIndex: t > 0 ? Math.floor(e / t) : 0,
     pageSize: t
   };
-}, Me = ({
+}, Ne = ({
   startRow: e,
   rowsLength: a,
   pageSize: t,
   total: l,
-  hasMore: n
+  hasMore: o
 }) => {
   if (typeof l == "number")
     return l;
-  if (n !== !0 && (n === !1 || a < t))
+  if (o !== !0 && (o === !1 || a < t))
     return e + a;
-}, Ne = ({
+}, _e = ({
   fetcher: e,
   resetKey: a,
   sort: t
 }) => {
-  const l = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), o = M(0), u = N(), h = N(), r = N(), v = M(0), p = M(!1);
-  let y, R;
-  const k = (g) => g === o.value && y === e.value && R === a?.value, F = () => {
-    p.value = v.value > 0;
-  }, i = () => {
-    r.value = void 0, v.value += 1, F();
-  }, m = () => {
-    v.value = Math.max(0, v.value - 1), F();
-  }, w = (g) => {
-    const c = n.get(g);
-    if (c)
-      return c;
-    let s;
-    const f = {
-      promise: new Promise((C) => {
-        s = C;
+  const l = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), n = L(0), g = L(0), u = q(), r = q(), f = q(), b = L(0), w = L(!1);
+  let p, R, B = t?.value?.sortColumnKey, s = t?.value?.sortColumnOrder;
+  const v = (c) => c === n.value && p === e.value && R === a?.value, S = (c, d) => v(c) && d === g.value && B === t?.value?.sortColumnKey && s === t?.value?.sortColumnOrder, A = (c) => {
+    if (!t)
+      return !0;
+    const d = t.value;
+    return !d?.sortColumnKey || !d.sortColumnOrder ? c.length === 0 : c.length === 1 && c[0].colId === d.sortColumnKey && c[0].sort === d.sortColumnOrder;
+  }, T = () => {
+    w.value = b.value > 0;
+  }, E = () => {
+    g.value += 1, B = t?.value?.sortColumnKey, s = t?.value?.sortColumnOrder;
+    for (const c of o.values())
+      c.resolve(!1);
+    l.clear(), o.clear(), r.value = void 0, f.value = void 0, b.value = 0, T();
+  }, I = () => {
+    f.value = void 0, b.value += 1, T();
+  }, P = () => {
+    b.value = Math.max(0, b.value - 1), T();
+  }, F = (c) => {
+    const d = o.get(c);
+    if (d)
+      return d;
+    let C;
+    const y = {
+      promise: new Promise((k) => {
+        C = k;
       }),
-      resolve: (C) => s(C)
+      resolve: (k) => C(k)
     };
-    return n.set(g, f), f;
-  }, D = (g, c) => {
-    c.resolve(!1), n.get(g) === c && n.delete(g);
-  }, O = async ({
-    blockIndex: g,
-    currentBlockCompletion: c,
-    datasourceId: s
+    return o.set(c, y), y;
+  }, O = (c, d) => {
+    d.resolve(!1), o.get(c) === d && o.delete(c);
+  }, U = async ({
+    blockIndex: c,
+    currentBlockCompletion: d,
+    datasourceId: C,
+    requestGeneration: y
   }) => {
-    if (g === 0)
+    if (c === 0)
       return "ready";
-    const f = n.get(g - 1);
-    if (!f)
-      return D(g, c), "failed";
-    const C = await f.promise;
-    return k(s) ? C ? "ready" : (D(g, c), "failed") : (D(g, c), "stale");
-  }, I = ({
-    blockIndex: g,
-    currentBlockCompletion: c,
-    getRowsParams: s,
-    pageSize: f,
-    result: C
+    const k = o.get(c - 1);
+    if (!k)
+      return O(c, d), "failed";
+    const z = await k.promise;
+    return S(C, y) ? z ? "ready" : (O(c, d), "failed") : (O(c, d), "stale");
+  }, h = ({
+    blockIndex: c,
+    currentBlockCompletion: d,
+    getRowsParams: C,
+    pageSize: y,
+    result: k
   }) => {
-    C.cursor !== void 0 && l.set(g, C.cursor), s.successCallback(C.data, Me({
-      startRow: s.startRow,
-      rowsLength: C.data.length,
-      pageSize: f,
-      total: C.total,
-      hasMore: C.hasMore
-    })), s.startRow === 0 && (h.value = C.data), c.resolve(!0);
+    k.cursor !== void 0 && l.set(c, k.cursor), C.successCallback(k.data, Ne({
+      startRow: C.startRow,
+      rowsLength: k.data.length,
+      pageSize: y,
+      total: k.total,
+      hasMore: k.hasMore
+    })), C.startRow === 0 && (r.value = k.data), d.resolve(!0);
   }, x = ({
-    blockIndex: g,
-    currentBlockCompletion: c,
-    fetchError: s,
-    getRowsParams: f
+    blockIndex: c,
+    currentBlockCompletion: d,
+    fetchError: C,
+    getRowsParams: y
   }) => {
-    r.value = s, f.failCallback(), D(g, c);
+    f.value = C, y.failCallback(), O(c, d);
   }, G = () => {
-    const g = e.value;
-    if (!g)
+    const c = e.value;
+    if (!c)
       throw new Error("TableDataGrid requires a fetcher in infinite mode");
-    y = g, R = a?.value;
-    const c = o.value + 1;
-    return o.value = c, l.clear(), n.clear(), h.value = void 0, r.value = void 0, v.value = 0, F(), {
-      async getRows(s) {
-        if (!k(c)) {
-          s.failCallback();
+    p = c, R = a?.value;
+    const d = n.value + 1;
+    return n.value = d, E(), {
+      async getRows(C) {
+        if (!v(d) || !A(C.sortModel)) {
+          C.failCallback();
           return;
         }
         const {
-          blockIndex: f,
-          pageSize: C
-        } = Ge({
-          startRow: s.startRow,
-          endRow: s.endRow
-        }), T = w(f);
-        if (await O({
-          blockIndex: f,
-          currentBlockCompletion: T,
-          datasourceId: c
-        }) !== "ready" || !k(c)) {
-          s.failCallback(), D(f, T);
+          blockIndex: y,
+          pageSize: k
+        } = ze({
+          startRow: C.startRow,
+          endRow: C.endRow
+        });
+        y === 0 && o.has(0) && E();
+        const z = g.value, i = F(y);
+        if (await U({
+          blockIndex: y,
+          currentBlockCompletion: i,
+          datasourceId: d,
+          requestGeneration: z
+        }) !== "ready" || !S(d, z)) {
+          C.failCallback(), O(y, i);
           return;
         }
-        i();
+        I();
         try {
-          const B = f > 0 ? l.get(f - 1) : void 0, H = await g({
+          const N = y > 0 ? l.get(y - 1) : void 0, Z = await c({
             mode: "infinite",
-            pageSize: C,
-            cursor: B,
+            pageSize: k,
+            cursor: N,
             // Always read the latest sort, not a stale one.
             sort: t?.value
           });
-          if (!k(c)) {
-            s.failCallback(), D(f, T);
+          if (!S(d, z)) {
+            C.failCallback(), O(y, i);
             return;
           }
-          I({
-            blockIndex: f,
-            currentBlockCompletion: T,
-            getRowsParams: s,
-            pageSize: C,
-            result: H
+          h({
+            blockIndex: y,
+            currentBlockCompletion: i,
+            getRowsParams: C,
+            pageSize: k,
+            result: Z
           });
-        } catch (B) {
-          if (!k(c)) {
-            s.failCallback(), D(f, T);
+        } catch (N) {
+          if (!S(d, z)) {
+            C.failCallback(), O(y, i);
             return;
           }
           x({
-            blockIndex: f,
-            currentBlockCompletion: T,
-            fetchError: B,
-            getRowsParams: s
+            blockIndex: y,
+            currentBlockCompletion: i,
+            fetchError: N,
+            getRowsParams: C
           });
         } finally {
-          k(c) && m();
+          S(d, z) && P();
         }
       }
     };
-  }, _ = () => {
+  }, W = () => {
     u.value = G();
   };
-  return A(
+  return M(
     [e, () => a?.value],
     () => {
-      _();
+      W();
     },
     { immediate: !0 }
+  ), M(
+    [() => t?.value?.sortColumnKey, () => t?.value?.sortColumnOrder],
+    () => E()
   ), {
-    datasource: P(u),
-    data: ge(h),
-    error: P(r),
-    isFetching: P(p)
+    datasource: J(u),
+    data: Ce(r),
+    error: J(f),
+    isFetching: J(w)
   };
-}, _e = { title: "No Data", message: "There is no data to display." }, Be = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, Ve = {
-  emptyState: _e,
+}, Me = { title: "No Data", message: "There is no data to display." }, Be = { title: "An error occurred", message: "Data cannot be displayed due to an error." }, Ae = {
+  emptyState: Me,
   errorState: Be
 };
-function ce() {
-  const e = Oe("en-us", Ve);
+function ve() {
+  const e = xe("en-us", Ae);
   return {
     i18n: e,
-    i18nT: Ie(e)
+    i18nT: Ke(e)
     // Translation component <i18n-t>
   };
 }
-const { i18n: $e } = ce(), de = (e, a) => {
+const { i18n: Ve } = ve(), me = (e, a) => {
   const t = Reflect.get(a, e.key);
   return e.valueFormatter ? e.valueFormatter(t, a) : String(t ?? "");
-}, W = (e) => typeof e != "number" ? null : Number.isFinite(e) ? e : null, Ae = (e, a) => e.reduce(
+}, Y = (e) => typeof e != "number" ? null : Number.isFinite(e) ? e : null, $e = (e, a) => e.reduce(
   (t, l) => {
-    const n = W(Reflect.get(l, a.key));
-    return n === null ? t : {
-      sum: t.sum + n,
-      max: Math.max(t.max, n)
+    const o = Y(Reflect.get(l, a.key));
+    return o === null ? t : {
+      sum: t.sum + o,
+      max: Math.max(t.max, o)
     };
   },
   { sum: 0, max: 0 }
 ), Le = (e, a) => {
-  const t = (a ?? []).filter((o) => Number.isFinite(o.value) && e >= o.value);
+  const t = (a ?? []).filter((n) => Number.isFinite(n.value) && e >= n.value);
   if (!t.length)
     return;
-  const l = Math.max(...t.map((o) => o.value));
-  return t.filter((o) => o.value === l).some((o) => o.type === "error") ? "error" : "warning";
+  const l = Math.max(...t.map((n) => n.value));
+  return t.filter((n) => n.value === l).some((n) => n.type === "error") ? "error" : "warning";
 }, Pe = (e, a, t) => {
   if (e === null)
     return 0;
   const l = t === "relative" ? a.sum : a.max;
   return l > 0 ? Math.min(Math.max(e / l, 0), 1) : 0;
 }, Ue = (e) => {
-  const a = (t) => $e.formatNumber(t, { maximumFractionDigits: 2 });
+  const a = (t) => Ve.formatNumber(t, { maximumFractionDigits: 2 });
   return e > 0 && e < 0.01 ? `< ${a(0.01)} %` : `${a(e)} %`;
-}, ve = ({
+}, fe = ({
   value: e,
   stats: a,
   header: t
@@ -250,21 +267,21 @@ const { i18n: $e } = ce(), de = (e, a) => {
     return;
   const l = e / a.sum * 100;
   return t.percentageFormatter?.(l) ?? Ue(l);
-}, oe = (e, a) => a !== void 0 && a.length > (e?.length ?? -1) ? a : e, We = ({
+}, re = (e, a) => a !== void 0 && a.length > (e?.length ?? -1) ? a : e, We = ({
   rows: e,
   header: a,
   stats: t
 }) => e.reduce(
-  (l, n) => ({
-    value: oe(l.value, de(a, n)) ?? "",
-    relative: a.showPercentage ? oe(l.relative, ve({
-      value: W(Reflect.get(n, a.key)),
+  (l, o) => ({
+    value: re(l.value, me(a, o)) ?? "",
+    relative: a.showPercentage ? re(l.relative, fe({
+      value: Y(Reflect.get(o, a.key)),
       stats: t,
       header: a
     })) : void 0
   }),
   { value: "" }
-), He = ["data-threshold"], je = { class: "table-data-grid-cell-label-track" }, qe = { class: "table-data-grid-cell-label" }, Qe = {
+), qe = ["data-threshold"], He = { class: "table-data-grid-cell-label-track" }, je = { class: "table-data-grid-cell-label" }, Qe = {
   key: 0,
   class: "table-data-grid-cell-relative",
   "data-testid": "table-data-grid-cell-relative"
@@ -272,128 +289,128 @@ const { i18n: $e } = ce(), de = (e, a) => {
   key: 0,
   "aria-hidden": "true",
   class: "table-data-grid-cell-label table-data-grid-cell-label-sizer"
-}, Xe = ["data-text"], Ye = ["data-text"], Ze = ["data-threshold"], et = /* @__PURE__ */ re({
+}, Xe = ["data-text"], Ye = ["data-text"], Ze = ["data-threshold"], et = /* @__PURE__ */ ie({
   name: "TableDataGridCellRenderer",
   __name: "TableDataGridCellRenderer",
   props: {
     params: {}
   },
   setup(e, { expose: a }) {
-    const t = N(e.params), l = M(null), n = M(!1), o = d(() => t.value.headerDef ?? {
+    const t = q(e.params), l = L(null), o = L(!1), n = m(() => t.value.headerDef ?? {
       key: "",
       label: ""
-    }), u = d(() => t.value.context?.presentation), h = d(() => t.value.context?.cells?.tooltipTarget?.value ?? "body"), r = d(() => t.value.valueFormatted ?? String(t.value.value ?? "")), v = d(() => t.value.value), p = d(() => W(v.value)), y = d(() => u.value?.stats[o.value.key]), R = d(() => o.value.showPercentage && y.value ? ve({
-      value: p.value,
-      stats: y.value,
-      header: o.value
-    }) : void 0), k = d(() => !!o.value.bar && !!y.value && (p.value !== null || v.value === null || v.value === void 0)), F = d(() => k.value && y.value ? Pe(p.value, y.value, o.value.bar) * 100 : 0), i = d(() => k.value ? u.value?.labelSizers[o.value.key] : void 0), m = d(() => o.value.thresholds?.length && p.value !== null ? Le(p.value, o.value.thresholds) : void 0), w = d(() => ({
-      column: o.value,
+    }), g = m(() => t.value.context?.presentation), u = m(() => t.value.context?.cells?.tooltipTarget?.value ?? "body"), r = m(() => t.value.valueFormatted ?? String(t.value.value ?? "")), f = m(() => t.value.value), b = m(() => Y(f.value)), w = m(() => g.value?.stats[n.value.key]), p = m(() => n.value.showPercentage && w.value ? fe({
+      value: b.value,
+      stats: w.value,
+      header: n.value
+    }) : void 0), R = m(() => !!n.value.bar && !!w.value && (b.value !== null || f.value === null || f.value === void 0)), B = m(() => R.value && w.value ? Pe(b.value, w.value, n.value.bar) * 100 : 0), s = m(() => R.value ? g.value?.labelSizers[n.value.key] : void 0), v = m(() => n.value.thresholds?.length && b.value !== null ? Le(b.value, n.value.thresholds) : void 0), S = m(() => ({
+      column: n.value,
       refreshCell: () => {
-        const s = t.value.node;
-        s && t.value.api.refreshCells({ force: !0, rowNodes: [s] });
+        const h = t.value.node;
+        h && t.value.api.refreshCells({ force: !0, rowNodes: [h] });
       },
       row: t.value.data ?? {},
       rowIndex: t.value.node?.rowIndex ?? 0,
       rowValue: t.value.value,
       selected: t.value.node?.isSelected() ?? !1
-    })), D = (s, { slots: f }) => {
-      const C = t.value.colDef?.colId, T = t.value.context?.cells?.slots;
-      return !C || C === "cell-icon" || !T?.[C] ? f.default?.() : be(
+    })), A = (h, { slots: x }) => {
+      const G = t.value.colDef?.colId, W = t.value.context?.cells?.slots;
+      return !G || G === "cell-icon" || !W?.[G] ? x.default?.() : ye(
         "span",
         { class: "table-data-grid-cell-slot-content" },
-        U(T, C, w.value, () => f.default?.() ?? [])
+        X(W, G, S.value, () => x.default?.() ?? [])
       );
-    }, O = () => {
-      const s = t.value.context?.cells?.slots;
-      return s?.["cell-icon"] ? U(s, "cell-icon", w.value) : null;
+    }, T = () => {
+      const h = t.value.context?.cells?.slots;
+      return h?.["cell-icon"] ? X(h, "cell-icon", S.value) : null;
     };
-    let I, x, G = !1;
-    const _ = () => {
-      const s = l.value;
-      n.value = !!s && s.scrollWidth > s.clientWidth;
-    }, g = () => {
-      G || (x !== void 0 && cancelAnimationFrame(x), x = requestAnimationFrame(() => {
-        x = void 0, _();
+    let E, I, P = !1;
+    const F = () => {
+      const h = l.value;
+      o.value = !!h && h.scrollWidth > h.clientWidth;
+    }, O = () => {
+      P || (I !== void 0 && cancelAnimationFrame(I), I = requestAnimationFrame(() => {
+        I = void 0, F();
       }));
-    }, c = (s) => {
-      if (I?.disconnect(), s) {
-        I?.observe(s);
-        const f = s.closest(".ag-cell");
-        f && I?.observe(f);
+    }, U = (h) => {
+      if (E?.disconnect(), h) {
+        E?.observe(h);
+        const x = h.closest(".ag-cell");
+        x && E?.observe(x);
       }
-      g();
+      O();
     };
-    return se(() => {
-      I = new ResizeObserver(g), c(l.value);
-    }), A(l, c), Ce(() => {
-      G = !0, I?.disconnect(), x !== void 0 && cancelAnimationFrame(x);
+    return ue(() => {
+      E = new ResizeObserver(O), U(l.value);
+    }), M(l, U), ge(() => {
+      P = !0, E?.disconnect(), I !== void 0 && cancelAnimationFrame(I);
     }), a({
-      refresh(s) {
-        return t.value = s, pe(g), !0;
+      refresh(h) {
+        return t.value = h, pe(O), !0;
       }
-    }), (s, f) => {
-      const C = ie("KTooltip");
-      return E(), K("span", {
-        class: ue(["table-data-grid-cell-renderer", {
-          "table-data-grid-cell-renderer--bar": k.value,
-          "table-data-grid-cell-renderer--percentage": !!R.value,
-          [`table-data-grid-cell-renderer--text-${m.value}`]: !k.value && !!m.value
+    }), (h, x) => {
+      const G = ce("KTooltip");
+      return K(), _("span", {
+        class: de(["table-data-grid-cell-renderer", {
+          "table-data-grid-cell-renderer--bar": R.value,
+          "table-data-grid-cell-renderer--percentage": !!p.value,
+          [`table-data-grid-cell-renderer--text-${v.value}`]: !R.value && !!v.value
         }]),
-        "data-threshold": m.value
+        "data-threshold": v.value
       }, [
-        V("span", je, [
-          V("span", qe, [
-            (E(), q(te(O))),
-            (E(), q(te(D), null, {
-              default: ae(() => [
-                Q(C, {
+        H("span", He, [
+          H("span", je, [
+            (K(), te(oe(T))),
+            (K(), te(oe(A), null, {
+              default: le(() => [
+                ae(G, {
                   class: "table-data-grid-cell-tooltip",
-                  disabled: !n.value,
+                  disabled: !o.value,
                   "kpop-attributes": { popoverDelay: 400 },
                   "max-width": "300",
                   placement: "bottom-start",
-                  target: h.value,
+                  target: u.value,
                   text: r.value
                 }, {
-                  default: ae(() => [
-                    V("span", {
+                  default: le(() => [
+                    H("span", {
                       ref_key: "contentElement",
                       ref: l,
                       class: "table-data-grid-cell-content"
-                    }, le(r.value), 513)
+                    }, ne(r.value), 513)
                   ]),
                   _: 1
                 }, 8, ["disabled", "target", "text"])
               ]),
               _: 1
             })),
-            R.value ? (E(), K("span", Qe, "(" + le(R.value) + ")", 1)) : L("", !0)
+            p.value ? (K(), _("span", Qe, "(" + ne(p.value) + ")", 1)) : Q("", !0)
           ]),
-          i.value ? (E(), K("span", Je, [
-            V("span", {
+          s.value ? (K(), _("span", Je, [
+            H("span", {
               class: "table-data-grid-cell-sizer-value",
-              "data-text": i.value.value
+              "data-text": s.value.value
             }, null, 8, Xe),
-            i.value.relative ? (E(), K("span", {
+            s.value.relative ? (K(), _("span", {
               key: 0,
               class: "table-data-grid-cell-sizer-relative",
-              "data-text": `(${i.value.relative})`
-            }, null, 8, Ye)) : L("", !0)
-          ])) : L("", !0)
+              "data-text": `(${s.value.relative})`
+            }, null, 8, Ye)) : Q("", !0)
+          ])) : Q("", !0)
         ]),
-        k.value ? (E(), K("span", {
+        R.value ? (K(), _("span", {
           key: 0,
           class: "table-data-grid-cell-bar",
           "data-testid": "table-data-grid-cell-bar",
-          "data-threshold": m.value
+          "data-threshold": v.value
         }, [
-          V("span", {
+          H("span", {
             class: "table-data-grid-cell-bar-fill",
             "data-testid": "table-data-grid-cell-bar-fill",
-            style: he({ width: `${F.value}%` })
+            style: he({ width: `${B.value}%` })
           }, null, 4)
-        ], 8, Ze)) : L("", !0)
-      ], 10, He);
+        ], 8, Ze)) : Q("", !0)
+      ], 10, qe);
     };
   }
 }), tt = ({
@@ -401,156 +418,160 @@ const { i18n: $e } = ce(), de = (e, a) => {
   slots: a,
   initialSort: t,
   mode: l,
-  rows: n,
-  tooltipTarget: o
+  rows: o,
+  tooltipTarget: n
 }) => {
-  const u = l ?? "infinite", h = /* @__PURE__ */ new Set(), r = (i) => !!(i.showPercentage || i.bar || i.thresholds?.length);
-  A([e, () => n?.value], () => {
-    e.value.forEach((i) => {
-      if (!r(i))
+  const g = l ?? "infinite", u = /* @__PURE__ */ new Set(), r = (s) => !!(s.showPercentage || s.bar || s.thresholds?.length);
+  M([e, () => o?.value], () => {
+    e.value.forEach((s) => {
+      if (!r(s))
         return;
-      let m;
-      if (u === "infinite" && (i.showPercentage || i.bar) ? m = "percentage and bar presentation is only supported in unpaginated mode" : u === "unpaginated" && n?.value?.some((D) => {
-        const O = Reflect.get(D, i.key);
-        return O != null && W(O) === null;
-      }) && (m = "contains non-finite or nonnumeric values; numeric presentation skips those values"), !m)
+      let v;
+      if (g === "infinite" && (s.showPercentage || s.bar) ? v = "percentage and bar presentation is only supported in unpaginated mode" : g === "unpaginated" && o?.value?.some((A) => {
+        const T = Reflect.get(A, s.key);
+        return T != null && Y(T) === null;
+      }) && (v = "contains non-finite or nonnumeric values; numeric presentation skips those values"), !v)
         return;
-      const w = `${i.key}:${m}`;
-      h.has(w) || (h.add(w), console.warn(`[TableDataGrid] Column "${i.key}" ${m}.`));
+      const S = `${s.key}:${v}`;
+      u.has(S) || (u.add(S), console.warn(`[TableDataGrid] Column "${s.key}" ${v}.`));
     });
   }, { immediate: !0 });
-  const p = d(() => {
-    if (u !== "unpaginated")
+  const b = m(() => {
+    if (g !== "unpaginated")
       return {};
-    const i = n?.value ?? [];
+    const s = o?.value ?? [];
     return Object.fromEntries(
-      e.value.filter((m) => m.showPercentage || m.bar).map((m) => [m.key, Ae(i, m)])
+      e.value.filter((v) => v.showPercentage || v.bar).map((v) => [v.key, $e(s, v)])
     );
-  }), y = d(() => {
-    if (u !== "unpaginated")
+  }), w = m(() => {
+    if (g !== "unpaginated")
       return {};
-    const i = n?.value ?? [];
+    const s = o?.value ?? [];
     return Object.fromEntries(
-      e.value.filter((m) => m.bar).map((m) => [m.key, We({
-        rows: i,
-        header: m,
-        stats: p.value[m.key]
+      e.value.filter((v) => v.bar).map((v) => [v.key, We({
+        rows: s,
+        header: v,
+        stats: b.value[v.key]
       })])
     );
-  }), R = d(() => ({
-    cells: { slots: a, tooltipTarget: o },
+  }), p = m(() => ({
+    cells: { slots: a, tooltipTarget: n },
     presentation: {
-      stats: p.value,
-      labelSizers: y.value
+      stats: b.value,
+      labelSizers: w.value
     }
-  })), k = (i) => {
-    const m = t?.sortColumnKey === i.key;
+  })), R = (s) => {
+    const v = t?.sortColumnKey === s.key;
     return {
-      colId: i.key,
+      colId: s.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,
-      sortable: i.sortable ?? !1,
-      unSortIcon: i.showSortIcon,
-      ...m ? { initialSort: t?.sortColumnOrder, initialSortIndex: 0 } : {},
-      valueGetter: (w) => w.data?.[i.key],
-      valueFormatter: (w) => w.data ? de(i, w.data) : String(w.value ?? ""),
-      width: i.width,
+      flex: !s.width && !s.maxWidth ? 1 : void 0,
+      headerName: s.label,
+      maxWidth: s.maxWidth,
+      minWidth: s.minWidth,
+      sortable: s.sortable ?? !1,
+      unSortIcon: s.showSortIcon,
+      ...v ? { initialSort: t?.sortColumnOrder, initialSortIndex: 0 } : {},
+      valueGetter: (S) => S.data?.[s.key],
+      valueFormatter: (S) => S.data ? me(s, S.data) : String(S.value ?? ""),
+      width: s.width,
       cellRenderer: et,
       // custom params passed to the cell renderer.
-      cellRendererParams: { headerDef: i }
+      cellRendererParams: { headerDef: s }
     };
   };
   return {
-    columnDefs: d(() => e.value.map(k)),
-    gridContext: R
+    columnDefs: m(() => e.value.map(R)),
+    gridContext: p
   };
-}, j = ({
+}, ee = ({
   config: e,
   headers: a,
   pageSize: t
 }) => {
-  const l = new Set(a.filter((o) => o.sortable).map((o) => o.key)), n = e?.sortColumnKey && l.has(e.sortColumnKey) ? e.sortColumnKey : void 0;
+  const l = new Set(a.filter((n) => n.sortable).map((n) => n.key)), o = e?.sortColumnKey && l.has(e.sortColumnKey) ? e.sortColumnKey : void 0;
   return {
-    sortColumnKey: n,
-    sortColumnOrder: n ? e?.sortColumnOrder : void 0,
+    sortColumnKey: o,
+    sortColumnOrder: o ? e?.sortColumnOrder : void 0,
     pageSize: e?.pageSize ?? t,
     ...e?.fitToContent !== void 0 ? { fitToContent: e.fitToContent } : {}
   };
-}, ne = (e, a) => e.sortColumnKey === a.sortColumnKey && e.sortColumnOrder === a.sortColumnOrder && e.pageSize === a.pageSize && e.fitToContent === a.fitToContent, at = ({
+}, se = (e, a) => e.sortColumnKey === a.sortColumnKey && e.sortColumnOrder === a.sortColumnOrder && e.pageSize === a.pageSize && e.fitToContent === a.fitToContent, at = ({
   headers: e,
   pageSize: a,
   tableConfig: t,
-  emitTableConfigUpdate: l,
+  emitSort: l,
+  emitTableConfigUpdate: o,
   onExternalConfigChange: n
 }) => {
-  const o = d(() => t.value ? j({ config: t.value, headers: e.value, pageSize: a.value }) : void 0), u = M(
-    o.value ?? j({ config: void 0, headers: e.value, pageSize: a.value })
+  const g = m(() => t.value ? ee({ config: t.value, headers: e.value, pageSize: a.value }) : void 0), u = L(
+    g.value ?? ee({ config: void 0, headers: e.value, pageSize: a.value })
   );
-  A(o, (p) => {
-    p && !ne(p, u.value) && (u.value = p, n?.(p));
+  M(g, (w) => {
+    w && !se(w, u.value) && (u.value = w, n?.(w));
   });
-  const h = (p) => {
-    const y = j({
-      config: { ...u.value, ...p },
+  const r = (w) => {
+    const p = ee({
+      config: { ...u.value, ...w },
       headers: e.value,
       pageSize: a.value
     });
-    ne(y, u.value) || (u.value = y, l(y));
-  }, r = d(() => ({
+    se(p, u.value) || ((p.sortColumnKey !== u.value.sortColumnKey || p.sortColumnOrder !== u.value.sortColumnOrder) && l({ sortColumnKey: p.sortColumnKey, sortColumnOrder: p.sortColumnOrder }), u.value = p, o(p));
+  };
+  M(e, () => {
+    t.value || r({});
+  }, { deep: !0 });
+  const f = m(() => ({
     sortColumnKey: u.value.sortColumnKey,
     sortColumnOrder: u.value.sortColumnOrder
-  })), v = d(() => t.value?.pageSize ?? a.value);
+  })), b = m(() => t.value?.pageSize ?? a.value);
   return {
-    activeTableConfig: P(u),
-    activeSort: r,
-    activePageSize: v,
-    patchTableConfig: h
+    activeTableConfig: J(u),
+    activeSort: f,
+    activePageSize: b,
+    patchTableConfig: r
   };
-}, lt = ({
+}, ot = ({
   cellClick: e,
   headers: a,
   rowClick: t
 }) => {
-  const l = d(() => new Set(
+  const l = m(() => new Set(
     a.value.filter((r) => r.disableRowClick).map((r) => r.key)
-  )), n = (r) => {
-    const v = r.event?.target;
-    return v instanceof Element ? v.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
-  }, o = (r) => {
-    const v = n(r);
-    return !!(v && l.value.has(v));
+  )), o = (r) => {
+    const f = r.event?.target;
+    return f instanceof Element ? f.closest(".ag-cell")?.getAttribute("col-id") ?? void 0 : void 0;
+  }, n = (r) => {
+    const f = o(r);
+    return !!(f && l.value.has(f));
   };
   return {
     onCellClick: (r) => {
-      const v = r.colDef.colId;
-      !r.data || !v || e({
-        columnKey: v,
+      const f = r.colDef.colId;
+      !r.data || !f || e({
+        columnKey: f,
         row: r.data,
         value: r.value
       });
     },
     onRowClick: (r) => {
-      r.data && !o(r) && t(r.data, r);
+      r.data && !n(r) && t(r.data, r);
     }
   };
-}, ot = ({
+}, lt = ({
   activeSort: e,
-  emitSort: a,
-  patchTableConfig: t
+  patchTableConfig: a
 }) => {
-  const l = (o, u) => {
+  const t = (o, n) => {
     o.applyColumnState({
-      state: u.sortColumnKey ? [{ colId: u.sortColumnKey, sort: u.sortColumnOrder ?? null, sortIndex: 0 }] : [],
+      state: n.sortColumnKey ? [{ colId: n.sortColumnKey, sort: n.sortColumnOrder ?? null, sortIndex: 0 }] : [],
       defaultState: { sort: null, sortIndex: null }
     });
   };
   return { onSortChanged: (o) => {
-    const u = o.api.getColumnState().filter((v) => v.sort).sort((v, p) => (v.sortIndex ?? 0) - (p.sortIndex ?? 0)), h = u[u.length - 1], r = h ? { sortColumnKey: h.colId, sortColumnOrder: h.sort } : { sortColumnKey: void 0, sortColumnOrder: void 0 };
-    r.sortColumnKey === e.value.sortColumnKey && r.sortColumnOrder === e.value.sortColumnOrder || (a(r), t(r), u.length > 1 && l(o.api, r));
-  }, applySortToGrid: l };
+    const n = o.api.getColumnState().filter((r) => r.sort).sort((r, f) => (r.sortIndex ?? 0) - (f.sortIndex ?? 0)), g = n[n.length - 1], u = g ? { sortColumnKey: g.colId, sortColumnOrder: g.sort } : { sortColumnKey: void 0, sortColumnOrder: void 0 };
+    (u.sortColumnKey !== e.value.sortColumnKey || u.sortColumnOrder !== e.value.sortColumnOrder) && a(u), n.length > 1 && t(o.api, u);
+  }, applySortToGrid: t };
 }, nt = {
   key: 0,
   class: "table-error-state",
@@ -559,7 +580,7 @@ const { i18n: $e } = ce(), de = (e, a) => {
   key: 1,
   class: "table-empty-state",
   "data-testid": "table-empty-state"
-}, st = /* @__PURE__ */ re({
+}, st = /* @__PURE__ */ ie({
   __name: "TableDataGrid",
   props: {
     headers: {},
@@ -573,122 +594,126 @@ const { i18n: $e } = ce(), de = (e, a) => {
   },
   emits: ["grid:ready", "state", "row:click", "cell:click", "sort", "update:tableConfig"],
   setup(e, { emit: a }) {
-    De.registerModules([Re, Te, Ee]);
-    const t = e.mode ?? "infinite", l = a, { i18n: n } = ce(), { t: o } = n, u = ye(), h = N(), r = Se("rootElement"), v = N("body"), p = () => {
-      const b = document.fullscreenElement;
-      v.value = b instanceof HTMLElement && b.contains(r.value ?? null) ? b : "body";
+    De.registerModules([Re, Oe, Te]);
+    const t = e.mode ?? "infinite", l = a, { i18n: o } = ve(), { t: n } = o, g = be(), u = q(), r = Se("rootElement"), f = q("body"), b = () => {
+      const i = document.fullscreenElement;
+      f.value = i instanceof HTMLElement && i.contains(r.value ?? null) ? i : "body";
     };
-    se(() => {
-      p(), document.addEventListener("fullscreenchange", p);
+    ue(() => {
+      b(), document.addEventListener("fullscreenchange", b);
     }), ke(() => {
-      document.removeEventListener("fullscreenchange", p);
+      document.removeEventListener("fullscreenchange", b);
     });
-    const { activeTableConfig: y, activeSort: R, activePageSize: k, patchTableConfig: F } = at({
-      headers: z(() => e.headers),
-      pageSize: z(() => e.pageSize),
-      tableConfig: z(() => e.tableConfig),
-      emitTableConfigUpdate: (b) => l("update:tableConfig", b),
-      onExternalConfigChange: (b) => {
-        h.value && m(h.value, b);
+    const { activeTableConfig: w, activeSort: p, activePageSize: R, patchTableConfig: B } = at({
+      headers: $(() => e.headers),
+      pageSize: $(() => e.pageSize),
+      tableConfig: $(() => e.tableConfig),
+      emitSort: (i) => l("sort", i),
+      emitTableConfigUpdate: (i) => l("update:tableConfig", i),
+      onExternalConfigChange: (i) => {
+        u.value && v(u.value, i);
       }
-    }), { onSortChanged: i, applySortToGrid: m } = ot({
-      activeSort: R,
-      emitSort: (b) => l("sort", b),
-      patchTableConfig: F
-    }), w = d(() => t === "unpaginated" && !!y.value.fitToContent), D = xe.withParams({ autoHeightMinBodyHeight: 0 }), { onCellClick: O, onRowClick: I } = lt({
-      cellClick: (b) => l("cell:click", b),
-      headers: z(() => e.headers),
-      rowClick: (b, Z) => l("row:click", b, Z)
-    }), x = {
+    }), { onSortChanged: s, applySortToGrid: v } = lt({
+      activeSort: p,
+      patchTableConfig: B
+    }), S = m(() => t === "unpaginated" && !!w.value.fitToContent), A = Ee.withParams({ autoHeightMinBodyHeight: 0 }), { onCellClick: T, onRowClick: E } = ot({
+      cellClick: (i) => l("cell:click", i),
+      headers: $(() => e.headers),
+      rowClick: (i, V) => l("row:click", i, V)
+    }), I = {
       resizable: !1,
       sortable: !1,
       suppressMovable: !0
-    }, G = d(() => y.value.sortColumnKey), _ = d(() => y.value.sortColumnOrder), g = d(() => [
-      k.value,
-      e.refreshKey,
-      G.value,
-      _.value
-    ]), c = t === "infinite" ? Ne({
-      fetcher: z(() => e.fetcher),
-      resetKey: g,
-      sort: R
-    }) : void 0, s = c?.datasource, f = d(() => c ? c.data.value : e.rows), C = d(() => c?.isFetching.value ?? !1), T = d(() => e.rows ? Array.from(e.rows) : void 0), { columnDefs: J, gridContext: B } = tt({
-      headers: z(() => e.headers),
+    }, P = m(() => [R.value, e.refreshKey]), F = t === "infinite" ? _e({
+      fetcher: $(() => e.fetcher),
+      resetKey: P,
+      sort: p
+    }) : void 0, O = F?.datasource, U = m(() => F ? F.data.value : e.rows), h = m(() => F?.isFetching.value ?? !1), x = m(() => e.rows ? Array.from(e.rows) : void 0), { columnDefs: G, gridContext: W } = tt({
+      headers: $(() => e.headers),
       mode: t,
-      rows: T,
-      slots: u,
-      tooltipTarget: v,
-      initialSort: R.value
+      rows: x,
+      slots: g,
+      tooltipTarget: f,
+      initialSort: p.value
     }), {
-      fetchState: H,
-      hasData: X,
-      state: Y
-    } = Ke(
-      f,
-      z(() => c?.error.value),
-      C
-    ), me = d(() => Y.value === H.SUCCESS && !X.value);
-    c && ze({
-      emitState: (b) => l("state", b),
-      fetchLifecycleState: Y,
-      hasData: X
+      fetchState: c,
+      hasData: d,
+      state: C
+    } = Fe(
+      U,
+      $(() => F?.error.value),
+      h
+    ), y = m(() => C.value === c.SUCCESS && !d.value);
+    F && Ge({
+      emitState: (i) => l("state", i),
+      fetchLifecycleState: C,
+      hasData: d
     });
-    const fe = (b) => {
-      h.value = b.api, l("grid:ready", b.api);
+    const k = () => {
+      const i = u.value;
+      if (!i || i.isDestroyed())
+        return;
+      const V = p.value, N = i.getColumnState().find((Z) => Z.sort);
+      N?.colId === V.sortColumnKey && (N?.sort ?? void 0) === V.sortColumnOrder || v(i, V);
+    };
+    M([u, p], k);
+    const z = (i) => {
+      u.value = i.api, l("grid:ready", i.api);
     };
-    return (b, Z) => {
-      const ee = ie("KEmptyState");
-      return E(), K("div", {
+    return (i, V) => {
+      const N = ce("KEmptyState");
+      return K(), _("div", {
         ref_key: "rootElement",
         ref: r,
-        class: ue(["kong-ui-public-table-data-grid", { "fit-to-content": w.value }]),
+        class: de(["kong-ui-public-table-data-grid", { "fit-to-content": S.value }]),
         "data-testid": "table-data-grid"
       }, [
-        e.error ? (E(), K("div", nt, [
-          U(b.$slots, "error-state", {}, () => [
-            Q(ee, {
+        e.error ? (K(), _("div", nt, [
+          X(i.$slots, "error-state", {}, () => [
+            ae(N, {
               "icon-variant": "error",
-              message: S(o)("errorState.message"),
-              title: S(o)("errorState.title")
+              message: D(n)("errorState.message"),
+              title: D(n)("errorState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : me.value ? (E(), K("div", rt, [
-          U(b.$slots, "empty-state", {}, () => [
-            Q(ee, {
-              message: S(o)("emptyState.message"),
-              title: S(o)("emptyState.title")
+        ])) : y.value ? (K(), _("div", rt, [
+          X(i.$slots, "empty-state", {}, () => [
+            ae(N, {
+              message: D(n)("emptyState.message"),
+              title: D(n)("emptyState.title")
             }, null, 8, ["message", "title"])
           ], !0)
-        ])) : (E(), q(S(we), {
+        ])) : (K(), te(D(we), {
           key: 2,
-          "cache-block-size": S(t) === "infinite" ? S(k) : void 0,
+          "cache-block-size": D(t) === "infinite" ? D(R) : void 0,
           class: "table-data-grid-grid",
-          "column-defs": S(J),
-          context: S(B),
-          datasource: S(t) === "infinite" ? S(s) : void 0,
-          "default-col-def": x,
-          "dom-layout": w.value ? "autoHeight" : "normal",
-          "infinite-initial-row-count": S(t) === "infinite" ? 1 : void 0,
-          loading: C.value,
-          "row-data": S(t) === "unpaginated" ? T.value : void 0,
-          "row-model-type": S(t) === "unpaginated" ? "clientSide" : "infinite",
+          "column-defs": D(G),
+          context: D(W),
+          datasource: D(t) === "infinite" ? D(O) : void 0,
+          "default-col-def": I,
+          "dom-layout": S.value ? "autoHeight" : "normal",
+          "infinite-initial-row-count": D(t) === "infinite" ? 1 : void 0,
+          loading: h.value,
+          "row-data": D(t) === "unpaginated" ? x.value : void 0,
+          "row-model-type": D(t) === "unpaginated" ? "clientSide" : "infinite",
           "suppress-cell-focus": !0,
           "suppress-multi-sort": !0,
-          theme: S(D),
-          onCellClicked: S(O),
-          onGridReady: fe,
-          onRowClicked: S(I),
-          onSortChanged: S(i)
+          theme: D(A),
+          onCellClicked: D(T),
+          onGridReady: z,
+          onNewColumnsLoaded: k,
+          onRowClicked: D(E),
+          onSortChanged: D(s)
         }, null, 8, ["cache-block-size", "column-defs", "context", "datasource", "dom-layout", "infinite-initial-row-count", "loading", "row-data", "row-model-type", "theme", "onCellClicked", "onRowClicked", "onSortChanged"]))
       ], 2);
     };
   }
 }), it = (e, a) => {
   const t = e.__vccOpts || e;
-  for (const [l, n] of a)
-    t[l] = n;
+  for (const [l, o] of a)
+    t[l] = o;
   return t;
-}, mt = /* @__PURE__ */ it(st, [["__scopeId", "data-v-85f88484"]]);
+}, mt = /* @__PURE__ */ it(st, [["__scopeId", "data-v-01cd8bcd"]]);
 export {
   mt as TableDataGrid
 };