@ck-ui/component-library 2.0.4 → 2.0.5

package/dist/components/Table/index.js

@@ -1,6 +1,6 @@
-import { jsx as l, jsxs as C } from "react/jsx-runtime";
-import * as i from "react";
-import { useState as N, useEffect as M, useCallback as I, useRef as U, useMemo as A } from "react";
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import * as l from "react";
+import { useState as M, useEffect as I, useCallback as L, useRef as Z, useMemo as O } from "react";
 import { flushSync as it } from "react-dom";
 import { u as lt } from "../../OptionList-DU0iA8Y4.js";
 import { u as ct, f as at, g as dt, a as ut, b as mt } from "../../index-Bcvmezbu.js";
@@ -8,87 +8,100 @@ import { CKButton as Be } from "../CKButton/index.js";
 import { Search as ft } from "../Search/index.js";
 import { EmptyState as gt } from "../EmptyState/index.js";
 import { Loader as ht } from "../Loader/index.js";
-import { S as pt, a as yt } from "../../table-filter-C0zetUfo.js";
-import { INITIAL_COLUMN_MANAGER_CONFIG as We, ROW_MIN_HEIGHT as kt, TABLE_PREFIX as R } from "./constants.js";
-import Ct from "./_helpers/TableFilterModal/index.js";
+import { S as pt, a as yt } from "../../table-filter-BwC2jvAO.js";
+import { INITIAL_COLUMN_MANAGER_CONFIG as We, ROW_MIN_HEIGHT as Ct, TABLE_PREFIX as R } from "./constants.js";
+import kt from "./_helpers/TableFilterModal/index.js";
 import bt from "./_helpers/ColumnManager/index.js";
-import vt from "./_helpers/GroupedHeader/index.js";
-import { SelectionHeaderCell as Re } from "./_helpers/SelectionCell/index.js";
-import St from "./_helpers/TableRows.js";
-import { useSelection as wt } from "./_hooks/useSelection.js";
-import { useExpansion as xt } from "./_hooks/useExpansion.js";
-import { useOverlayScrollbar as Et } from "./_hooks/useOverlayScrollbar.js";
-import { isTableConfigDefault as ae, saveToLocalStorage as de, getTableMinWidth as Nt, isTableConfigChanged as Mt, pinnedStyle as ue, columnLayoutStyle as ze } from "./_utils/table.utils.js";
+import St from "./_helpers/GroupedHeader/index.js";
+import { SelectionHeaderCell as ze } from "./_helpers/SelectionCell/index.js";
+import vt from "./_helpers/TableRows.js";
+import { TableChipCell as wt } from "./_helpers/TableChipCell.js";
+import { CKTag as xt } from "../CKTag/index.js";
+import { useSelection as Et } from "./_hooks/useSelection.js";
+import { useExpansion as Nt } from "./_hooks/useExpansion.js";
+import { useOverlayScrollbar as Mt } from "./_hooks/useOverlayScrollbar.js";
+import { isTableConfigDefault as de, saveToLocalStorage as ue, getTableMinWidth as It, isTableConfigChanged as Lt, pinnedStyle as me, columnLayoutStyle as Re } from "./_utils/table.utils.js";
 import { formatCellValue as De } from "./_utils/formatCellValue.js";
 import '../../assets/styles-DIZ9K_K2.css';/* empty css                    */
-const It = (a) => /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...a }, /* @__PURE__ */ i.createElement("path", { d: "M1.75 8.75006L8.16667 8.75", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M1.75 5.25H5.83333", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M1.75 12.25H11.0833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M10.7913 1.75V8.75M10.7913 1.75C10.3829 1.75 9.61972 2.91334 9.33301 3.20833M10.7913 1.75C11.1998 1.75 11.963 2.91334 12.2497 3.20833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" })), Lt = (a) => /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...a }, /* @__PURE__ */ i.createElement("path", { d: "M1.75 5.24994L8.16667 5.25", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M1.75 8.75H5.83333", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M1.75 1.75H11.0833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M10.7913 12.25V5.25M10.7913 12.25C10.3829 12.25 9.61972 11.0867 9.33301 10.7917M10.7913 12.25C11.1998 12.25 11.963 11.0867 12.2497 10.7917", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" })), Ft = (a) => /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...a }, /* @__PURE__ */ i.createElement("mask", { id: "mask0_1852_13537", style: {
+const Ft = (a) => /* @__PURE__ */ l.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...a }, /* @__PURE__ */ l.createElement("path", { d: "M1.75 8.75006L8.16667 8.75", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M1.75 5.25H5.83333", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M1.75 12.25H11.0833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M10.7913 1.75V8.75M10.7913 1.75C10.3829 1.75 9.61972 2.91334 9.33301 3.20833M10.7913 1.75C11.1998 1.75 11.963 2.91334 12.2497 3.20833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" })), Bt = (a) => /* @__PURE__ */ l.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...a }, /* @__PURE__ */ l.createElement("path", { d: "M1.75 5.24994L8.16667 5.25", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M1.75 8.75H5.83333", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M1.75 1.75H11.0833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M10.7913 12.25V5.25M10.7913 12.25C10.3829 12.25 9.61972 11.0867 9.33301 10.7917M10.7913 12.25C11.1998 12.25 11.963 11.0867 12.2497 10.7917", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" })), Wt = (a) => /* @__PURE__ */ l.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...a }, /* @__PURE__ */ l.createElement("mask", { id: "mask0_1852_13537", style: {
   maskType: "luminance"
-}, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 14, height: 14 }, /* @__PURE__ */ i.createElement("path", { d: "M13.708 0.291992V13.708H0.291992V0.291992H13.708Z", fill: "white", stroke: "white", strokeWidth: 0.583333 })), /* @__PURE__ */ i.createElement("g", { mask: "url(#mask0_1852_13537)" }, /* @__PURE__ */ i.createElement("path", { d: "M1.75 4.08325H12.25", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M3.5 7H10.5", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M5.83398 9.9165H8.16732", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }))), Bt = (a) => /* @__PURE__ */ i.createElement("svg", { width: 200, height: 180, viewBox: "0 0 200 180", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ i.createElement("ellipse", { cx: 100, cy: 168, rx: 38, ry: 6, fill: "#E0E0E0" }), /* @__PURE__ */ i.createElement("path", { d: "M30 110 C10 110 5 90 20 80 C15 60 35 50 55 60 C60 45 80 38 95 50 C110 38 135 42 140 58 C158 55 170 70 162 85 C175 90 175 110 158 112 Z", fill: "#F0F0F0" }), /* @__PURE__ */ i.createElement("g", { stroke: "#C0C0C0", strokeWidth: 2.5, strokeLinecap: "round" }, /* @__PURE__ */ i.createElement("line", { x1: 28, y1: 22, x2: 28, y2: 32 }), /* @__PURE__ */ i.createElement("line", { x1: 23, y1: 27, x2: 33, y2: 27 }), /* @__PURE__ */ i.createElement("line", { x1: 38, y1: 118, x2: 38, y2: 128 }), /* @__PURE__ */ i.createElement("line", { x1: 33, y1: 123, x2: 43, y2: 123 }), /* @__PURE__ */ i.createElement("line", { x1: 162, y1: 52, x2: 162, y2: 62 }), /* @__PURE__ */ i.createElement("line", { x1: 157, y1: 57, x2: 167, y2: 57 })), /* @__PURE__ */ i.createElement("circle", { cx: 100, cy: 155, r: 2, fill: "#D0D0D0" }), /* @__PURE__ */ i.createElement("g", { transform: "rotate(-8, 100, 90)" }, /* @__PURE__ */ i.createElement("rect", { x: 42, y: 28, width: 112, height: 130, rx: 10, fill: "#DCDCDC" }), /* @__PURE__ */ i.createElement("rect", { x: 44, y: 30, width: 108, height: 126, rx: 9, fill: "white", stroke: "#C2C2C2", strokeWidth: 1.5 }), /* @__PURE__ */ i.createElement("rect", { x: 50, y: 36, width: 96, height: 114, rx: 6, fill: "white", stroke: "#C2C2C2", strokeWidth: 1 }), /* @__PURE__ */ i.createElement("rect", { x: 82, y: 20, width: 32, height: 20, rx: 4, fill: "white", stroke: "#C2C2C2", strokeWidth: 1.5 }), /* @__PURE__ */ i.createElement("path", { d: "M91 20 Q98 14 105 20", stroke: "#C2C2C2", strokeWidth: 1.5, fill: "#F4F4F4" }), /* @__PURE__ */ i.createElement("circle", { cx: 95, cy: 88, r: 26, stroke: "#C2C2C2", strokeWidth: 3, fill: "white" }), /* @__PURE__ */ i.createElement("line", { x1: 113, y1: 106, x2: 128, y2: 121, stroke: "#C2C2C2", strokeWidth: 5, strokeLinecap: "round" }), /* @__PURE__ */ i.createElement("line", { x1: 116, y1: 109, x2: 125, y2: 118, stroke: "#E8E8E8", strokeWidth: 2, strokeLinecap: "round" }))), Ke = (a) => {
+}, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 14, height: 14 }, /* @__PURE__ */ l.createElement("path", { d: "M13.708 0.291992V13.708H0.291992V0.291992H13.708Z", fill: "white", stroke: "white", strokeWidth: 0.583333 })), /* @__PURE__ */ l.createElement("g", { mask: "url(#mask0_1852_13537)" }, /* @__PURE__ */ l.createElement("path", { d: "M1.75 4.08325H12.25", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M3.5 7H10.5", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }), /* @__PURE__ */ l.createElement("path", { d: "M5.83398 9.9165H8.16732", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }))), zt = (a) => /* @__PURE__ */ l.createElement("svg", { width: 200, height: 180, viewBox: "0 0 200 180", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ l.createElement("ellipse", { cx: 100, cy: 168, rx: 38, ry: 6, fill: "#E0E0E0" }), /* @__PURE__ */ l.createElement("path", { d: "M30 110 C10 110 5 90 20 80 C15 60 35 50 55 60 C60 45 80 38 95 50 C110 38 135 42 140 58 C158 55 170 70 162 85 C175 90 175 110 158 112 Z", fill: "#F0F0F0" }), /* @__PURE__ */ l.createElement("g", { stroke: "#C0C0C0", strokeWidth: 2.5, strokeLinecap: "round" }, /* @__PURE__ */ l.createElement("line", { x1: 28, y1: 22, x2: 28, y2: 32 }), /* @__PURE__ */ l.createElement("line", { x1: 23, y1: 27, x2: 33, y2: 27 }), /* @__PURE__ */ l.createElement("line", { x1: 38, y1: 118, x2: 38, y2: 128 }), /* @__PURE__ */ l.createElement("line", { x1: 33, y1: 123, x2: 43, y2: 123 }), /* @__PURE__ */ l.createElement("line", { x1: 162, y1: 52, x2: 162, y2: 62 }), /* @__PURE__ */ l.createElement("line", { x1: 157, y1: 57, x2: 167, y2: 57 })), /* @__PURE__ */ l.createElement("circle", { cx: 100, cy: 155, r: 2, fill: "#D0D0D0" }), /* @__PURE__ */ l.createElement("g", { transform: "rotate(-8, 100, 90)" }, /* @__PURE__ */ l.createElement("rect", { x: 42, y: 28, width: 112, height: 130, rx: 10, fill: "#DCDCDC" }), /* @__PURE__ */ l.createElement("rect", { x: 44, y: 30, width: 108, height: 126, rx: 9, fill: "white", stroke: "#C2C2C2", strokeWidth: 1.5 }), /* @__PURE__ */ l.createElement("rect", { x: 50, y: 36, width: 96, height: 114, rx: 6, fill: "white", stroke: "#C2C2C2", strokeWidth: 1 }), /* @__PURE__ */ l.createElement("rect", { x: 82, y: 20, width: 32, height: 20, rx: 4, fill: "white", stroke: "#C2C2C2", strokeWidth: 1.5 }), /* @__PURE__ */ l.createElement("path", { d: "M91 20 Q98 14 105 20", stroke: "#C2C2C2", strokeWidth: 1.5, fill: "#F4F4F4" }), /* @__PURE__ */ l.createElement("circle", { cx: 95, cy: 88, r: 26, stroke: "#C2C2C2", strokeWidth: 3, fill: "white" }), /* @__PURE__ */ l.createElement("line", { x1: 113, y1: 106, x2: 128, y2: 121, stroke: "#C2C2C2", strokeWidth: 5, strokeLinecap: "round" }), /* @__PURE__ */ l.createElement("line", { x1: 116, y1: 109, x2: 125, y2: 118, stroke: "#E8E8E8", strokeWidth: 2, strokeLinecap: "round" }))), Ae = (a) => {
   if (typeof a == "number") return a;
   if (a == null) return NaN;
-  const f = String(a).replace(/[^0-9.-]/g, "");
-  return f === "" ? NaN : Number(f);
-}, Wt = (a, f, H) => {
-  const S = Ke(a.getValue(H)), d = Ke(f.getValue(H));
-  return Number.isNaN(S) && Number.isNaN(d) ? 0 : Number.isNaN(S) ? 1 : Number.isNaN(d) ? -1 : S - d;
+  const m = String(a).replace(/[^0-9.-]/g, "");
+  return m === "" ? NaN : Number(m);
+}, Rt = (a, m, w) => {
+  const p = Ae(a.getValue(w)), d = Ae(m.getValue(w));
+  return Number.isNaN(p) && Number.isNaN(d) ? 0 : Number.isNaN(p) ? 1 : Number.isNaN(d) ? -1 : p - d;
 };
-let Ve = !1;
-const Ae = (a) => {
+let Ke = !1;
+const Ve = (a) => {
   if (typeof a == "number") return a;
   if (typeof a == "string" && a.trim().endsWith("px")) {
-    const f = Number.parseFloat(a);
-    return Number.isNaN(f) ? void 0 : f;
+    const m = Number.parseFloat(a);
+    return Number.isNaN(m) ? void 0 : m;
   }
 };
-function tn({
+function Dt(a, m, w) {
+  const p = Array.isArray(a) ? a : a ? [a] : [];
+  return p.length === 0 ? "" : /* @__PURE__ */ s(wt, { children: p.map(
+    (d, D) => w.renderChip ? /* @__PURE__ */ s("span", { children: w.renderChip(d, m) }, D) : /* @__PURE__ */ s(
+      xt,
+      {
+        variation: "NEUTRAL",
+        size: "small",
+        fill: "outline",
+        shape: "pill",
+        children: String(d)
+      },
+      D
+    )
+  ) });
+}
+function ln({
   config: a = {},
-  data: f = [],
-  maxHeight: H = "600px",
-  virtualization: S = !1,
+  data: m = [],
+  maxHeight: w = "600px",
+  virtualization: p = !1,
   persistTableConfig: d = "",
-  message: me,
+  message: D,
   icon: He,
   totalRow: fe,
-  selection: Z,
-  expandable: Q,
-  externalColumnFilters: X,
-  externalTableConfig: w,
+  selection: Q,
+  expandable: X,
+  externalColumnFilters: Y,
+  externalTableConfig: x,
   onConfigChange: Oe,
   isLoading: ge = !1
 }) {
   const {
-    headers: L = [],
-    headerGroups: p,
-    showFilters: je = !0,
-    showColumnManager: Te = !0,
+    headers: F = [],
+    headerGroups: y,
+    showFilters: Te = !0,
+    showColumnManager: je = !0,
     columnManagerConfig: he = We,
     toolbarLabels: pe,
     search: g
-  } = a ?? {}, ye = pe?.columnManager ?? !0, ke = pe?.filter ?? !0, [O, Ce] = N(g?.value ?? "");
-  M(() => {
-    g?.value !== void 0 && Ce(g.value);
+  } = a ?? {}, ye = pe?.columnManager ?? !0, Ce = pe?.filter ?? !0, [T, ke] = M(g?.value ?? "");
+  I(() => {
+    g?.value !== void 0 && ke(g.value);
   }, [g?.value]);
-  const be = I((e) => {
-    Ce(e), g?.onSearch?.(e);
-  }, [g]), x = U(null), Y = U(null);
-  Et(x);
-  const {
-    selectionState: z,
-    getRowId: $e,
-    toggleRowSelection: Ge,
-    toggleSelectAll: ve
-  } = wt(f, Z), {
-    expandedIds: Pe,
-    toggleExpand: _e
-  } = xt(Q), j = A(
-    () => L.map((e) => {
+  const be = L(
+    (e) => {
+      ke(e), g?.onSearch?.(e);
+    },
+    [g]
+  ), E = Z(null), ee = Z(null);
+  Mt(E);
+  const { selectionState: A, getRowId: $e, toggleRowSelection: Ge, toggleSelectAll: Se } = Et(m, Q), { expandedIds: Pe, toggleExpand: _e } = Nt(X), j = O(
+    () => F.map((e) => {
       let t = "includesString";
       return e.filterable && (e.type === "string" ? t = (n, r, o) => {
         if (!o) return !0;
-        const c = Array.isArray(o) ? o : o.values, s = Array.isArray(o) ? !1 : o.exclude;
+        const c = Array.isArray(o) ? o : o.values, i = Array.isArray(o) ? !1 : o.exclude;
         if (!c || c.length === 0) return !0;
         const u = String(n.getValue(r));
-        return s ? !c.includes(u) : c.includes(u);
+        return i ? !c.includes(u) : c.includes(u);
       } : e.type === "number" && (t = (n, r, o) => {
         if (!o) return !0;
         const c = Number(n.getValue(r));
@@ -97,36 +110,51 @@ function tn({
         ...e,
         enableSorting: e.sortable !== !1,
         ...e.minWidth !== void 0 ? { enableResizing: !1 } : {},
-        ...e.minSize === void 0 && Ae(e.minWidth) !== void 0 ? { minSize: Ae(e.minWidth) } : {},
+        ...e.minSize === void 0 && Ve(e.minWidth) !== void 0 ? { minSize: Ve(e.minWidth) } : {},
         ...e.type === "number" ? { sortingFn: "numericSort" } : { sortingFn: "text" },
         filterFn: t,
         ...e.renderCell ? {
           cell: (n) => e.renderCell(n.getValue(), n.row.original)
+        } : e.type === "chips" ? {
+          cell: (n) => Dt(n.getValue(), n.row.original, e)
         } : e.prefix || e.suffix || e.decimalPlaces !== void 0 ? {
-          cell: (n) => De(n.getValue(), e)
+          cell: (n) => De(
+            n.getValue(),
+            e
+          )
         } : {}
       };
     }),
-    [L]
-  ), D = I(
+    [F]
+  ), K = L(
     () => ({
       ...We,
       ...he,
       columns: j
     }),
     [he, j]
-  ), Se = () => {
-    const e = D();
+  ), ve = () => {
+    const e = K();
     if (d)
       try {
-        const t = localStorage.getItem(`${R}-${d}`);
+        const t = localStorage.getItem(
+          `${R}-${d}`
+        );
         if (t) {
           const n = JSON.parse(t);
           if (n?.tableConfig) {
-            const r = n.tableConfig.columns || [], o = /* @__PURE__ */ new Set(), c = r.map((s) => e.columns.find((u) => u.accessorKey === s.accessorKey)).filter((s) => !s || o.has(s.accessorKey) ? !1 : (o.add(s.accessorKey), !0));
-            return e.columns.forEach((s) => {
-              c.find((u) => u.accessorKey === s.accessorKey) || c.push(s);
-            }), { ...e, ...n.tableConfig, columns: c };
+            const r = n.tableConfig.columns || [], o = /* @__PURE__ */ new Set(), c = r.map(
+              (i) => e.columns.find(
+                (u) => u.accessorKey === i.accessorKey
+              )
+            ).filter((i) => !i || o.has(i.accessorKey) ? !1 : (o.add(i.accessorKey), !0));
+            return e.columns.forEach((i) => {
+              c.find((u) => u.accessorKey === i.accessorKey) || c.push(i);
+            }), {
+              ...e,
+              ...n.tableConfig,
+              columns: c
+            };
           }
         }
       } catch (t) {
@@ -136,7 +164,9 @@ function tn({
   }, we = () => {
     if (d)
       try {
-        const e = localStorage.getItem(`${R}-${d}`);
+        const e = localStorage.getItem(
+          `${R}-${d}`
+        );
         if (e) {
           const t = JSON.parse(e);
           if (t?.columnFilters) return t.columnFilters;
@@ -148,7 +178,9 @@ function tn({
   }, qe = () => {
     if (d)
       try {
-        const e = localStorage.getItem(`${R}-${d}`);
+        const e = localStorage.getItem(
+          `${R}-${d}`
+        );
         if (e) {
           const t = JSON.parse(e);
           if (t?.columnSizing) return t.columnSizing;
@@ -157,25 +189,35 @@ function tn({
         console.error("Failed to load table config from local storage", e);
       }
     return {};
-  }, [y, ee] = N(Se), [F, T] = N(Se), [K, te] = N(we), [$, xe] = N(we), [h, Ee] = N(qe), ne = U(h);
-  ne.current = h;
-  const Ne = I(
+  }, [C, te] = M(
+    ve
+  ), [B, $] = M(
+    ve
+  ), [V, ne] = M(
+    we
+  ), [G, xe] = M(we), [h, Ee] = M(
+    qe
+  ), oe = Z(h);
+  oe.current = h;
+  const Ne = L(
     (e) => (t) => {
-      const n = x.current;
-      if (n && Y.current) {
-        const s = Y.current.getVisibleLeafColumns(), u = { ...ne.current }, v = n.querySelector(".ckds-dragable-tbody .ckds-dragable-tr");
+      const n = E.current;
+      if (n && ee.current) {
+        const i = ee.current.getVisibleLeafColumns(), u = { ...oe.current }, v = n.querySelector(
+          ".ckds-dragable-tbody .ckds-dragable-tr"
+        );
         if (v) {
-          const b = v.querySelectorAll(".ckds-dragable-td"), ce = b.length > s.length ? 1 : 0;
-          let J = !1;
-          s.forEach((Ie, st) => {
+          const S = v.querySelectorAll(".ckds-dragable-td"), ae = S.length > i.length ? 1 : 0;
+          let U = !1;
+          i.forEach((Ie, st) => {
             if (u[Ie.id] === void 0) {
-              const Le = b[st + ce];
+              const Le = S[st + ae];
               if (Le) {
                 const Fe = Le.offsetWidth;
-                Fe > 0 && (u[Ie.id] = Fe, J = !0);
+                Fe > 0 && (u[Ie.id] = Fe, U = !0);
               }
             }
-          }), J && (ne.current = u, it(() => {
+          }), U && (oe.current = u, it(() => {
             Ee(u);
           }));
         }
@@ -184,25 +226,29 @@ function tn({
       let r = n.scrollWidth;
       const o = () => {
         if (!n) return;
-        const s = n.scrollWidth;
-        if (s < r && n.scrollLeft > 0) {
-          const u = r - s;
+        const i = n.scrollWidth;
+        if (i < r && n.scrollLeft > 0) {
+          const u = r - i;
           n.scrollLeft = Math.max(0, n.scrollLeft - u);
         }
-        r = s;
+        r = i;
       }, c = () => {
         document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", c);
       };
       document.addEventListener("mousemove", o), document.addEventListener("mouseup", c);
     },
-    [x]
-  ), [G, E] = N({ open: !1, type: "", activeOption: "" });
-  M(() => {
-    w && ee(w);
-  }, [w]);
-  const m = A(() => {
-    const e = w ?? y;
-    if (!w) return e;
+    [E]
+  ), [P, N] = M({
+    open: !1,
+    type: "",
+    activeOption: ""
+  });
+  I(() => {
+    x && te(x);
+  }, [x]);
+  const f = O(() => {
+    const e = x ?? C;
+    if (!x) return e;
     const t = new Map(j.map((n) => [n.accessorKey, n]));
     return {
       ...e,
@@ -216,120 +262,166 @@ function tn({
         } : n;
       })
     };
-  }, [w, y, j]), Je = X ?? K, Ue = A(() => {
+  }, [x, C, j]), Je = Y ?? V, Ue = O(() => {
     const e = {};
-    return L.forEach((t) => {
-      if (m.columnVisibility[t.accessorKey] !== !1) {
+    return F.forEach((t) => {
+      if (f.columnVisibility[t.accessorKey] !== !1) {
         if (t.filterable && (t.type === "string" || !t.type)) {
           const n = [
-            ...new Set(f.map((r) => String(r[t.accessorKey] ?? "")).filter(Boolean))
+            ...new Set(
+              m.map((r) => String(r[t.accessorKey] ?? "")).filter(Boolean)
+            )
           ];
-          e[t.header] = { type: "checkbox", options: n, accessorKey: t.accessorKey };
+          e[t.header] = {
+            type: "checkbox",
+            options: n,
+            accessorKey: t.accessorKey
+          };
         } else if (t.filterable && t.type === "number") {
-          const n = f.map((c) => Number(c[t.accessorKey])).filter((c) => !Number.isNaN(c)), r = n.length ? Math.floor(Math.min(...n)) : 0, o = n.length ? Math.ceil(Math.max(...n)) : 0;
-          e[t.header] = { type: "range", values: { min: r, max: o }, accessorKey: t.accessorKey };
+          const n = m.map((c) => Number(c[t.accessorKey])).filter((c) => !Number.isNaN(c)), r = n.length ? Math.floor(Math.min(...n)) : 0, o = n.length ? Math.ceil(Math.max(...n)) : 0;
+          e[t.header] = {
+            type: "range",
+            values: { min: r, max: o },
+            accessorKey: t.accessorKey
+          };
         }
       }
     }), e;
-  }, [L, f, m.columnVisibility]);
-  M(() => {
-    if (d && !Ve)
+  }, [F, m, f.columnVisibility]);
+  I(() => {
+    if (d && !Ke)
       try {
-        const e = K.length > 0, t = !ae(y, D());
-        (e || t) && (Ve = !0);
+        const e = V.length > 0, t = !de(
+          C,
+          K()
+        );
+        (e || t) && (Ke = !0);
       } catch (e) {
         console.error("Failed to check toast condition", e);
       }
-  }, [d]), M(() => {
-    d && Object.keys(h).length > 0 && de(`${R}-${d}`, { columnSizing: h });
-  }, [h, d]), M(() => {
-    te((e) => {
+  }, [d]), I(() => {
+    d && Object.keys(h).length > 0 && ue(`${R}-${d}`, {
+      columnSizing: h
+    });
+  }, [h, d]), I(() => {
+    ne((e) => {
       const t = e.filter(
-        (n) => y.columnVisibility[n.id] !== !1
+        (n) => C.columnVisibility[n.id] !== !1
       );
       return t.length !== e.length ? t : e;
     });
-  }, [y.columnVisibility]);
+  }, [C.columnVisibility]);
   const Ze = () => {
-    const e = /* @__PURE__ */ new Set(), t = F.columns.filter((r) => e.has(r.accessorKey) ? !1 : (e.add(r.accessorKey), !0)), n = { ...F, columns: t };
-    ee(n), E({ type: "", activeOption: "", open: !1 }), d && de(`${R}-${d}`, { tableConfig: n }), Oe?.(F);
+    const e = /* @__PURE__ */ new Set(), t = B.columns.filter((r) => e.has(r.accessorKey) ? !1 : (e.add(r.accessorKey), !0)), n = { ...B, columns: t };
+    te(n), N({ type: "", activeOption: "", open: !1 }), d && ue(`${R}-${d}`, {
+      tableConfig: n
+    }), Oe?.(B);
   }, Qe = () => {
-    T(D);
-  }, Xe = I((e, t) => {
-    T((n) => {
+    $(K);
+  }, Xe = L((e, t) => {
+    $((n) => {
       const r = [...n.columns], [o] = r.splice(e, 1);
       return r.splice(t, 0, o), { ...n, columns: r };
     });
-  }, []), Ye = I((e) => {
-    ee((t) => {
-      const n = typeof e == "function" ? e(t.columnVisibility) : e;
-      return { ...t, columnVisibility: n };
-    });
-  }, []), et = A(() => {
-    const e = [], t = [], n = m.columns.filter(
-      (s) => m.columnVisibility[s.accessorKey] !== !1
+  }, []), Ye = L(
+    (e) => {
+      te((t) => {
+        const n = typeof e == "function" ? e(t.columnVisibility) : e;
+        return { ...t, columnVisibility: n };
+      });
+    },
+    []
+  ), et = O(() => {
+    const e = [], t = [], n = f.columns.filter(
+      (i) => f.columnVisibility[i.accessorKey] !== !1
     );
     if (n.length === 0) return { left: e, right: t };
     const r = /* @__PURE__ */ new Set(), o = [];
-    if (p && p.length > 0) {
-      const s = /* @__PURE__ */ new Map();
-      p.forEach((v) => {
-        v.columns.forEach((b) => {
-          s.set(b, v.columns), r.add(b);
+    if (y && y.length > 0) {
+      const i = /* @__PURE__ */ new Map();
+      y.forEach((v) => {
+        v.columns.forEach((S) => {
+          i.set(S, v.columns), r.add(S);
         });
       });
       const u = /* @__PURE__ */ new Set();
       for (const v of n) {
-        const b = s.get(v.accessorKey);
-        if (b) {
-          const le = b.join(",");
-          if (!u.has(le)) {
-            u.add(le);
-            const ce = b.filter(
-              (J) => m.columnVisibility[J] !== !1
+        const S = i.get(v.accessorKey);
+        if (S) {
+          const ce = S.join(",");
+          if (!u.has(ce)) {
+            u.add(ce);
+            const ae = S.filter(
+              (U) => f.columnVisibility[U] !== !1
             );
-            o.push({ type: "group", ids: ce });
+            o.push({ type: "group", ids: ae });
           }
         } else
           o.push({ type: "single", id: v.accessorKey });
       }
     } else
-      n.forEach((s) => {
-        o.push({ type: "single", id: s.accessorKey });
+      n.forEach((i) => {
+        o.push({
+          type: "single",
+          id: i.accessorKey
+        });
       });
-    const c = (s) => s.type === "group" ? s.ids ?? [] : [s.id];
-    return m.stickyStart === "first" && o.length > 0 && c(o[0]).forEach((s) => e.push(s)), m.stickyStart === "firstTwo" && o.length > 1 && (c(o[0]).forEach((s) => e.push(s)), c(o[1]).forEach((s) => e.push(s))), m.stickyEnd === "last" && o.length > 0 && c(o[o.length - 1]).forEach((u) => {
+    const c = (i) => i.type === "group" ? i.ids ?? [] : [i.id];
+    return f.stickyStart === "first" && o.length > 0 && c(
+      o[0]
+    ).forEach((i) => e.push(i)), f.stickyStart === "firstTwo" && o.length > 1 && (c(
+      o[0]
+    ).forEach((i) => e.push(i)), c(
+      o[1]
+    ).forEach((i) => e.push(i))), f.stickyEnd === "last" && o.length > 0 && c(
+      o[o.length - 1]
+    ).forEach((u) => {
       e.includes(u) || t.push(u);
     }), { left: e, right: t };
-  }, [m.stickyStart, m.stickyEnd, m.columns, m.columnVisibility, p]), tt = A(() => {
-    if (!g || g.mode !== "frontend" || !O.trim()) return f;
-    const e = O.toLowerCase(), t = L.filter((n) => m.columnVisibility[n.accessorKey] !== !1).map((n) => n.accessorKey);
-    return f.filter(
+  }, [
+    f.stickyStart,
+    f.stickyEnd,
+    f.columns,
+    f.columnVisibility,
+    y
+  ]), tt = O(() => {
+    if (!g || g.mode !== "frontend" || !T.trim())
+      return m;
+    const e = T.toLowerCase(), t = F.filter(
+      (n) => f.columnVisibility[n.accessorKey] !== !1
+    ).map((n) => n.accessorKey);
+    return m.filter(
       (n) => t.some((r) => {
         const o = n[r];
         return o != null && String(o).toLowerCase().includes(e);
       })
     );
-  }, [g, O, f, L, m.columnVisibility]);
-  M(() => {
-    x.current && (x.current.scrollTop = 0);
-  }, [f]);
+  }, [
+    g,
+    T,
+    m,
+    F,
+    f.columnVisibility
+  ]);
+  I(() => {
+    E.current && (E.current.scrollTop = 0);
+  }, [m]);
   const k = ct({
     data: tt,
-    columns: m.columns,
+    columns: f.columns,
     defaultColumn: {
       minSize: 100
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    sortingFns: { numericSort: Wt },
+    sortingFns: { numericSort: Rt },
     getRowId: (e, t) => $e(e, t),
     state: {
-      columnVisibility: m.columnVisibility,
+      columnVisibility: f.columnVisibility,
       columnPinning: et,
       columnFilters: Je,
       columnSizing: h
     },
-    onColumnFiltersChange: te,
+    onColumnFiltersChange: ne,
     onColumnSizingChange: Ee,
     enableRowSelection: !1,
     enableColumnResizing: !0,
@@ -339,288 +431,467 @@ function tn({
     getSortedRowModel: ut(),
     getFilteredRowModel: dt()
   });
-  Y.current = k;
-  const { rows: P } = k.getRowModel(), B = k.getVisibleLeafColumns(), Me = B.length > 0 ? B[B.length - 1].id : null, V = (Z?.enabled ?? !1) && !Q?.enabled, _ = V ? 40 : 0, oe = Nt(B, _, h), q = U(/* @__PURE__ */ new Map()), nt = I(
-    (e) => q.current.get(e) || kt,
+  ee.current = k;
+  const { rows: _ } = k.getRowModel(), W = k.getVisibleLeafColumns(), Me = W.length > 0 ? W[W.length - 1].id : null, H = (Q?.enabled ?? !1) && !X?.enabled, q = H ? 40 : 0, re = It(
+    W,
+    q,
+    h
+  ), J = Z(/* @__PURE__ */ new Map()), nt = L(
+    (e) => J.current.get(e) || Ct,
     []
-  ), W = lt({
-    count: P.length,
-    getScrollElement: () => x.current,
+  ), z = lt({
+    count: _.length,
+    getScrollElement: () => E.current,
     estimateSize: nt,
     overscan: 5
   });
-  M(() => {
-    q.current.clear(), requestAnimationFrame(() => {
-      W.measure();
+  I(() => {
+    J.current.clear(), requestAnimationFrame(() => {
+      z.measure();
     });
-  }, [m.wrapText, W]);
-  const ot = I(
+  }, [f.wrapText, z]);
+  const ot = L(
     (e, t) => {
       if (!t) return;
-      const n = t.offsetHeight, r = q.current.get(e);
-      n && r !== n && (q.current.set(e, n), requestAnimationFrame(() => {
-        W.measure();
+      const n = t.offsetHeight, r = J.current.get(e);
+      n && r !== n && (J.current.set(e, n), requestAnimationFrame(() => {
+        z.measure();
       }));
     },
-    [W]
-  ), re = (e) => e === "asc" ? /* @__PURE__ */ l(It, {}) : e === "desc" ? /* @__PURE__ */ l(Lt, {}) : /* @__PURE__ */ l(Ft, {}), rt = G.type === "filter" ? /* @__PURE__ */ l(
-    Ct,
+    [z]
+  ), se = (e) => e === "asc" ? /* @__PURE__ */ s(Ft, {}) : e === "desc" ? /* @__PURE__ */ s(Bt, {}) : /* @__PURE__ */ s(Wt, {}), rt = P.type === "filter" ? /* @__PURE__ */ s(
+    kt,
     {
       filters: Ue,
-      draftColumnFilters: $,
+      draftColumnFilters: G,
       setDraftColumnFilters: xe,
       handleApplyFilters: () => {
-        te($), E({ ...G, open: !1 }), d && de(`${R}-${d}`, { columnFilters: $ });
+        ne(G), N({ ...P, open: !1 }), d && ue(`${R}-${d}`, {
+          columnFilters: G
+        });
       },
-      setModalOpen: E,
-      virtualization: S,
-      isFilterChanged: JSON.stringify($) !== JSON.stringify(K)
+      setModalOpen: N,
+      virtualization: p,
+      isFilterChanged: JSON.stringify(G) !== JSON.stringify(V)
     }
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ s(
     bt,
     {
-      draftConfig: F,
-      setDraftConfig: T,
+      draftConfig: B,
+      setDraftConfig: $,
       moveDraftColumn: Xe,
       handleApplyPref: Ze,
-      setModalOpen: E,
+      setModalOpen: N,
       handleResetToDefault: Qe,
-      isDefault: ae(F, D()),
-      isConfigChanged: Mt(F, y),
-      headerGroupDefs: p
+      isDefault: de(B, K()),
+      isConfigChanged: Lt(B, C),
+      headerGroupDefs: y
     }
-  ), se = Te, ie = je && !X;
-  return /* @__PURE__ */ C("div", { children: [
-    (g || se || ie) && /* @__PURE__ */ C("div", { className: "ckds-filter-wrapper", style: { display: "flex", gap: "8px", margin: "16px 0px 12px 0px", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ l("div", { className: "ckds-toolbar-search", children: g && /* @__PURE__ */ l(
-        ft,
-        {
-          value: O,
-          placeholder: g.placeholder ?? "Search",
-          debounceMs: g.debounceMs ?? 0,
-          onChange: be,
-          onClear: () => be(""),
-          disabled: ge
-        }
-      ) }),
-      (se || ie) && /* @__PURE__ */ C("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
-        se && /* @__PURE__ */ l(
-          Be,
-          {
-            className: `${ae(y, D()) ? "" : "ckds-toolbar-btn-indicator"}`,
-            onClick: () => {
-              T({ ...y, columnVisibility: { ...y.columnVisibility }, columns: [...y.columns] }), E({ open: !0, type: "columnManager", activeOption: "" });
-            },
-            variant: "secondary",
-            size: "medium",
-            icons: { left: /* @__PURE__ */ l(pt, {}) },
-            label: ye ? "Column Manager" : void 0,
-            iconOnly: !ye
-          }
-        ),
-        /* @__PURE__ */ l("div", { style: { borderRight: "1px solid var(--ckcl-black-200, #C2C2C2)", margin: "5px 0" } }),
-        ie && /* @__PURE__ */ l(
-          Be,
-          {
-            className: `${K.length > 0 ? "ckds-toolbar-btn-indicator" : ""}`,
-            onClick: () => {
-              xe(K), E({ open: !0, type: "filter", activeOption: "" });
-            },
-            variant: "secondary",
-            size: "medium",
-            icons: { right: /* @__PURE__ */ l(yt, {}) },
-            label: ke ? "Filters" : void 0,
-            iconOnly: !ke
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ C("div", { style: { position: "relative", overflow: "hidden", borderRadius: "var(--ckcl-border-radius-lg, 12px)" }, children: [
-      ge && /* @__PURE__ */ l(ht, { overlay: !0 }),
-      /* @__PURE__ */ l(
-        "div",
-        {
-          className: "ckds-custom-table ckds-custom-scrollbar",
-          ref: x,
-          style: { maxHeight: H, width: k?.getHeaderGroups()?.[0]?.headers?.length === 1 ? "fit-content" : "100%" },
-          children: P.length ? /* @__PURE__ */ C(
-            "table",
+  ), ie = je, le = Te && !Y;
+  return /* @__PURE__ */ b("div", { children: [
+    (g || ie || le) && /* @__PURE__ */ b(
+      "div",
+      {
+        className: "ckds-filter-wrapper",
+        style: {
+          display: "flex",
+          gap: "8px",
+          margin: "16px 0px 12px 0px",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ s("div", { className: "ckds-toolbar-search", children: g && /* @__PURE__ */ s(
+            ft,
             {
-              className: "ckds-dragable-table",
-              style: { width: "100%", minWidth: oe, display: "block" },
-              children: [
-                /* @__PURE__ */ C("thead", { className: "ckds-dragable-thead", style: { display: "block", position: "sticky", top: 0, zIndex: 10, minWidth: oe, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: [
-                  p && p.length > 0 && /* @__PURE__ */ l(
-                    vt,
-                    {
-                      headerGroups: p,
-                      table: k,
-                      hasSelection: V,
-                      getSortIcon: re,
-                      selectionCell: V ? /* @__PURE__ */ l(
-                        Re,
-                        {
-                          isAllSelected: z.isAllSelected,
-                          isIndeterminate: z.isIndeterminate,
-                          onToggleAll: ve
-                        }
-                      ) : void 0,
-                      lastColId: Me,
-                      columnSizing: h,
-                      pinnedStyle: ue,
-                      selectionOffset: _,
-                      handleResizeWithScrollFollow: Ne
-                    }
-                  ),
-                  !(p && p.length > 0) && k.getHeaderGroups().map((e) => /* @__PURE__ */ C("tr", { className: "ckds-dragable-tr", style: { display: "flex", width: "100%" }, children: [
-                    V && /* @__PURE__ */ l(
-                      "th",
+              value: T,
+              placeholder: g.placeholder ?? "Search",
+              debounceMs: g.debounceMs ?? 0,
+              onChange: be,
+              onClear: () => be(""),
+              disabled: ge
+            }
+          ) }),
+          (ie || le) && /* @__PURE__ */ b("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            ie && /* @__PURE__ */ s(
+              Be,
+              {
+                className: `${de(C, K()) ? "" : "ckds-toolbar-btn-indicator"}`,
+                onClick: () => {
+                  $({
+                    ...C,
+                    columnVisibility: { ...C.columnVisibility },
+                    columns: [...C.columns]
+                  }), N({
+                    open: !0,
+                    type: "columnManager",
+                    activeOption: ""
+                  });
+                },
+                variant: "secondary",
+                size: "medium",
+                icons: { left: /* @__PURE__ */ s(pt, {}) },
+                label: ye ? "Column Manager" : void 0,
+                iconOnly: !ye
+              }
+            ),
+            /* @__PURE__ */ s(
+              "div",
+              {
+                style: {
+                  borderRight: "1px solid var(--ckcl-black-200, #C2C2C2)",
+                  margin: "5px 0"
+                }
+              }
+            ),
+            le && /* @__PURE__ */ s(
+              Be,
+              {
+                className: `${V.length > 0 ? "ckds-toolbar-btn-indicator" : ""}`,
+                onClick: () => {
+                  xe(V), N({
+                    open: !0,
+                    type: "filter",
+                    activeOption: ""
+                  });
+                },
+                variant: "secondary",
+                size: "medium",
+                icons: { right: /* @__PURE__ */ s(yt, {}) },
+                label: Ce ? "Filters" : void 0,
+                iconOnly: !Ce
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ b(
+      "div",
+      {
+        style: {
+          position: "relative",
+          overflow: "hidden",
+          borderRadius: "var(--ckcl-border-radius-lg, 12px)"
+        },
+        children: [
+          ge && /* @__PURE__ */ s(ht, { overlay: !0 }),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: "ckds-custom-table ckds-custom-scrollbar",
+              ref: E,
+              style: {
+                maxHeight: w,
+                width: k?.getHeaderGroups()?.[0]?.headers?.length === 1 ? "fit-content" : "100%"
+              },
+              children: _.length ? /* @__PURE__ */ b(
+                "table",
+                {
+                  className: "ckds-dragable-table",
+                  style: {
+                    width: "100%",
+                    minWidth: re,
+                    display: "block"
+                  },
+                  children: [
+                    /* @__PURE__ */ b(
+                      "thead",
                       {
-                        className: "ckds-dragable-th",
-                        style: { width: 40, minWidth: 40, maxWidth: 40, flex: "0 0 40px", display: "flex", alignItems: "center", justifyContent: "center", position: "sticky", left: 0, zIndex: 2 },
-                        children: /* @__PURE__ */ l(
-                          Re,
+                        className: "ckds-dragable-thead",
+                        style: {
+                          display: "block",
+                          position: "sticky",
+                          top: 0,
+                          zIndex: 10,
+                          minWidth: re,
+                          backgroundColor: "var(--ckds-cell-bg-default, #ffffff)"
+                        },
+                        children: [
+                          y && y.length > 0 && /* @__PURE__ */ s(
+                            St,
+                            {
+                              headerGroups: y,
+                              table: k,
+                              hasSelection: H,
+                              getSortIcon: se,
+                              selectionCell: H ? /* @__PURE__ */ s(
+                                ze,
+                                {
+                                  isAllSelected: A.isAllSelected,
+                                  isIndeterminate: A.isIndeterminate,
+                                  onToggleAll: Se
+                                }
+                              ) : void 0,
+                              lastColId: Me,
+                              columnSizing: h,
+                              pinnedStyle: me,
+                              selectionOffset: q,
+                              handleResizeWithScrollFollow: Ne
+                            }
+                          ),
+                          !(y && y.length > 0) && k.getHeaderGroups().map((e) => /* @__PURE__ */ b(
+                            "tr",
+                            {
+                              className: "ckds-dragable-tr",
+                              style: { display: "flex", width: "100%" },
+                              children: [
+                                H && /* @__PURE__ */ s(
+                                  "th",
+                                  {
+                                    className: "ckds-dragable-th",
+                                    style: {
+                                      width: 40,
+                                      minWidth: 40,
+                                      maxWidth: 40,
+                                      flex: "0 0 40px",
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      position: "sticky",
+                                      left: 0,
+                                      zIndex: 2
+                                    },
+                                    children: /* @__PURE__ */ s(
+                                      ze,
+                                      {
+                                        isAllSelected: A.isAllSelected,
+                                        isIndeterminate: A.isIndeterminate,
+                                        onToggleAll: Se
+                                      }
+                                    )
+                                  }
+                                ),
+                                e.headers.map(
+                                  (t) => {
+                                    const n = t.column.getIsPinned(), r = t.column.id === Me;
+                                    return /* @__PURE__ */ b(
+                                      "th",
+                                      {
+                                        className: "ckds-dragable-th",
+                                        style: {
+                                          ...me(
+                                            t.column,
+                                            k,
+                                            q,
+                                            h
+                                          ),
+                                          ...Re(
+                                            t.column,
+                                            W,
+                                            h
+                                          ),
+                                          position: n ? "sticky" : "relative",
+                                          zIndex: n ? 2 : void 0,
+                                          display: "flex",
+                                          flexDirection: "column"
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ b(
+                                            "div",
+                                            {
+                                              style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                flex: "1 1 auto",
+                                                minWidth: 0,
+                                                justifyContent: t.column.getCanSort() ? "space-between" : t.column.columnDef.align === "right" ? "flex-end" : t.column.columnDef.align === "center" ? "center" : "flex-start",
+                                                cursor: t.column.getCanSort() ? "pointer" : "default"
+                                              },
+                                              onClick: t.column.getCanSort() ? t.column.getToggleSortingHandler() : void 0,
+                                              role: "button",
+                                              tabIndex: t.column.getCanSort() ? 0 : -1,
+                                              onKeyDown: (o) => {
+                                                t.column.getCanSort() && (o.key === "Enter" || o.key === " ") && t.column.getToggleSortingHandler()?.(
+                                                  o
+                                                );
+                                              },
+                                              children: [
+                                                t.column.columnDef.align === "right" && t.column.getCanSort() && /* @__PURE__ */ s("span", { className: "ckds-sort-icon ckds-sort-icon-left", children: se(
+                                                  t.column.getIsSorted()
+                                                ) }),
+                                                at(
+                                                  t.column.columnDef.header,
+                                                  t.getContext()
+                                                ),
+                                                t.column.columnDef.align !== "right" && t.column.getCanSort() && /* @__PURE__ */ s("span", { className: "ckds-sort-icon", children: se(
+                                                  t.column.getIsSorted()
+                                                ) })
+                                              ]
+                                            }
+                                          ),
+                                          !r && t.column.getCanResize() && /* @__PURE__ */ s(
+                                            "div",
+                                            {
+                                              onMouseDown: Ne(
+                                                t.getResizeHandler()
+                                              ),
+                                              onTouchStart: t.getResizeHandler(),
+                                              className: "ckds-col-resize-handle",
+                                              role: "separator",
+                                              "aria-orientation": "vertical",
+                                              children: /* @__PURE__ */ s("div", { className: "ckds-col-resize-line" })
+                                            }
+                                          ),
+                                          !r && !t.column.getCanResize() && /* @__PURE__ */ s(
+                                            "div",
+                                            {
+                                              className: "ckds-col-resize-handle",
+                                              style: { cursor: "default" },
+                                              children: /* @__PURE__ */ s("div", { className: "ckds-col-resize-line" })
+                                            }
+                                          )
+                                        ]
+                                      },
+                                      t.id
+                                    );
+                                  }
+                                )
+                              ]
+                            },
+                            e.id
+                          ))
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ s(
+                      "tbody",
+                      {
+                        className: "ckds-dragable-tbody",
+                        style: {
+                          height: p && _.length ? `${z.getTotalSize()}px` : "auto",
+                          position: "relative",
+                          display: "block",
+                          width: "100%",
+                          minWidth: re
+                        },
+                        children: /* @__PURE__ */ s(
+                          vt,
                           {
-                            isAllSelected: z.isAllSelected,
-                            isIndeterminate: z.isIndeterminate,
-                            onToggleAll: ve
+                            rows: _,
+                            virtualization: p,
+                            rowVirtualizer: z,
+                            handleMeasure: ot,
+                            columnSizing: h,
+                            tableConfig: f,
+                            table: k,
+                            selectionState: A,
+                            selectionConfig: Q,
+                            onToggleRowSelection: Ge,
+                            expandableConfig: X,
+                            expandedIds: Pe,
+                            onToggleExpand: _e
                           }
                         )
                       }
                     ),
-                    e.headers.map((t) => {
-                      const n = t.column.getIsPinned(), r = t.column.id === Me;
-                      return /* @__PURE__ */ C(
-                        "th",
-                        {
-                          className: "ckds-dragable-th",
-                          style: {
-                            ...ue(t.column, k, _, h),
-                            ...ze(t.column, B, h),
-                            position: n ? "sticky" : "relative",
-                            zIndex: n ? 2 : void 0,
-                            display: "flex",
-                            flexDirection: "column"
-                          },
-                          children: [
-                            /* @__PURE__ */ C(
-                              "div",
-                              {
-                                style: {
-                                  display: "flex",
-                                  alignItems: "center",
-                                  flex: "1 1 auto",
-                                  minWidth: 0,
-                                  justifyContent: t.column.getCanSort() ? "space-between" : t.column.columnDef.align === "right" ? "flex-end" : t.column.columnDef.align === "center" ? "center" : "flex-start",
-                                  cursor: t.column.getCanSort() ? "pointer" : "default"
-                                },
-                                onClick: t.column.getCanSort() ? t.column.getToggleSortingHandler() : void 0,
-                                role: "button",
-                                tabIndex: t.column.getCanSort() ? 0 : -1,
-                                onKeyDown: (o) => {
-                                  t.column.getCanSort() && (o.key === "Enter" || o.key === " ") && t.column.getToggleSortingHandler()?.(o);
-                                },
-                                children: [
-                                  t.column.columnDef.align === "right" && t.column.getCanSort() && /* @__PURE__ */ l("span", { className: "ckds-sort-icon ckds-sort-icon-left", children: re(t.column.getIsSorted()) }),
-                                  at(t.column.columnDef.header, t.getContext()),
-                                  t.column.columnDef.align !== "right" && t.column.getCanSort() && /* @__PURE__ */ l("span", { className: "ckds-sort-icon", children: re(t.column.getIsSorted()) })
-                                ]
-                              }
-                            ),
-                            !r && t.column.getCanResize() && /* @__PURE__ */ l(
-                              "div",
-                              {
-                                onMouseDown: Ne(t.getResizeHandler()),
-                                onTouchStart: t.getResizeHandler(),
-                                className: "ckds-col-resize-handle",
-                                role: "separator",
-                                "aria-orientation": "vertical",
-                                children: /* @__PURE__ */ l("div", { className: "ckds-col-resize-line" })
-                              }
-                            )
-                          ]
-                        },
-                        t.id
-                      );
-                    })
-                  ] }, e.id))
-                ] }),
-                /* @__PURE__ */ l(
-                  "tbody",
-                  {
-                    className: "ckds-dragable-tbody",
-                    style: {
-                      height: S && P.length ? `${W.getTotalSize()}px` : "auto",
-                      position: "relative",
-                      display: "block",
-                      width: "100%",
-                      minWidth: oe
-                    },
-                    children: /* @__PURE__ */ l(
-                      St,
-                      {
-                        rows: P,
-                        virtualization: S,
-                        rowVirtualizer: W,
-                        handleMeasure: ot,
-                        columnSizing: h,
-                        tableConfig: m,
-                        table: k,
-                        selectionState: z,
-                        selectionConfig: Z,
-                        onToggleRowSelection: Ge,
-                        expandableConfig: Q,
-                        expandedIds: Pe,
-                        onToggleExpand: _e
-                      }
-                    )
-                  }
-                ),
-                fe && /* @__PURE__ */ l("tfoot", { className: "ckds-dragable-tfoot", style: { display: "block", position: "sticky", bottom: 0, zIndex: 10, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: /* @__PURE__ */ C("tr", { className: "ckds-dragable-tr", style: { display: "flex", width: "100%" }, children: [
-                  V && /* @__PURE__ */ l("td", { className: "ckds-dragable-td ckds-dragable-total-td", style: { display: "flex", alignItems: "center", width: 40, minWidth: 40, maxWidth: 40, flex: "0 0 40px", position: "sticky", left: 0, zIndex: 2 } }),
-                  k.getVisibleLeafColumns().map((e, t) => {
-                    const n = e.getIsPinned(), r = fe[e.id], o = e.columnDef;
-                    let c = null;
-                    t === 0 && r === void 0 ? c = /* @__PURE__ */ l("span", { children: "Total" }) : r !== void 0 && (typeof r == "object" && r !== null ? c = /* @__PURE__ */ l("span", { children: r }) : o.prefix || o.suffix || o.decimalPlaces !== void 0 ? c = /* @__PURE__ */ l("span", { children: De(r, o) }) : c = /* @__PURE__ */ l("span", { children: r }));
-                    const s = o.align === "right" ? "right" : o.align === "center" ? "center" : "left";
-                    return /* @__PURE__ */ l(
-                      "td",
+                    fe && /* @__PURE__ */ s(
+                      "tfoot",
                       {
-                        className: "ckds-dragable-td ckds-dragable-total-td",
+                        className: "ckds-dragable-tfoot",
                         style: {
-                          ...ue(e, k, _, h),
-                          display: "flex",
-                          alignItems: "center",
-                          ...ze(e, B, h),
-                          zIndex: n ? 2 : void 0
+                          display: "block",
+                          position: "sticky",
+                          bottom: 0,
+                          zIndex: 10,
+                          backgroundColor: "var(--ckds-cell-bg-default, #ffffff)"
                         },
-                        children: /* @__PURE__ */ l("div", { style: { width: "100%", textAlign: s, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: c })
-                      },
-                      e.id
-                    );
-                  })
-                ] }) })
-              ]
-            }
-          ) : /* @__PURE__ */ l(
-            gt,
-            {
-              icon: He ?? /* @__PURE__ */ l(Bt, {}),
-              message: {
-                heading: me?.heading ?? "No data to display",
-                content: me?.content ?? "There's no activity recorded for this period or filter selection."
-              },
-              classNames: { wrapperClass: "ckds-table-empty-state-wrapper" }
+                        children: /* @__PURE__ */ b(
+                          "tr",
+                          {
+                            className: "ckds-dragable-tr",
+                            style: { display: "flex", width: "100%" },
+                            children: [
+                              H && /* @__PURE__ */ s(
+                                "td",
+                                {
+                                  className: "ckds-dragable-td ckds-dragable-total-td",
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    width: 40,
+                                    minWidth: 40,
+                                    maxWidth: 40,
+                                    flex: "0 0 40px",
+                                    position: "sticky",
+                                    left: 0,
+                                    zIndex: 2
+                                  }
+                                }
+                              ),
+                              k.getVisibleLeafColumns().map((e, t) => {
+                                const n = e.getIsPinned(), r = fe[e.id], o = e.columnDef;
+                                let c = null;
+                                t === 0 && r === void 0 ? c = /* @__PURE__ */ s("span", { children: "Total" }) : r !== void 0 && (typeof r == "object" && r !== null ? c = /* @__PURE__ */ s("span", { children: r }) : o.prefix || o.suffix || o.decimalPlaces !== void 0 ? c = /* @__PURE__ */ s("span", { children: De(
+                                  r,
+                                  o
+                                ) }) : c = /* @__PURE__ */ s("span", { children: r }));
+                                const i = o.align === "right" ? "right" : o.align === "center" ? "center" : "left";
+                                return /* @__PURE__ */ s(
+                                  "td",
+                                  {
+                                    className: "ckds-dragable-td ckds-dragable-total-td",
+                                    style: {
+                                      ...me(
+                                        e,
+                                        k,
+                                        q,
+                                        h
+                                      ),
+                                      display: "flex",
+                                      alignItems: "center",
+                                      ...Re(
+                                        e,
+                                        W,
+                                        h
+                                      ),
+                                      zIndex: n ? 2 : void 0
+                                    },
+                                    children: /* @__PURE__ */ s(
+                                      "div",
+                                      {
+                                        style: {
+                                          width: "100%",
+                                          textAlign: i,
+                                          overflow: "hidden",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        children: c
+                                      }
+                                    )
+                                  },
+                                  e.id
+                                );
+                              })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ s(
+                gt,
+                {
+                  icon: He ?? /* @__PURE__ */ s(zt, {}),
+                  message: {
+                    heading: D?.heading ?? "No data to display",
+                    content: D?.content ?? "There's no activity recorded for this period or filter selection."
+                  },
+                  classNames: { wrapperClass: "ckds-table-empty-state-wrapper" }
+                }
+              )
             }
           )
-        }
-      )
-    ] }),
-    G.open && !X && !w && /* @__PURE__ */ l(
+        ]
+      }
+    ),
+    P.open && !Y && !x && /* @__PURE__ */ s(
       "div",
       {
         className: "ckds-table-filter-modal-wr",
-        onClick: () => E({ ...G, open: !1 }),
+        onClick: () => N({ ...P, open: !1 }),
         role: "dialog",
         "aria-modal": "true",
         style: {
@@ -632,7 +903,7 @@ function tn({
           justifyContent: "center",
           backgroundColor: "rgba(0,0,0,0.3)"
         },
-        children: /* @__PURE__ */ l(
+        children: /* @__PURE__ */ s(
           "div",
           {
             className: "ckds-table-modal-box",
@@ -645,6 +916,6 @@ function tn({
   ] });
 }
 export {
-  tn as CustomTable,
-  tn as default
+  ln as CustomTable,
+  ln as default
 };