@ck-ui/component-library 0.3.0 → 1.0.0

package/dist/components/Table/index.js

@@ -1,115 +1,125 @@
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
 import * as o from "react";
-import { useState as b, useCallback as S, useRef as he, useMemo as w, useEffect as $ } from "react";
-import { u as $e } from "../../OptionList-BNaH2PnX.js";
-import { u as Pe, f as _e, a as Ge, b as Je, g as Ue } from "../../index-f7TB87Mf.js";
-import { CKButton as pe } from "../CKButton/index.js";
-import { Search as Ze } from "../Search/index.js";
-import { EmptyState as qe } from "../EmptyState/index.js";
-import { S as Qe, a as Xe } from "../../table-filter-C0zetUfo.js";
-import { INITIAL_COLUMN_MANAGER_CONFIG as ye, ROW_MIN_HEIGHT as Ye, TABLE_PREFIX as v } from "./constants.js";
-import et from "./_helpers/TableFilterModal/index.js";
-import tt from "./_helpers/ColumnManager/index.js";
-import nt from "./_helpers/GroupedHeader/index.js";
-import { SelectionHeaderCell as ke } from "./_helpers/SelectionCell/index.js";
-import ot from "./_helpers/TableRows.js";
-import { useSelection as st } from "./_hooks/useSelection.js";
-import { useExpansion as it } from "./_hooks/useExpansion.js";
-import { isTableConfigDefault as Ce, saveToLocalStorage as Y, isTableConfigChanged as lt, pinnedStyle as ee } from "./_utils/table.utils.js";
-import { formatCellValue as be } from "./_utils/formatCellValue.js";
-import '../../assets/styles-CbbBUzsN.css';/* empty css                    */
-const rt = (u) => /* @__PURE__ */ o.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...u }, /* @__PURE__ */ o.createElement("path", { d: "M1.75 8.75006L8.16667 8.75", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M1.75 5.25H5.83333", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M1.75 12.25H11.0833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.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" })), at = (u) => /* @__PURE__ */ o.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...u }, /* @__PURE__ */ o.createElement("path", { d: "M1.75 5.24994L8.16667 5.25", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M1.75 8.75H5.83333", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M1.75 1.75H11.0833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.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" })), ct = (u) => /* @__PURE__ */ o.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...u }, /* @__PURE__ */ o.createElement("mask", { id: "mask0_1852_13537", style: {
+import { useState as C, useCallback as v, useRef as pe, useMemo as L, useEffect as j } from "react";
+import { u as Ge } from "../../OptionList-DN1xZbnV.js";
+import { u as Je, f as qe, a as Ue, b as Ze, g as Qe } from "../../index-f7TB87Mf.js";
+import { CKButton as ye } from "../CKButton/index.js";
+import { Search as Xe } from "../Search/index.js";
+import { EmptyState as Ye } from "../EmptyState/index.js";
+import { Loader as et } from "../Loader/index.js";
+import { S as tt, a as nt } from "../../table-filter-C0zetUfo.js";
+import { INITIAL_COLUMN_MANAGER_CONFIG as ke, ROW_MIN_HEIGHT as ot, TABLE_PREFIX as S } from "./constants.js";
+import it from "./_helpers/TableFilterModal/index.js";
+import lt from "./_helpers/ColumnManager/index.js";
+import st from "./_helpers/GroupedHeader/index.js";
+import { SelectionHeaderCell as Ce } from "./_helpers/SelectionCell/index.js";
+import rt from "./_helpers/TableRows.js";
+import { useSelection as at } from "./_hooks/useSelection.js";
+import { useExpansion as ct } from "./_hooks/useExpansion.js";
+import { isTableConfigDefault as be, saveToLocalStorage as Q, getTableMinWidth as dt, isTableConfigChanged as mt, pinnedStyle as X, columnLayoutStyle as xe } from "./_utils/table.utils.js";
+import { formatCellValue as we } from "./_utils/formatCellValue.js";
+import '../../assets/styles-Bqfs9eXV.css';/* empty css                    */
+const ut = (c) => /* @__PURE__ */ o.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...c }, /* @__PURE__ */ o.createElement("path", { d: "M1.75 8.75006L8.16667 8.75", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M1.75 5.25H5.83333", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M1.75 12.25H11.0833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.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" })), ft = (c) => /* @__PURE__ */ o.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...c }, /* @__PURE__ */ o.createElement("path", { d: "M1.75 5.24994L8.16667 5.25", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M1.75 8.75H5.83333", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M1.75 1.75H11.0833", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ o.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" })), gt = (c) => /* @__PURE__ */ o.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", ...c }, /* @__PURE__ */ o.createElement("mask", { id: "mask0_1852_13537", style: {
   maskType: "luminance"
-}, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 14, height: 14 }, /* @__PURE__ */ o.createElement("path", { d: "M13.708 0.291992V13.708H0.291992V0.291992H13.708Z", fill: "white", stroke: "white", strokeWidth: 0.583333 })), /* @__PURE__ */ o.createElement("g", { mask: "url(#mask0_1852_13537)" }, /* @__PURE__ */ o.createElement("path", { d: "M1.75 4.08325H12.25", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M3.5 7H10.5", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M5.83398 9.9165H8.16732", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }))), dt = (u) => /* @__PURE__ */ o.createElement("svg", { width: 200, height: 180, viewBox: "0 0 200 180", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...u }, /* @__PURE__ */ o.createElement("ellipse", { cx: 100, cy: 168, rx: 38, ry: 6, fill: "#E0E0E0" }), /* @__PURE__ */ o.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__ */ o.createElement("g", { stroke: "#C0C0C0", strokeWidth: 2.5, strokeLinecap: "round" }, /* @__PURE__ */ o.createElement("line", { x1: 28, y1: 22, x2: 28, y2: 32 }), /* @__PURE__ */ o.createElement("line", { x1: 23, y1: 27, x2: 33, y2: 27 }), /* @__PURE__ */ o.createElement("line", { x1: 38, y1: 118, x2: 38, y2: 128 }), /* @__PURE__ */ o.createElement("line", { x1: 33, y1: 123, x2: 43, y2: 123 }), /* @__PURE__ */ o.createElement("line", { x1: 162, y1: 52, x2: 162, y2: 62 }), /* @__PURE__ */ o.createElement("line", { x1: 157, y1: 57, x2: 167, y2: 57 })), /* @__PURE__ */ o.createElement("circle", { cx: 100, cy: 155, r: 2, fill: "#D0D0D0" }), /* @__PURE__ */ o.createElement("g", { transform: "rotate(-8, 100, 90)" }, /* @__PURE__ */ o.createElement("rect", { x: 42, y: 28, width: 112, height: 130, rx: 10, fill: "#DCDCDC" }), /* @__PURE__ */ o.createElement("rect", { x: 44, y: 30, width: 108, height: 126, rx: 9, fill: "white", stroke: "#C2C2C2", strokeWidth: 1.5 }), /* @__PURE__ */ o.createElement("rect", { x: 50, y: 36, width: 96, height: 114, rx: 6, fill: "white", stroke: "#C2C2C2", strokeWidth: 1 }), /* @__PURE__ */ o.createElement("rect", { x: 82, y: 20, width: 32, height: 20, rx: 4, fill: "white", stroke: "#C2C2C2", strokeWidth: 1.5 }), /* @__PURE__ */ o.createElement("path", { d: "M91 20 Q98 14 105 20", stroke: "#C2C2C2", strokeWidth: 1.5, fill: "#F4F4F4" }), /* @__PURE__ */ o.createElement("circle", { cx: 95, cy: 88, r: 26, stroke: "#C2C2C2", strokeWidth: 3, fill: "white" }), /* @__PURE__ */ o.createElement("line", { x1: 113, y1: 106, x2: 128, y2: 121, stroke: "#C2C2C2", strokeWidth: 5, strokeLinecap: "round" }), /* @__PURE__ */ o.createElement("line", { x1: 116, y1: 109, x2: 125, y2: 118, stroke: "#E8E8E8", strokeWidth: 2, strokeLinecap: "round" })));
-let xe = !1;
-function Nt({
-  config: u = {},
-  data: y = [],
-  maxHeight: Se = "600px",
-  virtualization: P = !0,
-  persistTableConfig: c = "",
-  message: te,
-  icon: we,
-  totalRow: ne,
-  selection: _,
-  expandable: G,
-  externalColumnFilters: J,
-  externalTableConfig: E
+}, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 14, height: 14 }, /* @__PURE__ */ o.createElement("path", { d: "M13.708 0.291992V13.708H0.291992V0.291992H13.708Z", fill: "white", stroke: "white", strokeWidth: 0.583333 })), /* @__PURE__ */ o.createElement("g", { mask: "url(#mask0_1852_13537)" }, /* @__PURE__ */ o.createElement("path", { d: "M1.75 4.08325H12.25", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M3.5 7H10.5", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }), /* @__PURE__ */ o.createElement("path", { d: "M5.83398 9.9165H8.16732", stroke: "#2B2B2B", strokeWidth: 0.875, strokeLinecap: "round" }))), ht = (c) => /* @__PURE__ */ o.createElement("svg", { width: 200, height: 180, viewBox: "0 0 200 180", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...c }, /* @__PURE__ */ o.createElement("ellipse", { cx: 100, cy: 168, rx: 38, ry: 6, fill: "#E0E0E0" }), /* @__PURE__ */ o.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__ */ o.createElement("g", { stroke: "#C0C0C0", strokeWidth: 2.5, strokeLinecap: "round" }, /* @__PURE__ */ o.createElement("line", { x1: 28, y1: 22, x2: 28, y2: 32 }), /* @__PURE__ */ o.createElement("line", { x1: 23, y1: 27, x2: 33, y2: 27 }), /* @__PURE__ */ o.createElement("line", { x1: 38, y1: 118, x2: 38, y2: 128 }), /* @__PURE__ */ o.createElement("line", { x1: 33, y1: 123, x2: 43, y2: 123 }), /* @__PURE__ */ o.createElement("line", { x1: 162, y1: 52, x2: 162, y2: 62 }), /* @__PURE__ */ o.createElement("line", { x1: 157, y1: 57, x2: 167, y2: 57 })), /* @__PURE__ */ o.createElement("circle", { cx: 100, cy: 155, r: 2, fill: "#D0D0D0" }), /* @__PURE__ */ o.createElement("g", { transform: "rotate(-8, 100, 90)" }, /* @__PURE__ */ o.createElement("rect", { x: 42, y: 28, width: 112, height: 130, rx: 10, fill: "#DCDCDC" }), /* @__PURE__ */ o.createElement("rect", { x: 44, y: 30, width: 108, height: 126, rx: 9, fill: "white", stroke: "#C2C2C2", strokeWidth: 1.5 }), /* @__PURE__ */ o.createElement("rect", { x: 50, y: 36, width: 96, height: 114, rx: 6, fill: "white", stroke: "#C2C2C2", strokeWidth: 1 }), /* @__PURE__ */ o.createElement("rect", { x: 82, y: 20, width: 32, height: 20, rx: 4, fill: "white", stroke: "#C2C2C2", strokeWidth: 1.5 }), /* @__PURE__ */ o.createElement("path", { d: "M91 20 Q98 14 105 20", stroke: "#C2C2C2", strokeWidth: 1.5, fill: "#F4F4F4" }), /* @__PURE__ */ o.createElement("circle", { cx: 95, cy: 88, r: 26, stroke: "#C2C2C2", strokeWidth: 3, fill: "white" }), /* @__PURE__ */ o.createElement("line", { x1: 113, y1: 106, x2: 128, y2: 121, stroke: "#C2C2C2", strokeWidth: 5, strokeLinecap: "round" }), /* @__PURE__ */ o.createElement("line", { x1: 116, y1: 109, x2: 125, y2: 118, stroke: "#E8E8E8", strokeWidth: 2, strokeLinecap: "round" })));
+let ve = !1;
+const Se = (c) => {
+  if (typeof c == "number") return c;
+  if (typeof c == "string" && c.trim().endsWith("px")) {
+    const m = Number.parseFloat(c);
+    return Number.isNaN(m) ? void 0 : m;
+  }
+};
+function At({
+  config: c = {},
+  data: m = [],
+  maxHeight: Ee = "600px",
+  virtualization: T = !1,
+  persistTableConfig: d = "",
+  message: Y,
+  icon: Me,
+  totalRow: ee,
+  selection: $,
+  expandable: P,
+  externalColumnFilters: _,
+  externalTableConfig: E,
+  isLoading: te = !1
 }) {
   const {
-    headers: x = [],
+    headers: b = [],
     headerGroups: M,
-    showFilters: ve = !0,
-    showColumnManager: Ee = !0,
-    columnManagerConfig: oe = ye,
-    toolbarLabels: se,
+    showFilters: Ie = !0,
+    showColumnManager: Ne = !0,
+    columnManagerConfig: ne = ke,
+    toolbarLabels: oe,
     search: f
-  } = u ?? {}, ie = se?.columnManager ?? !0, le = se?.filter ?? !0, [z, Me] = b(""), re = S((e) => {
-    Me(e), f?.onSearch?.(e);
-  }, [f]), ae = he(null), {
-    selectionState: B,
-    getRowId: Be,
-    toggleRowSelection: Ie,
-    toggleSelectAll: ce
-  } = st(y, _), {
-    expandedIds: Le,
-    toggleExpand: Ne
-  } = it(G), W = w(
-    () => x.map((e) => {
+  } = c ?? {}, ie = oe?.columnManager ?? !0, le = oe?.filter ?? !0, [W, Be] = C(""), se = v((e) => {
+    Be(e), f?.onSearch?.(e);
+  }, [f]), re = pe(null), {
+    selectionState: I,
+    getRowId: Fe,
+    toggleRowSelection: Le,
+    toggleSelectAll: ae
+  } = at(m, $), {
+    expandedIds: We,
+    toggleExpand: ze
+  } = ct(P), z = L(
+    () => b.map((e) => {
       let t = "includesString";
-      return e.filterable && (e.type === "string" ? t = (n, r, i) => {
-        if (!i) return !0;
-        const l = Array.isArray(i) ? i : i.values, m = Array.isArray(i) ? !1 : i.exclude;
-        if (!l || l.length === 0) return !0;
-        const p = String(n.getValue(r));
-        return m ? !l.includes(p) : l.includes(p);
-      } : e.type === "number" && (t = (n, r, i) => {
-        if (!i) return !0;
-        const l = Number(n.getValue(r));
-        return l >= i.min && l <= i.max;
+      return e.filterable && (e.type === "string" ? t = (n, s, l) => {
+        if (!l) return !0;
+        const r = Array.isArray(l) ? l : l.values, k = Array.isArray(l) ? !1 : l.exclude;
+        if (!r || r.length === 0) return !0;
+        const he = String(n.getValue(s));
+        return k ? !r.includes(he) : r.includes(he);
+      } : e.type === "number" && (t = (n, s, l) => {
+        if (!l) return !0;
+        const r = Number(n.getValue(s));
+        return r >= l.min && r <= l.max;
       })), {
         ...e,
         enableSorting: e.sortable !== !1,
+        ...e.minWidth !== void 0 ? { enableResizing: !1 } : {},
+        ...e.minSize === void 0 && Se(e.minWidth) !== void 0 ? { minSize: Se(e.minWidth) } : {},
+        ...e.type === "number" ? { sortingFn: "alphanumeric" } : {},
         filterFn: t,
-        // Map renderCell convenience prop to TanStack's cell renderer.
-        // If no renderCell but prefix/suffix/decimalPlaces is set, use formatCellValue.
         ...e.renderCell ? {
           cell: (n) => e.renderCell(n.getValue(), n.row.original)
         } : e.prefix || e.suffix || e.decimalPlaces !== void 0 ? {
-          cell: (n) => be(n.getValue(), e)
+          cell: (n) => we(n.getValue(), e)
         } : {}
       };
     }),
-    [x]
-  ), D = S(
+    [b]
+  ), D = v(
     () => ({
-      ...ye,
-      ...oe,
-      columns: W
+      ...ke,
+      ...ne,
+      columns: z
     }),
-    [oe, W]
-  ), de = () => {
+    [ne, z]
+  ), ce = () => {
     const e = D();
-    if (c)
+    if (d)
       try {
-        const t = localStorage.getItem(`${v}-${c}`);
+        const t = localStorage.getItem(`${S}-${d}`);
         if (t) {
           const n = JSON.parse(t);
           if (n?.tableConfig) {
-            const i = (n.tableConfig.columns || []).map((l) => e.columns.find((m) => m.accessorKey === l.accessorKey)).filter(Boolean);
-            return e.columns.forEach((l) => {
-              i.find((m) => m.accessorKey === l.accessorKey) || i.push(l);
-            }), { ...e, ...n.tableConfig, columns: i };
+            const l = (n.tableConfig.columns || []).map((r) => e.columns.find((k) => k.accessorKey === r.accessorKey)).filter(Boolean);
+            return e.columns.forEach((r) => {
+              l.find((k) => k.accessorKey === r.accessorKey) || l.push(r);
+            }), { ...e, ...n.tableConfig, columns: l };
           }
         }
       } catch (t) {
         console.error("Failed to load table config from local storage", t);
       }
     return e;
-  }, me = () => {
-    if (c)
+  }, de = () => {
+    if (d)
       try {
-        const e = localStorage.getItem(`${v}-${c}`);
+        const e = localStorage.getItem(`${S}-${d}`);
         if (e) {
           const t = JSON.parse(e);
           if (t?.columnFilters) return t.columnFilters;
@@ -118,10 +128,10 @@ function Nt({
         console.error("Failed to load table config from local storage", e);
       }
     return [];
-  }, Fe = () => {
-    if (c)
+  }, De = () => {
+    if (d)
       try {
-        const e = localStorage.getItem(`${v}-${c}`);
+        const e = localStorage.getItem(`${S}-${d}`);
         if (e) {
           const t = JSON.parse(e);
           if (t?.columnSizing) return t.columnSizing;
@@ -130,382 +140,397 @@ function Nt({
         console.error("Failed to load table config from local storage", e);
       }
     return {};
-  }, [g, ue] = b(de), [I, R] = b(de), [L, U] = b(me), [K, fe] = b(me), [V, ze] = b(Fe), [H, k] = b({ open: !1, type: "", activeOption: "" }), a = w(() => {
+  }, [g, me] = C(ce), [N, R] = C(ce), [B, G] = C(de), [A, ue] = C(de), [h, Re] = C(De), [H, y] = C({ open: !1, type: "", activeOption: "" }), a = L(() => {
     const e = E ?? g;
     if (!E) return e;
-    const t = new Map(W.map((n) => [n.accessorKey, n.filterFn]));
+    const t = new Map(z.map((n) => [n.accessorKey, n.filterFn]));
     return {
       ...e,
       columns: e.columns.map((n) => {
-        const r = t.get(n.accessorKey);
-        return r ? { ...n, filterFn: r } : n;
+        const s = t.get(n.accessorKey);
+        return s ? { ...n, filterFn: s } : n;
       })
     };
-  }, [E, g, W]), We = J ?? L, De = w(() => {
+  }, [E, g, z]), Ae = _ ?? B, He = L(() => {
     const e = {};
-    return x.forEach((t) => {
+    return b.forEach((t) => {
       if (a.columnVisibility[t.accessorKey] !== !1) {
         if (t.filterable && (t.type === "string" || !t.type)) {
           const n = [
-            ...new Set(y.map((r) => String(r[t.accessorKey] ?? "")).filter(Boolean))
+            ...new Set(m.map((s) => String(s[t.accessorKey] ?? "")).filter(Boolean))
           ];
           e[t.header] = { type: "checkbox", options: n, accessorKey: t.accessorKey };
         } else if (t.filterable && t.type === "number") {
-          const n = y.map((l) => Number(l[t.accessorKey])).filter((l) => !Number.isNaN(l)), r = n.length ? Math.floor(Math.min(...n)) : 0, i = n.length ? Math.ceil(Math.max(...n)) : 0;
-          e[t.header] = { type: "range", values: { min: r, max: i }, accessorKey: t.accessorKey };
+          const n = m.map((r) => Number(r[t.accessorKey])).filter((r) => !Number.isNaN(r)), s = n.length ? Math.floor(Math.min(...n)) : 0, l = n.length ? Math.ceil(Math.max(...n)) : 0;
+          e[t.header] = { type: "range", values: { min: s, max: l }, accessorKey: t.accessorKey };
         }
       }
     }), e;
-  }, [x, y, a.columnVisibility]);
-  $(() => {
-    if (c && !xe)
+  }, [b, m, a.columnVisibility]);
+  j(() => {
+    if (d && !ve)
       try {
-        const e = L.length > 0, t = !Ce(g, D());
-        (e || t) && (xe = !0);
+        const e = B.length > 0, t = !be(g, D());
+        (e || t) && (ve = !0);
       } catch (e) {
         console.error("Failed to check toast condition", e);
       }
-  }, [c]), $(() => {
-    c && Object.keys(V).length > 0 && Y(`${v}-${c}`, { columnSizing: V });
-  }, [V, c]), $(() => {
-    U((e) => {
+  }, [d]), j(() => {
+    d && Object.keys(h).length > 0 && Q(`${S}-${d}`, { columnSizing: h });
+  }, [h, d]), j(() => {
+    G((e) => {
       const t = e.filter(
         (n) => g.columnVisibility[n.id] !== !1
       );
       return t.length !== e.length ? t : e;
     });
   }, [g.columnVisibility]);
-  const Re = () => {
-    ue(I), k({ type: "", activeOption: "", open: !1 }), c && Y(`${v}-${c}`, { tableConfig: I });
-  }, Ke = () => {
+  const Ke = () => {
+    me(N), y({ type: "", activeOption: "", open: !1 }), d && Q(`${S}-${d}`, { tableConfig: N });
+  }, Ve = () => {
     R(D);
-  }, Ve = S((e, t) => {
+  }, Oe = v((e, t) => {
     R((n) => {
-      const r = [...n.columns], [i] = r.splice(e, 1);
-      return r.splice(t, 0, i), { ...n, columns: r };
+      const s = [...n.columns], [l] = s.splice(e, 1);
+      return s.splice(t, 0, l), { ...n, columns: s };
     });
-  }, []), He = S((e) => {
-    ue((t) => {
+  }, []), je = v((e) => {
+    me((t) => {
       const n = typeof e == "function" ? e(t.columnVisibility) : e;
       return { ...t, columnVisibility: n };
     });
-  }, []), Ae = w(() => {
+  }, []), Te = L(() => {
     const e = [], t = [], n = a.columns.filter(
-      (r) => a.columnVisibility[r.accessorKey] !== !1
+      (s) => a.columnVisibility[s.accessorKey] !== !1
     );
     return a.stickyStart === "first" && n.length > 0 && e.push(n[0].accessorKey), a.stickyStart === "firstTwo" && n.length > 1 && (e.push(n[0].accessorKey), e.push(n[1].accessorKey)), a.stickyEnd === "last" && n.length > 0 && t.push(n[n.length - 1].accessorKey), { left: e, right: t };
-  }, [a.stickyStart, a.stickyEnd, a.columns, a.columnVisibility]), Oe = w(() => {
-    if (!f || f.mode !== "frontend" || !z.trim()) return y;
-    const e = z.toLowerCase(), t = x.filter((n) => a.columnVisibility[n.accessorKey] !== !1).map((n) => n.accessorKey);
-    return y.filter(
-      (n) => t.some((r) => {
-        const i = n[r];
-        return i != null && String(i).toLowerCase().includes(e);
+  }, [a.stickyStart, a.stickyEnd, a.columns, a.columnVisibility]), $e = L(() => {
+    if (!f || f.mode !== "frontend" || !W.trim()) return m;
+    const e = W.toLowerCase(), t = b.filter((n) => a.columnVisibility[n.accessorKey] !== !1).map((n) => n.accessorKey);
+    return m.filter(
+      (n) => t.some((s) => {
+        const l = n[s];
+        return l != null && String(l).toLowerCase().includes(e);
       })
     );
-  }, [f, z, y, x, a.columnVisibility]), d = Pe({
-    data: Oe,
+  }, [f, W, m, b, a.columnVisibility]), p = Je({
+    data: $e,
     columns: a.columns,
-    getRowId: (e, t) => Be(e, t),
+    defaultColumn: {
+      minSize: 100
+    },
+    getRowId: (e, t) => Fe(e, t),
     state: {
       columnVisibility: a.columnVisibility,
-      columnPinning: Ae,
-      columnFilters: We,
-      columnSizing: V
+      columnPinning: Te,
+      columnFilters: Ae,
+      columnSizing: h
     },
-    onColumnFiltersChange: U,
-    onColumnSizingChange: ze,
+    onColumnFiltersChange: G,
+    onColumnSizingChange: Re,
     enableRowSelection: !1,
     enableColumnResizing: !0,
     columnResizeMode: "onChange",
-    onColumnVisibilityChange: He,
-    getCoreRowModel: Ue(),
-    getSortedRowModel: Je(),
-    getFilteredRowModel: Ge()
-  }), { rows: A } = d.getRowModel(), N = d.getVisibleLeafColumns(), O = N.length > 0 ? N[N.length - 1].id : null, T = w(() => {
-    const e = N.filter((t) => !t.getIsPinned());
-    return e.length > 0 ? e[e.length - 1].id : null;
-  }, [N]), j = he(/* @__PURE__ */ new Map()), ge = S(
-    (e) => j.current.get(e) || Ye,
+    onColumnVisibilityChange: je,
+    getCoreRowModel: Qe(),
+    getSortedRowModel: Ze(),
+    getFilteredRowModel: Ue()
+  }), { rows: K } = p.getRowModel(), x = p.getVisibleLeafColumns(), fe = x.length > 0 ? x[x.length - 1].id : null, F = ($?.enabled ?? !1) && !P?.enabled, V = F ? 40 : 0, J = dt(x, V, h), O = pe(/* @__PURE__ */ new Map()), ge = v(
+    (e) => O.current.get(e) || ot,
     []
-  ), C = $e({
-    count: A.length,
-    getScrollElement: () => ae.current,
+  ), w = Ge({
+    count: K.length,
+    getScrollElement: () => re.current,
     estimateSize: ge,
     overscan: 5
   });
-  $(() => {
-    j.current.clear(), C.measure && C.measure();
-  }, [a.wrapText, C]);
-  const Te = S(
+  j(() => {
+    O.current.clear(), requestAnimationFrame(() => {
+      w.measure();
+    });
+  }, [a.wrapText, w]);
+  const Pe = v(
     (e, t) => {
-      if (t) {
-        const n = t.offsetHeight;
-        n && n !== j.current.get(e) && (j.current.set(e, n), C.measure());
-      }
+      if (!t) return;
+      const n = t.offsetHeight, s = O.current.get(e);
+      n && s !== n && (O.current.set(e, n), requestAnimationFrame(() => {
+        w.measure();
+      }));
     },
-    [C]
-  ), Z = (e) => e === "asc" ? /* @__PURE__ */ s(rt, {}) : e === "desc" ? /* @__PURE__ */ s(at, {}) : /* @__PURE__ */ s(ct, {}), je = H.type === "filter" ? /* @__PURE__ */ s(
-    et,
+    [w]
+  ), q = (e) => e === "asc" ? /* @__PURE__ */ i(ut, {}) : e === "desc" ? /* @__PURE__ */ i(ft, {}) : /* @__PURE__ */ i(gt, {}), _e = H.type === "filter" ? /* @__PURE__ */ i(
+    it,
     {
-      filters: De,
-      draftColumnFilters: K,
-      setDraftColumnFilters: fe,
+      filters: He,
+      draftColumnFilters: A,
+      setDraftColumnFilters: ue,
       handleApplyFilters: () => {
-        U(K), k({ ...H, open: !1 }), c && Y(`${v}-${c}`, { columnFilters: K });
+        G(A), y({ ...H, open: !1 }), d && Q(`${S}-${d}`, { columnFilters: A });
       },
-      setModalOpen: k,
-      virtualization: P,
-      isFilterChanged: JSON.stringify(K) !== JSON.stringify(L)
+      setModalOpen: y,
+      virtualization: T,
+      isFilterChanged: JSON.stringify(A) !== JSON.stringify(B)
     }
-  ) : /* @__PURE__ */ s(
-    tt,
+  ) : /* @__PURE__ */ i(
+    lt,
     {
-      draftConfig: I,
+      draftConfig: N,
       setDraftConfig: R,
-      moveDraftColumn: Ve,
-      handleApplyPref: Re,
-      setModalOpen: k,
-      handleResetToDefault: Ke,
-      isDefault: Ce(I, D()),
-      isConfigChanged: lt(I, g)
+      moveDraftColumn: Oe,
+      handleApplyPref: Ke,
+      setModalOpen: y,
+      handleResetToDefault: Ve,
+      isDefault: be(N, D()),
+      isConfigChanged: mt(N, g)
     }
-  ), q = Ee && !E, Q = ve && !J, F = (_?.enabled ?? !1) && !G?.enabled, X = F ? 40 : 0;
-  return /* @__PURE__ */ h("div", { children: [
-    (f || q || Q) && /* @__PURE__ */ h("div", { className: "ckds-filter-wrapper flex gap-2 my-5 justify-between items-center", children: [
-      /* @__PURE__ */ s("div", { className: "ckds-toolbar-search", children: f && /* @__PURE__ */ s(
-        Ze,
+  ), U = Ne && !E, Z = Ie && !_;
+  return /* @__PURE__ */ u("div", { children: [
+    (f || U || Z) && /* @__PURE__ */ u("div", { className: "ckds-filter-wrapper", style: { display: "flex", gap: "8px", margin: "20px 0", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ i("div", { className: "ckds-toolbar-search", children: f && /* @__PURE__ */ i(
+        Xe,
         {
-          value: z,
+          value: W,
           placeholder: f.placeholder ?? "Search",
           debounceMs: f.debounceMs ?? 0,
-          onChange: re,
-          onClear: () => re("")
+          onChange: se,
+          onClear: () => se(""),
+          disabled: te
         }
       ) }),
-      (q || Q) && /* @__PURE__ */ h("div", { className: "flex gap-2 items-center", children: [
-        q && /* @__PURE__ */ s(
-          pe,
+      (U || Z) && /* @__PURE__ */ u("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+        U && /* @__PURE__ */ i(
+          ye,
           {
             onClick: () => {
-              R({ ...g, columnVisibility: { ...g.columnVisibility }, columns: [...g.columns] }), k({ open: !0, type: "columnManager", activeOption: "" });
+              R({ ...g, columnVisibility: { ...g.columnVisibility }, columns: [...g.columns] }), y({ open: !0, type: "columnManager", activeOption: "" });
             },
             variant: "secondary",
             size: "medium",
-            icons: { left: /* @__PURE__ */ s(Qe, {}) },
+            icons: { left: /* @__PURE__ */ i(tt, {}) },
             label: ie ? "Column Manager" : void 0,
             iconOnly: !ie
           }
         ),
-        /* @__PURE__ */ s("div", { className: "border-r border-base-500 border-solid my-[5px]" }),
-        Q && /* @__PURE__ */ s(
-          pe,
+        /* @__PURE__ */ i("div", { style: { borderRight: "1px solid var(--ckcl-black-200, #C2C2C2)", margin: "5px 0" } }),
+        Z && /* @__PURE__ */ i(
+          ye,
           {
-            className: `relative ${L.length > 0 ? "after:content-[''] after:absolute after:-top-[1px] after:-right-[1px] after:size-[5px] after:rounded-full after:bg-primary" : ""}`,
+            className: `relative ${B.length > 0 ? "after:content-[''] after:absolute after:-top-[1px] after:-right-[1px] after:size-[5px] after:rounded-full after:bg-primary" : ""}`,
             onClick: () => {
-              fe(L), k({ open: !0, type: "filter", activeOption: "" });
+              ue(B), y({ open: !0, type: "filter", activeOption: "" });
             },
             variant: "secondary",
             size: "medium",
-            icons: { right: /* @__PURE__ */ s(Xe, {}) },
+            icons: { right: /* @__PURE__ */ i(nt, {}) },
             label: le ? "Filters" : void 0,
             iconOnly: !le
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ s(
-      "div",
-      {
-        className: "ckds-custom-table ckds-custom-scrollbar",
-        ref: ae,
-        style: { maxHeight: Se },
-        children: A.length ? /* @__PURE__ */ h(
-          "table",
-          {
-            className: "ckds-dragable-table",
-            style: { width: "100%", minWidth: d.getTotalSize(), display: "block" },
-            children: [
-              /* @__PURE__ */ h("thead", { className: "ckds-dragable-thead block sticky top-0 z-10", style: { minWidth: d.getTotalSize(), backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: [
-                M && M.length > 0 && /* @__PURE__ */ s(
-                  nt,
-                  {
-                    headerGroups: M,
-                    table: d,
-                    hasSelection: F,
-                    getSortIcon: Z,
-                    selectionCell: F ? /* @__PURE__ */ s(
-                      ke,
-                      {
-                        isAllSelected: B.isAllSelected,
-                        isIndeterminate: B.isIndeterminate,
-                        onToggleAll: ce
-                      }
-                    ) : void 0,
-                    lastColId: O,
-                    lastNonPinnedColId: T,
-                    pinnedStyle: ee,
-                    selectionOffset: X
-                  }
-                ),
-                !(M && M.length > 0) && d.getHeaderGroups().map((e) => /* @__PURE__ */ h("tr", { className: "ckds-dragable-tr", style: { display: "flex", width: "100%" }, children: [
-                  F && /* @__PURE__ */ s(
-                    "th",
+    /* @__PURE__ */ u("div", { style: { position: "relative" }, children: [
+      te && /* @__PURE__ */ i(et, { overlay: !0 }),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: "ckds-custom-table ckds-custom-scrollbar",
+          ref: re,
+          style: { maxHeight: Ee, width: p?.getHeaderGroups()?.[0]?.headers?.length === 1 ? "fit-content" : "100%" },
+          children: K.length ? /* @__PURE__ */ u(
+            "table",
+            {
+              className: "ckds-dragable-table",
+              style: { width: "100%", minWidth: J, display: "block" },
+              children: [
+                /* @__PURE__ */ u("thead", { className: "ckds-dragable-thead", style: { display: "block", position: "sticky", top: 0, zIndex: 10, minWidth: J, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: [
+                  M && M.length > 0 && /* @__PURE__ */ i(
+                    st,
                     {
-                      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(
-                        ke,
+                      headerGroups: M,
+                      table: p,
+                      hasSelection: F,
+                      getSortIcon: q,
+                      selectionCell: F ? /* @__PURE__ */ i(
+                        Ce,
                         {
-                          isAllSelected: B.isAllSelected,
-                          isIndeterminate: B.isIndeterminate,
-                          onToggleAll: ce
+                          isAllSelected: I.isAllSelected,
+                          isIndeterminate: I.isIndeterminate,
+                          onToggleAll: ae
                         }
-                      )
+                      ) : void 0,
+                      lastColId: fe,
+                      columnSizing: h,
+                      pinnedStyle: X,
+                      selectionOffset: V
                     }
                   ),
-                  e.headers.map((t) => {
-                    const n = t.column.getIsPinned(), r = t.column.id === O, i = r && !n || t.column.id === T;
-                    return /* @__PURE__ */ h(
+                  !(M && M.length > 0) && p.getHeaderGroups().map((e) => /* @__PURE__ */ u("tr", { className: "ckds-dragable-tr", style: { display: "flex", width: "100%" }, children: [
+                    F && /* @__PURE__ */ i(
                       "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__ */ i(
+                          Ce,
+                          {
+                            isAllSelected: I.isAllSelected,
+                            isIndeterminate: I.isIndeterminate,
+                            onToggleAll: ae
+                          }
+                        )
+                      }
+                    ),
+                    e.headers.map((t) => {
+                      const n = t.column.getIsPinned(), s = t.column.id === fe;
+                      return /* @__PURE__ */ u(
+                        "th",
+                        {
+                          className: "ckds-dragable-th",
+                          style: {
+                            ...X(t.column, p, V),
+                            ...xe(t.column, x, h),
+                            position: n ? "sticky" : "relative",
+                            zIndex: n ? 2 : void 0,
+                            display: "flex",
+                            flexDirection: "column"
+                          },
+                          children: [
+                            /* @__PURE__ */ u(
+                              "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: (l) => {
+                                  t.column.getCanSort() && (l.key === "Enter" || l.key === " ") && t.column.getToggleSortingHandler()?.(l);
+                                },
+                                children: [
+                                  t.column.columnDef.align === "right" && t.column.getCanSort() && /* @__PURE__ */ i("span", { className: "ckds-sort-icon ckds-sort-icon-left", children: q(t.column.getIsSorted()) }),
+                                  qe(t.column.columnDef.header, t.getContext()),
+                                  t.column.columnDef.align !== "right" && t.column.getCanSort() && /* @__PURE__ */ i("span", { className: "ckds-sort-icon", children: q(t.column.getIsSorted()) })
+                                ]
+                              }
+                            ),
+                            !s && t.column.getCanResize() && /* @__PURE__ */ i(
+                              "div",
+                              {
+                                onMouseDown: t.getResizeHandler(),
+                                onTouchStart: t.getResizeHandler(),
+                                className: "ckds-col-resize-handle",
+                                role: "separator",
+                                "aria-orientation": "vertical",
+                                children: /* @__PURE__ */ i("div", { className: "ckds-col-resize-line" })
+                              }
+                            )
+                          ]
+                        },
+                        t.id
+                      );
+                    })
+                  ] }, e.id))
+                ] }),
+                /* @__PURE__ */ i(
+                  "tbody",
+                  {
+                    className: "ckds-dragable-tbody",
+                    style: {
+                      height: T && K.length ? `${w.getTotalSize()}px` : "auto",
+                      position: "relative",
+                      display: "block",
+                      width: "100%",
+                      minWidth: J
+                    },
+                    children: /* @__PURE__ */ i(
+                      rt,
+                      {
+                        rows: K,
+                        virtualization: T,
+                        rowVirtualizer: w,
+                        handleMeasure: Pe,
+                        getEstimatedSize: ge,
+                        columnSizing: h,
+                        tableConfig: a,
+                        table: p,
+                        selectionState: I,
+                        selectionConfig: $,
+                        onToggleRowSelection: Le,
+                        expandableConfig: P,
+                        expandedIds: We,
+                        onToggleExpand: ze
+                      }
+                    )
+                  }
+                ),
+                ee && /* @__PURE__ */ i("tfoot", { className: "ckds-dragable-tfoot", style: { display: "block", position: "sticky", bottom: 0, zIndex: 10, backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: /* @__PURE__ */ u("tr", { className: "ckds-dragable-tr", style: { display: "flex", width: "100%" }, children: [
+                  F && /* @__PURE__ */ i("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 } }),
+                  p.getVisibleLeafColumns().map((e, t) => {
+                    const n = e.getIsPinned(), s = ee[e.id], l = e.columnDef;
+                    let r = null;
+                    t === 0 && s === void 0 ? r = /* @__PURE__ */ i("span", { children: "Total" }) : s !== void 0 && (typeof s == "object" && s !== null ? r = /* @__PURE__ */ i("span", { children: s }) : l.prefix || l.suffix || l.decimalPlaces !== void 0 ? r = /* @__PURE__ */ i("span", { children: we(s, l) }) : r = /* @__PURE__ */ i("span", { children: s }));
+                    const k = l.align === "right" ? "right" : l.align === "center" ? "center" : "left";
+                    return /* @__PURE__ */ i(
+                      "td",
+                      {
+                        className: "ckds-dragable-td ckds-dragable-total-td",
                         style: {
-                          ...ee(t.column, d, X),
-                          width: t.getSize(),
-                          minWidth: t.getSize(),
-                          maxWidth: i ? void 0 : t.getSize(),
-                          flex: i ? "1 1 auto" : `0 0 ${t.getSize()}px`,
-                          position: n ? "sticky" : "relative",
-                          zIndex: n ? 2 : void 0,
+                          ...X(e, p, V),
                           display: "flex",
-                          flexDirection: "column"
+                          alignItems: "center",
+                          ...xe(e, x, h),
+                          zIndex: n ? 2 : void 0
                         },
-                        children: [
-                          /* @__PURE__ */ h(
-                            "div",
-                            {
-                              style: {
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "space-between",
-                                height: "100%",
-                                cursor: t.column.getCanSort() ? "pointer" : "default"
-                              },
-                              onClick: t.column.getCanSort() ? t.column.getToggleSortingHandler() : void 0,
-                              role: "button",
-                              tabIndex: t.column.getCanSort() ? 0 : -1,
-                              onKeyDown: (l) => {
-                                t.column.getCanSort() && (l.key === "Enter" || l.key === " ") && t.column.getToggleSortingHandler()?.(l);
-                              },
-                              children: [
-                                t.column.columnDef.align === "right" && t.column.getCanSort() && /* @__PURE__ */ s("span", { className: "ckds-sort-icon", children: Z(t.column.getIsSorted()) }),
-                                _e(t.column.columnDef.header, t.getContext()),
-                                t.column.columnDef.align !== "right" && t.column.getCanSort() && /* @__PURE__ */ s("span", { className: "ckds-sort-icon", children: Z(t.column.getIsSorted()) })
-                              ]
-                            }
-                          ),
-                          !r && /* @__PURE__ */ s(
-                            "div",
-                            {
-                              onMouseDown: t.getResizeHandler(),
-                              onTouchStart: t.getResizeHandler(),
-                              className: "ckds-col-resize-handle",
-                              role: "separator",
-                              "aria-orientation": "vertical",
-                              children: /* @__PURE__ */ s("div", { className: "ckds-col-resize-line" })
-                            }
-                          )
-                        ]
+                        children: /* @__PURE__ */ i("div", { style: { width: "100%", textAlign: k, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: r })
                       },
-                      t.id
+                      e.id
                     );
                   })
-                ] }, e.id))
-              ] }),
-              /* @__PURE__ */ s(
-                "tbody",
-                {
-                  className: "ckds-dragable-tbody",
-                  style: {
-                    height: P && A.length ? `${C.getTotalSize()}px` : "auto",
-                    position: "relative",
-                    display: "block",
-                    minWidth: d.getTotalSize()
-                  },
-                  children: /* @__PURE__ */ s(
-                    ot,
-                    {
-                      rows: A,
-                      virtualization: P,
-                      rowVirtualizer: C,
-                      handleMeasure: Te,
-                      getEstimatedSize: ge,
-                      lastColId: O,
-                      lastNonPinnedColId: T,
-                      tableConfig: a,
-                      table: d,
-                      selectionState: B,
-                      selectionConfig: _,
-                      onToggleRowSelection: Ie,
-                      expandableConfig: G,
-                      expandedIds: Le,
-                      onToggleExpand: Ne
-                    }
-                  )
-                }
-              ),
-              ne && /* @__PURE__ */ s("tfoot", { className: "ckds-dragable-tfoot block sticky bottom-0 z-10", style: { backgroundColor: "var(--ckds-cell-bg-default, #ffffff)" }, children: /* @__PURE__ */ h("tr", { className: "ckds-dragable-tr", style: { display: "flex", width: "100%" }, children: [
-                F && /* @__PURE__ */ s("td", { className: "ckds-dragable-td ckds-dragable-total-td flex items-center", style: { width: 40, minWidth: 40, maxWidth: 40, flex: "0 0 40px", position: "sticky", left: 0, zIndex: 2 } }),
-                d.getVisibleLeafColumns().map((e, t) => {
-                  const n = e.getIsPinned(), i = e.id === O && !n || e.id === T, l = ne[e.id], m = e.columnDef;
-                  let p = null;
-                  return t === 0 && l === void 0 ? p = /* @__PURE__ */ s("span", { children: "Total" }) : l !== void 0 && (typeof l == "object" && l !== null ? p = /* @__PURE__ */ s("span", { children: l }) : m.prefix || m.suffix || m.decimalPlaces !== void 0 ? p = /* @__PURE__ */ s("span", { children: be(l, m) }) : p = /* @__PURE__ */ s("span", { children: l })), /* @__PURE__ */ s(
-                    "td",
-                    {
-                      className: "ckds-dragable-td ckds-dragable-total-td flex items-center",
-                      style: {
-                        ...ee(e, d, X),
-                        width: i ? "100%" : e.getSize(),
-                        minWidth: e.getSize(),
-                        maxWidth: i ? void 0 : e.getSize(),
-                        flex: i ? "1 1 auto" : `0 0 ${e.getSize()}px`,
-                        zIndex: n ? 2 : void 0
-                      },
-                      children: p
-                    },
-                    e.id
-                  );
-                })
-              ] }) })
-            ]
-          }
-        ) : /* @__PURE__ */ s(
-          qe,
-          {
-            icon: we ?? /* @__PURE__ */ s(dt, {}),
-            message: {
-              heading: te?.heading ?? "No data to display",
-              content: te?.content ?? "There's no activity recorded for this period or filter selection."
-            },
-            classNames: { wrapperClass: "ckds-table-empty-state-wrapper" }
-          }
-        )
-      }
-    ),
-    H.open && !J && !E && /* @__PURE__ */ s(
+                ] }) })
+              ]
+            }
+          ) : /* @__PURE__ */ i(
+            Ye,
+            {
+              icon: Me ?? /* @__PURE__ */ i(ht, {}),
+              message: {
+                heading: Y?.heading ?? "No data to display",
+                content: Y?.content ?? "There's no activity recorded for this period or filter selection."
+              },
+              classNames: { wrapperClass: "ckds-table-empty-state-wrapper" }
+            }
+          )
+        }
+      )
+    ] }),
+    H.open && !_ && !E && /* @__PURE__ */ i(
       "div",
       {
-        className: "ckds-table-filter-modal-wr fixed inset-0 z-50 flex items-center justify-center bg-black/30",
-        onClick: () => k({ ...H, open: !1 }),
+        className: "ckds-table-filter-modal-wr",
+        onClick: () => y({ ...H, open: !1 }),
         role: "dialog",
         "aria-modal": "true",
-        children: /* @__PURE__ */ s(
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 50,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0,0,0,0.3)"
+        },
+        children: /* @__PURE__ */ i(
           "div",
           {
             className: "ckds-table-modal-box",
             onClick: (e) => e.stopPropagation(),
-            children: je
+            children: _e
           }
         )
       }
@@ -513,6 +538,6 @@ function Nt({
   ] });
 }
 export {
-  Nt as CustomTable,
-  Nt as default
+  At as CustomTable,
+  At as default
 };