@indielayer/ui 1.15.2 → 1.16.0

package/docs/pages/component/table/usage.vue

@@ -78,9 +78,22 @@ const itemsSorted = computed<Book[]>(() => {
         <template #item-published="{ item }">
           {{ formatDate(item.published) }}
         </template>
+
         <template #item-status="{ item }">
           <x-tag size="xs" color="primary" rounded>{{ item.status }}</x-tag>
         </template>
+
+        <template #footer>
+          <tfoot>
+            <tr>
+              <td colspan="6" class="text-center py-2">
+                <p class="text-sm text-gray-500 font-medium">
+                  Footer content
+                </p>
+              </td>
+            </tr>
+          </tfoot>
+        </template>
       </x-table>
     </x-card>
 

package/lib/components/table/Table.vue.d.ts

@@ -300,6 +300,8 @@ declare const _default: <T>(__VLS_props: Partial<{
         item: number;
     }) => any>> & Partial<Record<string, (_: {
         item: T;
+    }) => any>> & Partial<Record<string, (_: {
+        header: TableHeader;
     }) => any>> & {
         title?(_: {}): any;
         actions?(_: {}): any;
@@ -308,6 +310,7 @@ declare const _default: <T>(__VLS_props: Partial<{
         "expanded-row"?(_: {
             item: T;
         }): any;
+        footer?(_: {}): any;
     };
     emit: {
         (e: 'update:sort', sortValues: string[]): void;
@@ -432,6 +435,8 @@ declare const _default: <T>(__VLS_props: Partial<{
         item: number;
     }) => any>> & Partial<Record<string, (_: {
         item: T;
+    }) => any>> & Partial<Record<string, (_: {
+        header: TableHeader;
     }) => any>> & {
         title?(_: {}): any;
         actions?(_: {}): any;
@@ -440,6 +445,7 @@ declare const _default: <T>(__VLS_props: Partial<{
         "expanded-row"?(_: {
             item: T;
         }): any;
+        footer?(_: {}): any;
     };
     emit: {
         (e: 'update:sort', sortValues: string[]): void;
@@ -567,6 +573,8 @@ declare const _default: <T>(__VLS_props: Partial<{
             item: number;
         }) => any>> & Partial<Record<string, (_: {
             item: T;
+        }) => any>> & Partial<Record<string, (_: {
+            header: TableHeader;
         }) => any>> & {
             title?(_: {}): any;
             actions?(_: {}): any;
@@ -575,6 +583,7 @@ declare const _default: <T>(__VLS_props: Partial<{
             "expanded-row"?(_: {
                 item: T;
             }): any;
+            footer?(_: {}): any;
         };
         emit: {
             (e: 'update:sort', sortValues: string[]): void;

package/lib/components/table/Table.vue.js

@@ -1,17 +1,17 @@
-import { defineComponent as re, mergeModels as X, useModel as se, ref as oe, computed as b, watch as ie, openBlock as s, createElementBlock as i, mergeProps as D, unref as c, renderSlot as p, createElementVNode as y, normalizeStyle as K, normalizeClass as m, createVNode as v, withCtx as f, createBlock as g, withModifiers as L, createCommentVNode as k, Fragment as S, renderList as C, createTextVNode as W, toDisplayString as q } from "vue";
-import { useTheme as ue } from "../../composables/useTheme.js";
-import { useVirtualList as de } from "../../composables/useVirtualList.js";
-import ce from "./TableHead.vue.js";
-import E from "./TableHeader.vue.js";
-import fe from "./TableBody.js";
-import G from "./TableRow.vue.js";
-import A from "./TableCell.vue.js";
-import pe from "../spinner/Spinner.vue.js";
-import ve from "../skeleton/Skeleton.vue.js";
-import ge from "../icon/Icon.vue.js";
-import J from "../checkbox/Checkbox.vue.js";
-import { chevronDownIcon as ye } from "../../common/icons.js";
-const me = { key: 1 }, he = ["colspan"], be = { key: 2 }, ke = ["colspan"], Se = ["onClick"], we = ["colspan"], $e = {
+import { defineComponent as oe, mergeModels as D, useModel as ie, ref as ue, computed as m, watch as de, useSlots as ce, openBlock as s, createElementBlock as i, mergeProps as W, unref as p, renderSlot as g, createElementVNode as h, normalizeStyle as K, normalizeClass as k, createVNode as v, withCtx as u, createBlock as d, withModifiers as L, createCommentVNode as y, Fragment as b, renderList as $, createTextVNode as j, toDisplayString as q } from "vue";
+import { useTheme as fe } from "../../composables/useTheme.js";
+import { useVirtualList as pe } from "../../composables/useVirtualList.js";
+import ge from "./TableHead.vue.js";
+import O from "./TableHeader.vue.js";
+import ve from "./TableBody.js";
+import E from "./TableRow.vue.js";
+import w from "./TableCell.vue.js";
+import ye from "../spinner/Spinner.vue.js";
+import me from "../skeleton/Skeleton.vue.js";
+import he from "../icon/Icon.vue.js";
+import G from "../checkbox/Checkbox.vue.js";
+import { chevronDownIcon as ke } from "../../common/icons.js";
+const be = { key: 1 }, we = ["colspan"], Se = { key: 2 }, $e = ["colspan"], Ce = ["onClick"], Be = ["colspan"], Fe = { key: 0 }, Le = {
   headers: {
     type: Array,
     default: () => []
@@ -65,10 +65,10 @@ const me = { key: 1 }, he = ["colspan"], be = { key: 2 }, ke = ["colspan"], Se =
   toFn: Function,
   hrefFn: Function,
   hrefTarget: String
-}, Ce = { name: "XTable" }, Ve = /* @__PURE__ */ re({
-  ...Ce,
-  props: /* @__PURE__ */ X({
-    ...$e,
+}, Ae = { name: "XTable" }, De = /* @__PURE__ */ oe({
+  ...Ae,
+  props: /* @__PURE__ */ D({
+    ...Le,
     items: {
       type: Array,
       default: () => []
@@ -80,10 +80,10 @@ const me = { key: 1 }, he = ["colspan"], be = { key: 2 }, ke = ["colspan"], Se =
     selected: {},
     selectedModifiers: {}
   }),
-  emits: /* @__PURE__ */ X(["update:sort", "click-row"], ["update:selected"]),
-  setup(u, { emit: Q }) {
-    const l = u, r = se(u, "selected"), w = oe(/* @__PURE__ */ new Map()), $ = b(() => l.items), { list: U, containerProps: Y, wrapperProps: Z } = de(
-      $,
+  emits: /* @__PURE__ */ D(["update:sort", "click-row"], ["update:selected"]),
+  setup(c, { emit: J }) {
+    const l = c, r = ie(c, "selected"), C = ue(/* @__PURE__ */ new Map()), B = m(() => l.items), { list: Q, containerProps: U, wrapperProps: Y } = pe(
+      B,
       {
         disabled: !l.virtualList,
         itemHeight: l.virtualListItemHeight || 54,
@@ -92,152 +92,152 @@ const me = { key: 1 }, he = ["colspan"], be = { key: 2 }, ke = ["colspan"], Se =
         overscan: l.virtualListOverscan
       }
     );
-    function d(e, a) {
+    function f(e, n) {
       if (!l.keyProp || !e || typeof e != "object" || e === null)
-        return a;
+        return n;
       const t = e[l.keyProp];
-      return t == null ? (console.warn(`[XTable] keyProp "${l.keyProp}" is undefined/null for item at index ${a}. Falling back to index.`), a) : typeof t != "string" && typeof t != "number" ? (console.warn(`[XTable] keyProp "${l.keyProp}" must be a string or number, got ${typeof t}. Falling back to index.`), a) : t;
+      return t == null ? (console.warn(`[XTable] keyProp "${l.keyProp}" is undefined/null for item at index ${n}. Falling back to index.`), n) : typeof t != "string" && typeof t != "number" ? (console.warn(`[XTable] keyProp "${l.keyProp}" must be a string or number, got ${typeof t}. Falling back to index.`), n) : t;
     }
-    function B(e) {
+    function F(e) {
       return e.index;
     }
-    const M = Q;
-    function j(e, a) {
+    const M = J;
+    function Z(e, n) {
       if (e)
-        for (let t = 0; t < a.length; t++) {
-          const { 0: n, 1: o } = a[t].split(",");
-          if (e === n)
+        for (let t = 0; t < n.length; t++) {
+          const { 0: a, 1: o } = n[t].split(",");
+          if (e === a)
             return parseInt(o) > 0 ? 1 : -1;
         }
     }
     function _(e) {
-      const a = l.sort.slice(0);
+      const n = l.sort.slice(0);
       let t = !1;
-      for (let n = 0; n < a.length; n++) {
-        const { 0: o, 1: h } = a[n].split(",");
+      for (let a = 0; a < n.length; a++) {
+        const { 0: o, 1: S } = n[a].split(",");
         if (o === e.value) {
-          if (t = !0, h === "-1") {
-            a.splice(n, 1, `${e.value},1`);
+          if (t = !0, S === "-1") {
+            n.splice(a, 1, `${e.value},1`);
             break;
-          } else if (h === "1") {
-            a.splice(n, 1);
+          } else if (S === "1") {
+            n.splice(a, 1);
             break;
           }
         }
       }
-      t || a.push(`${e.value},-1`), M("update:sort", a);
+      t || n.push(`${e.value},-1`), M("update:sort", n);
     }
-    const F = /* @__PURE__ */ new Map();
-    function ee(e, a) {
-      if (!a || !e)
+    const A = /* @__PURE__ */ new Map();
+    function ee(e, n) {
+      if (!n || !e)
         return "";
       let t;
-      return Array.isArray(a) ? t = a : F.has(a) ? t = F.get(a) : (t = a.match(/([^[.\]])+/g), t && F.set(a, t)), !t || t.length === 0 ? "" : t.reduce((o, h) => o == null || typeof o != "object" ? null : o[h], e) ?? "";
+      return Array.isArray(n) ? t = n : A.has(n) ? t = A.get(n) : (t = n.match(/([^[.\]])+/g), t && A.set(n, t)), !t || t.length === 0 ? "" : t.reduce((o, S) => o == null || typeof o != "object" ? null : o[S], e) ?? "";
     }
-    const x = b(() => l.selectable ? $.value.map((e, a) => d(e, a)) : []), O = b(() => !l.selectable || l.singleSelect ? /* @__PURE__ */ new Set() : Array.isArray(r.value) ? new Set(r.value) : /* @__PURE__ */ new Set()), V = b(() => {
+    const x = m(() => l.selectable ? B.value.map((e, n) => f(e, n)) : []), V = m(() => !l.selectable || l.singleSelect ? /* @__PURE__ */ new Set() : Array.isArray(r.value) ? new Set(r.value) : /* @__PURE__ */ new Set()), z = m(() => {
       if (!l.selectable || l.singleSelect || !Array.isArray(r.value) || r.value.length === 0)
         return !1;
       const e = x.value.length;
       return e === 0 ? !1 : r.value.length === e;
-    }), T = b(() => {
+    }), T = m(() => {
       if (!l.selectable || l.singleSelect || !Array.isArray(r.value) || r.value.length === 0)
         return !1;
       const e = x.value.length;
       return e === 0 ? !1 : r.value.length > 0 && r.value.length !== e;
     });
-    function z(e) {
-      return l.selectable ? l.singleSelect ? r.value === e : O.value.has(e) : !1;
+    function R(e) {
+      return l.selectable ? l.singleSelect ? r.value === e : V.value.has(e) : !1;
     }
     function N(e) {
-      l.selectable && (l.singleSelect ? r.value = r.value === e ? void 0 : e : (Array.isArray(r.value) || (r.value = []), O.value.has(e) ? r.value = r.value.filter((a) => a !== e) : r.value = [...r.value, e]));
+      l.selectable && (l.singleSelect ? r.value = r.value === e ? void 0 : e : (Array.isArray(r.value) || (r.value = []), V.value.has(e) ? r.value = r.value.filter((n) => n !== e) : r.value = [...r.value, e]));
     }
-    function R() {
-      !l.selectable || l.singleSelect || (V.value || T.value ? r.value = [] : r.value = x.value);
+    function X() {
+      !l.selectable || l.singleSelect || (z.value || T.value ? r.value = [] : r.value = x.value);
     }
     function te(e) {
       if (!l.expandable)
         return;
-      const a = d(e.data, B(e));
-      w.value.set(a, !w.value.get(a));
+      const n = f(e.data, F(e));
+      C.value.set(n, !C.value.get(n));
     }
     function P(e) {
       if (!l.expandable)
         return !1;
-      const a = d(e.data, B(e));
-      return w.value.get(a) ?? !1;
+      const n = f(e.data, F(e));
+      return C.value.get(n) ?? !1;
     }
-    function le(e, a) {
-      const t = B(a);
+    function le(e, n) {
+      const t = F(n);
       if (l.selectable && l.singleSelect) {
-        const n = d(e, t);
-        N(n);
+        const a = f(e, t);
+        N(a);
       }
       M("click-row", e, t);
     }
-    const H = b(() => {
+    const H = m(() => {
       let e = l.headers.length;
       return l.selectable && !l.singleSelect && e++, l.expandable && e++, e;
     });
-    ie($, (e) => {
-      const a = /* @__PURE__ */ new Set();
-      e.forEach((t, n) => {
-        a.add(d(t, n));
-      }), l.expandable && w.value.forEach((t, n) => {
-        a.has(n) || w.value.delete(n);
-      }), l.selectable && l.autoClearSelected && (l.singleSelect ? a.has(r.value) || (r.value = void 0) : Array.isArray(r.value) && r.value.length > 0 && (r.value = r.value.filter((t) => a.has(t))));
+    de(B, (e) => {
+      const n = /* @__PURE__ */ new Set();
+      e.forEach((t, a) => {
+        n.add(f(t, a));
+      }), l.expandable && C.value.forEach((t, a) => {
+        n.has(a) || C.value.delete(a);
+      }), l.selectable && l.autoClearSelected && (l.singleSelect ? n.has(r.value) || (r.value = void 0) : Array.isArray(r.value) && r.value.length > 0 && (r.value = r.value.filter((t) => n.has(t))));
     }, { immediate: !0 });
-    const { styles: ae, classes: I, className: ne } = ue("Table", {}, l);
-    return (e, a) => (s(), i("div", D({
-      class: [c(ne), c(I).wrapper]
-    }, c(Y)), [
-      p(e.$slots, "title"),
-      p(e.$slots, "actions"),
-      y("div", D(c(Z), {
+    const ne = ce(), ae = m(() => Object.keys(ne).some((e) => e.startsWith("footer-"))), { styles: re, classes: I, className: se } = fe("Table", {}, l);
+    return (e, n) => (s(), i("div", W({
+      class: [p(se), p(I).wrapper]
+    }, p(U)), [
+      g(e.$slots, "title"),
+      g(e.$slots, "actions"),
+      h("div", W(p(Y), {
         class: ["relative", {
           "!h-auto": l.loading
         }]
       }), [
-        y("table", {
-          style: K(c(ae)),
-          class: m(c(I).table)
+        h("table", {
+          style: K(p(re)),
+          class: k(p(I).table)
         }, [
-          v(ce, { "sticky-header": e.stickyHeader }, {
-            default: f(() => [
-              l.selectable && !l.singleSelect ? (s(), g(E, {
+          v(ge, { "sticky-header": e.stickyHeader }, {
+            default: u(() => [
+              l.selectable && !l.singleSelect ? (s(), d(O, {
                 key: 0,
                 width: "40",
                 class: "!pl-3.5 !pr-0.5 !py-2.5 cursor-pointer",
-                onClick: R
+                onClick: X
               }, {
-                default: f(() => [
-                  v(J, {
-                    "model-value": V.value || T.value,
+                default: u(() => [
+                  v(G, {
+                    "model-value": z.value || T.value,
                     indeterminate: T.value,
                     "hide-footer": "",
                     "aria-label": "Select all rows",
                     "skip-form-registry": "",
-                    onClick: L(R, ["prevent", "stop"])
+                    onClick: L(X, ["prevent", "stop"])
                   }, null, 8, ["model-value", "indeterminate"])
                 ]),
                 _: 1
-              })) : k("", !0),
-              e.expandable ? (s(), g(E, {
+              })) : y("", !0),
+              e.expandable ? (s(), d(O, {
                 key: 1,
                 width: "48",
                 class: "!p-0"
-              })) : k("", !0),
-              (s(!0), i(S, null, C(e.headers, (t, n) => (s(), g(E, {
-                key: n,
+              })) : y("", !0),
+              (s(!0), i(b, null, $(e.headers, (t, a) => (s(), d(O, {
+                key: a,
                 "text-align": t.align,
-                sort: j(t.value, e.sort),
+                sort: Z(t.value, e.sort),
                 sortable: t.sortable,
                 width: t.width,
                 tooltip: t.tooltip,
                 onClick: (o) => t.sortable ? _(t) : null
               }, {
-                default: f(() => [
-                  p(e.$slots, `header-${t.value}`, { header: t }, () => [
-                    W(q(t.text), 1)
+                default: u(() => [
+                  g(e.$slots, `header-${t.value}`, { header: t }, () => [
+                    j(q(t.text), 1)
                   ])
                 ]),
                 _: 2
@@ -245,24 +245,24 @@ const me = { key: 1 }, he = ["colspan"], be = { key: 2 }, ke = ["colspan"], Se =
             ]),
             _: 3
           }, 8, ["sticky-header"]),
-          v(c(fe), null, {
-            default: f(() => [
-              e.loading ? (s(!0), i(S, { key: 0 }, C(Number(e.loadingLines), (t, n) => (s(), g(G, {
-                key: n,
+          v(p(ve), null, {
+            default: u(() => [
+              e.loading ? (s(!0), i(b, { key: 0 }, $(Number(e.loadingLines), (t, a) => (s(), d(E, {
+                key: a,
                 striped: e.striped
               }, {
-                default: f(() => [
-                  (s(!0), i(S, null, C(e.headers, (o, h) => (s(), g(A, {
-                    key: h,
+                default: u(() => [
+                  (s(!0), i(b, null, $(e.headers, (o, S) => (s(), d(w, {
+                    key: S,
                     "text-align": o.align,
                     width: o.width,
                     dense: e.dense,
                     fixed: e.fixed
                   }, {
-                    default: f(() => [
-                      p(e.$slots, `loading-${o.value}`, { item: t }, () => [
-                        v(ve, {
-                          class: m(["max-w-[60%]", {
+                    default: u(() => [
+                      g(e.$slots, `loading-${o.value}`, { item: t }, () => [
+                        v(me, {
+                          class: k(["max-w-[60%]", {
                             "mx-auto": o.align === "center",
                             "ml-auto": o.align === "right"
                           }]),
@@ -274,69 +274,69 @@ const me = { key: 1 }, he = ["colspan"], be = { key: 2 }, ke = ["colspan"], Se =
                   }, 1032, ["text-align", "width", "dense", "fixed"]))), 128))
                 ]),
                 _: 2
-              }, 1032, ["striped"]))), 128)) : e.error ? (s(), i("tr", me, [
-                y("td", { colspan: H.value }, [
-                  p(e.$slots, "error")
-                ], 8, he)
-              ])) : !$.value || $.value.length === 0 ? (s(), i("tr", be, [
-                y("td", { colspan: H.value }, [
-                  p(e.$slots, "empty")
-                ], 8, ke)
-              ])) : (s(!0), i(S, { key: 3 }, C(c(U), (t) => (s(), i(S, {
-                key: d(t.data, t.index)
+              }, 1032, ["striped"]))), 128)) : e.error ? (s(), i("tr", be, [
+                h("td", { colspan: H.value }, [
+                  g(e.$slots, "error")
+                ], 8, we)
+              ])) : !B.value || B.value.length === 0 ? (s(), i("tr", Se, [
+                h("td", { colspan: H.value }, [
+                  g(e.$slots, "empty")
+                ], 8, $e)
+              ])) : (s(!0), i(b, { key: 3 }, $(p(Q), (t) => (s(), i(b, {
+                key: f(t.data, t.index)
               }, [
-                v(G, {
-                  pointer: e.pointer || !!u.toFn || !!u.hrefFn,
+                v(E, {
+                  pointer: e.pointer || !!c.toFn || !!c.hrefFn,
                   striped: e.striped,
-                  selected: z(d(t.data, t.index)),
+                  selected: R(f(t.data, t.index)),
                   "single-select": e.singleSelect,
-                  onClick: (n) => le(t.data, t)
+                  onClick: (a) => le(t.data, t)
                 }, {
-                  default: f(() => [
-                    l.selectable && !e.singleSelect ? (s(), g(A, {
+                  default: u(() => [
+                    l.selectable && !e.singleSelect ? (s(), d(w, {
                       key: 0,
                       width: "40",
                       class: "!pl-3.5 !pr-0.5 cursor-pointer",
-                      onClick: L((n) => N(d(t.data, t.index)), ["stop"])
+                      onClick: L((a) => N(f(t.data, t.index)), ["stop"])
                     }, {
-                      default: f(() => [
-                        v(J, {
-                          "model-value": z(d(t.data, t.index)),
+                      default: u(() => [
+                        v(G, {
+                          "model-value": R(f(t.data, t.index)),
                           "hide-footer": "",
-                          "aria-label": `Select row ${B(t) + 1}`,
+                          "aria-label": `Select row ${F(t) + 1}`,
                           "skip-form-registry": "",
-                          onClick: L((n) => N(d(t.data, t.index)), ["prevent", "stop"])
+                          onClick: L((a) => N(f(t.data, t.index)), ["prevent", "stop"])
                         }, null, 8, ["model-value", "aria-label", "onClick"])
                       ]),
                       _: 2
-                    }, 1032, ["onClick"])) : k("", !0),
-                    e.expandable ? (s(), g(A, {
+                    }, 1032, ["onClick"])) : y("", !0),
+                    e.expandable ? (s(), d(w, {
                       key: 1,
                       width: "48",
                       class: "!p-1"
                     }, {
-                      default: f(() => [
-                        y("button", {
+                      default: u(() => [
+                        h("button", {
                           type: "button",
-                          class: m(["px-3 p-2", [e.dense ? "p-0.5" : "px-3 py-2"]]),
-                          onClick: L((n) => te(t), ["stop"])
+                          class: k(["px-3 p-2", [e.dense ? "p-0.5" : "px-3 py-2"]]),
+                          onClick: L((a) => te(t), ["stop"])
                         }, [
-                          v(ge, {
-                            icon: c(ye),
+                          v(he, {
+                            icon: p(ke),
                             size: e.dense ? "xs" : "md",
-                            class: m(["transition-transform", {
+                            class: k(["transition-transform", {
                               "rotate-180": P(t)
                             }])
                           }, null, 8, ["icon", "size", "class"])
-                        ], 10, Se)
+                        ], 10, Ce)
                       ]),
                       _: 2
-                    }, 1024)) : k("", !0),
-                    (s(!0), i(S, null, C(e.headers, (n, o) => (s(), g(A, {
+                    }, 1024)) : y("", !0),
+                    (s(!0), i(b, null, $(e.headers, (a, o) => (s(), d(w, {
                       key: o,
-                      "text-align": n.align,
-                      truncate: n.truncate,
-                      width: n.width,
+                      "text-align": a.align,
+                      truncate: a.truncate,
+                      width: a.width,
                       dense: e.dense,
                       style: K([l.virtualList ? {
                         height: `${l.virtualListItemHeight}px`,
@@ -344,15 +344,15 @@ const me = { key: 1 }, he = ["colspan"], be = { key: 2 }, ke = ["colspan"], Se =
                         overflow: "hidden",
                         whiteSpace: "nowrap"
                       } : {}]),
-                      href: u.hrefFn ? u.hrefFn(t.data) : void 0,
-                      to: u.toFn ? u.toFn(t.data) : void 0,
-                      target: u.hrefFn ? u.hrefTarget : void 0
+                      href: c.hrefFn ? c.hrefFn(t.data) : void 0,
+                      to: c.toFn ? c.toFn(t.data) : void 0,
+                      target: c.hrefFn ? c.hrefTarget : void 0
                     }, {
-                      default: f(() => [
-                        p(e.$slots, `item-${n.value}`, {
+                      default: u(() => [
+                        g(e.$slots, `item-${a.value}`, {
                           item: t.data
                         }, () => [
-                          W(q(ee(t.data, n.value)), 1)
+                          j(q(ee(t.data, a.value)), 1)
                         ])
                       ]),
                       _: 2
@@ -362,33 +362,63 @@ const me = { key: 1 }, he = ["colspan"], be = { key: 2 }, ke = ["colspan"], Se =
                 }, 1032, ["pointer", "striped", "selected", "single-select", "onClick"]),
                 e.expandable ? (s(), i("tr", {
                   key: 0,
-                  class: m({ hidden: !P(t) })
+                  class: k({ hidden: !P(t) })
                 }, [
-                  y("td", { colspan: H.value }, [
-                    y("div", {
-                      class: m(["overflow-hidden transition-opacity", [P(t) ? "" : "opacity-0 max-h-0"]])
+                  h("td", { colspan: H.value }, [
+                    h("div", {
+                      class: k(["overflow-hidden transition-opacity", [P(t) ? "" : "opacity-0 max-h-0"]])
                     }, [
-                      p(e.$slots, "expanded-row", {
+                      g(e.$slots, "expanded-row", {
                         item: t.data
                       })
                     ], 2)
-                  ], 8, we)
-                ], 2)) : k("", !0)
+                  ], 8, Be)
+                ], 2)) : y("", !0)
               ], 64))), 128))
             ]),
             _: 3
-          })
+          }),
+          g(e.$slots, "footer", {}, () => [
+            ae.value && !e.loading ? (s(), i("tfoot", Fe, [
+              v(E, null, {
+                default: u(() => [
+                  l.selectable && !l.singleSelect ? (s(), d(w, {
+                    key: 0,
+                    width: "40",
+                    class: "!pl-3.5 !pr-0.5"
+                  })) : y("", !0),
+                  e.expandable ? (s(), d(w, {
+                    key: 1,
+                    width: "48",
+                    class: "!p-0"
+                  })) : y("", !0),
+                  (s(!0), i(b, null, $(e.headers, (t, a) => (s(), d(w, {
+                    key: a,
+                    "text-align": t.align,
+                    width: t.width,
+                    dense: e.dense
+                  }, {
+                    default: u(() => [
+                      g(e.$slots, `footer-${t.value}`, { header: t })
+                    ]),
+                    _: 2
+                  }, 1032, ["text-align", "width", "dense"]))), 128))
+                ]),
+                _: 3
+              })
+            ])) : y("", !0)
+          ])
         ], 6),
         e.loading ? (s(), i("div", {
           key: 0,
-          class: m(c(I).loadingWrapper)
+          class: k(p(I).loadingWrapper)
         }, [
-          v(pe, { size: "lg" })
-        ], 2)) : k("", !0)
+          v(ye, { size: "lg" })
+        ], 2)) : y("", !0)
       ], 16)
     ], 16));
   }
 });
 export {
-  Ve as default
+  De as default
 };