vs-datatable 0.1.0 → 0.2.0

package/dist/vs-datatable.es.js

@@ -1,17 +1,11 @@
-import { defineComponent as H, computed as p, createElementBlock as i, openBlock as r, createElementVNode as o, createCommentVNode as k, normalizeClass as w, Fragment as R, renderList as L, toDisplayString as y, normalizeStyle as E, useAttrs as K, ref as A, resolveComponent as Q, createBlock as J, withCtx as W, renderSlot as M, createVNode as D, unref as X, withModifiers as Y, withDirectives as ee, vModelCheckbox as te, createTextVNode as se } from "vue";
-import './index.css';const ae = { ref: "vsPagination" }, oe = ["id"], le = { class: "page-item" }, ne = ["disabled"], re = {
-  key: 0,
-  class: "page-item d-flex"
-}, ie = {
-  key: 0,
-  class: "page-link disabled"
-}, de = ["id", "onClick"], ce = {
+import { defineComponent as K, computed as v, createElementBlock as n, openBlock as r, createElementVNode as o, createCommentVNode as k, Fragment as M, renderList as D, normalizeClass as w, toDisplayString as b, useAttrs as W, ref as I, watch as X, createVNode as Z, renderSlot as _, normalizeStyle as Y, withModifiers as ee, withDirectives as te, vModelCheckbox as se, createTextVNode as ae } from "vue";
+import './index.css';const le = ["id"], oe = ["disabled"], ne = {
   key: 1,
-  class: "page-item d-flex"
-}, ue = {
-  key: 0,
-  class: "page-link me-2 disabled"
-}, pe = { class: "page-item" }, ve = ["disabled"], fe = /* @__PURE__ */ H({
+  class: "vs-pagination-ellipsis"
+}, re = ["id", "onClick"], ie = {
+  key: 2,
+  class: "vs-pagination-ellipsis"
+}, de = ["disabled"], ce = /* @__PURE__ */ K({
   __name: "VsPagination",
   props: {
     modelValue: {},
@@ -22,170 +16,124 @@ import './index.css';const ae = { ref: "vsPagination" }, oe = ["id"], le = { cla
     paginationClass: {}
   },
   emits: ["update:modelValue", "page-changed"],
-  setup(e, { emit: b }) {
-    const t = e, c = b, h = t.maxVisible ?? 3, d = p({
-      get: () => t.modelValue,
-      set: (m) => {
-        c("update:modelValue", m), c("page-changed", m);
+  setup(l, { emit: C }) {
+    const s = l, c = C, g = s.maxVisible ?? 3, d = v({
+      get: () => s.modelValue,
+      set: (p) => {
+        c("update:modelValue", p), c("page-changed", p);
       }
-    }), x = p(() => d.value <= Math.floor(h / 2) ? 1 : d.value >= u.value - Math.floor(h / 2) ? Math.max(u.value - h + 1, 1) : d.value - Math.floor(h / 2)), $ = p(() => Math.min(x.value + h - 1, u.value)), u = p(() => Math.ceil(t.totalRecords / t.rowsPerPage)), P = p(() => {
-      const m = [];
-      for (let g = x.value; g <= $.value; g++)
-        m.push(g);
-      return m;
-    }), V = (m) => {
-      m >= 1 && m <= u.value && (d.value = m);
-    }, I = () => {
+    }), x = v(() => d.value <= Math.floor(g / 2) ? 1 : d.value >= f.value - Math.floor(g / 2) ? Math.max(f.value - g + 1, 1) : d.value - Math.floor(g / 2)), y = v(() => Math.min(x.value + g - 1, f.value)), f = v(() => Math.ceil(s.totalRecords / s.rowsPerPage)), $ = v(() => {
+      const p = [];
+      for (let h = x.value; h <= y.value; h++)
+        p.push(h);
+      return p;
+    }), V = (p) => {
+      p >= 1 && p <= f.value && (d.value = p);
+    }, O = () => {
       d.value > 1 && d.value--;
-    }, C = () => {
-      d.value < u.value && d.value++;
+    }, R = () => {
+      d.value < f.value && d.value++;
     };
-    return (m, g) => (r(), i("div", ae, [
-      o("ul", {
-        class: "pagination pagination-sm mb-0 justify-content-center text-center",
-        id: e.tablename + "-paginate-parent"
-      }, [
-        o("li", le, [
-          o("button", {
-            onClick: I,
-            type: "button",
-            class: w([e.tablename + "-paginate-navigators page-link", { disabled: d.value === 1 }]),
-            disabled: d.value === 1
-          }, " << ", 10, ne)
+    return (p, h) => (r(), n("div", {
+      class: "vs-pagination",
+      id: l.tablename + "-pagination"
+    }, [
+      o("button", {
+        onClick: O,
+        type: "button",
+        class: "vs-pagination-button vs-pagination-nav",
+        disabled: d.value === 1
+      }, " ‹‹ ", 8, oe),
+      x.value > 1 ? (r(), n("button", {
+        key: 0,
+        type: "button",
+        class: "vs-pagination-button",
+        onClick: h[0] || (h[0] = (m) => V(1))
+      }, " 1 ")) : k("", !0),
+      x.value > 2 ? (r(), n("span", ne, "...")) : k("", !0),
+      (r(!0), n(M, null, D($.value, (m) => (r(), n("button", {
+        key: m,
+        type: "button",
+        class: w([
+          "vs-pagination-button",
+          { "vs-active": d.value === m }
         ]),
-        x.value > 1 ? (r(), i("li", re, [
-          o("button", {
-            type: "button",
-            class: "page-link me-2",
-            onClick: g[0] || (g[0] = (_) => V(1))
-          }, "1"),
-          x.value > 2 ? (r(), i("span", ie, "...")) : k("", !0)
-        ])) : k("", !0),
-        (r(!0), i(R, null, L(P.value, (_) => (r(), i("li", {
-          key: _,
-          class: "page-item"
-        }, [
-          o("button", {
-            type: "button",
-            class: w([d.value === _ ? "active" : "", "page-link", e.tablename + "-paginate-button"]),
-            id: e.tablename + "-navigateButton-" + _,
-            onClick: (T) => V(_)
-          }, y(_), 11, de)
-        ]))), 128)),
-        $.value < u.value ? (r(), i("li", ce, [
-          $.value < u.value - 1 ? (r(), i("span", ue, "...")) : k("", !0),
-          o("button", {
-            type: "button",
-            class: "page-link",
-            onClick: g[1] || (g[1] = (_) => V(u.value))
-          }, y(u.value), 1)
-        ])) : k("", !0),
-        o("li", pe, [
-          o("button", {
-            onClick: C,
-            type: "button",
-            class: w([e.tablename + "-paginate-navigators page-link", { disabled: d.value === u.value }]),
-            disabled: d.value === u.value
-          }, " >> ", 10, ve)
-        ])
-      ], 8, oe)
-    ], 512));
+        id: l.tablename + "-page-" + m,
+        onClick: (N) => V(m)
+      }, b(m), 11, re))), 128)),
+      y.value < f.value - 1 ? (r(), n("span", ie, "...")) : k("", !0),
+      y.value < f.value ? (r(), n("button", {
+        key: 3,
+        type: "button",
+        class: "vs-pagination-button",
+        onClick: h[1] || (h[1] = (m) => V(f.value))
+      }, b(f.value), 1)) : k("", !0),
+      o("button", {
+        onClick: R,
+        type: "button",
+        class: "vs-pagination-button vs-pagination-nav",
+        disabled: d.value === f.value
+      }, " ›› ", 8, de)
+    ], 8, le));
   }
-}), G = (e, b) => {
-  const t = e.__vccOpts || e;
-  for (const [c, h] of b)
-    t[c] = h;
-  return t;
-}, he = /* @__PURE__ */ G(fe, [["__scopeId", "data-v-126f4cdf"]]), me = { class: "flex-fill position-relative" }, ge = { class: "input-group" }, be = ["placeholder", "value"], _e = /* @__PURE__ */ H({
+}), j = (l, C) => {
+  const s = l.__vccOpts || l;
+  for (const [c, g] of C)
+    s[c] = g;
+  return s;
+}, ue = /* @__PURE__ */ j(ce, [["__scopeId", "data-v-a6d89ca2"]]), ve = { class: "vs-search" }, he = ["placeholder", "value"], pe = /* @__PURE__ */ K({
   __name: "VsSearch",
   props: {
     modelValue: {},
     placeholder: {}
   },
   emits: ["update:modelValue", "input-typed"],
-  setup(e, { emit: b }) {
-    const t = b, c = (h) => {
-      const d = h.target;
-      t("update:modelValue", d.value), t("input-typed", d.value);
+  setup(l, { emit: C }) {
+    const s = C, c = (g) => {
+      const d = g.target;
+      s("update:modelValue", d.value), s("input-typed", d.value);
     };
-    return (h, d) => (r(), i("div", me, [
-      o("div", ge, [
-        d[0] || (d[0] = o("div", {
-          class: "input-group-text position-absolute top-0 bottom-0 bg-none border-0",
-          style: { "z-index": "1020" }
+    return (g, d) => (r(), n("div", ve, [
+      d[0] || (d[0] = o("div", { class: "vs-search-icon" }, [
+        o("svg", {
+          viewBox: "0 0 24 24",
+          fill: "currentColor"
         }, [
-          o("i", { class: "fa fa-search opacity-5" })
-        ], -1)),
-        o("input", {
-          type: "text",
-          class: "form-control ps-35px",
-          placeholder: e.placeholder,
-          value: e.modelValue,
-          onInput: c
-        }, null, 40, be)
-      ])
-    ]));
-  }
-}), ke = /* @__PURE__ */ H({
-  __name: "Loader",
-  props: {
-    height: { default: "50px" }
-  },
-  setup(e) {
-    return (b, t) => (r(), i("div", null, [
-      o("div", {
-        class: "loader",
-        style: E({ height: e.height })
-      }, null, 4)
+          o("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" })
+        ])
+      ], -1)),
+      o("input", {
+        type: "text",
+        class: "vs-search-input",
+        placeholder: l.placeholder,
+        value: l.modelValue,
+        onInput: c
+      }, null, 40, he)
     ]));
   }
-}), ye = /* @__PURE__ */ G(ke, [["__scopeId", "data-v-6ad4d2c7"]]), xe = (e, b = "") => `
-      <svg width="60pt" height="60pt" id="Layer__${e}" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70">
-          <defs>
-              <linearGradient id="no-data__rfq_${e}" x1="40.1" y1="64.17" x2="40.1" y2="5.83" gradientUnits="userSpaceOnUse">
-                  <stop offset="0" stop-color="#969698" stop-opacity="0.1" />
-                  <stop offset="1" stop-color="#869ac0" stop-opacity="0.25" />
-              </linearGradient>
-              <linearGradient id="no-data__rfq-2_${e}" x1="176.51" y1="-169.09" x2="196.67" y2="-169.09" gradientTransform="matrix(0.73, 0, 0, -0.73, -125.67, -73.17)" gradientUnits="userSpaceOnUse">
-                  <stop offset="0" stop-color="#969698" />
-                  <stop offset="1" stop-color="#869ac0" />
-              </linearGradient>
-              <linearGradient id="no-data__rfq-3_${e}" x1="187.34" y1="-148.34" x2="227.34" y2="-148.34" xlink:href="#no-data__rfq-2_${e}" />
-          </defs>
-          <path d="M61.25,20.42H46.67V5.83Z" fill="#929aa5" opacity="0.5" style="isolation:isolate" />
-          <path d="M19,5.83H46.67L61.25,20.42V64.17H19ZM54,27H26.25V29.9H54Zm0,6.56H26.25v2.92H54ZM26.25,40.1H54V43H26.25Zm0,6.57H54v2.91H26.25Z" fill-rule="evenodd" fill="url(#no-data__rfq_${e})" />
-          <path d="M3,53.35,13.62,42.78l4.12,4.13L7.17,57.48,3,53.35Z" fill-rule="evenodd" fill="url(#no-data__rfq-2_${e})" />
-          <path d="M37.19,35A11.67,11.67,0,1,0,25.52,46.67,11.68,11.68,0,0,0,37.19,35Zm2.91,0A14.58,14.58,0,1,0,25.52,49.58,14.58,14.58,0,0,0,40.1,35Z" fill-rule="evenodd" fill="url(#no-data__rfq-3_${e})" />
-      </svg>
-      <div class="fs-5 fw-700 text-fmdqgray">${b}</div>
-    `, we = { class: "card-body p-4 vs-table-card-body" }, $e = {
+}), ge = { class: "vs-datatable" }, fe = {
   key: 0,
-  class: "input-group mb-4"
-}, Ve = { class: "flex-fill position-relative" }, Pe = { class: "input-group" }, Ce = {
+  class: "vs-search-container"
+}, be = {
   ref: "tableResponsiveRef",
-  class: "table-responsive"
-}, Oe = {
+  class: "vs-table-wrapper"
+}, me = {
   key: 0,
+  class: "vs-checkbox-column",
   style: { width: "5%" }
-}, Se = { class: "form-check mb-2px" }, Me = ["id", "checked"], Re = ["for"], Le = ["onClick"], He = { class: "d-inline-flex align-items-center gap-1" }, Ie = {
+}, we = { class: "vs-checkbox" }, ye = ["id", "checked"], ke = ["for"], Ce = ["onClick"], xe = { class: "vs-header-content" }, Ve = { class: "vs-header-label" }, Pe = {
   key: 0,
-  class: "sort-container flex-column"
-}, Te = {
+  class: "vs-sort-icons"
+}, Se = {
   key: 1,
-  class: "badge bg-secondary sort-badge"
-}, Be = { key: 0 }, Ze = {
-  colspan: "100%",
-  class: "text-center"
-}, qe = { key: 1 }, Ue = {
-  colspan: "100%",
-  class: "text-center"
-}, Ae = ["innerHTML"], De = ["onClick"], Ge = { class: "form-check mb-2px" }, Ne = ["id", "value"], ze = ["for"], Ee = { class: "d-md-flex align-items-center mt-1" }, je = {
+  class: "vs-sort-priority"
+}, $e = { key: 0 }, Oe = ["colspan"], Re = { key: 1 }, Te = ["colspan"], Ie = { class: "vs-no-data-message" }, _e = { class: "vs-no-data-description" }, Me = ["onClick"], De = { class: "vs-checkbox" }, Be = ["id", "value"], Le = ["for"], ze = { class: "vs-table-footer" }, He = {
   key: 0,
-  class: "me-md-auto text-md-left text-center mb-2 mb-md-0"
-}, Fe = {
+  class: "vs-table-info"
+}, Ke = {
   key: 1,
-  class: "me-md-auto"
-}, Ke = /* @__PURE__ */ H({
+  class: "vs-table-info"
+}, Ne = /* @__PURE__ */ K({
   __name: "VsDataTable",
   props: {
     rows: { default: () => [] },
@@ -201,207 +149,253 @@ import './index.css';const ae = { ref: "vsPagination" }, oe = ["id"], le = { cla
     showSearch: { type: Boolean, default: !0 },
     tableClass: {},
     rowClass: {},
-    showRowEntries: { type: Boolean, default: !0 }
+    showRowEntries: { type: Boolean, default: !0 },
+    containerClass: {},
+    headerClass: {},
+    cellClass: {},
+    searchClass: {},
+    paginationClass: {},
+    searchPlaceholder: { default: "Search..." },
+    loadingText: { default: "Loading..." },
+    noDataText: { default: "No data available" },
+    noDataDescription: { default: "Try adjusting your search criteria" },
+    entriesText: { default: "entries" },
+    maxVisiblePages: { default: 5 },
+    rowKey: { type: [String, Function], default: "id" }
   },
-  emits: ["update:itemSelected", "update:serverItemsLength", "update:serverOptions", "input-typed", "page-updated", "sort-changed", "row-click"],
-  setup(e, { emit: b }) {
-    const t = e, c = b, h = K(), d = p(() => !!h.onRowClick);
-    function x(s, l) {
-      return l.split(".").reduce((n, a) => n?.[a], s) ?? "";
+  emits: ["update:itemSelected", "update:serverItemsLength", "update:serverOptions", "update:sort", "input-typed", "page-updated", "sort-changed", "row-click"],
+  setup(l, { emit: C }) {
+    const s = l, c = C, g = W(), d = v(() => !!g.onRowClick), x = v(() => s.columns.length + (z.value ? 1 : 0)), y = (t, a) => typeof s.rowKey == "function" ? s.rowKey(t, a) : t[s.rowKey] || a, f = (t) => P.value.some((a) => y(a, -1) === y(t, -1));
+    function $(t, a) {
+      return a.split(".").reduce((e, i) => e?.[i], t) ?? "";
     }
-    const $ = (s) => t.serverOptions?.sort?.some((l) => l.field === s), u = (s) => {
-      const l = t.serverOptions?.sort?.find((n) => n.field === s);
-      return l ? l.priority ?? null : null;
-    }, P = (s) => t.serverOptions?.sort?.find((l) => l.field === s)?.order ?? null, V = p(() => {
-      const s = t.serverOptions?.sort ?? [];
-      if (!s.length) return t.rows;
-      const l = (n, a) => a.split(".").reduce((v, f) => v?.[f], n) ?? "";
-      return [...t.rows].sort((n, a) => {
-        for (const { field: v, order: f } of s) {
-          const q = l(n, v), U = l(a, v);
-          if (q !== U)
-            return f === "asc" ? q > U ? 1 : -1 : q < U ? 1 : -1;
+    const V = (t) => h.value.some((a) => a.field === t), O = (t) => {
+      const a = h.value.find((e) => e.field === t);
+      return a ? a.priority ?? null : null;
+    }, R = (t) => h.value.find((a) => a.field === t)?.order ?? null, p = I(s.sort ?? []);
+    X(
+      () => s.sort,
+      (t) => {
+        t && (p.value = [...t]);
+      },
+      { deep: !0 }
+    );
+    const h = v(() => s.serverOptions?.sort ?? p.value ?? []), m = v(() => {
+      if (!h.value.length) return s.rows;
+      const t = (a, e) => e.split(".").reduce((i, u) => i?.[u], a) ?? "";
+      return [...s.rows].sort((a, e) => {
+        for (const { field: i, order: u } of h.value) {
+          const S = t(a, i), H = t(e, i);
+          if (S !== H)
+            return u === "asc" ? S > H ? 1 : -1 : S < H ? 1 : -1;
         }
         return 0;
       });
-    }), I = (s, l) => {
-      if (!t.serverOptions) return;
-      let n = [...t.serverOptions.sort || []];
-      const a = n.findIndex((v) => v.field === s);
-      l.shiftKey ? a === -1 ? n.push({ field: s, order: "asc" }) : n[a]?.order === "asc" ? n[a].order = "desc" : n.splice(a, 1) : a === -1 ? n = [{ field: s, order: "asc" }] : n[a]?.order === "asc" ? n = [{ field: s, order: "desc" }] : n = [], n = n.map((v, f) => ({ ...v, priority: f + 1 })), c("update:serverOptions", { ...t.serverOptions, sort: n }), c("sort-changed", { sort: n });
-    }, C = A(""), m = (s) => c("input-typed", s), g = A(10), _ = p({
-      get: () => t.serverOptions?.rowsPerPage ?? g.value,
-      set: (s) => {
-        t.serverOptions ? c("update:serverOptions", { ...t.serverOptions, rowsPerPage: s }) : g.value = s;
+    }), N = (t, a) => {
+      let e = [...h.value];
+      const i = e.findIndex((u) => u.field === t);
+      a.shiftKey ? i === -1 ? e.push({ field: t, order: "asc" }) : e[i]?.order === "asc" ? e[i].order = "desc" : e.splice(i, 1) : i === -1 ? e = [{ field: t, order: "asc" }] : e[i]?.order === "asc" ? e = [{ field: t, order: "desc" }] : e = [], e = e.map((u, S) => ({ ...u, priority: S + 1 })), s.serverOptions ? c("update:serverOptions", { ...s.serverOptions, sort: e }) : (p.value = e, c("update:sort", e), c("sort-changed", { sort: e }));
+    }, A = I(""), Q = (t) => c("input-typed", t), E = I(10), q = v({
+      get: () => s.serverOptions?.rowsPerPage ?? E.value,
+      set: (t) => {
+        s.serverOptions ? c("update:serverOptions", { ...s.serverOptions, rowsPerPage: t }) : E.value = t;
       }
-    }), T = A(1), B = p({
-      get: () => t.serverItemsLength !== void 0 ? t.serverItemsLength : t.rows.length,
-      set: (s) => {
-        t.serverItemsLength !== void 0 && c("update:serverItemsLength", s);
+    }), U = I(1), B = v({
+      get: () => s.serverItemsLength !== void 0 ? s.serverItemsLength : s.rows.length,
+      set: (t) => {
+        s.serverItemsLength !== void 0 && c("update:serverItemsLength", t);
       }
-    }), O = p({
-      get: () => t.serverOptions?.page ?? T.value,
-      set: (s) => {
-        t.serverOptions ? c("update:serverOptions", { ...t.serverOptions, page: s }) : T.value = s;
+    }), T = v({
+      get: () => s.serverOptions?.page ?? U.value,
+      set: (t) => {
+        s.serverOptions ? c("update:serverOptions", { ...s.serverOptions, page: t }) : U.value = t;
       }
-    }), j = (s) => {
-      t.serverOptions && c("update:serverOptions", { ...t.serverOptions, page: s }), c("page-updated", s);
-    }, Z = p(() => {
-      const s = t.serverOptions?.rowsPerPage ?? 10, l = (O.value - 1) * s + 1, n = Math.min(O.value * s, B.value);
-      return { start: l, end: n };
-    }), S = p({
-      get: () => t.itemSelected || [],
-      set: (s) => c("update:itemSelected", s)
-    }), N = p(() => t.itemSelected !== null), z = p(() => t.rows.length > 0 && S.value.length === t.rows.length), F = () => {
-      S.value = z.value ? [] : [...t.rows];
+    }), G = (t) => {
+      s.serverOptions && c("update:serverOptions", { ...s.serverOptions, page: t }), c("page-updated", t);
+    }, L = v(() => {
+      const t = s.serverOptions?.rowsPerPage ?? 10, a = (T.value - 1) * t + 1, e = Math.min(T.value * t, B.value);
+      return { start: a, end: e };
+    }), P = v({
+      get: () => s.itemSelected || [],
+      set: (t) => c("update:itemSelected", t)
+    }), z = v(() => s.itemSelected !== null), F = v(
+      () => s.rows.length > 0 && P.value.length === s.rows.length
+    ), J = () => {
+      P.value = F.value ? [] : [...s.rows];
     };
-    return (s, l) => {
-      const n = Q("card");
-      return r(), J(n, { class: "vs-table-card mb-3" }, {
-        default: W(() => [
-          o("div", we, [
-            e.showSearch ? (r(), i("div", $e, [
-              o("div", Ve, [
-                o("div", Pe, [
-                  D(_e, {
-                    modelValue: C.value,
-                    "onUpdate:modelValue": l[0] || (l[0] = (a) => C.value = a),
-                    onInputTyped: m,
-                    placeholder: "Search products"
-                  }, null, 8, ["modelValue"]),
-                  l[4] || (l[4] = o("div", {
-                    class: "input-group-text position-absolute top-0 bottom-0 bg-none border-0",
-                    style: { "z-index": "1020" }
-                  }, [
-                    o("i", { class: "fa fa-search opacity-5" })
-                  ], -1))
-                ])
-              ]),
-              M(s.$slots, "filterArea", {}, void 0, !0)
-            ])) : k("", !0),
-            o("div", Ce, [
-              o("table", {
-                class: w(["table table-hover text-nowrap vs-table", e.tableClass])
-              }, [
-                o("thead", null, [
-                  o("tr", null, [
-                    N.value ? (r(), i("th", Oe, [
-                      o("div", Se, [
-                        o("input", {
-                          type: "checkbox",
-                          class: "form-check-input",
-                          id: e.tablename + "-main-checkbox",
-                          checked: z.value,
-                          onChange: F
-                        }, null, 40, Me),
-                        o("label", {
-                          class: "form-check-label pt-1px",
-                          for: e.tablename + "-main-checkbox"
-                        }, null, 8, Re)
-                      ])
-                    ])) : k("", !0),
-                    (r(!0), i(R, null, L(e.columns, (a) => (r(), i("th", {
-                      key: a.field,
-                      onClick: (v) => a.sortable ? I(a.field, v) : null,
-                      style: E({ width: a.width + "%", cursor: a.sortable ? "pointer" : "default" }),
-                      class: "border-top-0 pt-0 pb-2"
-                    }, [
-                      M(s.$slots, `header-${a.field}`, {}, () => [
-                        o("div", He, [
-                          o("span", null, y(a.label), 1),
-                          a.sortable ? (r(), i("span", Ie, [
-                            o("i", {
-                              class: w(["fa fa-sort-up sort-icon", { "active-asc": $(a.field) && P(a.field) === "asc" }])
-                            }, null, 2),
-                            o("i", {
-                              class: w(["fa fa-sort-down sort-icon", { "active-desc": $(a.field) && P(a.field) === "desc" }])
-                            }, null, 2)
-                          ])) : k("", !0),
-                          u(a.field) !== null ? (r(), i("span", Te, y(u(a.field)), 1)) : k("", !0)
-                        ])
-                      ], !0)
-                    ], 12, Le))), 128))
+    return (t, a) => (r(), n("div", ge, [
+      l.showSearch ? (r(), n("div", fe, [
+        Z(pe, {
+          modelValue: A.value,
+          "onUpdate:modelValue": a[0] || (a[0] = (e) => A.value = e),
+          onInputTyped: Q,
+          placeholder: l.searchPlaceholder,
+          class: w(l.searchClass)
+        }, null, 8, ["modelValue", "placeholder", "class"]),
+        _(t.$slots, "filterArea", {}, void 0, !0)
+      ])) : k("", !0),
+      o("div", {
+        class: w(["vs-table-container", l.containerClass])
+      }, [
+        o("div", be, [
+          o("table", {
+            class: w(["vs-table", l.tableClass])
+          }, [
+            o("thead", null, [
+              o("tr", null, [
+                z.value ? (r(), n("th", me, [
+                  o("div", we, [
+                    o("input", {
+                      type: "checkbox",
+                      id: l.tablename + "-main-checkbox",
+                      checked: F.value,
+                      onChange: J
+                    }, null, 40, ye),
+                    o("label", {
+                      for: l.tablename + "-main-checkbox"
+                    }, null, 8, ke)
                   ])
-                ]),
-                o("tbody", null, [
-                  e.loading ? (r(), i("tr", Be, [
-                    o("td", Ze, [
-                      D(ye)
+                ])) : k("", !0),
+                (r(!0), n(M, null, D(l.columns, (e) => (r(), n("th", {
+                  key: e.field,
+                  onClick: (i) => e.sortable ? N(e.field, i) : null,
+                  style: Y({ width: e.width + "%" }),
+                  class: w([e.sortable ? "vs-sortable" : "", l.headerClass])
+                }, [
+                  _(t.$slots, `header-${e.field}`, { column: e }, () => [
+                    o("div", xe, [
+                      o("span", Ve, b(e.label), 1),
+                      e.sortable ? (r(), n("div", Pe, [
+                        o("span", {
+                          class: w(["vs-sort-icon vs-sort-asc", {
+                            "vs-active": V(e.field) && R(e.field) === "asc"
+                          }])
+                        }, [...a[4] || (a[4] = [
+                          o("svg", {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            height: "24px",
+                            viewBox: "0 -960 960 960",
+                            width: "24px"
+                          }, [
+                            o("path", { d: "m280-400 200-200 200 200H280Z" })
+                          ], -1)
+                        ])], 2),
+                        o("span", {
+                          class: w(["vs-sort-icon vs-sort-desc", {
+                            "vs-active": V(e.field) && R(e.field) === "desc"
+                          }])
+                        }, [...a[5] || (a[5] = [
+                          o("svg", {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            height: "24px",
+                            viewBox: "0 -960 960 960",
+                            width: "24px"
+                          }, [
+                            o("path", { d: "M480-360 280-560h400L480-360Z" })
+                          ], -1)
+                        ])], 2)
+                      ])) : k("", !0),
+                      O(e.field) !== null ? (r(), n("span", Se, b(O(e.field)), 1)) : k("", !0)
                     ])
-                  ])) : V.value.length ? (r(!0), i(R, { key: 2 }, L(V.value, (a, v) => (r(), i("tr", {
-                    key: v,
-                    class: w([e.rowClass, { "cursor-pointer": d.value }]),
-                    onClick: (f) => s.$emit("row-click", a, v)
-                  }, [
-                    N.value ? (r(), i("td", {
-                      key: 0,
-                      onClick: l[2] || (l[2] = Y(() => {
-                      }, ["stop"]))
-                    }, [
-                      o("div", Ge, [
-                        ee(o("input", {
-                          type: "checkbox",
-                          class: "form-check-input",
-                          id: e.tablename + "-checkbox-" + a.id,
-                          value: a,
-                          "onUpdate:modelValue": l[1] || (l[1] = (f) => S.value = f)
-                        }, null, 8, Ne), [
-                          [te, S.value]
-                        ]),
-                        o("label", {
-                          class: "form-check-label pt-1px",
-                          for: e.tablename + "-checkbox-" + a.id
-                        }, null, 8, ze)
+                  ], !0)
+                ], 14, Ce))), 128))
+              ])
+            ]),
+            o("tbody", null, [
+              l.loading ? (r(), n("tr", $e, [
+                o("td", {
+                  colspan: x.value,
+                  class: "vs-loading"
+                }, [
+                  a[6] || (a[6] = o("div", { class: "vs-spinner" }, null, -1)),
+                  o("span", null, b(l.loadingText), 1)
+                ], 8, Oe)
+              ])) : m.value.length ? (r(!0), n(M, { key: 2 }, D(m.value, (e, i) => (r(), n("tr", {
+                key: y(e, i),
+                class: w([
+                  l.rowClass,
+                  { "vs-row-clickable": d.value },
+                  { "vs-row-selected": f(e) }
+                ]),
+                onClick: (u) => t.$emit("row-click", e, i)
+              }, [
+                z.value ? (r(), n("td", {
+                  key: 0,
+                  onClick: a[2] || (a[2] = ee(() => {
+                  }, ["stop"])),
+                  class: "vs-checkbox-column"
+                }, [
+                  o("div", De, [
+                    te(o("input", {
+                      type: "checkbox",
+                      id: l.tablename + "-checkbox-" + y(e, i),
+                      value: e,
+                      "onUpdate:modelValue": a[1] || (a[1] = (u) => P.value = u)
+                    }, null, 8, Be), [
+                      [se, P.value]
+                    ]),
+                    o("label", {
+                      for: l.tablename + "-checkbox-" + y(e, i)
+                    }, null, 8, Le)
+                  ])
+                ])) : k("", !0),
+                (r(!0), n(M, null, D(l.columns, (u) => (r(), n("td", {
+                  key: u.field,
+                  class: w(l.cellClass)
+                }, [
+                  _(t.$slots, `cell-${u.field}`, {
+                    item: e,
+                    value: $(e, u.field),
+                    column: u,
+                    index: i
+                  }, () => [
+                    ae(b($(e, u.field)), 1)
+                  ], !0)
+                ], 2))), 128))
+              ], 10, Me))), 128)) : (r(), n("tr", Re, [
+                o("td", {
+                  colspan: x.value,
+                  class: "vs-no-data"
+                }, [
+                  _(t.$slots, "no-data", {}, () => [
+                    a[7] || (a[7] = o("div", { class: "vs-no-data-icon" }, [
+                      o("svg", {
+                        viewBox: "0 0 24 24",
+                        fill: "currentColor"
+                      }, [
+                        o("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" })
                       ])
-                    ])) : k("", !0),
-                    (r(!0), i(R, null, L(e.columns, (f) => (r(), i("td", {
-                      key: f.field,
-                      class: "align-middle"
-                    }, [
-                      M(s.$slots, `cell-${f.field}`, {
-                        item: a,
-                        value: x(a, f.field)
-                      }, () => [
-                        se(y(x(a, f.field)), 1)
-                      ], !0)
-                    ]))), 128))
-                  ], 10, De))), 128)) : (r(), i("tr", qe, [
-                    o("td", Ue, [
-                      M(s.$slots, "no-data", {}, () => [
-                        o("div", {
-                          innerHTML: X(xe)("vs-table-no_data", "No data available")
-                        }, null, 8, Ae)
-                      ], !0)
-                    ])
-                  ]))
-                ])
-              ], 2)
-            ], 512),
-            o("div", Ee, [
-              e.showRowEntries ? (r(), i("div", je, " Showing " + y(Z.value.start < 1 ? 0 : Z.value.start) + " to " + y(Z.value.end) + " of " + y(B.value) + " entries ", 1)) : (r(), i("div", Fe)),
-              D(he, {
-                modelValue: O.value,
-                "onUpdate:modelValue": l[3] || (l[3] = (a) => O.value = a),
-                totalRecords: B.value,
-                rowsPerPage: _.value,
-                maxVisible: 3,
-                tablename: e.tablename,
-                class: "text-center",
-                onPageChanged: j
-              }, null, 8, ["modelValue", "totalRecords", "rowsPerPage", "tablename"])
+                    ], -1)),
+                    o("div", Ie, b(l.noDataText), 1),
+                    o("div", _e, b(l.noDataDescription), 1)
+                  ], !0)
+                ], 8, Te)
+              ]))
             ])
-          ])
-        ]),
-        _: 3
-      });
-    };
+          ], 2)
+        ], 512)
+      ], 2),
+      o("div", ze, [
+        l.showRowEntries ? (r(), n("div", He, "showing " + b(L.value.start < 1 ? 0 : L.value.start) + " - " + b(L.value.end) + " of " + b(B.value) + " " + b(l.entriesText), 1)) : (r(), n("div", Ke)),
+        Z(ue, {
+          modelValue: T.value,
+          "onUpdate:modelValue": a[3] || (a[3] = (e) => T.value = e),
+          totalRecords: B.value,
+          rowsPerPage: q.value,
+          maxVisible: l.maxVisiblePages,
+          tablename: l.tablename,
+          class: w(l.paginationClass),
+          onPageChanged: G
+        }, null, 8, ["modelValue", "totalRecords", "rowsPerPage", "maxVisible", "tablename", "class"])
+      ])
+    ]));
   }
-}), Qe = /* @__PURE__ */ G(Ke, [["__scopeId", "data-v-48b15b64"]]), We = {
-  install(e) {
-    e.component("VsDataTable", Qe);
+}), Ae = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-73862aa1"]]), Ue = {
+  install(l) {
+    l.component("VsDataTable", Ae);
   }
 };
 export {
-  Qe as VsDataTable,
-  We as default
+  Ae as VsDataTable,
+  Ue as default
 };