cecomponent 1.0.30 → 1.0.31

package/dist/ce-component-lib.mjs

@@ -3365,7 +3365,7 @@ utils$1.forEach(["post", "put", "patch"], function(e) {
   }
   Axios$1.prototype[e] = r(), Axios$1.prototype[e + "Form"] = r(!0);
 });
-let CancelToken$1 = class jt {
+let CancelToken$1 = class Tt {
   constructor(e) {
     if (typeof e != "function")
       throw new TypeError("executor must be a function.");
@@ -3431,7 +3431,7 @@ let CancelToken$1 = class jt {
   static source() {
     let e;
     return {
-      token: new jt(function(s) {
+      token: new Tt(function(s) {
         e = s;
       }),
       cancel: e
@@ -12298,38 +12298,42 @@ const v$2 = "5.1.7", fr$2 = 30, ip$2 = 25, op$2 = 69, w$2 = 600, h$2 = 600, nm$2
       }
     )
   ] });
-}, CETruncatedTextWithTooltip = ({
-  text: t,
-  wordCount: e = 5
-}) => {
-  const [r, i] = useState(!1), [s, n] = useState({ top: 0, left: 0 }), a = useRef(null), l = t.split(" "), o = l.length > e, c = o ? l.slice(0, e).join(" ") : t, f = () => {
-    if (!a.current) return;
-    const u = a.current.getBoundingClientRect();
-    n({
-      top: u.top + window.scrollY - 8,
-      // tweak vertical offset here
-      left: u.left + window.scrollX
-    }), i(!0);
-  }, b = () => i(!1);
+}, CETruncatedTextWithTooltip = ({ text: t }) => {
+  const [e, r] = useState(!1), [i, s] = useState({ top: 0, left: 0 }), n = useRef(null), [a, l] = useState(!1);
+  useEffect(() => {
+    n.current && l(
+      n.current.scrollWidth > n.current.clientWidth
+    );
+  }, [t]);
+  const o = () => {
+    if (n.current && n.current.scrollWidth > n.current.clientWidth) {
+      const f = n.current.getBoundingClientRect();
+      s({
+        top: f.top + window.scrollY - 8,
+        // tweak vertical offset here
+        left: f.left + window.scrollX
+      }), r(!0);
+    }
+  }, c = () => r(!1);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "span",
     {
       className: "truncated-text-with-tooltip",
-      ref: a,
-      onMouseEnter: o ? f : void 0,
-      onMouseLeave: o ? b : void 0,
+      ref: n,
+      onMouseEnter: o,
+      onMouseLeave: c,
+      tabIndex: 0,
       children: [
-        c,
-        o && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncated-text-ellipsis", children: "…" }),
-        r && ReactDOM.createPortal(
+        t,
+        a && e && ReactDOM.createPortal(
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: "truncated-text-tooltip global-tooltip",
               style: {
                 position: "absolute",
-                top: s.top,
-                left: s.left
+                top: i.top,
+                left: i.left
               },
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "truncated-text-tooltip-arrow" }),
@@ -12369,7 +12373,7 @@ const v$2 = "5.1.7", fr$2 = 30, ip$2 = 25, op$2 = 69, w$2 = 600, h$2 = 600, nm$2
     {}
   ), [P, T] = useState(!1), [F, I] = useState([]), [O, $] = useState([]), [B, z] = useState(!1), [H, D] = useState(/* @__PURE__ */ new Set()), [A, M] = useState(null), [C, R] = useState(!1), [_, j] = useState(""), [L, N] = useState("contains"), [G, J] = useState(""), [K, X] = useState(0), [Q, at] = useState(
     p ?? 10
-  ), [it, st] = useState(/* @__PURE__ */ new Set()), [ct, tt] = useState(""), [q, pt] = useState(!1), [ot, ut] = useState(/* @__PURE__ */ new Set()), ft = useRef(null), xt = useRef(null), dt = useRef(null), [nt, vt] = useState(/* @__PURE__ */ new Set()), [ht, yt] = useState([]), [gt, mt] = useState(!1), [lt, St] = useState(null), Et = useRef(null);
+  ), [it, st] = useState(/* @__PURE__ */ new Set()), [ct, tt] = useState(""), [q, pt] = useState(!1), [ot, ut] = useState(/* @__PURE__ */ new Set()), ft = useRef(null), xt = useRef(null), dt = useRef(null), [nt, vt] = useState(/* @__PURE__ */ new Set()), [ht, yt] = useState([]), [gt, mt] = useState(!1), [lt, St] = useState(null), [Et, Ct] = useState(!1), jt = () => Ct(!0), Ft = () => Ct(!1);
   useEffect(() => {
     if (F.length > 0) {
       const V = Object.keys(F[0]), W = V.map((U) => {
@@ -12388,10 +12392,10 @@ const v$2 = "5.1.7", fr$2 = 30, ip$2 = 25, op$2 = 69, w$2 = 600, h$2 = 600, nm$2
   }, [F, r]), useEffect(() => {
     e && Array.isArray(e) ? (I(e), $(e)) : console.warn("Invalid or missing jsonData prop");
   }, [e]);
-  const Ct = useMemo(() => {
+  const wt = useMemo(() => {
     const V = K * Q, W = V + Q;
     return F.slice(V, W);
-  }, [F, K, Q]), Ft = (V) => {
+  }, [F, K, Q]), Mt = (V) => {
     const W = new Set(ot);
     W.has(V) ? W.size > 1 && W.delete(V) : W.add(V), ut(W);
   }, At = (V, W = null) => {
@@ -12399,15 +12403,15 @@ const v$2 = "5.1.7", fr$2 = 30, ip$2 = 25, op$2 = 69, w$2 = 600, h$2 = 600, nm$2
     Y.has(U) ? Y.delete(U) : (Array.from(Y).forEach((Z) => {
       Z.startsWith(`${V}`) && Y.delete(Z);
     }), Y.add(U)), st(Y);
-  }, Mt = (V) => {
-    M(A === V ? null : V);
   }, It = (V) => {
+    M(A === V ? null : V);
+  }, Lt = (V) => {
     if (O.length === 0) return;
     let W = "asc";
     lt && lt.column === V && (W = lt.direction === "asc" ? "desc" : "asc");
     const U = [...O].sort((Y, Z) => Y[V] == null ? 1 : Z[V] == null ? -1 : Y[V] === Z[V] ? 0 : W === "asc" ? Y[V] > Z[V] ? 1 : -1 : Y[V] < Z[V] ? 1 : -1);
     I(U), St({ column: V, direction: W });
-  }, Lt = () => {
+  }, Dt = () => {
     let V = [];
     F.length === O.length ? V = F : V = O;
     const W = V.filter((U) => {
@@ -12425,7 +12429,7 @@ const v$2 = "5.1.7", fr$2 = 30, ip$2 = 25, op$2 = 69, w$2 = 600, h$2 = 600, nm$2
       return L === "contains" ? et.includes(W.toLowerCase()) : L === "equals" ? et === W : L === "startsWith" ? et.startsWith(W) : L === "endsWith" ? et.endsWith(W) : L === "does not contain" ? !et.includes(W) : L === "does not equal" ? et !== W : L === "is empty" ? et.trim() === "" : L === "is not empty" ? et.trim() !== "" : L === "is any of" ? W.split(",").map((bt) => bt.trim()).includes(et) : !0;
     });
     I(Y), R(!1);
-  }, Dt = (V) => {
+  }, Vt = (V) => {
     V.key === "Enter" && _t();
   };
   useEscapeKey(() => {
@@ -12481,7 +12485,7 @@ const v$2 = "5.1.7", fr$2 = 30, ip$2 = 25, op$2 = 69, w$2 = 600, h$2 = 600, nm$2
         ] }, `${W}-${Y}`)) })
       ] }) });
     return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: String(V) });
-  }, Vt = (V) => {
+  }, Bt = (V) => {
     if (V) {
       const W = V.getBoundingClientRect(), U = W.right > window.innerWidth, Y = W.left < 0;
       U ? (V.classList.add("adjust-left"), V.classList.remove("adjust-right")) : Y ? (V.classList.add("adjust-right"), V.classList.remove("adjust-left")) : (V.classList.remove("adjust-left"), V.classList.remove("adjust-right"));
@@ -12502,147 +12506,136 @@ const v$2 = "5.1.7", fr$2 = 30, ip$2 = 25, op$2 = 69, w$2 = 600, h$2 = 600, nm$2
       document.removeEventListener("mousedown", V);
     };
   }, [q]);
-  const Bt = (V, W) => {
-    V.preventDefault(), T(!0);
+  const Nt = (V, W) => {
+    V.preventDefault();
     const U = V.pageX, Y = g[W] || 150, Z = (rt) => {
-      if (P) {
-        const bt = Math.max(
-          100,
-          Y + (rt.pageX - U)
-        );
-        k((kt) => ({
-          ...kt,
-          [W]: bt
-        }));
-      }
+      const bt = Math.max(100, Y + (rt.pageX - U));
+      k((kt) => ({
+        ...kt,
+        [W]: bt
+      }));
     }, et = () => {
-      T(!1), document.removeEventListener("mousemove", Z), document.removeEventListener("mouseup", et);
+      document.removeEventListener("mousemove", Z), document.removeEventListener("mouseup", et);
     };
     document.addEventListener("mousemove", Z), document.addEventListener("mouseup", et);
-  }, Nt = (V, W) => {
+  }, Ot = (V, W) => {
     m != null && m.includes(W) && y && y(V);
-  }, Rt = Ct.some(
+  }, Rt = wt.some(
     (V) => Array.from(ot).some(
       (W) => Array.isArray(V[W]) && V[W].length > 0 && V[W].some(
         (U) => typeof U == "object" && U !== null
       )
     )
-  ), [wt, Tt] = useState(!1), Ot = () => {
-    Tt((W) => !W);
-    const V = Et.current;
-    V && (wt ? document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen() : V.requestFullscreen ? V.requestFullscreen() : V.webkitRequestFullscreen ? V.webkitRequestFullscreen() : V.msRequestFullscreen && V.msRequestFullscreen());
-  };
-  return useEffect(() => {
-    const V = () => {
-      const W = document.fullscreenElement === Et.current || document.webkitFullscreenElement === Et.current || document.msFullscreenElement === Et.current;
-      Tt(W);
-    };
-    return document.addEventListener("fullscreenchange", V), document.addEventListener("webkitfullscreenchange", V), document.addEventListener("msfullscreenchange", V), () => {
-      document.removeEventListener("fullscreenchange", V), document.removeEventListener("webkitfullscreenchange", V), document.removeEventListener("msfullscreenchange", V);
-    };
-  }, []), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "datatable-wrapper", ref: Et, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid-header", children: [
-      t && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "header-title", children: t }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "search-container", children: [
-        s && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "search-wrapper", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "img",
-            {
-              src: SearchRounded,
-              alt: "Show Filter",
-              title: "Show/Hide Filter",
-              width: 20,
-              height: 20,
-              style: { cursor: "pointer" },
-              onClick: () => z((V) => !V)
-            }
-          ),
-          ct && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              className: "search-cancel-button",
-              onClick: () => {
-                tt(""), I(O);
-              },
-              children: "×"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "img",
-          {
-            src: ShowOrHideColumn,
-            alt: "Columns",
-            title: "Show/Hide Columns",
-            width: 20,
-            height: 20,
-            style: { cursor: "pointer" },
-            onClick: () => pt(!0)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            className: "fullscreen-button",
-            onClick: Ot,
-            title: wt ? "Exit full screen" : "Full screen",
-            children: wt ? "⤫" : "⤢"
-          }
-        )
-      ] })
-    ] }),
-    q && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-modal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "column-modal-content", ref: dt, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-modal-header", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          className: "modal-close-button",
-          onClick: () => pt(!1),
-          children: "×"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "column-modal-title", children: "Column Visibility" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-modal-actions", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "select-all-action", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        CECheckBox,
-        {
-          label: "Select All",
-          checked: ot.size === ht.length,
-          onChange: (V) => {
-            ut(V ? new Set(ht.map((W) => W.id)) : /* @__PURE__ */ new Set());
-          }
-        }
-      ) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-list", children: ht.map((V) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        CECheckBox,
-        {
-          label: V.label ?? V.id,
-          checked: ot.has(V.id),
-          onChange: () => Ft(V.id)
-        }
-      ) }, V.id)) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "table-container", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "table-scroll-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "custom-table", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("thead", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-            Rt && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "expand-column" }),
-            i && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "checkbox-column", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CECheckBox,
-              {
-                label: "",
-                checked: H.size === F.length && F.length > 0,
-                onChange: (V) => {
-                  if (V) {
-                    const W = new Set(
-                      F.map((U, Y) => Y)
-                    );
-                    D(W);
-                  } else
-                    D(/* @__PURE__ */ new Set());
+  ), $t = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "table-container", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "table-scroll-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "table",
+      {
+        className: "custom-table",
+        style: { tableLayout: "fixed", width: "100%" },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("thead", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
+              Rt && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "expand-column" }),
+              i && /* @__PURE__ */ jsxRuntimeExports.jsx("th", { className: "checkbox-column", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CECheckBox,
+                {
+                  label: "",
+                  checked: H.size === F.length && F.length > 0,
+                  onChange: (V) => {
+                    if (V) {
+                      const W = new Set(
+                        F.map((U, Y) => Y)
+                      );
+                      D(W);
+                    } else
+                      D(/* @__PURE__ */ new Set());
+                  }
                 }
-              }
-            ) }),
-            ht.map(
-              (V) => ot.has(V.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ) }),
+              ht.map(
+                (V) => ot.has(V.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "th",
+                  {
+                    className: "table-header-cell",
+                    style: {
+                      width: g[V.id] ? `${g[V.id]}px` : "150px",
+                      minWidth: "80px",
+                      maxWidth: "600px"
+                    },
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "column-header", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "column-label-with-info", children: [
+                        V.label,
+                        V.tooltip && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: InfoIcon,
+                            alt: "info",
+                            title: V.tooltip,
+                            width: 14,
+                            height: 14,
+                            className: "info-icon"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "column-actions", children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: SortIcon,
+                            alt: "Sort",
+                            title: "Sort",
+                            width: 20,
+                            height: 20,
+                            onClick: () => Lt(V.id),
+                            style: {
+                              cursor: "pointer",
+                              transition: "transform 0.2s ease-in-out",
+                              transform: (lt == null ? void 0 : lt.column) === V.id ? lt.direction === "asc" ? "rotate(0deg)" : "rotate(180deg)" : "none",
+                              filter: (lt == null ? void 0 : lt.column) === V.id ? "brightness(0.6)" : "none"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dropdown-container", ref: xt, children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "span",
+                            {
+                              className: "dropdown-trigger",
+                              onClick: () => It(V.id),
+                              children: "⋮"
+                            }
+                          ),
+                          A === V.id && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                            "div",
+                            {
+                              className: "dropdown-menu",
+                              ref: (W) => Bt(W),
+                              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                "button",
+                                {
+                                  className: "dropdown-item",
+                                  onClick: () => {
+                                    j(V.id), R(!0), M(null);
+                                  },
+                                  children: "Filter"
+                                }
+                              )
+                            }
+                          )
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "div",
+                        {
+                          className: "column-resizer",
+                          onMouseDown: (W) => Nt(W, V.id)
+                        }
+                      )
+                    ] })
+                  },
+                  V.id
+                )
+              ),
+              (a || c || f || o || l || n) && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "th",
                 {
                   className: "table-header-cell",
@@ -12650,408 +12643,403 @@ const v$2 = "5.1.7", fr$2 = 30, ip$2 = 25, op$2 = 69, w$2 = 600, h$2 = 600, nm$2
                     width: "150px",
                     textAlign: "center"
                   },
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "column-header", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "column-label-with-info", children: [
-                      V.label,
-                      V.tooltip && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        "img",
-                        {
-                          src: InfoIcon,
-                          alt: "info",
-                          title: V.tooltip,
-                          width: 14,
-                          height: 14,
-                          className: "info-icon"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "column-actions", children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        "img",
-                        {
-                          src: SortIcon,
-                          alt: "Sort",
-                          title: "Sort",
-                          width: 20,
-                          height: 20,
-                          onClick: () => It(V.id),
-                          style: {
-                            cursor: "pointer",
-                            transition: "transform 0.2s ease-in-out",
-                            transform: (lt == null ? void 0 : lt.column) === V.id ? lt.direction === "asc" ? "rotate(0deg)" : "rotate(180deg)" : "none",
-                            filter: (lt == null ? void 0 : lt.column) === V.id ? "brightness(0.6)" : "none"
+                  children: "Action"
+                }
+              )
+            ] }),
+            B && /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
+              Rt && /* @__PURE__ */ jsxRuntimeExports.jsx("td", {}),
+              i && /* @__PURE__ */ jsxRuntimeExports.jsx("td", {}),
+              ht.map(
+                (V) => ot.has(V.id) && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "input",
+                  {
+                    type: "text",
+                    placeholder: `Filter ${V.label}`,
+                    value: _ === V.id ? G : "",
+                    onChange: (W) => {
+                      const U = W.target.value;
+                      J(U), j(V.id), _t(V.id, U);
+                    }
+                  }
+                ) }, `filter-${V.id}`)
+              ),
+              (a || c || f || o || l || n) && /* @__PURE__ */ jsxRuntimeExports.jsx("td", {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: wt.map((V, W) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React2__default.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "tr",
+              {
+                className: W % 2 === 0 ? "table-row-even" : "table-row-odd",
+                children: [
+                  Rt && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "expand-column", children: Array.from(ot).some(
+                    (U) => Array.isArray(V[U]) && V[U].length > 0 && V[U].some(
+                      (Y) => typeof Y == "object" && Y !== null
+                    )
+                  ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      className: "expand-button",
+                      onClick: () => At(W),
+                      children: Array.from(it).some(
+                        (U) => U.startsWith(`${W}`)
+                      ) ? "▼" : "▶"
+                    }
+                  ) }),
+                  i && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "checkbox-column", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    CECheckBox,
+                    {
+                      label: "",
+                      checked: H.has(W),
+                      onChange: (U) => {
+                        const Y = new Set(H);
+                        U ? Y.add(W) : Y.delete(W), D(Y);
+                      }
+                    }
+                  ) }),
+                  ht.map(
+                    (U) => ot.has(U.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "td",
+                      {
+                        style: {
+                          width: g[U.id] ? `${g[U.id]}px` : "150px",
+                          minWidth: "80px",
+                          maxWidth: "600px"
+                        },
+                        className: `table-cell ${m != null && m.includes(U.id) ? "ce-clickable-cell" : ""} ${Array.isArray(V[U.id]) && V[U.id].length > 0 && typeof V[U.id][0] == "object" ? "highlight-cell" : ""}`,
+                        onClick: () => {
+                          m != null && m.includes(U.id) ? Ot(V, U.id) : Array.isArray(V[U.id]) && V[U.id].length > 0 && At(W, U.id);
+                        },
+                        children: Array.isArray(V[U.id]) ? `${V[U.id].length}` : typeof V[U.id] == "object" ? Object.entries(V[U.id]).map(([Y, Z]) => `${Y}: ${Z}`).join(", ") : typeof V[U.id] == "string" && V[U.id].split(" ").length > 5 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          CETruncatedTextWithTooltip,
+                          {
+                            text: V[U.id]
                           }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                        ) : V[U.id]
+                      },
+                      U.id
+                    )
+                  ),
+                  (a || c || f || o || l || n) && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "table-cell", style: { textAlign: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "center",
+                        gap: "8px",
+                        flexWrap: "wrap"
+                      },
+                      children: [
+                        a && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: Edit,
+                            alt: "Edit",
+                            title: "Edit",
+                            width: 20,
+                            height: 20,
+                            style: { cursor: "pointer" },
+                            onClick: b
+                          }
+                        ),
+                        c && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: Reassign,
+                            alt: "Reassign",
+                            width: 20,
+                            height: 20,
+                            style: { cursor: "pointer" },
+                            onClick: x
+                          }
+                        ),
+                        f && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: Cancel,
+                            alt: "Cancel",
+                            width: 20,
+                            height: 20,
+                            style: { cursor: "pointer" },
+                            onClick: S
+                          }
+                        ),
+                        o && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: Approve,
+                            alt: "Approve",
+                            width: 20,
+                            height: 20,
+                            style: { cursor: "pointer" },
+                            onClick: d
+                          }
+                        ),
+                        l && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: Delete,
+                            alt: "Delete",
+                            width: 20,
+                            height: 20,
+                            style: { cursor: "pointer" },
+                            onClick: E
+                          }
+                        ),
+                        n && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "img",
+                          {
+                            src: Add,
+                            alt: "Add",
+                            width: 20,
+                            height: 20,
+                            style: { cursor: "pointer" },
+                            onClick: u
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            ),
+            Array.from(it).map((U) => {
+              const [Y, Z] = U.split("-");
+              if (Number(Y) === W) {
+                const et = Z ? { [Z]: V[Z] } : Object.keys(V).filter(
+                  (rt) => Array.isArray(V[rt]) || typeof V[rt] == "object"
+                ).reduce(
+                  (rt, bt) => ({ ...rt, [bt]: V[bt] }),
+                  {}
+                );
+                return /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { className: "expanded-row", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "td",
+                  {
+                    colSpan: ot.size + 2,
+                    className: "expanded-cell",
+                    children: Object.entries(et).map(
+                      ([rt, bt], kt) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
                         "div",
                         {
-                          className: "dropdown-container",
-                          ref: xt,
+                          className: `expanded-section ${kt % 2 === 0 ? "expanded-section-even" : "expanded-section-odd"}`,
+                          style: {
+                            backgroundColor: kt % 2 === 0 ? "#e8f5e9" : "#e3f2fd",
+                            padding: "10px",
+                            marginBottom: "10px",
+                            borderRadius: "5px"
+                          },
                           children: [
                             /* @__PURE__ */ jsxRuntimeExports.jsx(
-                              "span",
+                              "h4",
                               {
-                                className: "dropdown-trigger",
-                                onClick: () => Mt(V.id),
-                                children: "⋮"
+                                style: {
+                                  margin: "0 0 10px 0",
+                                  color: "#333"
+                                },
+                                children: rt.charAt(0).toUpperCase() + rt.slice(1)
                               }
                             ),
-                            A === V.id && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                              "div",
-                              {
-                                className: "dropdown-menu",
-                                ref: (W) => Vt(W),
-                                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                  "button",
-                                  {
-                                    className: "dropdown-item",
-                                    onClick: () => {
-                                      j(V.id), R(!0), M(null);
-                                    },
-                                    children: "Filter"
-                                  }
-                                )
-                              }
-                            )
+                            Pt(bt)
                           ]
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "div",
-                      {
-                        className: "column-resizer",
-                        onMouseDown: (W) => Bt(W, V.id)
-                      }
-                    )
-                  ] })
-                },
-                V.id
-              )
-            ),
-            (a || c || f || o || l || n) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "th",
-              {
-                className: "table-header-cell",
-                style: {
-                  width: "150px",
-                  // same as other column widths
-                  textAlign: "center"
-                },
-                children: "Action"
-              }
-            )
-          ] }),
-          B && /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-            Rt && /* @__PURE__ */ jsxRuntimeExports.jsx("td", {}),
-            " ",
-            i && /* @__PURE__ */ jsxRuntimeExports.jsx("td", {}),
-            " ",
-            ht.map(
-              (V) => ot.has(V.id) && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "input",
-                {
-                  type: "text",
-                  placeholder: `Filter ${V.label}`,
-                  value: _ === V.id ? G : "",
-                  onChange: (W) => {
-                    const U = W.target.value;
-                    J(U), j(V.id), _t(V.id, U);
-                  }
-                }
-              ) }, `filter-${V.id}`)
-            ),
-            (a || c || f || o || l || n) && /* @__PURE__ */ jsxRuntimeExports.jsx("td", {})
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: Ct.map((V, W) => /* @__PURE__ */ jsxRuntimeExports.jsxs(React2__default.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "tr",
-            {
-              className: W % 2 === 0 ? "table-row-even" : "table-row-odd",
-              children: [
-                Rt && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "expand-column", children: Array.from(ot).some(
-                  (U) => Array.isArray(V[U]) && V[U].length > 0 && V[U].some(
-                    (Y) => typeof Y == "object" && Y !== null
-                  )
-                ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "button",
-                  {
-                    className: "expand-button",
-                    onClick: () => At(W),
-                    children: Array.from(it).some(
-                      (U) => U.startsWith(`${W}`)
-                    ) ? "▼" : "▶"
-                  }
-                ) }),
-                i && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "checkbox-column", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  CECheckBox,
-                  {
-                    label: "",
-                    checked: H.has(W),
-                    onChange: (U) => {
-                      const Y = new Set(H);
-                      U ? Y.add(W) : Y.delete(W), D(Y);
-                    }
-                  }
-                ) }),
-                ht.map(
-                  (U) => ot.has(U.id) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "td",
-                    {
-                      className: `table-cell ${m != null && m.includes(U.id) ? "ce-clickable-cell" : ""} ${Array.isArray(V[U.id]) && V[U.id].length > 0 && typeof V[U.id][0] == "object" ? "highlight-cell" : ""}`,
-                      onClick: () => {
-                        m != null && m.includes(U.id) ? Nt(V, U.id) : Array.isArray(V[U.id]) && V[U.id].length > 0 && At(W, U.id);
-                      },
-                      children: Array.isArray(V[U.id]) ? `${V[U.id].length}` : typeof V[U.id] == "object" ? Object.entries(V[U.id]).map(([Y, Z]) => `${Y}: ${Z}`).join(", ") : typeof V[U.id] == "string" && V[U.id].split(" ").length > 5 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        CETruncatedTextWithTooltip,
-                        {
-                          text: V[U.id],
-                          wordCount: 5
-                        }
-                      ) : V[U.id]
-                    },
-                    U.id
-                  )
-                ),
-                (a || c || f || o || l || n) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "td",
-                  {
-                    className: "table-cell",
-                    style: { textAlign: "center" },
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          justifyContent: "center",
-                          gap: "8px",
-                          flexWrap: "wrap"
                         },
-                        children: [
-                          a && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "img",
-                            {
-                              src: Edit,
-                              alt: "Edit",
-                              title: "Edit",
-                              width: 20,
-                              height: 20,
-                              style: { cursor: "pointer" },
-                              onClick: b
-                            }
-                          ),
-                          c && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "img",
-                            {
-                              src: Reassign,
-                              alt: "Reassign",
-                              width: 20,
-                              height: 20,
-                              style: { cursor: "pointer" },
-                              onClick: x
-                            }
-                          ),
-                          f && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "img",
-                            {
-                              src: Cancel,
-                              alt: "Cancel",
-                              width: 20,
-                              height: 20,
-                              style: { cursor: "pointer" },
-                              onClick: S
-                            }
-                          ),
-                          o && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "img",
-                            {
-                              src: Approve,
-                              alt: "Approve",
-                              width: 20,
-                              height: 20,
-                              style: { cursor: "pointer" },
-                              onClick: d
-                            }
-                          ),
-                          l && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "img",
-                            {
-                              src: Delete,
-                              alt: "Delete",
-                              width: 20,
-                              height: 20,
-                              style: { cursor: "pointer" },
-                              onClick: E
-                            }
-                          ),
-                          n && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "img",
-                            {
-                              src: Add,
-                              alt: "Add",
-                              width: 20,
-                              height: 20,
-                              style: { cursor: "pointer" },
-                              onClick: u
-                            }
-                          )
-                        ]
-                      }
+                        rt
+                      )
                     )
                   }
-                )
-              ]
-            }
-          ),
-          Array.from(it).map((U) => {
-            const [Y, Z] = U.split("-");
-            if (Number(Y) === W) {
-              const et = Z ? { [Z]: V[Z] } : Object.keys(V).filter(
-                (rt) => Array.isArray(V[rt]) || typeof V[rt] == "object"
-              ).reduce(
-                (rt, bt) => ({ ...rt, [bt]: V[bt] }),
-                {}
-              );
-              return /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { className: "expanded-row", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "td",
-                {
-                  colSpan: ot.size + 2,
-                  className: "expanded-cell",
-                  children: Object.entries(et).map(
-                    ([rt, bt], kt) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "div",
-                      {
-                        className: `expanded-section ${kt % 2 === 0 ? "expanded-section-even" : "expanded-section-odd"}`,
-                        style: {
-                          backgroundColor: kt % 2 === 0 ? "#e8f5e9" : "#e3f2fd",
-                          padding: "10px",
-                          marginBottom: "10px",
-                          borderRadius: "5px"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "h4",
-                            {
-                              style: {
-                                margin: "0 0 10px 0",
-                                color: "#333"
-                              },
-                              children: rt.charAt(0).toUpperCase() + rt.slice(1)
-                            }
-                          ),
-                          Pt(bt)
-                        ]
-                      },
-                      rt
-                    )
-                  )
-                }
-              ) }, `expanded-${U}`);
-            }
-            return null;
-          })
-        ] }, W)) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pagination-container", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rows-per-page-container", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "rows-per-page-select", children: "Rows per page:" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "select",
-            {
-              id: "rows-per-page-select",
-              value: Q,
-              onChange: (V) => {
-                at(Number(V.target.value)), X(0);
-              },
-              "aria-label": "Rows per page",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 5, children: "5" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 10, children: "10" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 20, children: "20" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 50, children: "50" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 100, children: "100" })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          CEPagination,
+                ) }, `expanded-${U}`);
+              }
+              return null;
+            })
+          ] }, W)) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pagination-container", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rows-per-page-container", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: "rows-per-page-select", children: "Rows per page:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "select",
           {
-            currentPage: K,
-            totalPages: Math.ceil(F.length / Q),
-            onPageChange: (V) => X(V)
+            id: "rows-per-page-select",
+            value: Q,
+            onChange: (V) => {
+              at(Number(V.target.value)), X(0);
+            },
+            "aria-label": "Rows per page",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 5, children: "5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 10, children: "10" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 20, children: "20" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 50, children: "50" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: 100, children: "100" })
+            ]
           }
         )
       ] }),
-      C && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "filter-modal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CEPagination,
         {
-          className: "filter-modal-content",
-          ref: ft,
-          onKeyDown: Dt,
-          tabIndex: 0,
-          children: [
+          currentPage: K,
+          totalPages: Math.ceil(F.length / Q),
+          onPageChange: (V) => X(V)
+        }
+      )
+    ] }),
+    C && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "filter-modal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "filter-modal-content",
+        ref: ft,
+        onKeyDown: Vt,
+        tabIndex: 0,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CEButton,
+            {
+              className: "close-button-close",
+              onClick: () => R(!1),
+              children: "×"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Columns:" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CEButton,
+              "select",
               {
-                className: "close-button-close",
-                onClick: () => R(!1),
-                children: "×"
+                value: _,
+                onChange: (V) => j(V.target.value),
+                children: ht.map((V) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: V.id, children: V.label }, V.id))
               }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Columns:" }),
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Operator:" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "select",
+              {
+                value: L,
+                onChange: (V) => N(V.target.value),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "contains", children: "contains" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "equals", children: "equals" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "startsWith", children: "starts with" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "endsWith", children: "ends with" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "does not contain", children: "does not contain" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "does not equal", children: "does not equal" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "is empty", children: "is empty" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "is not empty", children: "is not empty" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "is any of", children: "is any of" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Value:" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                type: "text",
+                value: G,
+                onChange: (V) => J(V.target.value),
+                placeholder: "Enter filter value",
+                title: "Filter value"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CEButton, { onClick: Dt, children: "Apply Filter" })
+        ]
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `datatable-wrapper${Et ? " ce-grid-fullscreen" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid-header", children: [
+          t && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "header-title", children: t }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "search-container", children: [
+            s && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "search-wrapper", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "select",
+                "img",
                 {
-                  value: _,
-                  onChange: (V) => j(V.target.value),
-                  children: ht.map((V) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: V.id, children: V.label }, V.id))
+                  src: SearchRounded,
+                  alt: "Show Filter",
+                  title: "Show/Hide Filter",
+                  width: 20,
+                  height: 20,
+                  style: { cursor: "pointer" },
+                  onClick: () => z((V) => !V)
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Operator:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "select",
-                {
-                  value: L,
-                  onChange: (V) => N(V.target.value),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "contains", children: "contains" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "equals", children: "equals" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "startsWith", children: "starts with" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "endsWith", children: "ends with" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "does not contain", children: "does not contain" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "does not equal", children: "does not equal" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "is empty", children: "is empty" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "is not empty", children: "is not empty" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "is any of", children: "is any of" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: "Value:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "input",
+              ),
+              ct && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
                 {
-                  type: "text",
-                  value: G,
-                  onChange: (V) => J(V.target.value),
-                  placeholder: "Enter filter value",
-                  title: "Filter value"
+                  className: "search-cancel-button",
+                  onClick: () => {
+                    tt(""), I(O);
+                  },
+                  children: "×"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CEButton, { onClick: Lt, children: "Apply Filter" })
-          ]
-        }
-      ) })
-    ] })
-  ] });
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "img",
+              {
+                src: ShowOrHideColumn,
+                alt: "Columns",
+                title: "Show/Hide Columns",
+                width: 20,
+                height: 20,
+                style: { cursor: "pointer" },
+                onClick: () => pt(!0)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: "fullscreen-button",
+                onClick: Et ? Ft : jt,
+                title: Et ? "Exit Full Screen" : "Full Screen",
+                children: Et ? "⤫" : "⤢"
+              }
+            )
+          ] })
+        ] }),
+        q && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-modal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "column-modal-content", ref: dt, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-modal-header", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              className: "modal-close-button",
+              onClick: () => pt(!1),
+              children: "×"
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "column-modal-title", children: "Column Visibility" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-modal-actions", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "select-all-action", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CECheckBox,
+            {
+              label: "Select All",
+              checked: ot.size === ht.length,
+              onChange: (V) => {
+                ut(V ? new Set(ht.map((W) => W.id)) : /* @__PURE__ */ new Set());
+              }
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-list", children: ht.map((V) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "column-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CECheckBox,
+            {
+              label: V.label ?? V.id,
+              checked: ot.has(V.id),
+              onChange: () => Mt(V.id)
+            }
+          ) }, V.id)) })
+        ] }) }),
+        $t()
+      ]
+    }
+  );
 }, DateInputPart = ({
   value: t,
   onChange: e,