@shifl-inc/ui 0.2.0 → 0.4.0

package/dist/shifl-ui.js

@@ -1,313 +1,508 @@
-import { ref as k, computed as v, onMounted as X, onUnmounted as q, defineComponent as _e, createElementBlock as a, openBlock as s, withModifiers as B, createElementVNode as u, createCommentVNode as P, createTextVNode as O, toDisplayString as b, Fragment as M, renderList as z, normalizeClass as V, watch as Y, nextTick as Pe, createBlock as R, Teleport as me, normalizeStyle as G, createVNode as he, unref as S, resolveDynamicComponent as pe, createStaticVNode as gt, provide as ht, inject as pt } from "vue";
-function vt(r) {
-  const c = (r.columns || []).map((l) => ({
-    ...l,
-    frozen: l.frozen ?? l.fixed ?? !1,
-    visible: l.visible ?? !0,
-    protected: l.protected ?? !1
-  }));
+import { ref as k, computed as b, onMounted as le, onUnmounted as ue, watch as O, nextTick as Le, defineComponent as xe, createElementBlock as u, openBlock as a, withModifiers as J, createElementVNode as h, createCommentVNode as D, createTextVNode as ee, toDisplayString as L, Fragment as x, renderList as H, normalizeClass as I, createBlock as G, Teleport as Ae, normalizeStyle as j, createVNode as Pe, unref as E, resolveDynamicComponent as ae, createStaticVNode as Ht, provide as Vt, inject as Bt } from "vue";
+function It(o) {
+  const s = (o.columns || []).map((_) => ({
+    ..._,
+    freeze: _.freeze ?? !1,
+    visible: _.visible ?? !0,
+    protected: _.protected ?? !1
+  })), g = o.apiConfig ? "server" : o.searchMode || "client";
   return {
-    ...r,
-    columns: c,
-    rows: r.rows ?? [],
-    search: r.search ?? [],
-    filters: r.filters ?? [],
-    paginationMeta: r.paginationMeta ? {
-      show: r.paginationMeta.show ?? !0,
-      currentPage: r.paginationMeta.currentPage ?? 1,
-      perPage: r.paginationMeta.perPage ?? 20,
-      total: r.paginationMeta.total ?? 0,
-      from: r.paginationMeta.from,
-      to: r.paginationMeta.to,
-      ...r.paginationMeta
+    ...o,
+    columns: s,
+    rows: o.rows ?? [],
+    search: o.search ?? [],
+    searchMode: g,
+    filters: o.filters ?? [],
+    paginationMeta: o.paginationMeta ? {
+      show: o.paginationMeta.show ?? !0,
+      currentPage: o.paginationMeta.currentPage ?? 1,
+      perPage: o.paginationMeta.perPage ?? 20,
+      total: o.paginationMeta.total ?? 0,
+      from: o.paginationMeta.from,
+      to: o.paginationMeta.to,
+      ...o.paginationMeta
     } : void 0
   };
 }
-function mt(r) {
-  const c = [...r], l = k([...r]);
-  function m(h) {
-    l.value = l.value.map(
-      (f) => f.key === h ? { ...f, visible: !f.visible } : f
+function Gt(o) {
+  const s = [...o], g = k([...o]);
+  function _(d) {
+    g.value = g.value.map(
+      (f) => f.key === d ? { ...f, visible: !f.visible } : f
     );
   }
-  function d(h) {
-    l.value = l.value.map((f) => ({ ...f, visible: h }));
+  function c(d) {
+    g.value = g.value.map((f) => ({ ...f, visible: d }));
   }
-  function _(h) {
-    const f = l.value.map(
-      (C) => C.key === h ? { ...C, frozen: !C.frozen } : C
-    ), g = f.filter((C) => C.frozen), L = f.filter((C) => !C.frozen);
-    l.value = [...g, ...L];
+  function v(d) {
+    const f = g.value.map(
+      (C) => C.key === d ? { ...C, freeze: !C.freeze } : C
+    ), p = f.filter((C) => C.freeze), $ = f.filter((C) => !C.freeze);
+    g.value = [...p, ...$];
   }
-  function T(h, f) {
-    if (h === f || f < 0 || f >= l.value.length) return;
-    const g = l.value.findIndex((J) => !J.frozen), L = g === -1 ? l.value.length : g;
-    if (h < L || f < L) return;
-    const C = [...l.value], [H] = C.splice(h, 1);
-    C.splice(f, 0, H), l.value = C;
+  function M(d, f) {
+    if (d === f || f < 0 || f >= g.value.length) return;
+    const p = g.value.findIndex((m) => !m.freeze), $ = p === -1 ? g.value.length : p;
+    if (d < $ || f < $) return;
+    const C = [...g.value], [l] = C.splice(d, 1);
+    C.splice(f, 0, l), g.value = C;
   }
-  function y() {
-    l.value = [...c];
+  function T() {
+    g.value = [...s];
   }
-  const x = v(() => l.value.filter((h) => h.visible));
+  const w = b(() => g.value.filter((d) => d.visible));
   return {
-    columns: l,
-    visibleColumns: x,
-    toggleColumnVisibility: m,
-    setAllVisible: d,
-    toggleFrozen: _,
-    moveColumn: T,
-    resetColumns: y
+    columns: g,
+    visibleColumns: w,
+    toggleColumnVisibility: _,
+    setAllVisible: c,
+    toggleFreeze: v,
+    moveColumn: M,
+    resetColumns: T
   };
 }
-function _t(r) {
-  const c = k(r);
-  function l(d) {
-    var _;
-    c.value = ((_ = c.value) == null ? void 0 : _.key) === d && c.value.order === "asc" ? { key: d, order: "desc" } : { key: d, order: "asc" };
+function Zt(o) {
+  const s = k(o);
+  function g(c) {
+    var v;
+    s.value = ((v = s.value) == null ? void 0 : v.key) === c && s.value.order === "asc" ? { key: c, order: "desc" } : { key: c, order: "asc" };
   }
-  function m(d) {
-    if (!c.value) return d;
-    const { key: _, order: T } = c.value;
-    return [...d].sort((y, x) => {
-      const h = y[_], f = x[_];
-      if (h === f) return 0;
-      if (h == null) return 1;
+  function _(c) {
+    if (!s.value) return c;
+    const { key: v, order: M } = s.value;
+    return [...c].sort((T, w) => {
+      const d = T[v], f = w[v];
+      if (d === f) return 0;
+      if (d == null) return 1;
       if (f == null) return -1;
-      const g = String(h).localeCompare(String(f), void 0, {
+      const p = String(d).localeCompare(String(f), void 0, {
         numeric: !0
       });
-      return T === "asc" ? g : -g;
+      return M === "asc" ? p : -p;
     });
   }
   return {
-    sort: c,
-    setSort: l,
-    applySort: m
+    sort: s,
+    setSort: g,
+    applySort: _
   };
 }
-function Ct() {
-  function r(c, l, m) {
-    const d = (m || "").trim().toLowerCase();
-    return d ? c.filter((_) => (l && l.length ? l.map((y) => _[y]) : Object.values(_)).some(
-      (y) => String(y ?? "").toLowerCase().includes(d)
-    )) : c;
+function Ot() {
+  function o(s, g, _) {
+    const c = (_ || "").trim().toLowerCase();
+    return c ? s.filter((v) => (g && g.length ? g.map((T) => v[T]) : Object.values(v)).some(
+      (T) => String(T ?? "").toLowerCase().includes(c)
+    )) : s;
   }
   return {
-    applyGlobalFilter: r
+    applyGlobalFilter: o
   };
 }
-function yt() {
-  const r = k({
+function Ft() {
+  const o = k({
     rowIndex: null,
     position: null
   });
-  function c(_, T) {
-    const y = T.getBoundingClientRect();
-    r.value = {
-      rowIndex: _,
+  function s(v, M, T = 200) {
+    const w = M.getBoundingClientRect();
+    let d = w.left;
+    d + T > window.innerWidth - 8 && (d = window.innerWidth - T + 8), o.value = {
+      rowIndex: v,
       position: {
-        top: y.bottom + 4,
-        // 4px gap below icon
-        left: y.left
+        top: w.bottom,
+        // 4px below trigger
+        left: d
       }
     };
   }
-  function l() {
-    r.value = {
+  function g() {
+    o.value = {
       rowIndex: null,
       position: null
     };
   }
-  function m(_) {
-    return r.value.rowIndex === _;
+  function _(v) {
+    return o.value.rowIndex === v;
   }
-  function d(_) {
-    _.key === "Escape" && r.value.rowIndex !== null && l();
+  function c(v) {
+    v.key === "Escape" && o.value.rowIndex !== null && g();
   }
-  return X(() => {
-    document.addEventListener("keydown", d);
-  }), q(() => {
-    document.removeEventListener("keydown", d);
+  return le(() => {
+    document.addEventListener("keydown", c);
+  }), ue(() => {
+    document.removeEventListener("keydown", c);
   }), {
-    menuState: r,
-    openMenu: c,
-    closeMenu: l,
-    isMenuOpen: m
+    menuState: o,
+    openMenu: s,
+    closeMenu: g,
+    isMenuOpen: _
   };
 }
-const kt = { class: "shifl-column-manager__header" }, bt = { class: "shifl-column-manager__title-wrapper" }, wt = { class: "shifl-column-manager__title" }, Mt = { key: 0 }, Tt = { class: "shifl-column-manager__controls" }, $t = { class: "shifl-column-manager__controls-left" }, xt = { class: "shifl-column-manager__content" }, Lt = { class: "shifl-column-manager__list" }, St = ["draggable", "onDragstart", "onDragover", "onDrop"], Pt = ["aria-label", "disabled"], At = ["checked", "disabled", "onChange"], zt = { class: "shifl-column-manager__label-text" }, Ht = { class: "shifl-column-manager__footer" }, Rt = /* @__PURE__ */ _e({
+function jt(o, s) {
+  const g = k(!1), _ = k(null), c = k([]), v = k(void 0);
+  let M = null;
+  function T(l) {
+    const m = new URLSearchParams();
+    if (l.search && m.append("search", l.search), l.page !== void 0 && m.append("page", String(l.page)), l.perPage !== void 0 && m.append("per_page", String(l.perPage)), l.sort && (m.append("sort", l.sort.key), m.append("order", l.sort.order)), l.filters && l.filters.length > 0 && l.filters.forEach((S) => {
+      if (S.value !== void 0 && S.value !== null && S.value !== "") {
+        const N = `filters[${S.key}]`;
+        Array.isArray(S.value) ? S.value.forEach((P) => m.append(`${N}[]`, String(P))) : m.append(N, String(S.value));
+      }
+    }), s != null && s.additionalParams) {
+      const S = typeof s.additionalParams == "function" ? s.additionalParams(l) : s.additionalParams;
+      Object.entries(S).forEach(([N, P]) => {
+        P != null && P !== "" && (Array.isArray(P) ? P.forEach((R) => m.append(`${N}[]`, String(R))) : m.append(N, String(P)));
+      });
+    }
+    return m;
+  }
+  function w(l) {
+    var m, S, N;
+    return s != null && s.bodyBuilder ? s.bodyBuilder(l) : {
+      search: l.search,
+      page: l.page,
+      per_page: l.perPage,
+      sort: (m = l.sort) == null ? void 0 : m.key,
+      order: (S = l.sort) == null ? void 0 : S.order,
+      filters: (N = l.filters) == null ? void 0 : N.reduce(
+        (P, R) => (R.value !== void 0 && R.value !== null && R.value !== "" && (P[R.key] = R.value), P),
+        {}
+      ),
+      ...typeof (s == null ? void 0 : s.additionalParams) == "function" ? s.additionalParams(l) : (s == null ? void 0 : s.additionalParams) || {}
+    };
+  }
+  function d() {
+    const l = {
+      "Content-Type": "application/json",
+      ...(s == null ? void 0 : s.headers) || {}
+    };
+    if (s != null && s.getAuthToken) {
+      const m = s.getAuthToken();
+      m && (l.Authorization = `Bearer ${m}`);
+    }
+    return l;
+  }
+  function f(l) {
+    if (s != null && s.responseTransformer)
+      return s.responseTransformer(l);
+    const m = l;
+    return {
+      data: m.data || m.rows || [],
+      meta: m.meta
+    };
+  }
+  async function p(l) {
+    if (!o) {
+      _.value = new Error("API URL is required");
+      return;
+    }
+    g.value = !0, _.value = null;
+    try {
+      const m = (s == null ? void 0 : s.method) || "GET", S = d();
+      let N = o, P;
+      if (m === "GET") {
+        const V = s != null && s.paramsBuilder ? s.paramsBuilder(l) : T(l);
+        if (V instanceof URLSearchParams) {
+          const F = V.toString();
+          N = F ? `${o}?${F}` : o;
+        } else {
+          const F = new URLSearchParams();
+          Object.entries(V).forEach(([Y, Z]) => {
+            Z != null && Z !== "" && (Array.isArray(Z) ? Z.forEach((ne) => F.append(`${Y}[]`, String(ne))) : F.append(Y, String(Z)));
+          });
+          const U = F.toString();
+          N = U ? `${o}?${U}` : o;
+        }
+      } else
+        P = w(l);
+      const R = await fetch(N, {
+        method: m,
+        headers: S,
+        body: P ? JSON.stringify(P) : void 0
+      });
+      if (!R.ok)
+        throw new Error(`API request failed: ${R.status} ${R.statusText}`);
+      const ce = await R.json(), te = f(ce);
+      c.value = te.data, v.value = te.meta;
+    } catch (m) {
+      _.value = m instanceof Error ? m : new Error("Unknown error occurred"), c.value = [], v.value = void 0;
+    } finally {
+      g.value = !1;
+    }
+  }
+  function $(l, m = !1) {
+    M && (clearTimeout(M), M = null);
+    const S = (s == null ? void 0 : s.debounceMs) ?? 300;
+    m || !l.search ? p(l) : M = setTimeout(() => {
+      p(l);
+    }, S);
+  }
+  function C(l) {
+    $(l, !0);
+  }
+  return {
+    loading: b(() => g.value),
+    error: b(() => _.value),
+    data: b(() => c.value),
+    paginationMeta: b(() => v.value),
+    fetchData: p,
+    fetchDataDebounced: $,
+    refresh: C
+  };
+}
+function Wt(o, s) {
+  var T, w;
+  const g = (s == null ? void 0 : s.search) || k(void 0), _ = (s == null ? void 0 : s.filters) || k(o.filters), c = (s == null ? void 0 : s.sort) || k(o.sort), v = (s == null ? void 0 : s.pagination) || k({
+    page: ((T = o.paginationMeta) == null ? void 0 : T.currentPage) || 1,
+    perPage: ((w = o.paginationMeta) == null ? void 0 : w.perPage) || 20
+  }), M = (s == null ? void 0 : s.extraState) || k(void 0);
+  if (o.apiConfig && o.searchMode === "server") {
+    let d = function() {
+      var l, m;
+      return {
+        search: g.value,
+        filters: _.value,
+        sort: c.value,
+        page: (l = v.value) == null ? void 0 : l.page,
+        perPage: (m = v.value) == null ? void 0 : m.perPage,
+        extraState: M.value
+      };
+    }, f = function(l) {
+      var m, S, N, P;
+      return C ? l.search !== C.search || l.page !== C.page || l.perPage !== C.perPage || ((m = l.sort) == null ? void 0 : m.key) !== ((S = C.sort) == null ? void 0 : S.key) || ((N = l.sort) == null ? void 0 : N.order) !== ((P = C.sort) == null ? void 0 : P.order) || JSON.stringify(l.filters) !== JSON.stringify(C.filters) || JSON.stringify(l.extraState) !== JSON.stringify(C.extraState) : !0;
+    };
+    const p = jt(o.apiConfig.apiUrl, o.apiConfig);
+    let $ = !1, C = null;
+    return O(
+      [g, _, c, v, M],
+      () => {
+        if ($)
+          return;
+        const l = d();
+        if (!f(l))
+          return;
+        C = l;
+        const m = g.value !== void 0;
+        p.fetchDataDebounced(l, !m);
+      },
+      { immediate: !0, deep: !0 }
+    ), O(p.paginationMeta, (l) => {
+      if (l && v.value) {
+        const m = l.perPage || v.value.perPage;
+        m !== v.value.perPage && ($ = !0, v.value.perPage = m, Le(() => {
+          $ = !1;
+        }));
+      }
+    }), {
+      rows: p.data,
+      loading: p.loading,
+      error: p.error,
+      paginationMeta: p.paginationMeta,
+      refresh: () => {
+        var m, S;
+        const l = {
+          search: g.value,
+          filters: _.value,
+          sort: c.value,
+          page: (m = v.value) == null ? void 0 : m.page,
+          perPage: (S = v.value) == null ? void 0 : S.perPage,
+          extraState: M.value
+        };
+        p.refresh(l);
+      }
+    };
+  }
+  return {
+    rows: b(() => o.rows),
+    loading: b(() => !1),
+    error: b(() => null),
+    paginationMeta: b(() => o.paginationMeta),
+    refresh: () => {
+    }
+  };
+}
+const Kt = { class: "shifl-column-manager__header" }, Jt = { class: "shifl-column-manager__title-wrapper" }, qt = { class: "shifl-column-manager__title" }, Ut = { key: 0 }, Yt = { key: 1 }, Qt = { class: "shifl-column-manager__controls" }, Xt = { class: "shifl-column-manager__controls-left" }, en = { class: "shifl-column-manager__content" }, tn = { class: "shifl-column-manager__list" }, nn = ["draggable", "onDragstart", "onDragover", "onDrop"], rn = ["aria-label", "disabled"], sn = ["checked", "disabled", "onChange"], on = { class: "shifl-column-manager__label-text" }, an = { class: "shifl-column-manager__footer" }, ln = /* @__PURE__ */ xe({
   __name: "GridColumnManager",
   props: {
     titlePrefix: {},
     columns: {}
   },
-  emits: ["close", "toggle", "move", "toggleFrozen", "selectAll", "deselectAll", "restoreDefault"],
-  setup(r, { emit: c }) {
-    const l = r, m = v(() => l.columns), d = c, _ = k(null);
-    function T(h) {
-      var f, g;
-      (f = l.columns[h]) != null && f.frozen || (g = l.columns[h]) != null && g.protected || (_.value = h);
+  emits: ["close", "toggle", "move", "toggleFreeze", "selectAll", "deselectAll", "restoreDefault"],
+  setup(o, { emit: s }) {
+    const g = o, _ = b(() => g.columns), c = s, v = k(null);
+    function M(d) {
+      var f, p;
+      (f = g.columns[d]) != null && f.freeze || (p = g.columns[d]) != null && p.protected || (v.value = d);
     }
-    function y(h) {
+    function T(d) {
     }
-    function x(h) {
-      _.value === null || _.value === h || (d("move", _.value, h), _.value = null);
+    function w(d) {
+      v.value === null || v.value === d || (c("move", v.value, d), v.value = null);
     }
-    return (h, f) => (s(), a("div", {
+    return (d, f) => (a(), u("div", {
       class: "shifl-column-manager__backdrop",
-      onClick: f[7] || (f[7] = B((g) => h.$emit("close"), ["self"]))
+      onClick: f[7] || (f[7] = J((p) => d.$emit("close"), ["self"]))
     }, [
-      u("div", {
+      h("div", {
         class: "shifl-column-manager__dialog",
         role: "dialog",
         "aria-modal": "true",
-        onClick: f[6] || (f[6] = B(() => {
+        onClick: f[6] || (f[6] = J(() => {
         }, ["stop"]))
       }, [
-        u("header", kt, [
-          u("div", bt, [
-            u("h2", wt, [
-              r.titlePrefix ? (s(), a("span", Mt, b(r.titlePrefix) + " > ", 1)) : P("", !0),
-              f[8] || (f[8] = O("Edit Columns ", -1))
+        h("header", Kt, [
+          h("div", Jt, [
+            h("h2", qt, [
+              o.titlePrefix ? (a(), u("span", Ut, L(o.titlePrefix), 1)) : D("", !0),
+              o.titlePrefix ? (a(), u("span", Yt, ">")) : D("", !0),
+              f[8] || (f[8] = ee("Edit Columns ", -1))
             ])
           ]),
-          u("button", {
+          h("button", {
             type: "button",
             class: "shifl-column-manager__close",
-            onClick: f[0] || (f[0] = (g) => h.$emit("close"))
+            onClick: f[0] || (f[0] = (p) => d.$emit("close"))
           }, [...f[9] || (f[9] = [
-            u("span", null, "✕", -1)
+            h("span", null, "✕", -1)
           ])])
         ]),
-        u("div", Tt, [
-          u("div", $t, [
-            u("button", {
+        h("div", Qt, [
+          h("div", Xt, [
+            h("button", {
               type: "button",
               class: "shifl-column-manager__link-button",
-              onClick: f[1] || (f[1] = (g) => h.$emit("selectAll"))
+              onClick: f[1] || (f[1] = (p) => d.$emit("selectAll"))
             }, " Select All "),
-            u("button", {
+            h("button", {
               type: "button",
               class: "shifl-column-manager__link-button",
-              onClick: f[2] || (f[2] = (g) => h.$emit("deselectAll"))
+              onClick: f[2] || (f[2] = (p) => d.$emit("deselectAll"))
             }, " Deselect All ")
           ]),
-          u("button", {
+          h("button", {
             type: "button",
             class: "shifl-column-manager__link-button shifl-column-manager__link-button--primary",
-            onClick: f[3] || (f[3] = (g) => h.$emit("restoreDefault"))
+            onClick: f[3] || (f[3] = (p) => d.$emit("restoreDefault"))
           }, " Restore Default ")
         ]),
-        u("div", xt, [
-          u("ul", Lt, [
-            (s(!0), a(M, null, z(m.value, (g, L) => (s(), a("li", {
-              key: g.key,
-              class: V(["shifl-column-manager__item", {
-                "shifl-column-manager__item--disabled": g.frozen || g.protected
+        h("div", en, [
+          h("ul", tn, [
+            (a(!0), u(x, null, H(_.value, (p, $) => (a(), u("li", {
+              key: p.key,
+              class: I(["shifl-column-manager__item", {
+                "shifl-column-manager__item--disabled": p.freeze || p.protected
               }]),
-              draggable: !g.frozen && !g.protected,
-              onDragstart: (C) => T(L),
-              onDragover: B((C) => void 0, ["prevent"]),
-              onDrop: B((C) => x(L), ["prevent"])
+              draggable: !p.freeze && !p.protected,
+              onDragstart: (C) => M($),
+              onDragover: J((C) => void 0, ["prevent"]),
+              onDrop: J((C) => w($), ["prevent"])
             }, [
-              u("button", {
+              h("button", {
                 type: "button",
-                class: V(["shifl-column-manager__drag-handle", {
-                  "shifl-column-manager__drag-handle--disabled": g.frozen || g.protected
+                class: I(["shifl-column-manager__drag-handle", {
+                  "shifl-column-manager__drag-handle--disabled": p.freeze || p.protected
                 }]),
-                "aria-label": `Move ${g.label}`,
-                disabled: g.frozen || g.protected
+                "aria-label": `Move ${p.label}`,
+                disabled: p.freeze || p.protected
               }, [...f[10] || (f[10] = [
-                u("span", null, "⋮⋮", -1)
-              ])], 10, Pt),
-              u("label", {
-                class: V(["shifl-column-manager__checkbox-label", {
-                  "shifl-column-manager__checkbox-label--disabled": g.frozen || g.protected
+                h("span", null, "⋮⋮", -1)
+              ])], 10, rn),
+              h("label", {
+                class: I(["shifl-column-manager__checkbox-label", {
+                  "shifl-column-manager__checkbox-label--disabled": p.freeze || p.protected
                 }])
               }, [
-                u("input", {
+                h("input", {
                   type: "checkbox",
                   class: "shifl-column-manager__checkbox",
-                  checked: g.visible,
-                  disabled: g.frozen || g.protected,
-                  onChange: (C) => h.$emit("toggle", g.key)
-                }, null, 40, At),
-                u("span", zt, b(g.label), 1)
+                  checked: p.visible,
+                  disabled: p.freeze || p.protected,
+                  onChange: (C) => d.$emit("toggle", p.key)
+                }, null, 40, sn),
+                f[11] || (f[11] = h("span", { class: "shifl-column-manager__checkbox-custom" }, null, -1)),
+                h("span", on, L(p.label), 1)
               ], 2)
-            ], 42, St))), 128))
+            ], 42, nn))), 128))
           ])
         ]),
-        u("footer", Ht, [
-          u("button", {
-            type: "button",
-            class: "shifl-column-manager__button shifl-column-manager__button--secondary",
-            onClick: f[4] || (f[4] = (g) => h.$emit("close"))
-          }, " Cancel "),
-          u("button", {
+        h("footer", an, [
+          h("button", {
             type: "button",
             class: "shifl-column-manager__button shifl-column-manager__button--primary",
-            onClick: f[5] || (f[5] = (g) => h.$emit("close"))
-          }, " Update ")
+            onClick: f[4] || (f[4] = (p) => d.$emit("close"))
+          }, " Update "),
+          h("button", {
+            type: "button",
+            class: "shifl-column-manager__button shifl-column-manager__button--secondary",
+            onClick: f[5] || (f[5] = (p) => d.$emit("close"))
+          }, " Cancel ")
         ])
       ])
     ]));
   }
-}), D = (r, c) => {
-  const l = r.__vccOpts || r;
-  for (const [m, d] of c)
-    l[m] = d;
-  return l;
-}, Vt = /* @__PURE__ */ D(Rt, [["__scopeId", "data-v-70b33c44"]]), Et = { class: "shifl-grid__tooltip-content" }, Zt = /* @__PURE__ */ _e({
+}), q = (o, s) => {
+  const g = o.__vccOpts || o;
+  for (const [_, c] of s)
+    g[_] = c;
+  return g;
+}, un = /* @__PURE__ */ q(ln, [["__scopeId", "data-v-40ca0ed0"]]), cn = { class: "shifl-grid__tooltip-content" }, fn = /* @__PURE__ */ xe({
   __name: "GridTooltip",
   props: {
     content: {},
     visible: { type: Boolean },
     triggerElement: {}
   },
-  setup(r) {
-    const c = r, l = k(null), m = k({}), d = v(() => c.content.includes(`
-`)), _ = v(() => d.value ? c.content.split(`
-`).filter((y) => y.trim().length > 0) : []);
-    function T() {
-      if (!c.triggerElement || !l.value) return;
-      const y = c.triggerElement.getBoundingClientRect(), x = l.value.getBoundingClientRect(), h = window.innerWidth, f = window.innerHeight, g = window.scrollX || window.pageXOffset, L = window.scrollY || window.pageYOffset;
-      let C = y.bottom + L + 8, H = y.left + g;
-      H + x.width > h + g && (H = h + g - x.width - 16), H < g + 16 && (H = g + 16), C + x.height > f + L && (C = y.top + L - x.height - 8), m.value = {
+  setup(o) {
+    const s = o, g = k(null), _ = k({}), c = b(() => s.content.includes(`
+`)), v = b(() => c.value ? s.content.split(`
+`).filter((d) => d.trim().length > 0) : []), M = k("top"), T = k({});
+    function w() {
+      if (!s.triggerElement || !g.value) return;
+      const d = s.triggerElement.getBoundingClientRect(), f = g.value.getBoundingClientRect(), p = window.innerWidth, $ = window.innerHeight;
+      let C = d.bottom + 8, l = d.left + window.scrollX;
+      l + f.width > p - 16 && (l = p - f.width - 16), l < 16 && (l = 16), C + f.height > $ - 16 ? (C = d.top - f.height - 8, M.value = "bottom") : M.value = "top", _.value = {
         position: "fixed",
         top: `${C}px`,
-        left: `${H}px`,
+        left: `${l}px`,
         zIndex: "10000"
       };
+      const m = d.left + d.width / 2 - l;
+      T.value = {
+        left: `${m}px`
+      };
     }
-    return Y(
-      () => c.visible,
-      async (y) => {
-        y && (await Pe(), T());
+    return O(
+      () => s.visible,
+      async (d) => {
+        d && (await Le(), w());
       }
-    ), X(() => {
-      c.visible && Pe(() => T());
-    }), q(() => {
-    }), (y, x) => (s(), R(me, { to: "body" }, [
-      r.visible ? (s(), a("div", {
+    ), le(() => {
+      s.visible && Le(() => w());
+    }), ue(() => {
+    }), (d, f) => (a(), G(Ae, { to: "body" }, [
+      o.visible ? (a(), u("div", {
         key: 0,
         ref_key: "tooltipRef",
-        ref: l,
+        ref: g,
         class: "shifl-grid__tooltip",
-        style: G(m.value)
+        style: j(_.value)
       }, [
-        u("div", Et, [
-          d.value ? (s(!0), a(M, { key: 0 }, z(_.value, (h, f) => (s(), a("div", {
-            key: f,
+        h("div", {
+          class: I(["shifl-grid__tooltip-arrow", M.value]),
+          style: j(T.value)
+        }, null, 6),
+        h("div", cn, [
+          c.value ? (a(!0), u(x, { key: 0 }, H(v.value, (p, $) => (a(), u("div", {
+            key: $,
             class: "shifl-grid__tooltip-line"
-          }, b(h), 1))), 128)) : (s(), a(M, { key: 1 }, [
-            O(b(r.content), 1)
+          }, L(p), 1))), 128)) : (a(), u(x, { key: 1 }, [
+            ee(L(o.content), 1)
           ], 64))
         ])
-      ], 4)) : P("", !0)
+      ], 4)) : D("", !0)
     ]));
   }
-}), Dt = /* @__PURE__ */ D(Zt, [["__scopeId", "data-v-601cf0b0"]]), It = {}, Gt = {
+}), dn = /* @__PURE__ */ q(fn, [["__scopeId", "data-v-f9f586fc"]]), gn = {}, hn = {
   width: "14",
   height: "15",
   viewBox: "0 0 14 15",
@@ -315,24 +510,24 @@ const kt = { class: "shifl-column-manager__header" }, bt = { class: "shifl-colum
   xmlns: "http://www.w3.org/2000/svg",
   class: "shifl-smart-tracking-icon"
 };
-function Bt(r, c) {
-  return s(), a("svg", Gt, [...c[0] || (c[0] = [
-    u("path", {
+function pn(o, s) {
+  return a(), u("svg", hn, [...s[0] || (s[0] = [
+    h("path", {
       d: "M1.03223 9.27441C1.22778 9.27445 1.40954 9.32951 1.57812 9.43066L3.86523 10.8594C4.1957 11.0618 4.3916 11.4202 4.3916 11.8047C4.39151 12.189 4.19562 12.5467 3.86523 12.749L1.57812 14.1797C1.41642 14.2806 1.22754 14.334 1.03223 14.334V14.3408C0.465713 14.3408 0.000165713 13.8751 0 13.3086V10.3066C0.000236867 9.74022 0.465756 9.27443 1.03223 9.27441ZM1.01172 13.3018L3.3252 11.8916C3.32796 11.8884 3.3728 11.8374 3.37305 11.8047C3.37305 11.771 3.35218 11.737 3.3252 11.7168L1.03906 10.2871L1.01172 13.3018ZM6.07129 3.37305C6.35041 3.37318 6.5771 3.59977 6.57715 3.87891C6.57715 4.15809 6.35044 4.38463 6.07129 4.38477H5.05957C4.03708 4.38477 3.20433 5.06537 3.2041 5.90234C3.2041 6.73947 4.03694 7.4209 5.05957 7.4209H7.08301C8.66344 7.42096 9.95019 8.55525 9.9502 9.9502C9.95009 11.3451 8.66338 12.4794 7.08301 12.4795H6.07129C5.79202 12.4795 5.56543 12.2529 5.56543 11.9736C5.56548 11.6944 5.79205 11.4678 6.07129 11.4678H7.08301C8.10552 11.4677 8.93739 10.7872 8.9375 9.9502C8.93749 9.11311 8.10558 8.43267 7.08301 8.43262H5.05957C3.47908 8.43262 2.19238 7.29733 2.19238 5.90234C2.19259 4.50751 3.4792 3.37305 5.05957 3.37305H6.07129ZM10.7939 0C12.0694 0.000131868 13.2591 0.779675 13.7549 1.94043C14.6093 3.9666 13.0453 5.42741 11.9033 6.49316L11.8818 6.51367C11.7964 6.59308 11.711 6.67193 11.6289 6.75C11.4057 6.96444 11.1095 7.08195 10.7939 7.08203C10.4783 7.08203 10.1803 6.9642 9.95703 6.74902C9.86266 6.65937 9.76511 6.56666 9.66602 6.47363L9.66016 6.46875C8.53029 5.40836 6.98418 3.95585 7.83203 1.94238C8.32854 0.77953 9.51841 6.29203e-06 10.7939 0ZM10.7939 1.01172C9.91775 1.01173 9.10234 1.54537 8.76367 2.33789C8.22961 3.60525 9.04604 4.50453 10.3525 5.73145L10.4229 5.79688C10.5024 5.87104 10.5804 5.94604 10.6572 6.01953C10.7267 6.08617 10.861 6.08446 10.9277 6.02051L10.9307 6.01758C11.0223 5.93066 11.1172 5.84284 11.2129 5.75391C12.5356 4.51951 13.3612 3.61352 12.8223 2.33594C12.4849 1.54493 11.6691 1.0127 10.793 1.0127L10.7939 1.01172ZM10.7998 2.53027C11.1719 2.53041 11.4734 2.83199 11.4736 3.2041C11.4736 3.57637 11.172 3.87877 10.7998 3.87891C10.4275 3.87882 10.1221 3.57641 10.1221 3.2041C10.1223 2.8319 10.4207 2.53027 10.793 2.53027H10.7998Z",
       fill: "#05963F"
     }, null, -1)
   ])]);
 }
-const Nt = /* @__PURE__ */ D(It, [["render", Bt]]), Ot = {}, Wt = {
+const mn = /* @__PURE__ */ q(gn, [["render", pn]]), vn = {}, _n = {
   width: "14",
   height: "10",
   viewBox: "0 0 14 10",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Ft(r, c) {
-  return s(), a("svg", Wt, [...c[0] || (c[0] = [
-    u("path", {
+function yn(o, s) {
+  return a(), u("svg", _n, [...s[0] || (s[0] = [
+    h("path", {
       "fill-rule": "evenodd",
       "clip-rule": "evenodd",
       d: "M0 0.666667C0 0.298477 0.314186 2.98023e-08 0.701754 2.98023e-08H4.2807C4.66827 2.98023e-08 4.98246 0.298477 4.98246 0.666667C4.98246 1.03486 4.66827 1.33333 4.2807 1.33333H0.701754C0.314186 1.33333 0 1.03486 0 0.666667ZM10.0301 0.195262C10.3042 -0.0650874 10.7485 -0.0650874 11.0225 0.195262L13.1278 2.19526C13.4018 2.45561 13.4018 2.87772 13.1278 3.13807C12.8537 3.39842 12.4094 3.39842 12.1354 3.13807L11.2281 2.27614V8.66667C11.2281 9.03486 10.9139 9.33333 10.5263 9.33333C10.1387 9.33333 9.82456 9.03486 9.82456 8.66667V2.27614L8.91727 3.13807C8.64322 3.39842 8.19889 3.39842 7.92484 3.13807C7.65079 2.87772 7.65079 2.45561 7.92484 2.19526L10.0301 0.195262ZM0 4.66667C0 4.29848 0.314186 4 0.701754 4H5.61404C6.0016 4 6.31579 4.29848 6.31579 4.66667C6.31579 5.03486 6.0016 5.33333 5.61404 5.33333H0.701754C0.314186 5.33333 0 5.03486 0 4.66667ZM0 8.66667C0 8.29848 0.314186 8 0.701754 8H7.01754C7.40511 8 7.7193 8.29848 7.7193 8.66667C7.7193 9.03486 7.40511 9.33333 7.01754 9.33333H0.701754C0.314186 9.33333 0 9.03486 0 8.66667Z",
@@ -340,82 +535,88 @@ function Ft(r, c) {
     }, null, -1)
   ])]);
 }
-const jt = /* @__PURE__ */ D(Ot, [["render", Ft]]), Kt = {}, Yt = {
+const bn = /* @__PURE__ */ q(vn, [["render", yn]]), kn = {}, Cn = {
   width: "14",
   height: "10",
   viewBox: "0 0 14 10",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Xt(r, c) {
-  return s(), a("svg", Yt, [...c[0] || (c[0] = [
-    u("path", {
+function wn(o, s) {
+  return a(), u("svg", Cn, [...s[0] || (s[0] = [
+    h("path", {
       d: "M4.28125 8C4.66872 8.00011 4.98242 8.29887 4.98242 8.66699C4.98242 9.03511 4.66872 9.33387 4.28125 9.33398H0.702148C0.314581 9.33398 8.1338e-07 9.03518 0 8.66699C0 8.2988 0.31458 8 0.702148 8H4.28125ZM10.5264 0C10.9139 0 11.2285 0.298802 11.2285 0.666992V7.05762L12.1357 6.19531C12.4097 5.93519 12.8539 5.93524 13.1279 6.19531C13.402 6.45566 13.402 6.87832 13.1279 7.13867L11.0225 9.13867C10.7484 9.39867 10.3042 9.39886 10.0303 9.13867L7.9248 7.13867C7.65082 6.87834 7.65082 6.45565 7.9248 6.19531C8.19886 5.93496 8.64392 5.93496 8.91797 6.19531L9.8252 7.05762V0.666992C9.8252 0.298891 10.1389 0.000143144 10.5264 0ZM5.61426 4C6.00183 4 6.31641 4.2988 6.31641 4.66699C6.31641 5.03518 6.00183 5.33398 5.61426 5.33398H0.702148C0.314581 5.33398 6.77817e-07 5.03518 0 4.66699C0 4.2988 0.31458 4 0.702148 4H5.61426ZM7.01758 0C7.40515 0 7.71973 0.298802 7.71973 0.666992C7.71973 1.03518 7.40515 1.33398 7.01758 1.33398H0.702148C0.31458 1.33398 5.42254e-07 1.03518 0 0.666992C0 0.298802 0.31458 0 0.702148 0H7.01758Z",
       fill: "#1A6D9E"
     }, null, -1)
   ])]);
 }
-const qt = /* @__PURE__ */ D(Kt, [["render", Xt]]), Jt = {}, Ut = {
+const Mn = /* @__PURE__ */ q(kn, [["render", wn]]), Sn = {}, Tn = {
   width: "21",
   height: "13",
   viewBox: "0 0 21 13",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function Qt(r, c) {
-  return s(), a("svg", Ut, [...c[0] || (c[0] = [
-    u("path", {
+function Pn(o, s) {
+  return a(), u("svg", Tn, [...s[0] || (s[0] = [
+    h("path", {
       d: "M19.6426 4.61523C19.9311 4.61524 20.1317 4.90139 20.0342 5.17285L17.499 12.2246C17.4395 12.3899 17.2821 12.5 17.1064 12.5H1.5459C1.35628 12.5 1.19044 12.3719 1.14258 12.1885L0.0136719 7.83887C-0.0548101 7.575 0.14438 7.31738 0.416992 7.31738H12.6016L14.71 4.61523H19.6426ZM3.51465 8.82324C3.11322 8.82324 2.78728 9.15265 2.78711 9.55859C2.78711 9.96468 3.11312 10.2939 3.51465 10.2939C3.9161 10.2938 4.24121 9.96462 4.24121 9.55859C4.24104 9.15271 3.91599 8.82334 3.51465 8.82324ZM7.87695 8.82324C7.47553 8.82324 7.14958 9.15265 7.14941 9.55859C7.14941 9.96468 7.47542 10.2939 7.87695 10.2939C8.27846 10.2939 8.60352 9.96466 8.60352 9.55859C8.60335 9.15267 8.27835 8.82327 7.87695 8.82324ZM12.2393 8.82324C11.8378 8.82324 11.5119 9.15265 11.5117 9.55859C11.5117 9.96468 11.8377 10.2939 12.2393 10.2939C12.6407 10.2938 12.9658 9.96458 12.9658 9.55859C12.9657 9.15275 12.6405 8.82341 12.2393 8.82324ZM10.3291 3.67676C10.5591 3.67679 10.7459 3.86283 10.7461 4.09277V5.46582C10.746 5.69585 10.5591 5.88278 10.3291 5.88281H1.75C1.51993 5.88281 1.33309 5.69587 1.33301 5.46582V4.09277C1.3332 3.86282 1.52 3.67676 1.75 3.67676H10.3291ZM8.91406 0C9.14418 0 9.33105 0.186874 9.33105 0.416992V1.78906C9.33105 2.01918 9.14418 2.20605 8.91406 2.20605H3.2041C2.97398 2.20605 2.78711 2.01918 2.78711 1.78906V0.416992C2.78711 0.186874 2.97398 1.52829e-06 3.2041 0H8.91406Z",
       fill: "#9CA5B4"
     }, null, -1)
   ])]);
 }
-const Ae = /* @__PURE__ */ D(Jt, [["render", Qt]]), en = {}, tn = {
-  width: "11",
-  height: "11",
-  viewBox: "0 0 11 11",
+const Ye = /* @__PURE__ */ q(Sn, [["render", Pn]]), $n = {}, Ln = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
 };
-function nn(r, c) {
-  return s(), a("svg", tn, [...c[0] || (c[0] = [
-    u("path", {
-      d: "M5.39941 0C8.38169 0 10.7997 2.41717 10.7998 5.39941C10.7998 8.38175 8.38175 10.7998 5.39941 10.7998C2.41717 10.7997 0 8.38169 0 5.39941C0.000106094 2.41723 2.41723 0.000105613 5.39941 0ZM5.39941 0.80957C2.86451 0.809676 0.809676 2.86451 0.80957 5.39941C0.80957 7.93441 2.86445 9.98915 5.39941 9.98926C7.93447 9.98926 9.98926 7.93447 9.98926 5.39941C9.98915 2.86445 7.9344 0.80957 5.39941 0.80957ZM5.39746 4.58887C5.60229 4.58873 5.77167 4.74108 5.79883 4.93848L5.80273 4.99414L5.80469 7.96387C5.80483 8.18742 5.6239 8.36885 5.40039 8.36914C5.19539 8.36927 5.02597 8.21716 4.99902 8.01953L4.99512 7.96484L4.99316 4.99414C4.99317 4.77069 5.174 4.58911 5.39746 4.58887ZM5.39941 2.70117C5.6972 2.70117 5.93945 2.94245 5.93945 3.24023C5.93928 3.53787 5.69709 3.7793 5.39941 3.7793C5.10194 3.77906 4.86053 3.53773 4.86035 3.24023C4.86035 2.94259 5.10183 2.70141 5.39941 2.70117Z",
+function An(o, s) {
+  return a(), u("svg", Ln, [...s[0] || (s[0] = [
+    h("path", {
+      d: "M7.99976 0.799561C11.9761 0.799561 15.1998 4.0234 15.2 7.99976C15.2 11.9762 11.9762 15.2 7.99976 15.2C4.0234 15.1998 0.799561 11.9761 0.799561 7.99976C0.799666 4.02346 4.02346 0.799666 7.99976 0.799561ZM7.99976 1.87964C4.61984 1.87974 1.87974 4.61984 1.87964 7.99976C1.87964 11.3798 4.61977 14.1198 7.99976 14.1199C11.3798 14.1199 14.1199 11.3798 14.1199 7.99976C14.1198 4.61977 11.3798 1.87964 7.99976 1.87964ZM7.9978 6.91968C8.27087 6.91973 8.49698 7.12223 8.53296 7.3855L8.53784 7.45874L8.53979 11.4197C8.5399 11.7178 8.29882 11.9595 8.00073 11.9597C7.72754 11.9599 7.50169 11.7572 7.46558 11.4939L7.46069 11.4207L7.45776 7.45972C7.45757 7.16153 7.69962 6.91987 7.9978 6.91968ZM8.00073 4.40112C8.39742 4.40137 8.71923 4.72319 8.71948 5.11987C8.71948 5.51677 8.39757 5.83935 8.00073 5.8396C7.60368 5.8396 7.28101 5.51692 7.28101 5.11987C7.28126 4.72304 7.60384 4.40112 8.00073 4.40112Z",
       fill: "#69758C"
     }, null, -1)
   ])]);
 }
-const on = /* @__PURE__ */ D(en, [["render", nn]]), rn = { class: "shifl-grid relative" }, sn = { class: "shifl-grid__controls" }, ln = { class: "shifl-grid__table" }, an = ["onClick"], un = { class: "shifl-grid__header-content" }, cn = {
+const xn = /* @__PURE__ */ q($n, [["render", An]]), Nn = { class: "shifl-grid relative" }, Rn = { class: "shifl-grid__controls" }, zn = { class: "shifl-grid__table" }, Dn = ["onClick"], En = { class: "shifl-grid__header-content" }, Hn = {
   key: 0,
   class: "shifl-grid__header-label"
-}, fn = {
+}, Vn = {
   key: 1,
   class: "shifl-grid__sort-icon"
-}, dn = { key: 0 }, gn = ["colspan"], hn = {
+}, Bn = { key: 0 }, In = ["colspan"], Gn = {
   key: 0,
   class: "shifl-grid__smart-tracking-icon"
-}, pn = ["onClick"], vn = { key: 0 }, mn = ["innerHTML"], _n = {
+}, Zn = ["onClick"], On = { key: 0 }, Fn = ["innerHTML"], jn = {
   key: 2,
+  class: "shifl-grid__composite-cell"
+}, Wn = {
+  key: 3,
   class: "shifl-grid__type-cell"
-}, Cn = {
+}, Kn = {
   key: 0,
   class: "shifl-grid__container-badge"
-}, yn = {
-  key: 3,
-  class: "shifl-grid__tags-cell"
-}, kn = { class: "shifl-grid__tags-wrapper" }, bn = ["onMouseenter"], wn = {
+}, Jn = {
   key: 4,
-  class: "shifl-grid__truncated-cell"
-}, Mn = ["onMouseenter"], Tn = ["onMouseenter"], $n = {
+  class: "shifl-grid__tags-cell"
+}, qn = { class: "shifl-grid__tags-wrapper" }, Un = ["onMouseenter"], Yn = {
   key: 5,
   class: "shifl-grid__chips-container"
-}, xn = {
+}, Qn = {
+  key: 6,
+  class: "shifl-grid__truncated-cell"
+}, Xn = ["onMouseenter"], er = ["onMouseenter"], tr = ["href"], nr = {
+  key: 8,
+  class: "shifl-grid__progress-cell"
+}, rr = { class: "shifl-grid__progress-bar" }, sr = { class: "shifl-grid__progress-text" }, ir = {
   key: 0,
   class: "shifl-grid__pagination"
-}, Ln = { class: "shifl-grid__pagination-left" }, Sn = { class: "shifl-grid__pagination-range" }, Pn = { class: "shifl-grid__pagination-range-numbers" }, An = { class: "shifl-grid__pagination-right" }, zn = { class: "shifl-grid__pagination-rows" }, Hn = ["value", "disabled"], Rn = { class: "shifl-grid__pagination-nav" }, Vn = ["disabled"], En = { class: "shifl-grid__pagination-pages" }, Zn = ["disabled", "onClick"], Dn = {
+}, or = { class: "shifl-grid__pagination-left" }, ar = { class: "shifl-grid__pagination-range" }, lr = { class: "shifl-grid__pagination-range-numbers" }, ur = { class: "shifl-grid__pagination-right" }, cr = { class: "shifl-grid__pagination-rows" }, fr = ["value", "disabled"], dr = { class: "shifl-grid__pagination-nav" }, gr = ["disabled"], hr = { class: "shifl-grid__pagination-pages" }, pr = ["disabled", "onClick"], mr = {
   key: 1,
   class: "shifl-grid__pagination-ellipsis"
-}, In = ["disabled"], Gn = ["onClick"], Bn = ["innerHTML"], Nn = /* @__PURE__ */ _e({
+}, vr = ["disabled"], _r = ["onClick"], yr = ["innerHTML"], br = /* @__PURE__ */ xe({
   __name: "ShiflGrid",
   props: {
     config: {},
@@ -423,270 +624,424 @@ const on = /* @__PURE__ */ D(en, [["render", nn]]), rn = { class: "shifl-grid re
     loading: { type: Boolean }
   },
   emits: ["action-click", "search-change", "pagination-change"],
-  setup(r, { emit: c }) {
-    const l = r, m = c, d = v(() => vt(l.config)), _ = v(() => d.value.columns.filter((e) => !e.smartTrackingColumn)), {
-      columns: T,
-      visibleColumns: y,
-      toggleColumnVisibility: x,
-      setAllVisible: h,
-      toggleFrozen: f,
-      moveColumn: g,
-      resetColumns: L
-    } = mt(_.value), { sort: C, setSort: H, applySort: J } = _t(d.value.sort), { applyGlobalFilter: Re } = Ct(), { menuState: E, openMenu: Ve, closeMenu: U } = yt(), Q = k(!1), Ce = k({}), ye = k(null), ke = k(null), ee = k(null), te = k(!1), be = k(""), ne = k(null), Ee = k({});
+  setup(o, { emit: s }) {
+    var qe, Ue;
+    const g = o, _ = s, c = b(() => It(g.config)), v = k(g.search), M = k(c.value.filters), T = k(c.value.sort), w = k({
+      page: ((qe = c.value.paginationMeta) == null ? void 0 : qe.currentPage) || 1,
+      perPage: ((Ue = c.value.paginationMeta) == null ? void 0 : Ue.perPage) || 20
+    }), d = Wt(c.value, {
+      search: v,
+      filters: M,
+      sort: T,
+      pagination: w
+    }), f = b(() => c.value.columns.filter((e) => !e.smartTrackingColumn)), {
+      columns: p,
+      visibleColumns: $,
+      toggleColumnVisibility: C,
+      setAllVisible: l,
+      toggleFreeze: m,
+      moveColumn: S,
+      resetColumns: N
+    } = Gt(f.value), { sort: P, setSort: R, applySort: ce } = Zt(c.value.sort), { applyGlobalFilter: te } = Ot(), { menuState: V, openMenu: F, closeMenu: U } = Ft(), Y = k(!1), Z = k({}), ne = k(null), Ne = k(null), fe = k(null), de = k(!1), Re = k(""), ge = k(null), et = k({});
     k({});
-    const ie = k({});
-    Y(
-      () => d.value.columns,
+    const he = k({});
+    O(
+      () => c.value.filters,
+      (e) => {
+        M.value = e;
+      },
+      { deep: !0 }
+    ), O(
+      () => c.value.paginationMeta,
+      (e) => {
+        c.value.searchMode !== "server" && e && w.value && (w.value.page = e.currentPage || w.value.page, w.value.perPage = e.perPage || w.value.perPage);
+      },
+      { deep: !0 }
+    ), O(
+      () => c.value.columns,
       (e) => {
         const n = e.filter((t) => !t.smartTrackingColumn);
-        T.value = [...n];
+        p.value = [...n];
       },
       { deep: !0 }
-    ), Y(
-      () => d.value.sort,
+    ), O(
+      () => c.value.sort,
       (e) => {
-        e && (C.value = e);
+        e && (P.value = e, T.value = e);
       },
       { deep: !0 }
-    ), Y(
-      () => l.search,
+    ), O(
+      () => g.search,
       (e, n) => {
         var t;
-        if (d.value.searchMode === "server")
-          m("search-change", e || "");
-        else if (d.value.searchMode === "client" && e !== n) {
-          const i = ((t = $.value) == null ? void 0 : t.perPage) || 20;
-          m("pagination-change", 1, i);
+        if (v.value = e, c.value.searchMode === "server")
+          _("search-change", e || "");
+        else if (c.value.searchMode === "client" && e !== n) {
+          const r = ((t = z.value) == null ? void 0 : t.perPage) || 20;
+          w.value = { page: 1, perPage: r }, _("pagination-change", 1, r);
         }
+      },
+      { immediate: !0 }
+    ), O(
+      () => P.value,
+      (e) => {
+        T.value = e;
       }
     );
-    const we = v(() => {
-      if ((d.value.searchMode || "client") === "server")
-        return d.value.rows;
-      const n = l.search || "";
-      return Re(d.value.rows, d.value.search, n);
-    }), oe = v(() => {
+    const ze = b(() => d.rows.value || []), pe = b(() => {
+      if ((c.value.searchMode || "client") === "server")
+        return ze.value;
+      const n = g.search || "";
+      return te(ze.value, c.value.search, n);
+    }), me = b(() => {
       var n;
-      return (d.value.searchMode || "client") === "client" ? we.value.length : ((n = $.value) == null ? void 0 : n.total) || 0;
-    }), re = v(() => J(we.value)), Me = v(() => {
-      if ((d.value.searchMode || "client") === "server")
-        return re.value;
-      const n = $.value;
+      return (c.value.searchMode || "client") === "client" ? pe.value.length : ((n = d.paginationMeta.value) == null ? void 0 : n.total) || 0;
+    }), ve = b(() => (c.value.searchMode || "client") === "server" ? pe.value : ce(pe.value)), De = b(() => {
+      if ((c.value.searchMode || "client") === "server")
+        return ve.value;
+      const n = z.value;
       if (!n || !n.show)
-        return re.value;
-      const t = n.perPage || 20, o = ((n.currentPage || 1) - 1) * t, p = o + t;
-      return re.value.slice(o, p);
-    }), $ = v(() => d.value.paginationMeta), Ze = v(() => {
+        return ve.value;
+      const t = n.perPage || 20, i = ((n.currentPage || 1) - 1) * t, y = i + t;
+      return ve.value.slice(i, y);
+    }), z = b(() => {
+      var e;
+      return c.value.searchMode === "server" && d.paginationMeta.value ? {
+        show: !0,
+        // Default to showing pagination
+        ...d.paginationMeta.value,
+        currentPage: ((e = w.value) == null ? void 0 : e.page) || d.paginationMeta.value.currentPage || 1
+      } : c.value.paginationMeta;
+    }), W = b(() => g.loading !== void 0 ? g.loading : d.loading.value), tt = b(() => {
       var e;
-      return ((e = $.value) == null ? void 0 : e.perPage) === 100;
-    }), De = v(() => {
+      return ((e = z.value) == null ? void 0 : e.perPage) === 100;
+    }), nt = b(() => {
       var e;
-      return ((e = $.value) == null ? void 0 : e.perPage) || 10;
-    }), Te = v(() => {
-      const e = $.value;
-      if (!e || !e.show)
+      return ((e = z.value) == null ? void 0 : e.perPage) || 10;
+    }), Ee = b(() => {
+      const e = z.value;
+      if (!e || e.show === !1)
         return { from: 0, to: 0 };
-      const n = oe.value, t = e.perPage || 20, i = e.currentPage || 1;
-      if ((d.value.searchMode || "client") === "server" && e.from !== void 0 && e.to !== void 0)
+      const n = me.value, t = e.perPage || 20, r = e.currentPage || 1;
+      if ((c.value.searchMode || "client") === "server" && e.from !== void 0 && e.to !== void 0)
         return { from: e.from, to: e.to };
-      const p = (i - 1) * t + 1, w = Math.min(i * t, n);
-      return n === 0 ? { from: 0, to: 0 } : { from: p, to: w };
-    }), Z = v(() => {
+      const y = (r - 1) * t + 1, A = Math.min(r * t, n);
+      return n === 0 ? { from: 0, to: 0 } : { from: y, to: A };
+    }), K = b(() => {
       var e;
-      return ((e = $.value) == null ? void 0 : e.currentPage) || 1;
-    }), se = v(() => {
-      const e = $.value;
-      if (!e || !e.show) return 1;
-      const n = oe.value;
+      return ((e = z.value) == null ? void 0 : e.currentPage) || 1;
+    }), _e = b(() => {
+      const e = z.value;
+      if (!e || e.show === !1) return 1;
+      const n = me.value;
       if (n === 0) return 1;
-      const t = e.perPage || 20, i = Math.ceil(n / t);
-      return Math.max(1, i);
-    }), $e = v(() => Z.value <= 1), xe = v(() => Z.value >= se.value), Ie = v(() => {
-      const e = se.value, n = Z.value, t = [];
+      const t = e.perPage || 20, r = Math.ceil(n / t);
+      return Math.max(1, r);
+    }), He = b(() => K.value <= 1), Ve = b(() => K.value >= _e.value), rt = b(() => {
+      const e = _e.value, n = K.value, t = [];
       if (e <= 7)
-        for (let i = 1; i <= e; i++)
-          t.push(i);
+        for (let r = 1; r <= e; r++)
+          t.push(r);
       else if (n <= 4) {
-        for (let i = 1; i <= 5; i++)
-          t.push(i);
+        for (let r = 1; r <= 5; r++)
+          t.push(r);
         t.push(-1), t.push(e);
       } else if (n >= e - 3) {
         t.push(1), t.push(-1);
-        for (let i = e - 4; i <= e; i++)
-          t.push(i);
+        for (let r = e - 4; r <= e; r++)
+          t.push(r);
       } else {
         t.push(1), t.push(-1);
-        for (let i = n - 1; i <= n + 1; i++)
-          t.push(i);
+        for (let r = n - 1; r <= n + 1; r++)
+          t.push(r);
         t.push(-1), t.push(e);
       }
       return t;
     });
-    function Ge(e) {
+    function st(e) {
       var t;
-      if (e < 1 || e > se.value || e === Z.value || l.loading) return;
-      const n = ((t = $.value) == null ? void 0 : t.perPage) || 20;
-      m("pagination-change", e, n);
+      if (e < 1 || e > _e.value || e === K.value || W.value) return;
+      const n = ((t = z.value) == null ? void 0 : t.perPage) || 20;
+      w.value = { page: e, perPage: n }, _("pagination-change", e, n);
     }
-    function Be() {
-      var n;
-      if ($e.value || l.loading) return;
-      const e = ((n = $.value) == null ? void 0 : n.perPage) || 20;
-      m("pagination-change", Z.value - 1, e);
+    function it() {
+      var t;
+      if (He.value || W.value) return;
+      const e = ((t = z.value) == null ? void 0 : t.perPage) || 20, n = K.value - 1;
+      w.value = { page: n, perPage: e }, _("pagination-change", n, e);
     }
-    function Ne() {
-      var n;
-      if (xe.value || l.loading) return;
-      const e = ((n = $.value) == null ? void 0 : n.perPage) || 20;
-      m("pagination-change", Z.value + 1, e);
+    function ot() {
+      var t;
+      if (Ve.value || W.value) return;
+      const e = ((t = z.value) == null ? void 0 : t.perPage) || 20, n = K.value + 1;
+      w.value = { page: n, perPage: e }, _("pagination-change", n, e);
     }
-    function Oe(e) {
-      var i;
-      if (l.loading) return;
+    function at(e) {
+      var r;
+      if (W.value) return;
       const n = e.target, t = parseInt(n.value, 10);
-      t && t !== (((i = $.value) == null ? void 0 : i.perPage) || 20) && m("pagination-change", 1, t);
+      t && t !== (((r = z.value) == null ? void 0 : r.perPage) || 20) && (w.value = { page: 1, perPage: t }, _("pagination-change", 1, t));
     }
-    const We = v(() => {
-      const e = d.value.columns.find((t) => t.smartTrackingColumn);
+    const lt = b(() => {
+      const e = c.value.columns.find((t) => t.smartTrackingColumn);
       if (!(e != null && e.smartTrackingColumn)) return !1;
       const n = e.smartTrackingColumn.dataKey;
-      return d.value.rows.some((t) => {
-        const i = t[n];
-        return i === !0 || i === 1 || i === "true" || i === "1";
+      return c.value.rows.some((t) => {
+        const r = t[n];
+        return r === !0 || r === 1 || r === "true" || r === "1";
       });
-    }), le = v(() => d.value.columns.find((e) => e.smartTrackingColumn)), I = v(() => {
+    }), ye = b(() => c.value.columns.find((e) => e.smartTrackingColumn)), Q = b(() => {
       var t;
-      const e = y.value.filter((i) => !i.smartTrackingColumn);
-      if (We.value && le.value) {
-        const i = {
+      const e = $.value.filter((r) => !r.smartTrackingColumn);
+      if (lt.value && ye.value) {
+        const r = {
           key: "_smart_tracking",
           label: "",
           // No label
           order: -1,
           // Before everything
-          frozen: !0,
+          freeze: !0,
           visible: !0,
           protected: !0,
           sortable: !1,
-          width: ((t = le.value.smartTrackingColumn) == null ? void 0 : t.width) || "36px",
-          smartTrackingColumn: le.value.smartTrackingColumn
-        }, o = e.findIndex((p) => p.key === "ref");
-        o >= 0 ? e.splice(o, 0, i) : e.unshift(i);
+          width: ((t = ye.value.smartTrackingColumn) == null ? void 0 : t.width) || "36px",
+          smartTrackingColumn: ye.value.smartTrackingColumn,
+          cellType: "icon"
+        }, i = e.findIndex((y) => y.key === "ref");
+        i >= 0 ? e.splice(i, 0, r) : e.unshift(r);
       }
-      const n = e.find((i) => i.key === "ref");
-      return n && (n.frozen = !0, n.protected = !0), e;
-    }), Fe = v(() => {
+      const n = e.find((r) => r.key === "ref");
+      return n && (n.freeze = !0, n.protected = !0), e;
+    }), ut = b(() => {
       let e = 0;
       const n = {};
-      for (const t of I.value) {
-        t.frozen && (n[t.key] = e);
-        const i = parseInt(t.width ?? "160", 10);
-        Number.isNaN(i) || (e += i);
+      for (const t of Q.value) {
+        t.freeze && (n[t.key] = e);
+        const r = parseInt(t.width ?? "160", 10);
+        Number.isNaN(r) || (e += r);
       }
       return n;
-    });
-    function je(e) {
-      const n = T.value.find((t) => t.key === e);
-      !(n != null && n.sortable) || F(n) || ge(n) || H(e);
+    }), Be = k(0);
+    function ct(e) {
+      const n = e.target;
+      Be.value = n.scrollLeft;
+    }
+    function ft(e) {
+      const n = p.value.find((t) => t.key === e);
+      !(n != null && n.sortable) || se(n) || Te(n) || R(e);
+    }
+    function be(e, n) {
+      if (e == null || e === "" || e === void 0)
+        return Ie(n.blankStyle);
+      const t = n.cellType;
+      if (Array.isArray(t)) {
+        const r = t.find((i) => typeof i == "string" && i !== "icon");
+        return r && typeof r == "string" ? We(e, r, n) : "";
+      }
+      if (!t)
+        return typeof e == "object" ? JSON.stringify(e) : String(e);
+      switch (t) {
+        case "number":
+          return Ge(e);
+        case "currency":
+          return Ze(e);
+        case "date":
+          return Oe(e);
+        case "boolean":
+          return Fe(e);
+        case "text":
+        default:
+          return typeof e == "object" ? JSON.stringify(e) : String(e);
+      }
+    }
+    function Ie(e) {
+      switch (e) {
+        case "dash":
+          return "--";
+        case "zero":
+          return "0";
+        case "na":
+          return "N/A";
+        case "empty":
+        default:
+          return "";
+      }
+    }
+    function Ge(e) {
+      if (typeof e == "number")
+        return e.toLocaleString();
+      const n = Number(e);
+      return Number.isNaN(n) ? String(e) : n.toLocaleString();
+    }
+    function Ze(e) {
+      if (typeof e == "number")
+        return new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD"
+        }).format(e);
+      const n = Number(e);
+      return Number.isNaN(n) ? String(e) : new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD"
+      }).format(n);
     }
-    function Ke(e) {
-      return e == null ? "" : typeof e == "object" ? JSON.stringify(e) : String(e);
+    function Oe(e) {
+      if (e instanceof Date)
+        return e.toLocaleDateString();
+      if (typeof e == "string") {
+        const n = new Date(e);
+        if (!Number.isNaN(n.getTime()))
+          return n.toLocaleDateString();
+      }
+      return String(e);
+    }
+    function Fe(e) {
+      return typeof e == "boolean" ? e ? "Yes" : "No" : e === 1 || e === "1" || e === "true" || e === "True" ? "Yes" : e === 0 || e === "0" || e === "false" || e === "False" ? "No" : String(e);
     }
-    function Ye(e) {
-      return typeof e == "string" && e.toLowerCase() === "ocean", Ae;
+    function dt(e) {
+      if (typeof e == "number")
+        return Math.min(100, Math.max(0, e));
+      const n = Number(e);
+      return Number.isNaN(n) ? 0 : Math.min(100, Math.max(0, n));
     }
-    function Xe(e) {
+    function je(e) {
+      return typeof e == "string" && e.toLowerCase() === "ocean", Ye;
+    }
+    function gt(e) {
       const n = e.toLowerCase();
       return ["supplier", "suppliers", "po", "pos", "product_description"].includes(n);
     }
-    function qe(e) {
+    function ht(e) {
+      if (e.cellType === "badge") return !0;
+      const n = e.key.toLowerCase();
+      return n === "tag" || n === "tags";
+    }
+    function pt(e) {
+      return e.cellType === "status" ? !0 : e.key.toLowerCase() === "status";
+    }
+    function mt(e) {
+      return e.cellType === "icon" ? !0 : e.key.toLowerCase() === "type";
+    }
+    function vt(e) {
+      return Array.isArray(e.cellType) && e.cellType.length > 0;
+    }
+    function _t(e) {
+      return Array.isArray(e.cellType) ? e.cellType.filter((n) => typeof n == "string") : e.cellType && typeof e.cellType == "string" ? [e.cellType] : [];
+    }
+    function We(e, n, t) {
+      if (e == null || e === "" || e === void 0)
+        return Ie(t.blankStyle);
+      switch (n) {
+        case "number":
+          return Ge(e);
+        case "currency":
+          return Ze(e);
+        case "date":
+          return Oe(e);
+        case "boolean":
+          return Fe(e);
+        case "text":
+        default:
+          return typeof e == "object" ? JSON.stringify(e) : String(e);
+      }
+    }
+    function yt(e) {
+      return {
+        number: "shifl-grid__composite-number",
+        currency: "shifl-grid__composite-currency",
+        date: "shifl-grid__composite-date",
+        boolean: "shifl-grid__composite-boolean",
+        text: "shifl-grid__composite-text"
+      }[e] || "shifl-grid__composite-text";
+    }
+    function bt(e) {
       if (e == null) return "";
       if (Array.isArray(e)) {
         if (e.length === 0) return "";
         const n = e.join(", ");
-        return Le(n, 45);
+        return Ke(n, 45);
       }
-      return typeof e == "string" ? Le(e, 45) : String(e);
+      return typeof e == "string" ? Ke(e, 45) : String(e);
     }
-    function Le(e, n) {
+    function Ke(e, n) {
       return e.length <= n ? e : e.substring(0, n) + "...";
     }
-    function ae(e) {
+    function ke(e) {
       const n = e.toLowerCase();
       return ["po", "pos", "supplier", "suppliers", "tag", "tags"].includes(n);
     }
-    function Je(e, n) {
-      return e == null || ae(n) ? !1 : Array.isArray(e) ? e.length === 0 ? !1 : e.join(", ").length > 30 : typeof e == "string" ? e.length > 30 : !1;
+    function kt(e, n) {
+      return e == null || ke(n) ? !1 : Array.isArray(e) ? e.length === 0 ? !1 : e.join(", ").length > 30 : typeof e == "string" ? e.length > 30 : !1;
     }
-    function Ue(e) {
+    function Ct(e) {
       return e == null ? !1 : Array.isArray(e) ? e.length === 0 ? !1 : e.join(", ").length > 45 : typeof e == "string" ? e.length > 45 : !1;
     }
-    function Qe(e) {
+    function wt(e) {
       if (e == null) return 0;
       if (Array.isArray(e)) {
         if (e.length === 0 || e.join(", ").length <= 45) return 0;
-        let t = 0, i = 0;
-        for (let o = 0; o < e.length; o++) {
-          const p = String(e[o]), A = (o > 0 ? ", " : "").length + p.length;
-          if (t + A <= 45)
-            t += A, i++;
+        let t = 0, r = 0;
+        for (let i = 0; i < e.length; i++) {
+          const y = String(e[i]), B = (i > 0 ? ", " : "").length + y.length;
+          if (t + B <= 45)
+            t += B, r++;
           else
             break;
         }
-        return e.length - i;
+        return e.length - r;
       }
       return typeof e == "string" && e.length > 45 ? 1 : 0;
     }
-    function ue(e, n, t, i) {
-      let o = "";
-      Array.isArray(t) ? t.length > 0 && (o = t.join(`
-`)) : t != null && (o = String(t)), be.value = o, ne.value = i, te.value = !0;
+    function Ce(e, n, t, r) {
+      let i = "";
+      Array.isArray(t) ? t.length > 0 && (i = t.join(`
+`)) : t != null && (i = String(t)), Re.value = i, ge.value = r, de.value = !0;
     }
-    function ce() {
-      te.value = !1, ne.value = null;
+    function we() {
+      de.value = !1, ge.value = null;
     }
-    function et(e, n, t) {
-      t && (Ee.value[`${e}-${n}`] = t);
+    function Mt(e, n, t) {
+      t && (et.value[`${e}-${n}`] = t);
     }
-    function W(e) {
+    function re(e) {
       return e == null ? [] : Array.isArray(e) ? e.map((n) => String(n)).filter((n) => n.length > 0) : typeof e == "string" ? e.split(",").map((n) => n.trim()).filter((n) => n.length > 0) : [String(e)];
     }
-    function fe(e, n, t) {
-      const i = W(e);
-      if (i.length === 0) return [];
-      const o = `${n}-${t}`;
-      if (ie.value[o])
-        return ie.value[o];
-      const p = I.value.find((K) => K.key === n), A = (p != null && p.width ? parseInt(p.width) : 200) - 32, N = tt(i, A);
-      return ie.value[o] = N, N;
+    function Me(e, n, t) {
+      const r = re(e);
+      if (r.length === 0) return [];
+      const i = `${n}-${t}`;
+      if (he.value[i])
+        return he.value[i];
+      const y = Q.value.find((oe) => oe.key === n), B = (y != null && y.width ? parseInt(y.width) : 200) - 32, X = St(r, B);
+      return he.value[i] = X, X;
     }
-    function tt(e, n) {
+    function St(e, n) {
       if (e.length === 0) return [];
       const t = document.createElement("div");
       t.style.cssText = "position: absolute; visibility: hidden; display: flex; flex-wrap: nowrap; gap: 6px;", t.className = "shifl-grid__chips-container", document.body.appendChild(t);
-      let i = 0, o = 0;
-      const p = 40;
-      for (let w = 0; w < e.length; w++) {
-        const A = document.createElement("span");
-        A.className = "shifl-grid__chip shifl-grid__chip--tag", A.textContent = e[w], A.style.cssText = "padding: 4px 8px; border-left: 3px solid; border: 1px solid; background: white; white-space: nowrap;", t.appendChild(A);
-        const N = A.offsetWidth, K = w > 0 ? 6 : 0, dt = w < e.length - 1;
-        if (o + K + N + (dt ? p : 0) > n && w > 0) {
-          t.removeChild(A);
+      let r = 0, i = 0;
+      const y = 40;
+      for (let A = 0; A < e.length; A++) {
+        const B = document.createElement("span");
+        B.className = "shifl-grid__chip shifl-grid__chip--tag", B.textContent = e[A], B.style.cssText = "padding: 4px 8px; border-left: 3px solid; border: 1px solid; background: white; white-space: nowrap;", t.appendChild(B);
+        const X = B.offsetWidth, oe = A > 0 ? 6 : 0, Et = A < e.length - 1;
+        if (i + oe + X + (Et ? y : 0) > n && A > 0) {
+          t.removeChild(B);
           break;
         }
-        o += K + N, i++;
+        i += oe + X, r++;
       }
-      return document.body.removeChild(t), e.slice(0, i);
+      return document.body.removeChild(t), e.slice(0, r);
     }
-    function nt(e, n, t) {
-      const i = W(e), o = fe(e, n, t);
-      return i.length > o.length;
+    function Tt(e, n, t) {
+      const r = re(e), i = Me(e, n, t);
+      return r.length > i.length;
     }
-    function it(e, n, t) {
-      const i = W(e), o = fe(e, n, t);
-      return i.length - o.length;
+    function Pt(e, n, t) {
+      const r = re(e), i = Me(e, n, t);
+      return r.length - i.length;
     }
-    function ot(e) {
+    function $t(e) {
       const n = e.toLowerCase(), t = {
         "high priority": "var(--shifl-color-error-r70)",
         express: "var(--shifl-color-primary-b80)",
@@ -701,15 +1056,15 @@ const on = /* @__PURE__ */ D(en, [["render", nn]]), rn = { class: "shifl-grid re
       };
       if (t[n])
         return t[n];
-      for (const [i, o] of Object.entries(t))
-        if (n.includes(i) || i.includes(n))
-          return o;
-      return rt(e);
+      for (const [r, i] of Object.entries(t))
+        if (n.includes(r) || r.includes(n))
+          return i;
+      return Lt(e);
     }
-    function rt(e) {
+    function Lt(e) {
       let n = 0;
-      for (let i = 0; i < e.length; i++)
-        n = e.charCodeAt(i) + ((n << 5) - n);
+      for (let r = 0; r < e.length; r++)
+        n = e.charCodeAt(r) + ((n << 5) - n);
       const t = [
         "var(--shifl-color-primary-b80)",
         "var(--shifl-color-success-g70)",
@@ -722,357 +1077,382 @@ const on = /* @__PURE__ */ D(en, [["render", nn]]), rn = { class: "shifl-grid re
       ];
       return t[Math.abs(n) % t.length];
     }
-    function de(e, n = !0) {
-      const t = {
+    function Se(e, n = !0) {
+      const r = { ...{
         width: e.width ?? "160px",
         minWidth: e.width ?? "160px"
-      };
-      if (!e.frozen) return t;
-      const i = Fe.value[e.key] ?? 0;
-      return {
-        ...t,
-        position: "sticky",
-        left: `${i}px`,
-        zIndex: n ? 30 : 10,
-        background: "var(--shifl-color-surface)"
-      };
+      } }, i = Be.value > 0;
+      if (e.freeze) {
+        const y = ut.value[e.key] ?? 0;
+        r.position = "sticky", r.left = `${y}px`, r.background = "#ffffff", r.boxShadow = i ? "2px 0 6px rgba(0, 0, 0, 0.12)" : "none", r.zIndex = n ? 40 : 10;
+      }
+      return n && (r.position = "sticky", r.top = "0px"), r;
     }
-    const st = v(() => T.value.filter((e) => !e.smartTrackingColumn));
-    function F(e) {
+    const At = b(() => p.value.filter((e) => !e.smartTrackingColumn));
+    function se(e) {
       return !!e.actionColumn;
     }
-    function ge(e) {
+    function Te(e) {
       return !!e.smartTrackingColumn;
     }
-    function lt(e, n) {
+    function xt(e, n) {
       if (!e.smartTrackingColumn) return !1;
-      const t = e.smartTrackingColumn.dataKey, i = n[t];
-      if (i === !0 || i === 1) return !0;
-      if (typeof i == "string") {
-        const o = i.toLowerCase().trim();
-        return o === "true" || o === "1" || o === "yes";
+      const t = e.smartTrackingColumn.dataKey, r = n[t];
+      if (r === !0 || r === 1) return !0;
+      if (typeof r == "string") {
+        const i = r.toLowerCase().trim();
+        return i === "true" || i === "1" || i === "yes";
       }
       return !1;
     }
-    function j(e, n) {
+    function ie(e, n) {
       if (!e.actionColumn) return null;
       const t = e.actionColumn.icon;
       return t ? typeof t == "function" ? t(n) : t : null;
     }
-    function at(e, n, t, i) {
+    function Nt(e, n, t, r) {
       if (!t.actionColumn) return;
-      const o = i.currentTarget;
-      if (E.value.rowIndex === e) {
+      const i = r.currentTarget;
+      if (V.value.rowIndex === e) {
         U();
         return;
       }
-      ke.value = t, ee.value = n, Ve(e, o);
+      Ne.value = t, fe.value = n, F(e, i);
     }
-    function ut(e, n) {
-      return !(e != null && e.actionColumn) || !n ? [] : (typeof e.actionColumn.actions == "function" ? e.actionColumn.actions(n) : e.actionColumn.actions).filter((i) => i.show ? i.show(n) : !0);
+    function Rt(e, n) {
+      return !(e != null && e.actionColumn) || !n ? [] : (typeof e.actionColumn.actions == "function" ? e.actionColumn.actions(n) : e.actionColumn.actions).filter((r) => r.show ? r.show(n) : !0);
     }
-    function ct(e, n, t) {
-      m("action-click", e.key, n, t), U();
+    function zt(e, n, t) {
+      _("action-click", e.key, n, t), U();
     }
-    function ft(e, n) {
-      n && (Ce.value[e] = n);
+    function Dt(e, n) {
+      n && (Z.value[e] = n);
     }
-    function Se(e) {
-      if (E.value.rowIndex === null) return;
-      const n = e.target, t = ye.value, i = Object.values(Ce.value), o = t == null ? void 0 : t.contains(n), p = i.some((w) => w.contains(n));
-      !o && !p && U();
+    function Je(e) {
+      if (V.value.rowIndex === null) return;
+      const n = e.target, t = ne.value, r = Object.values(Z.value), i = t == null ? void 0 : t.contains(n), y = r.some((A) => A.contains(n));
+      !i && !y && U();
     }
-    return X(() => {
-      document.addEventListener("click", Se);
-    }), q(() => {
-      document.removeEventListener("click", Se);
-    }), (e, n) => (s(), a("div", rn, [
-      u("div", sn, [
-        u("button", {
+    return le(() => {
+      document.addEventListener("click", Je);
+    }), ue(() => {
+      document.removeEventListener("click", Je);
+    }), (e, n) => (a(), u("div", Nn, [
+      h("div", Rn, [
+        h("button", {
           type: "button",
           class: "shifl-grid__pill-button whitespace-nowrap",
-          onClick: n[0] || (n[0] = (t) => Q.value = !0)
-        }, " Edit Columns ")
+          onClick: n[0] || (n[0] = (t) => Y.value = !0)
+        }, " Edit Column ")
       ]),
-      u("div", {
-        class: V(["shifl-grid__viewport", { "shifl-grid__viewport--scroll": Ze.value }])
+      h("div", {
+        class: I(["shifl-grid__viewport", { "shifl-grid__viewport--scroll": tt.value }]),
+        onScroll: ct
       }, [
-        u("table", ln, [
-          u("thead", null, [
-            u("tr", null, [
-              (s(!0), a(M, null, z(I.value, (t) => {
-                var i;
-                return s(), a("th", {
+        h("table", zn, [
+          h("thead", null, [
+            h("tr", null, [
+              (a(!0), u(x, null, H(Q.value, (t) => {
+                var r;
+                return a(), u("th", {
                   key: t.key,
-                  style: G(de(t, !0)),
-                  onClick: () => je(t.key),
-                  class: V(["shifl-grid__header-cell", { "shifl-grid__cell--sticky": t.frozen }])
+                  style: j(Se(t, !0)),
+                  onClick: () => ft(t.key),
+                  class: I([
+                    "shifl-grid__header-cell",
+                    `shifl-grid__header-align-${t != null && t.align ? t.align : "left"}`,
+                    {
+                      "shifl-grid__cell--sticky": t.freeze,
+                      "shifl-grid__sortable-col": t.sortable,
+                      "shifl-grid__icon": t.cellType === "icon"
+                    }
+                  ])
                 }, [
-                  u("div", un, [
-                    t.label ? (s(), a("span", cn, b(t.label), 1)) : P("", !0),
-                    ((i = S(C)) == null ? void 0 : i.key) === t.key && !F(t) && !ge(t) ? (s(), a("span", fn, [
-                      S(C).order === "asc" ? (s(), R(jt, { key: 0 })) : (s(), R(qt, { key: 1 }))
-                    ])) : P("", !0)
+                  h("div", En, [
+                    t.label ? (a(), u("span", Hn, L(t.label), 1)) : D("", !0),
+                    ((r = E(P)) == null ? void 0 : r.key) === t.key && !se(t) && !Te(t) ? (a(), u("span", Vn, [
+                      E(P).order === "asc" ? (a(), G(bn, { key: 0 })) : (a(), G(Mn, { key: 1 }))
+                    ])) : D("", !0)
                   ])
-                ], 14, an);
+                ], 14, Dn);
               }), 128))
             ])
           ]),
-          u("tbody", null, [
-            l.loading ? (s(!0), a(M, { key: 0 }, z(De.value, (t) => (s(), a("tr", {
+          h("tbody", null, [
+            W.value ? (a(!0), u(x, { key: 0 }, H(nt.value, (t) => (a(), u("tr", {
               key: `skeleton-${t}`,
               class: "shifl-grid__skeleton-row"
             }, [
-              (s(!0), a(M, null, z(I.value, (i) => (s(), a("td", {
-                key: i.key,
-                style: G(de(i, !1)),
-                class: V({ "shifl-grid__cell--sticky": i.frozen })
-              }, [...n[5] || (n[5] = [
-                u("div", { class: "shifl-grid__skeleton-cell" }, null, -1)
+              (a(!0), u(x, null, H(Q.value, (r) => (a(), u("td", {
+                key: r.key,
+                style: j(Se(r, !1)),
+                class: I({ "shifl-grid__cell--sticky": r.freeze })
+              }, [...n[6] || (n[6] = [
+                h("div", { class: "shifl-grid__skeleton-cell" }, null, -1)
               ])], 6))), 128))
-            ]))), 128)) : (s(), a(M, { key: 1 }, [
-              Me.value.length ? P("", !0) : (s(), a("tr", dn, [
-                u("td", {
-                  colspan: I.value.length,
+            ]))), 128)) : (a(), u(x, { key: 1 }, [
+              De.value.length ? D("", !0) : (a(), u("tr", Bn, [
+                h("td", {
+                  colspan: Q.value.length,
                   class: "text-center text-gray-500 py-6"
-                }, " No data ", 8, gn)
+                }, " No data ", 8, In)
               ])),
-              (s(!0), a(M, null, z(Me.value, (t, i) => (s(), a("tr", { key: i }, [
-                (s(!0), a(M, null, z(I.value, (o) => (s(), a("td", {
-                  key: o.key,
-                  style: G(de(o, !1)),
-                  class: V([
-                    { "shifl-grid__cell--sticky": o.frozen },
-                    { "shifl-grid__cell--action": F(o) }
+              (a(!0), u(x, null, H(De.value, (t, r) => (a(), u("tr", { key: r }, [
+                (a(!0), u(x, null, H(Q.value, (i) => (a(), u("td", {
+                  key: i.key,
+                  style: j(Se(i, !1)),
+                  class: I([
+                    { "shifl-grid__cell--sticky": i.freeze },
+                    { "shifl-grid__cell--action": se(i) },
+                    `shifl-grid__cell-align-${i != null && i.align ? i.align : "left"}`,
+                    { "shifl-grid__icon": i.cellType === "icon" }
                   ])
                 }, [
-                  ge(o) ? (s(), a(M, { key: 0 }, [
-                    lt(o, t) ? (s(), a("div", hn, [
-                      he(Nt)
-                    ])) : P("", !0)
-                  ], 64)) : F(o) ? (s(), a("button", {
+                  Te(i) ? (a(), u(x, { key: 0 }, [
+                    xt(i, t) ? (a(), u("div", Gn, [
+                      Pe(mn)
+                    ])) : D("", !0)
+                  ], 64)) : se(i) ? (a(), u("button", {
                     key: 1,
                     type: "button",
                     class: "shifl-grid__action-icon",
                     ref_for: !0,
-                    ref: (p) => ft(i, p),
-                    onClick: B((p) => at(i, t, o, p), ["stop"])
+                    ref: (y) => Dt(r, y),
+                    onClick: J((y) => Nt(r, t, i, y), ["stop"])
                   }, [
-                    j(o, t) ? typeof j(o, t) == "string" ? (s(), a("span", {
+                    ie(i, t) ? typeof ie(i, t) == "string" ? (a(), u("span", {
                       key: 1,
-                      innerHTML: j(o, t),
+                      innerHTML: ie(i, t),
                       class: "w-4 h-4 inline-block"
-                    }, null, 8, mn)) : (s(), R(pe(j(o, t)), {
+                    }, null, 8, Fn)) : (a(), G(ae(ie(i, t)), {
                       key: 2,
                       class: "w-4 h-4"
-                    })) : (s(), a("span", vn, "⋯"))
-                  ], 8, pn)) : o.key.toLowerCase() === "type" ? (s(), a("div", _n, [
-                    (s(), R(pe(Ye(t[o.key])), { class: "shifl-grid__type-icon" })),
-                    t.container_count != null ? (s(), a("span", Cn, " (" + b(t.container_count) + ") ", 1)) : P("", !0)
-                  ])) : o.key.toLowerCase() === "tag" || o.key.toLowerCase() === "tags" ? (s(), a("div", yn, [
-                    u("div", kn, [
-                      u("div", {
+                    })) : (a(), u("span", On, "⋯"))
+                  ], 8, Zn)) : vt(i) ? (a(), u("div", jn, [
+                    (a(!0), u(x, null, H(_t(i), (y, A) => (a(), u(x, { key: A }, [
+                      y === "icon" ? (a(), G(ae(je(t[i.key])), {
+                        key: 0,
+                        class: "shifl-grid__type-icon"
+                      })) : (a(), u("span", {
+                        key: 1,
+                        class: I(yt(y))
+                      }, L(We(t[i.key], y, i)), 3))
+                    ], 64))), 128))
+                  ])) : mt(i) ? (a(), u("div", Wn, [
+                    (a(), G(ae(je(t[i.key])), { class: "shifl-grid__type-icon" })),
+                    t.container_count != null ? (a(), u("span", Kn, " (" + L(t.container_count) + ") ", 1)) : D("", !0)
+                  ])) : ht(i) ? (a(), u("div", Jn, [
+                    h("div", qn, [
+                      h("div", {
                         ref_for: !0,
                         ref: "(el) => setTagsRef(col.key, rowIndex, el as HTMLElement)",
                         class: "shifl-grid__chips-container shifl-grid__chips-container--single-line"
                       }, [
-                        (s(!0), a(M, null, z(fe(
-                          t[o.key],
-                          o.key,
-                          i
-                        ), (p, w) => (s(), a("span", {
-                          key: w,
+                        (a(!0), u(x, null, H(Me(
+                          t[i.key],
+                          i.key,
+                          r
+                        ), (y, A) => (a(), u("span", {
+                          key: A,
                           class: "shifl-grid__chip shifl-grid__chip--tag",
-                          style: G({ borderLeftColor: ot(p) })
-                        }, b(p), 5))), 128))
+                          style: j({ borderLeftColor: $t(y) })
+                        }, L(y), 5))), 128))
                       ], 512)
                     ]),
-                    nt(t[o.key], o.key, i) ? (s(), a("button", {
+                    Tt(t[i.key], i.key, r) ? (a(), u("button", {
                       key: 0,
                       type: "button",
                       class: "shifl-grid__counter-button",
-                      onMouseenter: (p) => ue(
-                        o.key,
-                        i,
-                        t[o.key],
-                        p.currentTarget
+                      onMouseenter: (y) => Ce(
+                        i.key,
+                        r,
+                        t[i.key],
+                        y.currentTarget
                       ),
-                      onMouseleave: ce
-                    }, " +" + b(it(t[o.key], o.key, i)), 41, bn)) : P("", !0)
-                  ])) : Xe(o.key) ? (s(), a("div", wn, [
-                    u("span", {
+                      onMouseleave: we
+                    }, " +" + L(Pt(t[i.key], i.key, r)), 41, Un)) : D("", !0)
+                  ])) : pt(i) ? (a(), u("div", Yn, [
+                    (a(!0), u(x, null, H(re(t[i.key]), (y, A) => (a(), u("span", {
+                      key: A,
+                      class: "shifl-grid__chip shifl-grid__chip--status"
+                    }, L(y), 1))), 128))
+                  ])) : i.truncate !== !1 && (i.truncate === !0 || gt(i.key)) ? (a(), u("div", Qn, [
+                    h("span", {
                       class: "shifl-grid__truncated-text",
                       ref_for: !0,
-                      ref: (p) => et(o.key, i, p)
-                    }, b(qe(t[o.key])), 513),
-                    ae(o.key) && Ue(t[o.key]) ? (s(), a("button", {
+                      ref: (y) => Mt(i.key, r, y)
+                    }, L(bt(t[i.key])), 513),
+                    ke(i.key) && Ct(t[i.key]) ? (a(), u("button", {
                       key: 0,
                       type: "button",
                       class: "shifl-grid__counter-button",
-                      onMouseenter: (p) => ue(
-                        o.key,
-                        i,
-                        t[o.key],
-                        p.currentTarget
+                      onMouseenter: (y) => Ce(
+                        i.key,
+                        r,
+                        t[i.key],
+                        y.currentTarget
                       ),
-                      onMouseleave: ce
-                    }, " +" + b(Qe(t[o.key])), 41, Mn)) : !ae(o.key) && Je(t[o.key], o.key) ? (s(), a("button", {
+                      onMouseleave: we
+                    }, " +" + L(wt(t[i.key])), 41, Xn)) : !ke(i.key) && kt(t[i.key], i.key) ? (a(), u("button", {
                       key: 1,
                       type: "button",
                       class: "shifl-grid__info-icon-button",
-                      onMouseenter: (p) => ue(
-                        o.key,
-                        i,
-                        t[o.key],
-                        p.currentTarget
+                      onMouseenter: (y) => Ce(
+                        i.key,
+                        r,
+                        t[i.key],
+                        y.currentTarget
                       ),
-                      onMouseleave: ce
+                      onMouseleave: we
                     }, [
-                      he(on)
-                    ], 40, Tn)) : P("", !0)
-                  ])) : o.key.toLowerCase() === "status" ? (s(), a("div", $n, [
-                    (s(!0), a(M, null, z(W(t[o.key]), (p, w) => (s(), a("span", {
-                      key: w,
-                      class: "shifl-grid__chip"
-                    }, b(p), 1))), 128))
-                  ])) : (s(), a(M, { key: 6 }, [
-                    O(b(Ke(t[o.key])), 1)
+                      Pe(xn)
+                    ], 40, er)) : D("", !0)
+                  ])) : i.cellType === "link" ? (a(), u("a", {
+                    key: 7,
+                    href: String(t[i.key] || ""),
+                    class: "shifl-grid__link-cell",
+                    onClick: n[1] || (n[1] = J(() => {
+                    }, ["stop"]))
+                  }, L(be(t[i.key], i)), 9, tr)) : i.cellType === "progress" ? (a(), u("div", nr, [
+                    h("div", rr, [
+                      h("div", {
+                        class: "shifl-grid__progress-fill",
+                        style: j({ width: `${dt(t[i.key])}%` })
+                      }, null, 4)
+                    ]),
+                    h("span", sr, L(be(t[i.key], i)), 1)
+                  ])) : (a(), u(x, { key: 9 }, [
+                    ee(L(be(t[i.key], i)), 1)
                   ], 64))
                 ], 6))), 128))
               ]))), 128))
             ], 64))
           ])
         ])
-      ], 2),
-      $.value && $.value.show !== !1 ? (s(), a("div", xn, [
-        u("div", Ln, [
-          u("span", Sn, [
-            n[6] || (n[6] = O(" Showing ", -1)),
-            u("span", Pn, b(Te.value.from) + "–" + b(Te.value.to), 1),
-            O(" of " + b(oe.value), 1)
+      ], 34),
+      z.value && z.value.show !== !1 ? (a(), u("div", ir, [
+        h("div", or, [
+          h("span", ar, [
+            n[7] || (n[7] = ee(" Showing ", -1)),
+            h("span", lr, L(Ee.value.from) + "–" + L(Ee.value.to), 1),
+            ee(" of " + L(me.value), 1)
           ])
         ]),
-        u("div", An, [
-          u("div", zn, [
-            n[8] || (n[8] = u("label", { class: "shifl-grid__pagination-label" }, "Rows per page", -1)),
-            u("select", {
-              value: $.value.perPage || 20,
-              disabled: l.loading,
-              onChange: Oe,
+        h("div", ur, [
+          h("div", cr, [
+            n[9] || (n[9] = h("label", { class: "shifl-grid__pagination-label" }, "Row per page", -1)),
+            h("select", {
+              value: z.value.perPage || 20,
+              disabled: W.value,
+              onChange: at,
               class: "shifl-grid__pagination-select"
-            }, [...n[7] || (n[7] = [
-              gt('<option value="20">20</option><option value="30">30</option><option value="50">50</option><option value="75">75</option><option value="100">100</option>', 5)
-            ])], 40, Hn)
+            }, [...n[8] || (n[8] = [
+              Ht('<option value="20">20</option><option value="30">30</option><option value="50">50</option><option value="75">75</option><option value="100">100</option>', 5)
+            ])], 40, fr)
           ]),
-          u("div", Rn, [
-            u("button", {
+          h("div", dr, [
+            h("button", {
               type: "button",
               class: "shifl-grid__pagination-button",
-              disabled: $e.value || l.loading,
-              onClick: Be,
+              disabled: He.value || g.loading,
+              onClick: it,
               "aria-label": "Previous page"
-            }, " ‹ ", 8, Vn),
-            u("div", En, [
-              (s(!0), a(M, null, z(Ie.value, (t) => (s(), a(M, { key: t }, [
-                t !== -1 ? (s(), a("button", {
+            }, " ‹ ", 8, gr),
+            h("div", hr, [
+              (a(!0), u(x, null, H(rt.value, (t) => (a(), u(x, { key: t }, [
+                t !== -1 ? (a(), u("button", {
                   key: 0,
                   type: "button",
-                  class: V(["shifl-grid__pagination-page", { "shifl-grid__pagination-page--active": t === Z.value }]),
-                  disabled: l.loading,
-                  onClick: (i) => Ge(t)
-                }, b(t), 11, Zn)) : (s(), a("span", Dn, "…"))
+                  class: I(["shifl-grid__pagination-page", { "shifl-grid__pagination-page--active": t === K.value }]),
+                  disabled: W.value,
+                  onClick: (r) => st(t)
+                }, L(t), 11, pr)) : (a(), u("span", mr, "…"))
               ], 64))), 128))
             ]),
-            u("button", {
+            h("button", {
               type: "button",
               class: "shifl-grid__pagination-button",
-              disabled: xe.value || l.loading,
-              onClick: Ne,
+              disabled: Ve.value || g.loading,
+              onClick: ot,
               "aria-label": "Next page"
-            }, " › ", 8, In)
+            }, " › ", 8, vr)
           ])
         ])
-      ])) : P("", !0),
-      (s(), R(me, { to: "body" }, [
-        S(E).rowIndex !== null && S(E).position ? (s(), a("div", {
+      ])) : D("", !0),
+      (a(), G(Ae, { to: "body" }, [
+        E(V).rowIndex !== null && E(V).position ? (a(), u("div", {
           key: 0,
           ref_key: "actionMenuRef",
-          ref: ye,
+          ref: ne,
           class: "shifl-grid__action-menu",
-          style: G({
-            position: "fixed",
-            top: `${S(E).position.top}px`,
-            left: `${S(E).position.left}px`,
-            zIndex: 1e3
-          }),
-          onClick: n[1] || (n[1] = B(() => {
+          style: j(`
+          position: fixed !important; 
+          top: ${E(V).position.top}px !important; 
+          left: ${E(V).position.left}px !important; 
+          z-index: 1000 !important;`),
+          onClick: n[2] || (n[2] = J(() => {
           }, ["stop"]))
         }, [
-          (s(!0), a(M, null, z(ut(ke.value, ee.value), (t) => (s(), a("div", {
+          (a(!0), u(x, null, H(Rt(Ne.value, fe.value), (t) => (a(), u("div", {
             key: t.key,
-            class: V(["shifl-grid__action-menu-item", { "shifl-grid__action-menu-item--danger": t.danger }]),
-            onClick: () => ct(t, ee.value, S(E).rowIndex)
+            class: I(["shifl-grid__action-menu-item", { "shifl-grid__action-menu-item--danger": t.danger }]),
+            onClick: () => zt(t, fe.value, E(V).rowIndex)
           }, [
-            t.icon && typeof t.icon == "string" ? (s(), a("span", {
+            t.icon && typeof t.icon == "string" ? (a(), u("span", {
               key: 0,
               innerHTML: t.icon,
               class: "w-4 h-4 inline-block"
-            }, null, 8, Bn)) : t.icon ? (s(), R(pe(typeof t.icon == "function" ? t.icon() : t.icon), {
+            }, null, 8, yr)) : t.icon ? (a(), G(ae(typeof t.icon == "function" ? t.icon() : t.icon), {
               key: 1,
               class: "w-4 h-4"
-            })) : P("", !0),
-            u("span", null, b(t.label), 1)
-          ], 10, Gn))), 128))
-        ], 4)) : P("", !0)
+            })) : D("", !0),
+            h("span", null, L(t.label), 1)
+          ], 10, _r))), 128))
+        ], 4)) : D("", !0)
       ])),
-      he(Dt, {
-        content: be.value,
-        visible: te.value,
-        "trigger-element": ne.value
+      Pe(dn, {
+        content: Re.value,
+        visible: de.value,
+        "trigger-element": ge.value
       }, null, 8, ["content", "visible", "trigger-element"]),
-      (s(), R(me, { to: "body" }, [
-        Q.value ? (s(), R(Vt, {
+      (a(), G(Ae, { to: "body" }, [
+        Y.value ? (a(), G(un, {
           key: 0,
-          "title-prefix": r.config.name,
-          columns: st.value,
-          onClose: n[2] || (n[2] = (t) => Q.value = !1),
-          onToggle: S(x),
-          onToggleFrozen: S(f),
-          onMove: S(g),
-          onSelectAll: n[3] || (n[3] = (t) => S(h)(!0)),
-          onDeselectAll: n[4] || (n[4] = (t) => S(h)(!1)),
-          onRestoreDefault: S(L)
-        }, null, 8, ["title-prefix", "columns", "onToggle", "onToggleFrozen", "onMove", "onRestoreDefault"])) : P("", !0)
+          "title-prefix": o.config.name,
+          columns: At.value,
+          onClose: n[3] || (n[3] = (t) => Y.value = !1),
+          onToggle: E(C),
+          onToggleFreeze: E(m),
+          onMove: E(S),
+          onSelectAll: n[4] || (n[4] = (t) => E(l)(!0)),
+          onDeselectAll: n[5] || (n[5] = (t) => E(l)(!1)),
+          onRestoreDefault: E(N)
+        }, null, 8, ["title-prefix", "columns", "onToggle", "onToggleFreeze", "onMove", "onRestoreDefault"])) : D("", !0)
       ]))
     ]));
   }
-}), Fn = {
-  install(r) {
-    r.component("ShiflGrid", Nn);
+}), wr = {
+  install(o) {
+    o.component("ShiflGrid", br);
   }
 };
-function jn(r) {
-  return {
-    rows: r.rows
-  };
-}
-function Kn() {
-  const r = k(/* @__PURE__ */ new Set());
-  function c(l) {
-    const m = l.id ?? JSON.stringify(l), d = new Set(r.value);
-    d.has(m) ? d.delete(m) : d.add(m), r.value = d;
+function Mr() {
+  const o = k(/* @__PURE__ */ new Set());
+  function s(g) {
+    const _ = g.id ?? JSON.stringify(g), c = new Set(o.value);
+    c.has(_) ? c.delete(_) : c.add(_), o.value = c;
   }
   return {
-    selectedKeys: r,
-    toggleRow: c
+    selectedKeys: o,
+    toggleRow: s
   };
 }
-function Yn() {
+function Sr() {
   return {
     // placeholder
   };
 }
-const ze = Symbol("shifl-grid-theme"), He = {
+const Qe = Symbol("shifl-grid-theme"), Xe = {
   surface: "var(--shifl-surface)",
   surfaceAlt: "var(--shifl-surface-alt)",
   border: "var(--shifl-border)",
@@ -1082,61 +1462,61 @@ const ze = Symbol("shifl-grid-theme"), He = {
   accentStrong: "var(--shifl-accent-strong)",
   focus: "var(--shifl-focus)"
 };
-function Xn(r) {
-  const c = k({ ...He, ...r });
-  return ht(ze, c), c;
+function Tr(o) {
+  const s = k({ ...Xe, ...o });
+  return Vt(Qe, s), s;
 }
-function qn() {
-  const r = pt(ze);
-  return v(() => (r == null ? void 0 : r.value) ?? He);
+function Pr() {
+  const o = Bt(Qe);
+  return b(() => (o == null ? void 0 : o.value) ?? Xe);
 }
-const ve = {
+const $e = {
   sm: 640,
   lg: 1024
 };
-function Jn() {
-  const r = k(typeof window < "u" ? window.innerWidth : 0);
-  function c() {
-    r.value = window.innerWidth;
+function $r() {
+  const o = k(typeof window < "u" ? window.innerWidth : 0);
+  function s() {
+    o.value = window.innerWidth;
   }
-  return X(() => {
-    window.addEventListener("resize", c);
-  }), q(() => {
-    window.removeEventListener("resize", c);
+  return le(() => {
+    window.addEventListener("resize", s);
+  }), ue(() => {
+    window.removeEventListener("resize", s);
   }), {
-    width: r,
-    isMobile: v(() => r.value < ve.sm),
-    isTablet: v(() => r.value >= ve.sm && r.value < ve.lg)
+    width: o,
+    isMobile: b(() => o.value < $e.sm),
+    isTablet: b(() => o.value >= $e.sm && o.value < $e.lg)
   };
 }
-function Un() {
+function Lr() {
   return {
     // placeholder
   };
 }
-function Qn() {
+function Ar() {
   return {
     // placeholder
   };
 }
-function ei() {
+function xr() {
   return {
     // placeholder
   };
 }
 export {
-  Nn as ShiflGrid,
-  Fn as ShiflGridPlugin,
-  Xn as provideGridTheme,
-  Jn as useBreakpoints,
-  mt as useGridColumns,
-  jn as useGridData,
-  Yn as useGridEditing,
-  Ct as useGridFilter,
-  Un as useGridInfiniteScroll,
-  Kn as useGridSelection,
-  _t as useGridSort,
-  qn as useGridTheme,
-  ei as useGridTour,
-  Qn as useVirtualScroll
+  br as ShiflGrid,
+  wr as ShiflGridPlugin,
+  Tr as provideGridTheme,
+  $r as useBreakpoints,
+  Gt as useGridColumns,
+  Wt as useGridData,
+  Sr as useGridEditing,
+  Ot as useGridFilter,
+  Lr as useGridInfiniteScroll,
+  Mr as useGridSelection,
+  Zt as useGridSort,
+  Pr as useGridTheme,
+  xr as useGridTour,
+  Ar as useVirtualScroll
 };