@kong-ui-public/table-data-grid 0.3.13 → 0.3.14-pr.3713.ec02931e1.0

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-b8bd22c9]{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-b8bd22c9]{--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-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%}

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

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

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

@@ -1 +1 @@
-(function(y,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("ag-grid-vue3"),require("ag-grid-community"),require("@kong-ui-public/i18n")):typeof define=="function"&&define.amd?define(["exports","vue","ag-grid-vue3","ag-grid-community","@kong-ui-public/i18n"],e):(y=typeof globalThis<"u"?globalThis:y||self,e(y["kong-ui-public-table-data-grid"]={},y.Vue,y.AgGridVue,y.agGridCommunity,y["kong-ui-public-i18n"]))})(this,(function(y,e,G,R,N){"use strict";const M={class:"table-data-grid-cell-renderer"},O=e.defineComponent({name:"TableDataGridCellRenderer",__name:"TableDataGridCellRenderer",props:{params:{}},setup(t,{expose:c}){const o=e.shallowRef(t.params),a=e.ref(null),n=e.ref(!1),b=e.computed(()=>o.value.valueFormatted??String(o.value.value??""));let m,u,p=!1;const D=()=>{const f=a.value;n.value=!!f&&f.scrollWidth>f.clientWidth},g=()=>{p||(u!==void 0&&cancelAnimationFrame(u),u=requestAnimationFrame(()=>{u=void 0,D()}))},S=f=>{if(m?.disconnect(),f){m?.observe(f);const k=f.closest(".ag-cell");k&&m?.observe(k)}g()};return e.onMounted(()=>{m=new ResizeObserver(g),S(a.value)}),e.watch(a,S,{flush:"post"}),e.onUnmounted(()=>{p=!0,m?.disconnect(),u!==void 0&&cancelAnimationFrame(u)}),c({refresh(f){return o.value=f,e.nextTick(g),!0}}),(f,k)=>{const E=e.resolveComponent("KTooltip");return e.openBlock(),e.createElementBlock("span",M,[e.createVNode(E,{class:"table-data-grid-cell-tooltip",disabled:!n.value,"kpop-attributes":{popoverDelay:400},"max-width":"300",placement:"bottom-start",target:"body",text:b.value},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"contentElement",ref:a,class:"table-data-grid-cell-content"},e.toDisplayString(b.value),513)]),_:1},8,["disabled","text"])])}}});var w=(t=>(t.PENDING="PENDING",t.LOADING="LOADING",t.SUCCESS="SUCCESS",t.ERROR="ERROR",t))(w||{});const I=t=>!!t?.length;function T(t,c,o,a=I){const n=e.computed(()=>a(t.value)),b=e.computed(()=>{const u=t.value!==void 0,p=c.value!==void 0&&c.value!==null;return o.value?"LOADING":n.value?"SUCCESS":p?"ERROR":u?"SUCCESS":"PENDING"});return{fetchState:w,hasData:n,state:b}}const x=({emitState:t,fetchLifecycleState:c,hasData:o})=>{e.watch(()=>({hasData:o.value,state:c.value}),({hasData:a,state:n})=>{if(n!==w.PENDING){if(n===w.LOADING){t({hasData:a,state:"loading"});return}if(n===w.ERROR){t({hasData:a,state:"error"});return}t({hasData:a,state:"success"})}})},z=({startRow:t,endRow:c})=>{const o=c-t;return{blockIndex:o>0?Math.floor(t/o):0,pageSize:o}},A=({startRow:t,rowsLength:c,pageSize:o,total:a,hasMore:n})=>{if(typeof a=="number")return a;if(n!==!0&&(n===!1||c<o))return t+c},V=({fetcher:t,resetKey:c})=>{const o=new Map,a=new Map,n=e.ref(0),b=e.shallowRef(),m=e.shallowRef(),u=e.shallowRef(),p=e.ref(0),D=e.ref(!1),g=r=>r===n.value,S=()=>{D.value=p.value>0},f=()=>{u.value=void 0,p.value+=1,S()},k=()=>{p.value=Math.max(0,p.value-1),S()},E=r=>{const s=a.get(r);if(s)return s;let l;const h={promise:new Promise(i=>{l=i}),resolve:i=>l(i)};return a.set(r,h),h},v=(r,s)=>{s.resolve(!1),a.get(r)===s&&a.delete(r)},d=async({blockIndex:r,currentBlockCompletion:s,datasourceId:l})=>{if(r===0)return"ready";const h=a.get(r-1);if(!h)return v(r,s),"failed";const i=await h.promise;return g(l)?i?"ready":(v(r,s),"failed"):(v(r,s),"stale")},_=({blockIndex:r,currentBlockCompletion:s,getRowsParams:l,pageSize:h,result:i})=>{i.cursor!==void 0&&o.set(r,i.cursor),l.successCallback(i.data,A({startRow:l.startRow,rowsLength:i.data.length,pageSize:h,total:i.total,hasMore:i.hasMore})),l.startRow===0&&(m.value=i.data),s.resolve(!0)},C=({blockIndex:r,currentBlockCompletion:s,fetchError:l,getRowsParams:h})=>{u.value=l,h.failCallback(),v(r,s)},j=()=>{const r=n.value+1;return n.value=r,o.clear(),a.clear(),m.value=void 0,u.value=void 0,p.value=0,S(),{async getRows(s){const{blockIndex:l,pageSize:h}=z({startRow:s.startRow,endRow:s.endRow}),i=E(l),F=await d({blockIndex:l,currentBlockCompletion:i,datasourceId:r});if(F!=="ready"){F==="failed"&&s.failCallback();return}f();try{const B=l>0?o.get(l-1):void 0,H=await t({mode:"infinite",pageSize:h,cursor:B});if(!g(r)){v(l,i);return}_({blockIndex:l,currentBlockCompletion:i,getRowsParams:s,pageSize:h,result:H})}catch(B){if(!g(r)){v(l,i);return}C({blockIndex:l,currentBlockCompletion:i,fetchError:B,getRowsParams:s})}finally{g(r)&&k()}}}},P=()=>{b.value=j()};return e.watch(()=>c?.value,()=>{P()},{immediate:!0}),{datasource:e.readonly(b),data:e.readonly(m),error:e.readonly(u),isFetching:e.readonly(D)}},K={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 L(){const t=N.createI18n("en-us",K);return{i18n:t,i18nT:N.i18nTComponent(t)}}const U={class:"kong-ui-public-table-data-grid","data-testid":"table-data-grid"},W={key:0,class:"table-error-state","data-testid":"table-error-state"},q={key:1,class:"table-empty-state","data-testid":"table-empty-state"},$=((t,c)=>{const o=t.__vccOpts||t;for(const[a,n]of c)o[a]=n;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"],setup(t,{emit:c}){R.ModuleRegistry.registerModules([R.AllCommunityModule,R.InfiniteRowModelModule]);const o=c,{i18n:{t:a}}=L(),n={cellRenderer:O,resizable:!1,sortable:!1,suppressMovable:!0},b=e.computed(()=>t.headers.map(d=>({colId:d.key,flex:!d.width&&!d.maxWidth?1:void 0,headerName:d.label,maxWidth:d.maxWidth,minWidth:d.minWidth,valueGetter:C=>C.data?.[d.key],width:d.width}))),m=e.computed(()=>[t.fetcher,t.pageSize,t.refreshKey]),{data:u,datasource:p,error:D,isFetching:g}=V({fetcher:t.fetcher,resetKey:m}),{fetchState:S,hasData:f,state:k}=T(u,D,g),E=e.computed(()=>k.value===S.SUCCESS&&!f.value);x({emitState:d=>o("state",d),fetchLifecycleState:k,hasData:f});const v=d=>{o("grid:ready",d.api)};return(d,_)=>{const C=e.resolveComponent("KEmptyState");return e.openBlock(),e.createElementBlock("div",U,[t.error?(e.openBlock(),e.createElementBlock("div",W,[e.renderSlot(d.$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)])):E.value?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(d.$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":b.value,datasource:e.unref(p),"default-col-def":n,"infinite-initial-row-count":1,loading:e.unref(g),"row-model-type":"infinite","suppress-cell-focus":!0,theme:e.unref(R.themeQuartz),onGridReady:v},null,8,["cache-block-size","column-defs","datasource","loading","theme"]))])}}}),[["__scopeId","data-v-b8bd22c9"]]);y.TableDataGrid=$,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})}));
+(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"})}));

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

@@ -1,5 +1,5 @@
-import type { TableDataGridFetcher, TableDataGridHeader, TableDataGridStatePayload } from '../types';
-import type { GridReadyEvent } from 'ag-grid-community';
+import type { TableDataGridCellClickPayload, TableDataGridCellSlotProps, TableDataGridFetcher, TableDataGridHeader, TableDataGridStatePayload } from '../types';
+import type { 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>>;
@@ -10,18 +10,23 @@ declare const __VLS_export: <Row extends object>(__VLS_props: NonNullable<Awaite
     } & {
         onState?: ((payload: TableDataGridStatePayload) => any) | undefined;
         "onGrid:ready"?: ((api: import("ag-grid-community").GridApi<Row>) => any) | undefined;
+        "onCell:click"?: ((payload: TableDataGridCellClickPayload<Row>) => any) | undefined;
+        "onRow:click"?: ((row: Row, event: RowClickedEvent<Row, any>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        [columnKey: string]: (props: TableDataGridCellSlotProps<Row>) => unknown;
         'empty-state': () => unknown;
         'error-state': () => unknown;
     };
     emit: {
         (e: "grid:ready", api: GridReadyEvent<Row>["api"]): void;
         (e: "state", payload: TableDataGridStatePayload): void;
+        (e: "row:click", row: Row, event: RowClickedEvent<Row>): void;
+        (e: "cell:click", payload: TableDataGridCellClickPayload<Row>): void;
     };
 }>) => import("vue").VNode & {
     __ctx?: 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":"AAyMA,OAAO,KAAK,EACV,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EAC1B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAU,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAe/D,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;WAyNO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;iBArN7C,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;iBAC/B,oBAAoB,CAAC,GAAG,CAAC;gBAC1B,OAAO;mBACJ,MAAM;qBACJ,MAAM,GAAG,MAAM,GAAG,OAAO;;;;KAiNmD,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;;uBAvMM,MAAM,OAAO;uBACb,MAAM,OAAO;;;YAKxB,YAAY,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI;YACpD,OAAO,WAAW,yBAAyB,GAAG,IAAI;;EAoMpD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,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":"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,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAI,CAAC;wBACvD,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/components/TableDataGridCellRenderer.vue.d.ts

@@ -1,5 +1,16 @@
+import type { TableDataGridHeader } from '../types';
 import type { ICellRendererParams } from 'ag-grid-community';
-type CellRendererParams = ICellRendererParams<Record<string, unknown>>;
+import type { Slots } from 'vue';
+type CellRendererParams = ICellRendererParams<Record<string, unknown>> & {
+    /** Set internally via `cellRendererParams` so the renderer can resolve the
+     * host slot and build its payload without leaking AG Grid's own `column`. */
+    headerDef?: TableDataGridHeader;
+    context?: {
+        cells?: {
+            slots?: Slots;
+        };
+    };
+};
 type __VLS_Props = {
     params: CellRendererParams;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"TableDataGridCellRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGridCellRenderer.vue"],"names":[],"mappings":"AAiIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAG5D,KAAK,kBAAkB,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;AAMtE,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,kBAAkB,CAAA;CAC3B,CAAC;AA6IF,QAAA,MAAM,YAAY;wBAtEI,kBAAkB;oPAyEtC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"TableDataGridCellRenderer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TableDataGridCellRenderer.vue"],"names":[],"mappings":"AAyKA,OAAO,KAAK,EAA8B,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAA;AAGhC,KAAK,kBAAkB,GAAG,mBAAmB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG;IACvE;iFAC6E;IAC7E,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,KAAK,CAAA;SAAE,CAAA;KAAE,CAAA;CACxC,CAAA;AAMD,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,kBAAkB,CAAA;CAC3B,CAAC;AAsLF,QAAA,MAAM,YAAY;wBArFI,kBAAkB;oPAwFtC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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;;;;;;;;;;;;;CA4T9B,CAAA"}
+{"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"}

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

@@ -0,0 +1,21 @@
+import type { TableDataGridHeader, TableDataGridRow } 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, }: {
+    headers: Readonly<Ref<Array<TableDataGridHeader<Row>>>>;
+    slots: Slots;
+}) => {
+    columnDefs: import("vue").ComputedRef<ColDef<Row, any>[]>;
+    gridContext: import("vue").ComputedRef<{
+        cells: {
+            slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+        };
+    }>;
+};
+//# sourceMappingURL=useTableDataGridColumnDefs.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,17 @@
+import type { TableDataGridCellClickPayload, TableDataGridHeader, TableDataGridRow, TableDataGridRowClickPayload } from '../types';
+import type { CellClickedEvent, RowClickedEvent } from 'ag-grid-community';
+import type { Ref } from 'vue';
+/**
+ * Converts AG Grid's row and cell click events into `TableDataGrid`'s own
+ * row/cell interaction handlers, and governs how those interactions behave
+ * (e.g. suppressing row clicks for columns marked `disableRowClick`).
+ */
+export declare const useTableDataGridInteractions: <Row extends object = TableDataGridRow>({ cellClick, headers, rowClick, }: {
+    cellClick: (payload: TableDataGridCellClickPayload<Row>) => void;
+    headers: Readonly<Ref<Array<TableDataGridHeader<Row>>>>;
+    rowClick: (row: TableDataGridRowClickPayload<Row>, event: RowClickedEvent<Row>) => void;
+}) => {
+    onCellClick: (event: CellClickedEvent<Row>) => void;
+    onRowClick: (event: RowClickedEvent<Row>) => void;
+};
+//# sourceMappingURL=useTableDataGridInteractions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableDataGridInteractions.d.ts","sourceRoot":"","sources":["../../../src/composables/useTableDataGridInteractions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,6BAA6B,EAC7B,mBAAmB,EACnB,gBAAgB,EAChB,4BAA4B,EAC7B,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1E,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAG9B;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,GAAI,GAAG,SAAS,MAAM,GAAG,gBAAgB,EAAE,mCAIjF;IACD,SAAS,EAAE,CAAC,OAAO,EAAE,6BAA6B,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;IAChE,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACvD,QAAQ,EAAE,CAAC,GAAG,EAAE,4BAA4B,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,KAAK,IAAI,CAAA;CACxF;yBA0B6B,gBAAgB,CAAC,GAAG,CAAC;wBANtB,eAAe,CAAC,GAAG,CAAC;CAwBhD,CAAA"}

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

@@ -6,12 +6,32 @@ export type TableDataGridStatePayload = {
     state: TableDataGridState;
     hasData: boolean;
 };
+export type TableDataGridRowClickPayload<Row extends object = TableDataGridRow> = Row;
+export type TableDataGridCellClickPayload<Row extends object = TableDataGridRow> = {
+    row: Row;
+    columnKey: string;
+    value: unknown;
+};
+export type TableDataGridCellSlotProps<Row extends object = TableDataGridRow> = {
+    row: Row;
+    rowValue: unknown;
+    column: TableDataGridHeader<Row>;
+    rowIndex: number;
+    selected: boolean;
+    refreshCell: () => void;
+};
 export type TableDataGridHeader<Row extends object = TableDataGridRow> = {
     key: Extract<keyof Row, string>;
     label: string;
     width?: number;
     minWidth?: number;
     maxWidth?: number;
+    /**
+     * Disables the `row:click` emit for clicks landing inside this column's
+     * cells, e.g. an actions column with its own buttons. AG Grid's own
+     * selection/click mechanics are unaffected.
+     */
+    disableRowClick?: boolean;
 };
 export interface TableDataGridInfiniteFetcherParams {
     mode: 'infinite';

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,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;CAClB,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/table-data-grid",
-  "version": "0.3.13",
+  "version": "0.3.14-pr.3713.ec02931e1.0",
   "type": "module",
   "main": "./dist/table-data-grid.umd.js",
   "module": "./dist/table-data-grid.es.js",