@dcodegroup-au/dsg-vue 0.1.29 → 0.1.31

package/dist/dsg-vue.table.esm.js

@@ -1,11 +1,11 @@
-import { defineComponent as j, useModel as G, computed as O, withDirectives as be, openBlock as s, createElementBlock as r, normalizeClass as U, createVNode as I, createCommentVNode as y, createElementVNode as P, Fragment as H, renderList as N, vShow as Ve, mergeModels as J, ref as D, useTemplateRef as De, useAttrs as ze, unref as W, withCtx as X, renderSlot as M, toDisplayString as se, createBlock as V, resolveDynamicComponent as Oe, onMounted as $e, normalizeStyle as ae, mergeProps as fe, watch as te, Transition as We, createTextVNode as Ne, useSlots as je, createSlots as Ke, normalizeProps as Qe, nextTick as we, vModelSelect as Ye } from "vue";
-import { _ as z, k as Ge, v as Je, f as Xe, u as Ze, c as Ce, b as ke, j as Se, e as Pe, i as Te } from "./DsgTablePerPage.vue_vue_type_style_index_0_lang-C44nlrX2.js";
-import { ucfirst as _e, ucwords as pe, toSnakeCase as et } from "./dsg-vue.helpers-string.esm.js";
-import { data_get as ve } from "./dsg-vue.helpers-object.esm.js";
-import { isEmpty as tt } from "./dsg-vue.helpers.esm.js";
-const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disabled"], nt = ["onClick", "innerHTML"], ot = ["onClick", "innerHTML"], it = ["disabled"], rt = ["disabled"], xe = /* @__PURE__ */ j({
+import { defineComponent as Q, useModel as X, computed as W, withDirectives as ke, openBlock as s, createElementBlock as d, normalizeClass as B, createVNode as I, createCommentVNode as y, createElementVNode as k, Fragment as H, renderList as j, vShow as Ye, mergeModels as Z, ref as x, useTemplateRef as Fe, useAttrs as Ge, unref as N, withCtx as _, renderSlot as F, toDisplayString as ne, createBlock as O, resolveDynamicComponent as Je, onMounted as Me, normalizeStyle as le, mergeProps as pe, watch as ae, withModifiers as Xe, Transition as Ze, createTextVNode as _e, useSlots as et, createSlots as tt, normalizeProps as at, nextTick as $e, vModelSelect as lt } from "vue";
+import { _ as z, k as st, v as nt, f as ot, u as it, c as Be, b as Se, j as Ee, e as Te, i as Le } from "./DsgTablePerPage.vue_vue_type_style_index_0_lang-C44nlrX2.js";
+import { ucfirst as dt, ucwords as Re, toSnakeCase as rt } from "./dsg-vue.helpers-string.esm.js";
+import { data_get as ye } from "./dsg-vue.helpers-object.esm.js";
+import { isEmpty as ut } from "./dsg-vue.helpers.esm.js";
+const ct = { class: "dsg-table--pagination" }, gt = ["disabled"], vt = ["disabled"], ft = ["onClick", "innerHTML"], bt = ["onClick", "innerHTML"], ht = ["disabled"], wt = ["disabled"], Ae = /* @__PURE__ */ Q({
   __name: "DsgTablePagination",
-  props: /* @__PURE__ */ J({
+  props: /* @__PURE__ */ Z({
     onEachSide: { default: 3 },
     firstPage: { default: 1 },
     showFirstLast: { type: Boolean, default: !0 },
@@ -17,18 +17,18 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
     pagination: { default: null },
     paginationModifiers: {}
   }),
-  emits: /* @__PURE__ */ J(["dsg-table:change-page"], ["update:pagination"]),
-  setup(e, { expose: L, emit: v }) {
-    const d = G(e, "pagination"), S = O(() => d.value === null ? 0 : d.value?.last_page - e.firstPage + 1), B = O(() => d.value === null ? 0 : d.value?.last_page), g = O(() => d.value === null ? !1 : d.value?.current_page === e.firstPage), b = O(() => d.value === null ? !1 : d.value?.current_page === B.value), E = O(() => S.value < e.onEachSide * 2 + 4), F = O(() => e.onEachSide * 2 + 1), T = O(() => !d.value || d.value?.current_page <= e.onEachSide ? 1 : d.value?.current_page >= S.value - e.onEachSide ? S.value - e.onEachSide * 2 : d.value?.current_page - e.onEachSide), h = v, a = (w) => {
-      h("dsg-table:change-page", w);
-    }, u = (w) => w === d.value?.current_page;
-    return L({
-      loadPage: a
-    }), (w, m) => be((s(), r("div", at, [
-      e.showFirstLast ? (s(), r("a", {
+  emits: /* @__PURE__ */ Z(["dsg-table:change-page"], ["update:pagination"]),
+  setup(e, { expose: M, emit: v }) {
+    const u = X(e, "pagination"), $ = W(() => u.value === null ? 0 : u.value?.last_page - e.firstPage + 1), E = W(() => u.value === null ? 0 : u.value?.last_page), g = W(() => u.value === null ? !1 : u.value?.current_page === e.firstPage), b = W(() => u.value === null ? !1 : u.value?.current_page === E.value), L = W(() => $.value < e.onEachSide * 2 + 4), R = W(() => e.onEachSide * 2 + 1), S = W(() => !u.value || u.value?.current_page <= e.onEachSide ? 1 : u.value?.current_page >= $.value - e.onEachSide ? $.value - e.onEachSide * 2 : u.value?.current_page - e.onEachSide), w = v, l = (p) => {
+      w("dsg-table:change-page", p);
+    }, c = (p) => p === u.value?.current_page;
+    return M({
+      loadPage: l
+    }), (p, m) => ke((s(), d("div", ct, [
+      e.showFirstLast ? (s(), d("a", {
         key: 0,
-        onClick: m[0] || (m[0] = ($) => a(e.firstPage)),
-        class: U([[g.value ? "disabled" : ""], "dsg-table--pagination-link"]),
+        onClick: m[0] || (m[0] = (P) => l(e.firstPage)),
+        class: B([[g.value ? "disabled" : ""], "dsg-table--pagination-link"]),
         disabled: g.value,
         title: "First",
         "aria-label": "First"
@@ -37,10 +37,10 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
           icon: e.firstIcon,
           size: "sm"
         }, null, 8, ["icon"])
-      ], 10, lt)) : y("", !0),
-      P("a", {
-        onClick: m[1] || (m[1] = ($) => a("prev")),
-        class: U([[g.value ? "disabled" : ""], "dsg-table--pagination-link"]),
+      ], 10, gt)) : y("", !0),
+      k("a", {
+        onClick: m[1] || (m[1] = (P) => l("prev")),
+        class: B([[g.value ? "disabled" : ""], "dsg-table--pagination-link"]),
         disabled: g.value,
         title: "Previous",
         "aria-label": "Previous"
@@ -49,21 +49,21 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
           icon: e.prevIcon,
           size: "sm"
         }, null, 8, ["icon"])
-      ], 10, st),
-      E.value ? (s(!0), r(H, { key: 1 }, N(S.value, ($, A) => (s(), r("a", {
-        key: A,
-        onClick: (Z) => a(A + e.firstPage),
-        class: U([[u(A + e.firstPage) ? "active" : ""], "dsg-table--pagination-link"]),
-        innerHTML: $
-      }, null, 10, nt))), 128)) : (s(!0), r(H, { key: 2 }, N(F.value, ($, A) => (s(), r("a", {
-        key: A,
-        onClick: (Z) => a(T.value + A + e.firstPage - 1),
-        class: U([[u(T.value + A + e.firstPage - 1) ? "active" : ""], "dsg-table--pagination-link"]),
-        innerHTML: T.value + $ - 1
-      }, null, 10, ot))), 128)),
-      P("a", {
-        onClick: m[2] || (m[2] = ($) => a("next")),
-        class: U([[b.value ? "disabled" : ""], "dsg-table--pagination-link"]),
+      ], 10, vt),
+      L.value ? (s(!0), d(H, { key: 1 }, j($.value, (P, q) => (s(), d("a", {
+        key: q,
+        onClick: (ee) => l(q + e.firstPage),
+        class: B([[c(q + e.firstPage) ? "active" : ""], "dsg-table--pagination-link"]),
+        innerHTML: P
+      }, null, 10, ft))), 128)) : (s(!0), d(H, { key: 2 }, j(R.value, (P, q) => (s(), d("a", {
+        key: q,
+        onClick: (ee) => l(S.value + q + e.firstPage - 1),
+        class: B([[c(S.value + q + e.firstPage - 1) ? "active" : ""], "dsg-table--pagination-link"]),
+        innerHTML: S.value + P - 1
+      }, null, 10, bt))), 128)),
+      k("a", {
+        onClick: m[2] || (m[2] = (P) => l("next")),
+        class: B([[b.value ? "disabled" : ""], "dsg-table--pagination-link"]),
         disabled: b.value,
         title: "Next",
         "aria-label": "Next"
@@ -72,11 +72,11 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
           icon: e.nextIcon,
           size: "sm"
         }, null, 8, ["icon"])
-      ], 10, it),
-      e.showFirstLast ? (s(), r("a", {
+      ], 10, ht),
+      e.showFirstLast ? (s(), d("a", {
         key: 3,
-        onClick: m[3] || (m[3] = ($) => a(B.value)),
-        class: U([[b.value ? "disabled" : ""], "dsg-table--pagination-link"]),
+        onClick: m[3] || (m[3] = (P) => l(E.value)),
+        class: B([[b.value ? "disabled" : ""], "dsg-table--pagination-link"]),
         disabled: b.value,
         title: "Last",
         "aria-label": "Last"
@@ -85,14 +85,14 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
           icon: e.lastIcon,
           size: "sm"
         }, null, 8, ["icon"])
-      ], 10, rt)) : y("", !0)
+      ], 10, wt)) : y("", !0)
     ], 512)), [
-      [Ve, d.value && B.value > e.firstPage]
+      [Ye, u.value && E.value > e.firstPage]
     ]);
   }
-}), dt = ["innerHTML"], Fe = /* @__PURE__ */ j({
+}), mt = ["innerHTML"], Ue = /* @__PURE__ */ Q({
   __name: "DsgTablePaginationInfo",
-  props: /* @__PURE__ */ J({
+  props: /* @__PURE__ */ Z({
     infoTemplate: { default: "Displaying {from} to {to} of {total} items" },
     noDataTemplate: { default: "No relevant data" }
   }, {
@@ -101,29 +101,29 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
   }),
   emits: ["update:pagination"],
   setup(e) {
-    const L = G(e, "pagination"), v = O(() => L.value == null || L.value.total == 0 ? e.noDataTemplate : e.infoTemplate.replace("{from}", (L.value?.from || 0).toString()).replace("{to}", (L.value?.to || 0).toString()).replace("{total}", (L.value?.total || 0).toString()));
-    return (d, S) => (s(), r("div", {
+    const M = X(e, "pagination"), v = W(() => M.value == null || M.value.total == 0 ? e.noDataTemplate : e.infoTemplate.replace("{from}", (M.value?.from || 0).toString()).replace("{to}", (M.value?.to || 0).toString()).replace("{total}", (M.value?.total || 0).toString()));
+    return (u, $) => (s(), d("div", {
       class: "dsg-table--pagination-info",
       innerHTML: v.value
-    }, null, 8, dt));
+    }, null, 8, mt));
   }
-}), ut = {
+}), yt = {
   class: "dsg-table--actions",
   ref: "dsgTableActions"
-}, ct = { class: "dsg-table--action-trigger" }, gt = {
+}, pt = { class: "dsg-table--action-trigger" }, kt = {
   key: 0,
   class: "dsg-table--actions-menu-wrapper"
-}, vt = ["href", "target", "onClick"], ft = ["textContent"], bt = { key: 0 }, ht = { key: 1 }, mt = ["href", "target", "onClick"], yt = { class: "flex-1" }, Me = /* @__PURE__ */ j({
+}, Pt = ["href", "target", "onClick"], Dt = ["textContent"], xt = { key: 0 }, Ct = { key: 1 }, $t = ["href", "target", "onClick"], St = { class: "flex-1" }, He = /* @__PURE__ */ Q({
   __name: "DsgTableActions",
   props: {
     placement: { default: "auto" }
   },
   emits: ["dsg-table:action-edit", "dsg-table:action-view", "dsg-table:action-delete", "dsg-table:action-archive", "dsg-table:link-clicked"],
-  setup(e, { emit: L }) {
-    const v = D(!1);
-    De("dsgTableActions");
-    const d = ze(), S = D(d.data.rowData?.actions ?? null), B = D(d.data.rowData?.links ?? null), g = D(d.data.rowData ?? null), b = (h) => {
-      switch (h) {
+  setup(e, { emit: M }) {
+    const v = x(!1);
+    Fe("dsgTableActions");
+    const u = Ge(), $ = x(u.data.rowData?.actions ?? null), E = x(u.data.rowData?.links ?? null), g = x(u.data.rowData ?? null), b = (w) => {
+      switch (w) {
         case "edit":
           return "edit-05";
         case "view":
@@ -135,94 +135,94 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
         default:
           return "dots-horizontal";
       }
-    }, E = (h, a, u) => {
-      switch (a) {
+    }, L = (w, l, c) => {
+      switch (l) {
         case "edit":
-          T("dsg-table:action-edit", u, g.value);
+          S("dsg-table:action-edit", c, g.value);
           break;
         case "view":
-          T("dsg-table:action-view", u, g.value);
+          S("dsg-table:action-view", c, g.value);
           break;
         case "delete":
-          T("dsg-table:action-delete", u, g.value);
+          S("dsg-table:action-delete", c, g.value);
           break;
         case "archive":
-          T("dsg-table:action-archive", u, g.value);
+          S("dsg-table:action-archive", c, g.value);
           break;
       }
-    }, F = (h, a) => {
-      const u = h.actionId || h.label.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-");
-      T("dsg-table:link-clicked", a, u, g.value);
-    }, T = L;
-    return (h, a) => be((s(), r("div", ut, [
-      I(W(Ge), {
+    }, R = (w, l) => {
+      const c = w.actionId || w.label.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-");
+      S("dsg-table:link-clicked", l, c, g.value);
+    }, S = M;
+    return (w, l) => ke((s(), d("div", yt, [
+      I(N(st), {
         triggers: [],
         placement: e.placement,
         "handle-resize": !0,
         strategy: "absolute",
         shown: v.value,
         class: "dsg-table--actions__popper",
-        onHide: a[1] || (a[1] = (u) => v.value = !1),
+        onHide: l[1] || (l[1] = (c) => v.value = !1),
         ref: "floatingVueFilterDropdown"
       }, {
-        popper: X(() => [
-          v.value ? (s(), r("div", gt, [
-            (s(!0), r(H, null, N(S.value, (u, w) => (s(), r(H, null, [
-              ["edit", "view", "delete", "archive"].includes(String(w)) ? (s(), r("a", {
-                key: w,
-                href: u?.link,
-                target: u?.target || "_self",
-                onClick: (m) => E(u, String(w), m)
+        popper: _(() => [
+          v.value ? (s(), d("div", kt, [
+            (s(!0), d(H, null, j($.value, (c, p) => (s(), d(H, null, [
+              ["edit", "view", "delete", "archive"].includes(String(p)) ? (s(), d("a", {
+                key: p,
+                href: c?.link,
+                target: c?.target || "_self",
+                onClick: (m) => L(c, String(p), m)
               }, [
-                P("div", {
-                  class: U(["dsg-table--actions-menu-item", String(w)])
+                k("div", {
+                  class: B(["dsg-table--actions-menu-item", String(p)])
                 }, [
                   I(z, {
-                    icon: b(String(w)),
+                    icon: b(String(p)),
                     size: "sm"
                   }, null, 8, ["icon"]),
-                  P("span", {
+                  k("span", {
                     class: "flex-1",
-                    textContent: se(W(_e)(String(w)))
-                  }, null, 8, ft)
+                    textContent: ne(N(dt)(String(p)))
+                  }, null, 8, Dt)
                 ], 2)
-              ], 8, vt)) : y("", !0)
+              ], 8, Pt)) : y("", !0)
             ], 64))), 256)),
-            S.value && B.value ? (s(), r("hr", bt)) : y("", !0),
-            B.value ? (s(!0), r(H, { key: 1 }, N(B.value, (u) => (s(), r(H, {
-              key: u.label
+            $.value && E.value ? (s(), d("hr", xt)) : y("", !0),
+            E.value ? (s(!0), d(H, { key: 1 }, j(E.value, (c) => (s(), d(H, {
+              key: c.label
             }, [
-              u.hasOwnProperty("component") ? (s(), V(Oe(u.component), {
+              c.hasOwnProperty("component") ? (s(), O(Je(c.component), {
                 key: 0,
-                quote: W(d).data.data.rowData,
-                "row-data": W(d).data.data.rowData
-              }, null, 8, ["quote", "row-data"])) : u.hasOwnProperty("type") && u.type == "break" ? (s(), r("hr", ht)) : (s(), r("a", {
+                quote: N(u).data.data.rowData,
+                "row-data": N(u).data.data.rowData
+              }, null, 8, ["quote", "row-data"])) : c.hasOwnProperty("type") && c.type == "break" ? (s(), d("hr", Ct)) : (s(), d("a", {
                 key: 2,
-                href: u.link,
-                target: u.target || "_self",
-                class: U(["dsg-table--actions-menu-item", u.class]),
-                onClick: (w) => F(u, w)
+                href: c.link,
+                target: c.target || "_self",
+                class: B(["dsg-table--actions-menu-item", c.class]),
+                onClick: (p) => R(c, p)
               }, [
-                u.icon ? (s(), V(z, {
+                c.icon ? (s(), O(z, {
                   key: 0,
-                  icon: u.icon,
+                  icon: c.icon,
                   size: "sm"
                 }, null, 8, ["icon"])) : y("", !0),
-                P("span", yt, se(u.label), 1)
-              ], 10, mt))
+                k("span", St, ne(c.label), 1)
+              ], 10, $t))
             ], 64))), 128)) : y("", !0)
           ])) : y("", !0)
         ]),
-        default: X(() => [
-          P("div", ct, [
-            P("button", {
+        default: _(() => [
+          k("div", pt, [
+            k("button", {
               type: "button",
               class: "dsg-table--actions-button",
               "aria-expanded": "false",
               "aria-haspopup": "true",
-              onClick: a[0] || (a[0] = (u) => v.value = !v.value)
+              onClick: l[0] || (l[0] = (c) => v.value = !v.value)
             }, [
-              M(h.$slots, "dsg-table-action-button-content", {}, () => [
+              F(w.$slots, "dsg-table-action-button-content", {}, () => [
                 I(z, {
                   icon: "dots-vertical",
                   size: "sm"
@@ -234,10 +234,10 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
         _: 3
       }, 8, ["placement", "shown"])
     ])), [
-      [W(Je), () => v.value = !1]
+      [N(nt), () => v.value = !1]
     ]);
   }
-}), wt = { class: "dsg-table--search" }, Le = /* @__PURE__ */ j({
+}), Tt = { class: "dsg-table--search" }, Ie = /* @__PURE__ */ Q({
   __name: "DsgTableSearch",
   props: {
     name: {},
@@ -252,21 +252,21 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
     replaceState: { type: Boolean, default: !0 }
   },
   emits: ["dsg-table:term-changed"],
-  setup(e, { emit: L }) {
-    const v = D("");
-    $e(() => {
+  setup(e, { emit: M }) {
+    const v = x("");
+    Me(() => {
       const g = new URL(window.location.href).searchParams.get("term");
-      g && (v.value = g, d("dsg-table:term-changed", g));
+      g && (v.value = g, u("dsg-table:term-changed", g));
     });
-    const d = L, S = Ze((B) => {
-      if (v.value = B, e.replaceState) {
+    const u = M, $ = it((E) => {
+      if (v.value = E, e.replaceState) {
         const g = new URL(window.location.href);
         v.value ? g.searchParams.set("term", v.value) : g.searchParams.delete("term"), window.history.pushState({}, "", g.toString());
       }
-      d("dsg-table:term-changed", v.value);
+      u("dsg-table:term-changed", v.value);
     }, 300);
-    return (B, g) => (s(), r("div", wt, [
-      I(Xe, {
+    return (E, g) => (s(), d("div", Tt, [
+      I(ot, {
         modelValue: v.value,
         "onUpdate:modelValue": g[0] || (g[0] = (b) => v.value = b),
         name: e.name,
@@ -281,26 +281,26 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
         size: "sm",
         icon: "search-sm",
         "icon-clickable": !0,
-        onIconClicked: g[1] || (g[1] = (b) => W(S)(b)),
-        onEnterPressed: g[2] || (g[2] = (b) => W(S)(b)),
-        onOnClear: g[3] || (g[3] = () => W(S)(""))
+        onIconClicked: g[1] || (g[1] = (b) => N($)(b)),
+        onEnterPressed: g[2] || (g[2] = (b) => N($)(b)),
+        onOnClear: g[3] || (g[3] = () => N($)(""))
       }, null, 8, ["modelValue", "name", "id", "placeholder", "disabled", "required", "readonly", "hidden"])
     ]));
   }
-}), kt = { class: "dsg-table--header-row" }, Pt = {
+}), Rt = { class: "dsg-table--header-row" }, Ft = {
   key: 0,
   class: "dsg-table--th dsg-table--th-checkbox",
   scope: "col"
-}, pt = {
+}, Mt = {
   key: 1,
   class: "dsg-table--th dsg-table--th-expand-detail",
   scope: "col"
-}, Dt = ["title", "id", "onClick"], $t = {
+}, Bt = ["title", "id", "onClick"], Et = {
   key: 0,
   class: "dsg-table--th-sort-icon"
-}, Ct = ["innerHTML"], St = ["innerHTML"], Tt = ["innerHTML"], xt = ["innerHTML"], Be = /* @__PURE__ */ j({
+}, Lt = ["innerHTML"], At = ["innerHTML"], Ut = ["innerHTML"], Ht = ["innerHTML"], qe = /* @__PURE__ */ Q({
   __name: "DsgTableRowHeader",
-  props: /* @__PURE__ */ J({
+  props: /* @__PURE__ */ Z({
     fields: {},
     scrollVisible: { type: Boolean },
     hasSelectAll: { type: Boolean, default: !1 },
@@ -314,129 +314,132 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
     hasSelected: { type: Boolean, default: !1 },
     hasSelectedModifiers: {}
   }),
-  emits: /* @__PURE__ */ J(["dsg-table:sort-field", "dsg-table:on-select-all", "dsg-table:on-deselect-all"], ["update:sortField", "update:selectedRows", "update:hasSelected"]),
-  setup(e, { emit: L }) {
-    const v = G(e, "sortField"), d = G(e, "selectedRows"), S = G(e, "hasSelected"), B = D("17px"), g = (T) => {
-      S.value && d.value.length > 0 && d.value.length !== e.tableDataLength ? (S.value = !0, b("dsg-table:on-select-all")) : !S.value && d.value.length === 0 ? (S.value = !1, b("dsg-table:on-select-all")) : b("dsg-table:on-deselect-all");
-    }, b = L, E = (T, h) => [
-      T,
-      T + "-" + et(String(h?.name)),
-      h.titleClass || "",
-      { sortable: h.sortable },
-      { "sort-active": v.value?.name === h.name }
-    ], F = (T) => {
-      T.sortable && (v.value = {
-        name: String(T?.name),
-        field: String(T?.sortField),
-        direction: v.value?.name === T.name && v.value?.direction === "asc" ? "desc" : "asc"
-      }, b("dsg-table:sort-field", T));
+  emits: /* @__PURE__ */ Z(["dsg-table:sort-field", "dsg-table:on-select-all", "dsg-table:on-deselect-all"], ["update:sortField", "update:selectedRows", "update:hasSelected"]),
+  setup(e, { emit: M }) {
+    const v = X(e, "sortField"), u = X(e, "selectedRows"), $ = X(e, "hasSelected"), E = x("17px"), g = (S) => {
+      $.value && u.value.length > 0 && u.value.length !== e.tableDataLength ? ($.value = !0, b("dsg-table:on-select-all")) : !$.value && u.value.length === 0 ? ($.value = !1, b("dsg-table:on-select-all")) : b("dsg-table:on-deselect-all");
+    }, b = M, L = (S, w) => [
+      S,
+      S + "-" + rt(String(w?.name)),
+      w.titleClass || "",
+      { sortable: w.sortable },
+      { "sort-active": v.value?.name === w.name }
+    ], R = (S) => {
+      S.sortable && (v.value = {
+        name: String(S?.name),
+        field: String(S?.sortField),
+        direction: v.value?.name === S.name && v.value?.direction === "asc" ? "desc" : "asc"
+      }, b("dsg-table:sort-field", S));
     };
-    return (T, h) => (s(), r("tr", kt, [
-      e.hasSelectAll ? (s(), r("th", Pt, [
-        I(Ce, {
-          modelValue: S.value,
+    return (S, w) => (s(), d("tr", Rt, [
+      e.hasSelectAll ? (s(), d("th", Ft, [
+        I(Be, {
+          modelValue: $.value,
           "onUpdate:modelValue": [
-            h[0] || (h[0] = (a) => S.value = a),
+            w[0] || (w[0] = (l) => $.value = l),
             g
           ],
-          indeterminate: d.value.length > 0 && d.value.length !== e.tableDataLength
+          indeterminate: u.value.length > 0 && u.value.length !== e.tableDataLength
         }, null, 8, ["modelValue", "indeterminate"])
       ])) : y("", !0),
-      e.showExpandDetail ? (s(), r("th", pt)) : y("", !0),
-      (s(!0), r(H, null, N(e.fields, (a, u) => (s(), r(H, null, [
-        a?.visible ? (s(), r("th", {
-          key: u,
-          class: U(E("dsg-table--th", a)),
-          style: ae([{ width: a.width || void 0 }, a.style]),
-          title: a.title + (a.sortable ? " Sort" : ""),
-          id: "_" + a.name,
-          onClick: (w) => F(a),
+      e.showExpandDetail ? (s(), d("th", Mt)) : y("", !0),
+      (s(!0), d(H, null, j(e.fields, (l, c) => (s(), d(H, null, [
+        l?.visible ? (s(), d("th", {
+          key: c,
+          class: B(L("dsg-table--th", l)),
+          style: le([{ width: l.width || void 0 }, l.style]),
+          title: l.title + (l.sortable ? " Sort" : ""),
+          id: "_" + l.name,
+          onClick: (p) => R(l),
           scope: "col"
         }, [
-          a.sortable ? (s(), r("div", $t, [
-            a.tooltip ? (s(), V(ke, fe({
+          l.sortable ? (s(), d("div", Et, [
+            l.tooltip ? (s(), O(Se, pe({
               key: 0,
               ref_for: !0
-            }, a.tooltip, { class: "dsg-table--th-tooltip" }), {
-              "dsg-tooltip--trigger": X(() => [
-                a.title ? (s(), r("span", {
+            }, l.tooltip, { class: "dsg-table--th-tooltip" }), {
+              "dsg-tooltip--trigger": _(() => [
+                l.title ? (s(), d("span", {
                   key: 0,
                   class: "dsg-table--th-title",
-                  innerHTML: a.title
-                }, null, 8, Ct)) : y("", !0),
-                a.tooltip.icon ? (s(), V(z, {
+                  innerHTML: l.title
+                }, null, 8, Lt)) : y("", !0),
+                l.tooltip.icon ? (s(), O(z, {
                   key: 1,
-                  icon: a.tooltip.icon,
+                  icon: l.tooltip.icon,
                   class: "inline-flex",
                   size: "xs"
                 }, null, 8, ["icon"])) : y("", !0)
               ]),
               _: 2
-            }, 1040)) : a.title ? (s(), r("span", {
+            }, 1040)) : l.title ? (s(), d("span", {
               key: 1,
               class: "dsg-table--th-title",
-              innerHTML: a.title
-            }, null, 8, St)) : y("", !0),
-            a.sortable && v.value?.name !== a.name ? (s(), V(z, {
+              innerHTML: l.title
+            }, null, 8, At)) : y("", !0),
+            l.sortable && v.value?.name !== l.name ? (s(), O(z, {
               key: 2,
               icon: "chevron-selector-vertical",
               class: "inline-flex",
               size: "xs"
             })) : y("", !0),
-            a.sortable && v.value?.name === a.name && v.value?.direction === "asc" ? (s(), V(z, {
+            l.sortable && v.value?.name === l.name && v.value?.direction === "asc" ? (s(), O(z, {
               key: 3,
               icon: "chevron-down",
               class: "inline-flex",
               size: "xs"
             })) : y("", !0),
-            a.sortable && v.value?.name === a.name && v.value?.direction === "desc" ? (s(), V(z, {
+            l.sortable && v.value?.name === l.name && v.value?.direction === "desc" ? (s(), O(z, {
               key: 4,
               icon: "chevron-up",
               class: "inline-flex",
               size: "xs"
             })) : y("", !0)
-          ])) : (s(), r(H, { key: 1 }, [
-            a.tooltip ? (s(), V(ke, fe({
+          ])) : (s(), d(H, { key: 1 }, [
+            l.tooltip ? (s(), O(Se, pe({
               key: 0,
               ref_for: !0
-            }, a.tooltip, { class: "dsg-table--th-tooltip" }), {
-              "dsg-tooltip--trigger": X(() => [
-                P("span", {
+            }, l.tooltip, { class: "dsg-table--th-tooltip" }), {
+              "dsg-tooltip--trigger": _(() => [
+                k("span", {
                   class: "dsg-table--th-title",
-                  innerHTML: W(pe)(String(a?.title))
-                }, null, 8, Tt),
-                a.tooltip.icon ? (s(), V(z, {
+                  innerHTML: N(Re)(String(l?.title))
+                }, null, 8, Ut),
+                l.tooltip.icon ? (s(), O(z, {
                   key: 0,
-                  icon: a.tooltip.icon,
+                  icon: l.tooltip.icon,
                   class: "inline-flex",
                   size: "xs"
                 }, null, 8, ["icon"])) : y("", !0)
               ]),
               _: 2
-            }, 1040)) : (s(), r("span", {
+            }, 1040)) : (s(), d("span", {
               key: 1,
               class: "dsg-table--th-title",
-              innerHTML: W(pe)(String(a?.title))
-            }, null, 8, xt))
+              innerHTML: N(Re)(String(l?.title))
+            }, null, 8, Ht))
           ], 64))
-        ], 14, Dt)) : y("", !0)
+        ], 14, Bt)) : y("", !0)
       ], 64))), 256)),
-      e.scrollVisible ? (s(), r("th", {
+      e.scrollVisible ? (s(), d("th", {
         key: 2,
-        style: ae({ width: B.value }),
+        style: le({ width: E.value }),
         class: "dsg-table--th-col-gutter"
       }, null, 4)) : y("", !0)
     ]));
   }
-}), Ft = { class: "dsg-table--wrapper" }, Mt = ["span"], Lt = {
+}), It = { class: "dsg-table--wrapper" }, qt = ["span"], Vt = {
   key: 0,
   class: "dsg-table--loading"
-}, Bt = ["colspan"], Et = ["colspan"], Rt = ["onClick", "onDblclick", "onMouseover"], Ut = {
+}, zt = ["colspan"], Ot = ["colspan"], Wt = ["onClick", "onDblclick", "onMouseover"], Nt = {
   key: 0,
   class: "dsg-table--tbody-cell dsg-table--tbody-cell-checkbox"
-}, Ht = ["onClick", "onDblclick", "onContextmenu"], It = ["innerHTML"], At = ["onClick"], qt = ["colspan"], Vt = { key: 2 }, zt = ["colspan"], Ot = { class: "dsg-table--footer" }, Wt = /* @__PURE__ */ j({
+}, jt = {
+  key: 1,
+  class: "dsg-table--tbody-cell dsg-table--tbody-cell-expand"
+}, Kt = ["aria-expanded", "onClick"], Qt = ["onClick", "onDblclick", "onContextmenu"], Yt = ["innerHTML"], Gt = ["onClick"], Jt = ["colspan"], Xt = { key: 2 }, Zt = ["colspan"], _t = { class: "dsg-table--footer" }, ea = /* @__PURE__ */ Q({
   __name: "DsgTableComponent",
-  props: /* @__PURE__ */ J({
+  props: /* @__PURE__ */ Z({
     fields: { default: () => [] },
     isDraggable: { type: Boolean, default: !1 },
     dragApi: { default: "" },
@@ -459,6 +462,8 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
     httpOptions: { default: () => ({}) },
     hasDetailRow: { type: Boolean, default: !1 },
     showExpandDetail: { type: Boolean, default: !0 },
+    expandableRows: { type: Boolean, default: !1 },
+    expandMultiple: { type: Boolean, default: !1 },
     initialPage: { default: 1 },
     firstPage: { default: 1 },
     sortOrder: { default: () => [] },
@@ -494,338 +499,378 @@ const at = { class: "dsg-table--pagination" }, lt = ["disabled"], st = ["disable
     perPage: { default: 20 },
     perPageModifiers: {}
   }),
-  emits: /* @__PURE__ */ J(["dsg-table:loading", "dsg-table:loaded", "dsg-table:load-success", "dsg-table:load-error", "dsg-table:pagination-data", "dsg-table:rows-selected", "dsg-table:row-clicked", "dsg-table:row-hover", "dsg-table:row-dblclick"], ["update:filterParams", "update:perPage"]),
-  setup(e, { expose: L, emit: v }) {
-    const d = (t) => t.map((l, i) => ({
-      field: l.field || "",
-      title: l.title || "",
-      name: l.name || "",
-      titleClass: l.titleClass || "",
-      dataClass: l.dataClass || "",
-      visible: l.visible ?? !0,
-      width: l.width || void 0,
-      sortField: l.sortField || null,
-      sortable: l.sortField,
-      formatter: l.formatter || null,
-      tooltip: l.tooltip ?? null,
-      $_index: i
-    })), S = () => {
+  emits: /* @__PURE__ */ Z(["dsg-table:loading", "dsg-table:loaded", "dsg-table:load-success", "dsg-table:load-error", "dsg-table:pagination-data", "dsg-table:rows-selected", "dsg-table:row-clicked", "dsg-table:row-hover", "dsg-table:row-dblclick", "dsg-table:row-expanded", "dsg-table:row-collapsed"], ["update:filterParams", "update:perPage"]),
+  setup(e, { expose: M, emit: v }) {
+    const u = (t) => t.map((a, o) => ({
+      field: a.field || "",
+      title: a.title || "",
+      name: a.name || "",
+      titleClass: a.titleClass || "",
+      dataClass: a.dataClass || "",
+      visible: a.visible ?? !0,
+      width: a.width || void 0,
+      sortField: a.sortField || null,
+      sortable: a.sortField,
+      formatter: a.formatter || null,
+      tooltip: a.tooltip ?? null,
+      $_index: o
+    })), $ = () => {
       if (!e.apiMode) return null;
-      const l = Se().find((i) => i.key === e.queryParams.sort);
-      if (l && l.value.length > 0) {
-        const i = l.value[0], p = i.startsWith("-"), f = p ? i.substring(1) : i, x = e.fields.find(
-          (ee) => ee.sortField === f || ee.name === f || ee.field === f
+      const a = Ee().find((o) => o.key === e.queryParams.sort);
+      if (a && a.value.length > 0) {
+        const o = a.value[0], D = o.startsWith("-"), f = D ? o.substring(1) : o, T = e.fields.find(
+          (te) => te.sortField === f || te.name === f || te.field === f
         );
-        return x ? {
-          name: String(x.name || x.field),
+        return T ? {
+          name: String(T.name || T.field),
           field: f,
-          direction: p ? "desc" : "asc"
+          direction: D ? "desc" : "asc"
         } : {
           name: f,
           field: f,
-          direction: p ? "desc" : "asc"
+          direction: D ? "desc" : "asc"
         };
       }
       return null;
-    }, B = () => {
+    }, E = () => {
       if (!(!e.apiMode || !e.replaceState) && e.replaceStrategy === "window") {
-        const t = new URL(window.location.href), l = new URLSearchParams(t.search);
-        if (l.delete(e.queryParams.sort), m.value) {
-          const p = (m.value.direction === "desc" ? "-" : "") + m.value.field;
-          l.set(e.queryParams.sort, p);
+        const t = new URL(window.location.href), a = new URLSearchParams(t.search);
+        if (a.delete(e.queryParams.sort), m.value) {
+          const D = (m.value.direction === "desc" ? "-" : "") + m.value.field;
+          a.set(e.queryParams.sort, D);
         }
-        const i = `${t.pathname}${l.toString() ? "?" + l.toString() : ""}`;
-        window.history.pushState({}, "", i);
+        const o = `${t.pathname}${a.toString() ? "?" + a.toString() : ""}`;
+        window.history.pushState({}, "", o);
       }
-    }, g = D(d(e.fields)), b = D(e.data), E = D(null), F = D(e.initialPage), T = D("17px"), h = D(!1), a = D({}), u = D(0), w = D(!0), m = D(S()), $ = D(null), A = D(0), Z = G(e, "filterParams"), ne = G(e, "perPage"), R = D([]), le = D(!1), K = O(() => e.tableHeight != null), Q = O(() => g.value.filter((t) => t.visible).length);
-    te(
-      () => R.value.length,
+    }, g = x(u(e.fields)), b = x(e.data), L = x(null), R = x(e.initialPage), S = x("17px"), w = x(!1), l = x({}), c = x(0), p = x(!0), m = x($()), P = x(null), q = x(0), ee = X(e, "filterParams"), oe = X(e, "perPage"), A = x([]), se = x(!1), V = x(/* @__PURE__ */ new Set()), Y = W(() => e.tableHeight != null), G = W(() => {
+      let t = g.value.filter((a) => a.visible).length;
+      return e.selectable && t++, e.hasDetailRow && e.expandableRows && t++, t;
+    });
+    ae(
+      () => A.value.length,
       (t) => {
-        le.value = e.selectable && t > 0;
+        se.value = e.selectable && t > 0;
       },
       { immediate: !0 }
-    ), te(
+    ), ae(
       () => e.fields,
       (t) => {
-        g.value = d(t);
+        g.value = u(t);
       },
       { immediate: !0, deep: !0 }
-    ), te(
-      () => Z.value,
+    ), ae(
+      () => ee.value,
       (t) => {
-        Y();
+        J();
       },
       { deep: !0 }
-    ), te(
-      () => ne.value,
+    ), ae(
+      () => oe.value,
       () => {
-        Y();
+        J();
       }
-    ), te(
+    ), ae(
       () => e.apiUrl,
-      (t, l) => {
-        e.apiMode && t !== l && t && Y();
+      (t, a) => {
+        e.apiMode && t !== a && t && J();
       }
-    ), te(
+    ), ae(
       () => m.value,
       () => {
-        B();
+        E();
       },
       { deep: !0 }
     );
-    const q = v, re = (t, l) => t.formatter && typeof t.formatter == "function" ? t.formatter(t, l) : ve(l, String(t?.name), ""), de = (t) => "dsg-field--" + t.name?.toLowerCase().replaceAll(/[_ ]/g, "-"), ue = (t, l) => {
-      const i = {
-        odd: l % 2 === 0,
-        even: l % 2 !== 0,
+    const U = v, ue = (t, a) => t.formatter && typeof t.formatter == "function" ? t.formatter(t, a) : ye(a, String(t?.name), ""), ce = (t) => "dsg-field--" + t.name?.toLowerCase().replaceAll(/[_ ]/g, "-"), ge = (t, a) => {
+      const o = {
+        odd: a % 2 === 0,
+        even: a % 2 !== 0,
         "row-selected": t.selected
       };
       if (!e.rowClass)
-        return i;
-      let p = {};
+        return o;
+      let D = {};
       if (typeof e.rowClass == "function") {
-        const f = e.rowClass(t, l);
-        typeof f == "string" ? f.split(" ").forEach((x) => {
-          x.trim() && (p[x.trim()] = !0);
-        }) : Array.isArray(f) ? f.forEach((x) => {
-          typeof x == "string" && x.trim() && (p[x.trim()] = !0);
-        }) : typeof f == "object" && f !== null && (p = f);
+        const f = e.rowClass(t, a);
+        typeof f == "string" ? f.split(" ").forEach((T) => {
+          T.trim() && (D[T.trim()] = !0);
+        }) : Array.isArray(f) ? f.forEach((T) => {
+          typeof T == "string" && T.trim() && (D[T.trim()] = !0);
+        }) : typeof f == "object" && f !== null && (D = f);
       } else typeof e.rowClass == "string" && e.rowClass.split(" ").forEach((f) => {
-        f.trim() && (p[f.trim()] = !0);
+        f.trim() && (D[f.trim()] = !0);
+      });
+      return { ...o, ...D };
+    }, K = (t) => V.value.has(t[e.trackBy]), ie = (t, a) => {
+      const o = t[e.trackBy];
+      V.value.has(o) ? (V.value.delete(o), U("dsg-table:row-collapsed", t, a)) : (e.expandMultiple || V.value.clear(), V.value.add(o), U("dsg-table:row-expanded", t, a));
+    }, ve = (t) => {
+      const a = t[e.trackBy];
+      V.value.has(a) || (e.expandMultiple || V.value.clear(), V.value.add(a));
+    }, fe = (t) => {
+      V.value.delete(t[e.trackBy]);
+    }, be = () => {
+      b.value?.forEach((t) => {
+        V.value.add(t[e.trackBy]);
       });
-      return { ...i, ...p };
-    }, ce = (t) => {
+    }, he = () => {
+      V.value.clear();
+    }, we = () => V.value, de = (t) => {
       if (e.selectable) {
         if (t.selected)
-          R.value.push(t);
+          A.value.push(t);
         else {
-          const l = R.value.findIndex((i) => i[e.trackBy] === t[e.trackBy]);
-          l !== -1 && R.value.splice(l, 1);
+          const a = A.value.findIndex((o) => o[e.trackBy] === t[e.trackBy]);
+          a !== -1 && A.value.splice(a, 1);
         }
-        q("dsg-table:rows-selected", R.value);
+        U("dsg-table:rows-selected", A.value);
       }
-    }, ge = () => {
+    }, me = () => {
       e.selectable && (b.value?.forEach((t) => {
         t.selected = !0;
-      }), R.value = b.value?.filter((t) => t.selected) ?? [], q("dsg-table:rows-selected", R.value));
-    }, oe = () => {
+      }), A.value = b.value?.filter((t) => t.selected) ?? [], U("dsg-table:rows-selected", A.value));
+    }, i = () => {
       e.selectable && (b.value?.forEach((t) => {
         t.selected = !1;
-      }), R.value = [], q("dsg-table:rows-selected", R.value));
-    }, _ = (t) => {
-      b.value = Array.isArray(t) ? t : [], e.selectable && b.value.forEach((l) => {
-        l.selected = l.selected ?? !1;
+      }), A.value = [], U("dsg-table:rows-selected", A.value));
+    }, n = (t) => {
+      b.value = Array.isArray(t) ? t : [], e.selectable && b.value.forEach((a) => {
+        a.selected = a.selected ?? !1;
       });
-    }, n = () => b.value ?? [], o = (t) => {
-      t === "prev" ? F.value > e.firstPage && F.value-- : t === "next" ? F.value < (E.value?.last_page ?? 0) && F.value++ : t != F.value && t >= e.firstPage && t <= (E.value?.last_page ?? 0) && (F.value = t), Y();
-    }, c = () => ({
+    }, r = () => b.value ?? [], h = (t) => {
+      t === "prev" ? R.value > e.firstPage && R.value-- : t === "next" ? R.value < (L.value?.last_page ?? 0) && R.value++ : t != R.value && t >= e.firstPage && t <= (L.value?.last_page ?? 0) && (R.value = t), J();
+    }, C = () => ({
       [e.queryParams?.sort]: m.value ? (m.value?.direction === "desc" ? "-" : "") + m.value?.field : void 0,
       [e.queryParams?.order]: m.value?.direction,
-      [e.queryParams?.page]: F.value,
-      [e.queryParams?.perPage]: ne.value
-    }), k = () => {
-      $.value && ($.value.abort(), $.value = null);
-    }, C = (t, l) => {
-      k(), A.value++;
-      const i = A.value, p = new AbortController();
-      return l.signal = p.signal, $.value = p, (e.httpMethod.toLowerCase() === "get" ? Pe.get(t, l) : (() => {
-        const x = l.params;
-        return delete l.params, Pe.post(t, x, l);
+      [e.queryParams?.page]: R.value,
+      [e.queryParams?.perPage]: oe.value
+    }), re = () => {
+      P.value && (P.value.abort(), P.value = null);
+    }, Ve = (t, a) => {
+      re(), q.value++;
+      const o = q.value, D = new AbortController();
+      return a.signal = D.signal, P.value = D, (e.httpMethod.toLowerCase() === "get" ? Te.get(t, a) : (() => {
+        const T = a.params;
+        return delete a.params, Te.post(t, T, a);
       })()).then(
-        (x) => ({ ...x, _requestId: i, _apiUrl: t }),
-        (x) => {
-          throw x.name === "AbortError" || x.code === "ERR_CANCELED" ? { ...x, _requestId: i, _cancelled: !0 } : { ...x, _requestId: i };
+        (T) => ({ ...T, _requestId: o, _apiUrl: t }),
+        (T) => {
+          throw T.name === "AbortError" || T.code === "ERR_CANCELED" ? { ...T, _requestId: o, _cancelled: !0 } : { ...T, _requestId: o };
         }
       );
-    }, ie = (t) => {
-      if (t._requestId && t._requestId !== A.value || t._apiUrl && t._apiUrl !== e.apiUrl)
+    }, Pe = (t) => {
+      if (t._requestId && t._requestId !== q.value || t._apiUrl && t._apiUrl !== e.apiUrl)
         return;
-      q("dsg-table:load-success", t);
-      const l = e.transform ? e.transform(t.data) : t.data;
-      b.value = ve(l, e.dataPath, null), e.selectable && b.value?.forEach((i) => {
-        i.selected = i.selected ?? !1;
-      }), E.value = ve(l, e.paginationPath, null) ?? null, u.value = b.value?.length ? b.value[0].order : u, !tt(e.paginationPath) && E.value === null && console.warn(
+      U("dsg-table:load-success", t);
+      const a = e.transform ? e.transform(t.data) : t.data;
+      b.value = ye(a, e.dataPath, null), e.selectable && b.value?.forEach((o) => {
+        o.selected = o.selected ?? !1;
+      }), L.value = ye(a, e.paginationPath, null) ?? null, c.value = b.value?.length ? b.value[0].order : c, !ut(e.paginationPath) && L.value === null && console.warn(
         'DsgTable: pagination-path "' + e.paginationPath + `" not found. It looks like the data returned from the server does not have pagination information or you may have set it incorrectly.
 You can explicitly suppress this warning by setting pagination-path="".`
-      ), $.value = null, q("dsg-table:pagination-data", E.value), E.value && F.value > (E.value?.last_page || 0) && b.value?.length === 0 && (F.value = e.initialPage, Y()), q("dsg-table:loaded"), w.value = !1;
-    }, he = (t) => {
-      t._requestId && t._requestId !== A.value || t._apiUrl && t._apiUrl !== e.apiUrl || t._cancelled || (console.error("load-error", t), $.value = null, q("dsg-table:load-error", t), q("dsg-table:loaded"), w.value = !1);
-    }, me = () => {
+      ), P.value = null, U("dsg-table:pagination-data", L.value), L.value && R.value > (L.value?.last_page || 0) && b.value?.length === 0 && (R.value = e.initialPage, J()), U("dsg-table:loaded"), p.value = !1;
+    }, De = (t) => {
+      t._requestId && t._requestId !== q.value || t._apiUrl && t._apiUrl !== e.apiUrl || t._cancelled || (console.error("load-error", t), P.value = null, U("dsg-table:load-error", t), U("dsg-table:loaded"), p.value = !1);
+    }, xe = () => {
       if (e.data !== null && Array.isArray(e.data)) {
-        _(e.data), w.value = !1;
+        n(e.data), p.value = !1;
         return;
       }
       if (e.dataManager && typeof e.dataManager == "function") {
         const t = e.dataManager();
-        _(t), w.value = !1;
+        n(t), p.value = !1;
       } else
-        _(e.data), w.value = !1;
-    }, Y = (t = ie, l = he, i = {}) => {
-      const p = t || ie, f = l || he;
+        n(e.data), p.value = !1;
+    }, J = (t = Pe, a = De, o = {}) => {
+      const D = t || Pe, f = a || De;
       if (!e.apiMode) {
-        me();
+        xe();
         return;
       }
-      return w.value = !0, q("dsg-table:loading", w.value), e.httpOptions.params = {
-        ...c(),
-        ...Z.value
-      }, C(e.apiUrl, e.httpOptions).then(p).catch((x) => f(x));
-    }, Ee = (t, l, i) => {
-      q("dsg-table:row-clicked", t, l, i);
-    }, Re = (t, l, i) => {
-      q("dsg-table:row-dblclick", t, l, i);
-    }, Ue = (t, l, i) => {
-    }, He = (t, l, i, p) => {
-    }, Ie = (t, l, i, p) => {
-    }, Ae = (t, l, i, p) => {
-    }, qe = (t, l, i) => {
+      return p.value = !0, U("dsg-table:loading", p.value), e.httpOptions.params = {
+        ...C(),
+        ...ee.value
+      }, Ve(e.apiUrl, e.httpOptions).then(D).catch((T) => f(T));
+    }, ze = (t, a, o) => {
+      U("dsg-table:row-clicked", t, a, o);
+    }, Oe = (t, a, o) => {
+      U("dsg-table:row-dblclick", t, a, o);
+    }, We = (t, a, o) => {
+    }, Ne = (t, a, o, D) => {
+    }, je = (t, a, o, D) => {
+    }, Ke = (t, a, o, D) => {
+    }, Qe = (t, a, o) => {
     };
-    $e(() => {
-      e.apiMode === !0 ? Y() : me();
+    Me(() => {
+      e.apiMode === !0 ? J() : xe();
     });
-    const ye = () => {
-      e.apiMode && (R.value = [], k(), Y());
+    const Ce = () => {
+      e.apiMode && (A.value = [], re(), J());
     };
-    return L({
-      changePage: o,
-      reload: ye,
-      getData: n,
-      setData: _,
+    return M({
+      changePage: h,
+      reload: Ce,
+      getData: r,
+      setData: n,
       setLoading: (t) => {
-        w.value = t, q("dsg-table:loading", w.value);
-      }
-    }), (t, l) => (s(), r("div", Ft, [
-      P("div", {
+        p.value = t, U("dsg-table:loading", p.value);
+      },
+      expandRow: ve,
+      collapseRow: fe,
+      toggleRowExpand: ie,
+      expandAllRows: be,
+      collapseAllRows: he,
+      getExpandedRows: we,
+      isRowExpanded: K
+    }), (t, a) => (s(), d("div", It, [
+      k("div", {
         ref: "dsgTableBodyWrapper",
-        class: U(["dsg-table-body-wrapper", { "fixed-header": K.value }]),
-        style: ae({ height: e.tableHeight || void 0 })
+        class: B(["dsg-table-body-wrapper", { "fixed-header": Y.value }]),
+        style: le({ height: e.tableHeight || void 0 })
       }, [
-        P("table", {
-          class: U(["dsg-table-main", K.value ? "fixed-header" : "", a.value.table, "table-" + e.tableLayout])
+        k("table", {
+          class: B(["dsg-table-main", Y.value ? "fixed-header" : "", l.value.table, "table-" + e.tableLayout])
         }, [
-          P("colgroup", { span: Q.value }, [
-            (s(!0), r(H, null, N(g.value, (i, p) => (s(), r(H, null, [
-              i?.visible ? (s(), r("col", {
-                key: p,
-                style: ae({ width: i.width || void 0 }),
-                class: U("dsg-table--col-" + i.name + " " + i.titleClass)
+          k("colgroup", { span: G.value }, [
+            (s(!0), d(H, null, j(g.value, (o, D) => (s(), d(H, null, [
+              o?.visible ? (s(), d("col", {
+                key: D,
+                style: le({ width: o.width || void 0 }),
+                class: B("dsg-table--col-" + o.name + " " + o.titleClass)
               }, null, 6)) : y("", !0)
             ], 64))), 256)),
-            !K.value && h.value ? (s(), r("col", {
+            !Y.value && w.value ? (s(), d("col", {
               key: 0,
-              style: ae({ width: T.value }),
+              style: le({ width: S.value }),
               class: "dsg-table--col-gutter"
             }, null, 4)) : y("", !0)
-          ], 8, Mt),
-          P("thead", {
-            class: U([[a.value.thead, { sticky: K.value, "top-0": K.value }], "dsg-table--head"])
+          ], 8, qt),
+          k("thead", {
+            class: B([[l.value.thead, { sticky: Y.value, "top-0": Y.value }], "dsg-table--head"])
           }, [
-            M(t.$slots, "tableHeader", { fields: g.value }, () => [
-              I(Be, {
+            F(t.$slots, "tableHeader", { fields: g.value }, () => [
+              I(qe, {
                 fields: g.value,
                 "has-select-all": e.selectable,
-                "selected-rows": R.value,
-                "onUpdate:selectedRows": l[0] || (l[0] = (i) => R.value = i),
-                "has-selected": le.value,
-                "onUpdate:hasSelected": l[1] || (l[1] = (i) => le.value = i),
-                "scroll-visible": h.value,
+                "selected-rows": A.value,
+                "onUpdate:selectedRows": a[0] || (a[0] = (o) => A.value = o),
+                "has-selected": se.value,
+                "onUpdate:hasSelected": a[1] || (a[1] = (o) => se.value = o),
+                "scroll-visible": w.value,
                 "show-expand-detail": e.hasDetailRow && e.showExpandDetail,
                 "table-data-length": b.value?.length,
                 "sort-field": m.value,
-                "onUpdate:sortField": l[2] || (l[2] = (i) => m.value = i),
-                "onDsgTable:sortField": l[3] || (l[3] = (i) => ye()),
-                "onDsgTable:onSelectAll": ge,
-                "onDsgTable:onDeselectAll": oe
+                "onUpdate:sortField": a[2] || (a[2] = (o) => m.value = o),
+                "onDsgTable:sortField": a[3] || (a[3] = (o) => Ce()),
+                "onDsgTable:onSelectAll": me,
+                "onDsgTable:onDeselectAll": i
               }, null, 8, ["fields", "has-select-all", "selected-rows", "has-selected", "scroll-visible", "show-expand-detail", "table-data-length", "sort-field"])
             ])
           ], 2),
-          P("tbody", {
-            class: U(["dsg-table--body", a.value.tbody])
+          k("tbody", {
+            class: B(["dsg-table--body", l.value.tbody])
           }, [
-            w.value ? (s(), r("tr", Lt, [
-              P("td", { colspan: Q.value }, [
-                P("div", {
+            p.value ? (s(), d("tr", Vt, [
+              k("td", { colspan: G.value }, [
+                k("div", {
                   "aria-label": "Loading...",
                   role: "status",
                   class: "flex items-center space-x-3 h-12 w-full justify-center",
-                  colspan: Q.value
+                  colspan: G.value
                 }, [
-                  M(t.$slots, "dsg-table-loading", {}, () => [
+                  F(t.$slots, "dsg-table-loading", {}, () => [
                     I(z, {
                       icon: "loading-02",
                       class: "animate-spin"
                     }),
-                    l[4] || (l[4] = P("span", { class: "text-xs font-medium text-gray-500" }, "Loading...", -1))
+                    a[4] || (a[4] = k("span", { class: "text-xs font-medium text-gray-500" }, "Loading...", -1))
                   ])
-                ], 8, Et)
-              ], 8, Bt)
-            ])) : (s(!0), r(H, { key: 1 }, N(b.value, (i, p) => (s(), r(H, { key: p }, [
-              P("tr", {
-                class: U(["dsg-table--tbody-row", ue(i, p)]),
-                onClick: (f) => Ee(f, p, i),
-                onDblclick: (f) => Re(f, p, i),
-                onMouseover: (f) => Ue()
+                ], 8, Ot)
+              ], 8, zt)
+            ])) : (s(!0), d(H, { key: 1 }, j(b.value, (o, D) => (s(), d(H, { key: D }, [
+              k("tr", {
+                class: B(["dsg-table--tbody-row", ge(o, D)]),
+                onClick: (f) => ze(f, D, o),
+                onDblclick: (f) => Oe(f, D, o),
+                onMouseover: (f) => We()
               }, [
-                e.selectable ? (s(), r("td", Ut, [
-                  I(Ce, {
-                    modelValue: i.selected,
-                    "onUpdate:modelValue": [(f) => i.selected = f, (f) => ce(i)]
+                e.selectable ? (s(), d("td", Nt, [
+                  I(Be, {
+                    modelValue: o.selected,
+                    "onUpdate:modelValue": [(f) => o.selected = f, (f) => de(o)]
                   }, null, 8, ["modelValue", "onUpdate:modelValue"])
                 ])) : y("", !0),
-                (s(!0), r(H, null, N(g.value, (f, x) => (s(), r(H, { key: x }, [
-                  f.visible ? (s(), r("td", {
+                e.hasDetailRow && e.expandableRows ? (s(), d("td", jt, [
+                  k("button", {
+                    type: "button",
+                    class: B(["dsg-table--expand-toggle", { "is-expanded": K(o) }]),
+                    "aria-expanded": K(o),
+                    "aria-label": "Toggle row details",
+                    onClick: Xe((f) => ie(o, D), ["stop"])
+                  }, [
+                    I(z, {
+                      icon: "chevron-right",
+                      size: "sm",
+                      class: "dsg-table--expand-icon"
+                    })
+                  ], 10, Kt)
+                ])) : y("", !0),
+                (s(!0), d(H, null, j(g.value, (f, T) => (s(), d(H, { key: T }, [
+                  f.visible ? (s(), d("td", {
                     key: 0,
-                    class: U(["dsg-table--tbody-cell", f.dataClass]),
-                    style: ae({ width: f.width || void 0 }),
-                    onClick: (ee) => He(),
-                    onDblclick: (ee) => Ie(),
-                    onContextmenu: (ee) => Ae()
+                    class: B(["dsg-table--tbody-cell", f.dataClass]),
+                    style: le({ width: f.width || void 0 }),
+                    onClick: (te) => Ne(),
+                    onDblclick: (te) => je(),
+                    onContextmenu: (te) => Ke()
                   }, [
-                    M(t.$slots, de(f), {
-                      rowData: i,
-                      rowIndex: p,
+                    F(t.$slots, ce(f), {
+                      rowData: o,
+                      rowIndex: D,
                       rowField: f
                     }, () => [
-                      P("span", {
-                        innerHTML: re(f, i)
-                      }, null, 8, It)
+                      k("span", {
+                        innerHTML: ue(f, o)
+                      }, null, 8, Yt)
                     ])
-                  ], 46, Ht)) : y("", !0)
+                  ], 46, Qt)) : y("", !0)
                 ], 64))), 128))
-              ], 42, Rt),
-              e.hasDetailRow ? (s(), V(We, {
+              ], 42, Wt),
+              e.hasDetailRow && (!e.expandableRows || K(o)) ? (s(), O(Ze, {
                 key: 0,
                 name: e.detailRowTransition
               }, {
-                default: X(() => [
-                  P("tr", {
-                    class: "dsg-table--tbody-detail-row",
-                    onClick: (f) => qe()
+                default: _(() => [
+                  k("tr", {
+                    class: B(["dsg-table--tbody-detail-row", { "is-expanded": e.expandableRows && K(o) }]),
+                    onClick: (f) => Qe()
                   }, [
-                    P("td", { colspan: Q.value }, [
-                      M(t.$slots, "dsg-table-detail-row", {
-                        rowData: i,
-                        rowIndex: p,
-                        options: e.detailRowOptions
+                    k("td", { colspan: G.value }, [
+                      F(t.$slots, "dsg-table-detail-row", {
+                        rowData: o,
+                        rowIndex: D,
+                        options: e.detailRowOptions,
+                        isExpanded: e.expandableRows ? K(o) : !0
                       })
-                    ], 8, qt)
-                  ], 8, At)
+                    ], 8, Jt)
+                  ], 10, Gt)
                 ]),
                 _: 2
               }, 1032, ["name"])) : y("", !0)
             ], 64))), 128)),
-            !w.value && !b.value?.length && e.noDataTemplate.length ? (s(), r("tr", Vt, [
-              P("td", {
-                colspan: Q.value,
+            !p.value && !b.value?.length && e.noDataTemplate.length ? (s(), d("tr", Xt, [
+              k("td", {
+                colspan: G.value,
                 class: "dsg-table--empty-result"
               }, [
-                M(t.$slots, "dsg-table-empty-result", {}, () => [
-                  Ne(se(e.noDataTemplate), 1)
+                F(t.$slots, "dsg-table-empty-result", {}, () => [
+                  _e(ne(e.noDataTemplate), 1)
                 ])
-              ], 8, zt)
+              ], 8, Zt)
             ])) : y("", !0)
           ], 2),
-          P("tfoot", Ot, [
-            M(t.$slots, "dsg-table-footer", {
+          k("tfoot", _t, [
+            F(t.$slots, "dsg-table-footer", {
               fields: g.value,
               data: b.value
             })
@@ -834,18 +879,18 @@ You can explicitly suppress this warning by setting pagination-path="".`
       ], 6)
     ]));
   }
-}), Nt = { class: "dsg-table" }, jt = {
+}), ta = { class: "dsg-table" }, aa = {
   key: 0,
   class: "dsg-table--pre-header"
-}, Kt = { class: "dsg-table--pre-header-left" }, Qt = ["textContent"], Yt = { class: "dsg-table--pre-header-right" }, Gt = {
+}, la = { class: "dsg-table--pre-header-left" }, sa = ["textContent"], na = { class: "dsg-table--pre-header-right" }, oa = {
   key: 1,
   class: "dsg-table--search-header",
   ref: "dsgTableSearchHeaderEl"
-}, Jt = { class: "dsg-table--search-top" }, Xt = {
+}, ia = { class: "dsg-table--search-top" }, da = {
   key: 2,
   class: "dsg-table--footer",
   ref: "dsgTableFooterEl"
-}, Zt = { class: "dsg-table--footer-left" }, _t = { class: "dsg-table--footer-center" }, ea = { class: "dsg-table--footer-right" }, ta = /* @__PURE__ */ j({
+}, ra = { class: "dsg-table--footer-left" }, ua = { class: "dsg-table--footer-center" }, ca = { class: "dsg-table--footer-right" }, ga = /* @__PURE__ */ Q({
   __name: "DsgTable",
   props: {
     getUrl: {},
@@ -874,124 +919,147 @@ You can explicitly suppress this warning by setting pagination-path="".`
     rowClass: { type: [String, Function], default: void 0 },
     apiMode: { type: Boolean, default: !0 },
     replaceState: { type: Boolean, default: !0 },
-    replaceStrategy: { default: "window" }
+    replaceStrategy: { default: "window" },
+    hasDetailRow: { type: Boolean, default: !1 },
+    expandableRows: { type: Boolean, default: !1 },
+    expandMultiple: { type: Boolean, default: !1 },
+    showExpandDetail: { type: Boolean, default: !0 },
+    detailRowTransition: { default: "fade" },
+    detailRowOptions: { default: () => ({}) }
   },
-  emits: ["dsg-table:action-edit", "dsg-table:action-view", "dsg-table:action-delete", "dsg-table:action-archive", "dsg-table:link-clicked", "dsg-table:rows-selected", "dsg-table:row-clicked", "dsg-table:row-hover", "dsg-table:row-dblclick", "dsg-table:filter-updated", "dsg-table:term-changed", "dsg-table:data-loaded"],
-  setup(e, { expose: L, emit: v }) {
-    const d = (n) => {
-      w.value = n;
-    }, S = D(e.apiMode && !!(e.filterEntity || e.filterEndpoint || e.getUrl)), B = () => {
-      if (S.value) {
-        let n = {};
-        return Se().forEach((o) => {
-          if (o.key.startsWith("filter[")) {
-            const c = o.key.replace("filter[", "").replace("]", ""), k = o.value;
-            n[`filter[${c}]`] = k.join(",");
+  emits: ["dsg-table:action-edit", "dsg-table:action-view", "dsg-table:action-delete", "dsg-table:action-archive", "dsg-table:link-clicked", "dsg-table:rows-selected", "dsg-table:row-clicked", "dsg-table:row-hover", "dsg-table:row-dblclick", "dsg-table:filter-updated", "dsg-table:term-changed", "dsg-table:data-loaded", "dsg-table:row-expanded", "dsg-table:row-collapsed"],
+  setup(e, { expose: M, emit: v }) {
+    const u = (i) => {
+      p.value = i;
+    }, $ = x(e.apiMode && !!(e.filterEntity || e.filterEndpoint || e.getUrl)), E = () => {
+      if ($.value) {
+        let i = {};
+        return Ee().forEach((n) => {
+          if (n.key.startsWith("filter[")) {
+            const r = n.key.replace("filter[", "").replace("]", ""), h = n.value;
+            i[`filter[${r}]`] = h.join(",");
           }
-        }), n;
+        }), i;
       } else
         return {};
-    }, g = O(() => ({
+    }, g = W(() => ({
       ...e.css,
       tableWrapper: "border-b " + (e.css?.tableWrapper || "")
-    })), b = je(), E = D(!0), F = D(null), T = D("<p>Showing {from} to {to} of {total}</p>"), h = D(null), a = De("dsgTable"), u = D({ perPage: e.perPage, change: d }), w = D(e.perPage), m = D({ ...B(), ...e.initialFilters }), $ = v, A = (n) => {
-      a.value?.changePage(n);
-    }, Z = (n) => {
-      h.value = n;
-    }, ne = ({ data: n }) => {
-      F.value = n, $("dsg-table:data-loaded", n);
-    }, R = () => {
-      a.value?.reload();
-    }, le = (n) => {
-      a.value?.setLoading(n);
-    }, K = (n) => {
-      const o = a.value?.getData?.() ?? [];
-      a.value?.setData(o.map((c) => c.id === n.id ? n : c));
-    }, Q = (n) => {
-      const o = a.value?.getData?.() ?? [];
-      a.value?.setData([...o, n]);
-    }, q = (n) => {
-      const o = a.value?.getData?.() ?? [];
-      a.value?.setData(o.filter((c) => c.id !== n.id));
-    }, re = (n) => {
-      a.value?.setData(n);
-    }, de = () => a.value?.getData() ?? [], ue = (n) => {
-      const o = a.value?.getData() ?? [], c = n(o);
-      c && a.value?.setData(c);
-    }, ce = (n) => {
-      m.value = n;
-    }, ge = () => m.value ?? {}, oe = (n) => {
-      const o = { ...m.value };
-      !n || n.trim() === "" ? delete o["filter[term]"] : o["filter[term]"] = n, m.value = o, we(() => {
-        R();
-      }), $("dsg-table:term-changed", n);
-    }, _ = (n, o, c) => {
-      let k = {};
-      m.value["filter[term]"] && (k["filter[term]"] = m.value["filter[term]"]), Object.keys(n).forEach((C) => {
-        n[C] !== null && n[C] !== void 0 && n[C] !== "" && (k[C] = n[C]);
-      }), m.value = k, we(() => {
-        R();
-      }), $("dsg-table:filter-updated", m.value, o, c);
+    })), b = et(), L = x(!0), R = x(null), S = x("<p>Showing {from} to {to} of {total}</p>"), w = x(null), l = Fe("dsgTable"), c = x({ perPage: e.perPage, change: u }), p = x(e.perPage), m = x({ ...E(), ...e.initialFilters }), P = v, q = (i) => {
+      l.value?.changePage(i);
+    }, ee = (i) => {
+      w.value = i;
+    }, oe = ({ data: i }) => {
+      R.value = i, P("dsg-table:data-loaded", i);
+    }, A = () => {
+      l.value?.reload();
+    }, se = (i) => {
+      l.value?.setLoading(i);
+    }, V = (i) => {
+      const n = l.value?.getData?.() ?? [];
+      l.value?.setData(n.map((r) => r.id === i.id ? i : r));
+    }, Y = (i) => {
+      const n = l.value?.getData?.() ?? [];
+      l.value?.setData([...n, i]);
+    }, G = (i) => {
+      const n = l.value?.getData?.() ?? [];
+      l.value?.setData(n.filter((r) => r.id !== i.id));
+    }, U = (i) => {
+      l.value?.setData(i);
+    }, ue = () => l.value?.getData() ?? [], ce = (i) => {
+      const n = l.value?.getData() ?? [], r = i(n);
+      r && l.value?.setData(r);
+    }, ge = (i) => {
+      l.value?.expandRow(i);
+    }, K = (i) => {
+      l.value?.collapseRow(i);
+    }, ie = (i, n) => {
+      l.value?.toggleRowExpand(i, n);
+    }, ve = () => {
+      l.value?.expandAllRows();
+    }, fe = () => {
+      l.value?.collapseAllRows();
+    }, be = () => l.value?.getExpandedRows() ?? /* @__PURE__ */ new Set(), he = (i) => {
+      m.value = i;
+    }, we = () => m.value ?? {}, de = (i) => {
+      const n = { ...m.value };
+      !i || i.trim() === "" ? delete n["filter[term]"] : n["filter[term]"] = i, m.value = n, $e(() => {
+        A();
+      }), P("dsg-table:term-changed", i);
+    }, me = (i, n, r) => {
+      let h = {};
+      m.value["filter[term]"] && (h["filter[term]"] = m.value["filter[term]"]), Object.keys(i).forEach((C) => {
+        i[C] !== null && i[C] !== void 0 && i[C] !== "" && (h[C] = i[C]);
+      }), m.value = h, $e(() => {
+        A();
+      }), P("dsg-table:filter-updated", m.value, n, r);
     };
-    return L({
-      reloadTable: R,
-      updateRowTable: K,
-      addRowTable: Q,
-      deleteRowTable: q,
-      setData: re,
-      getData: de,
-      mutateData: ue,
-      termChanged: oe,
-      setFilters: ce,
-      getFilters: ge,
-      setLoading: le
-    }), (n, o) => (s(), r("div", Nt, [
-      e.hasHeader ? (s(), r("div", jt, [
-        M(n.$slots, "dsg-table--pre-header", {}, () => [
-          P("div", Kt, [
-            M(n.$slots, "dsg-table--page-title", {
-              data: F.value,
+    return M({
+      reloadTable: A,
+      updateRowTable: V,
+      addRowTable: Y,
+      deleteRowTable: G,
+      setData: U,
+      getData: ue,
+      mutateData: ce,
+      termChanged: de,
+      setFilters: he,
+      getFilters: we,
+      setLoading: se,
+      expandRow: ge,
+      collapseRow: K,
+      toggleRowExpand: ie,
+      expandAllRows: ve,
+      collapseAllRows: fe,
+      getExpandedRows: be,
+      onChangePage: q
+    }), (i, n) => (s(), d("div", ta, [
+      e.hasHeader ? (s(), d("div", aa, [
+        F(i.$slots, "dsg-table--pre-header", {}, () => [
+          k("div", la, [
+            F(i.$slots, "dsg-table--page-title", {
+              data: R.value,
               title: e.title
             }, () => [
-              e.title.length > 0 ? (s(), r("h1", {
+              e.title.length > 0 ? (s(), d("h1", {
                 key: 0,
                 class: "dsg-table--title",
-                textContent: se(e.title)
-              }, null, 8, Qt)) : y("", !0)
+                textContent: ne(e.title)
+              }, null, 8, sa)) : y("", !0)
             ])
           ]),
-          P("div", Yt, [
-            M(n.$slots, "dsg-table--page-actions", { data: F.value })
+          k("div", na, [
+            F(i.$slots, "dsg-table--page-actions", { data: R.value })
           ])
         ])
       ])) : y("", !0),
-      e.displaySearch ? (s(), r("div", Gt, [
-        P("div", Jt, [
-          M(n.$slots, "dsg-table--search-header", { data: F.value }, () => [
-            I(Le, {
+      e.displaySearch ? (s(), d("div", oa, [
+        k("div", ia, [
+          F(i.$slots, "dsg-table--search-header", { data: R.value }, () => [
+            I(Ie, {
               name: "term",
-              "onDsgTable:termChanged": o[0] || (o[0] = (c) => oe(c))
+              "onDsgTable:termChanged": n[0] || (n[0] = (r) => de(r))
             }),
-            I(Te, {
+            I(Le, {
               entity: e.filterEntity,
               "filter-endpoint": e.filterEndpoint,
               "search-endpoint": e.filterSearchEndpoint,
               "auto-sort": e.autoSortFilters,
               filters: e.filters,
-              "onDsgTable:filterUpdated": o[1] || (o[1] = (c, k, C) => _(c, k, C))
+              "onDsgTable:filterUpdated": n[1] || (n[1] = (r, h, C) => me(r, h, C))
             }, null, 8, ["entity", "filter-endpoint", "search-endpoint", "auto-sort", "filters"]),
-            M(n.$slots, "dsg-table--search-actions", { data: F.value })
+            F(i.$slots, "dsg-table--search-actions", { data: R.value })
           ])
         ]),
-        M(n.$slots, "dsg-table--search-navigation")
+        F(i.$slots, "dsg-table--search-navigation")
       ], 512)) : y("", !0),
-      I(Wt, {
+      I(ea, {
         ref: "dsgTable",
         "api-url": e.getUrl,
         "filter-params": m.value,
-        "onUpdate:filterParams": o[7] || (o[7] = (c) => m.value = c),
-        "per-page": w.value,
-        "onUpdate:perPage": o[8] || (o[8] = (c) => w.value = c),
+        "onUpdate:filterParams": n[7] || (n[7] = (r) => m.value = r),
+        "per-page": p.value,
+        "onUpdate:perPage": n[8] || (n[8] = (r) => p.value = r),
         fields: e.fields,
         "load-on-start": e.loadOnStart,
         "pagination-path": e.paginationPath,
@@ -1001,132 +1069,140 @@ You can explicitly suppress this warning by setting pagination-path="".`
         css: g.value,
         data: e.data,
         "row-class": e.rowClass,
-        "api-mode": S.value,
+        "api-mode": $.value,
         "replace-state": e.replaceState,
         "replace-strategy": e.replaceStrategy,
-        "onDsgTable:loading": o[9] || (o[9] = (c) => E.value = !0),
-        "onDsgTable:loaded": o[10] || (o[10] = (c) => E.value = !1),
-        "onDsgTable:paginationData": Z,
-        "onDsgTable:loadSuccess": ne,
-        "onDsgTable:rowsSelected": o[11] || (o[11] = (c) => $("dsg-table:rows-selected", c)),
-        "onDsgTable:rowClicked": o[12] || (o[12] = (c, k, C) => $("dsg-table:row-clicked", c, k, C)),
-        "onDsgTable:rowHover": o[13] || (o[13] = (c, k, C) => $("dsg-table:row-hover", c, k, C)),
-        "onDsgTable:rowDblclick": o[14] || (o[14] = (c, k, C) => $("dsg-table:row-dblclick", c, k, C))
-      }, Ke({
-        "dsg-field--actions": X((c) => [
-          M(n.$slots, "dsg-table-actions", { data: c }, () => [
-            (s(), V(Me, {
-              key: c.rowIndex,
-              data: c,
-              "onDsgTable:actionEdit": o[2] || (o[2] = (k, C) => $("dsg-table:action-edit", k, C)),
-              "onDsgTable:actionView": o[3] || (o[3] = (k, C) => $("dsg-table:action-view", k, C)),
-              "onDsgTable:actionDelete": o[4] || (o[4] = (k, C) => $("dsg-table:action-delete", k, C)),
-              "onDsgTable:actionArchive": o[5] || (o[5] = (k, C) => $("dsg-table:action-archive", k, C)),
-              "onDsgTable:linkClicked": o[6] || (o[6] = (k, C, ie) => $("dsg-table:link-clicked", k, C, ie))
+        "has-detail-row": e.hasDetailRow,
+        "expandable-rows": e.expandableRows,
+        "expand-multiple": e.expandMultiple,
+        "show-expand-detail": e.showExpandDetail,
+        "detail-row-transition": e.detailRowTransition,
+        "detail-row-options": e.detailRowOptions,
+        "onDsgTable:loading": n[9] || (n[9] = (r) => L.value = !0),
+        "onDsgTable:loaded": n[10] || (n[10] = (r) => L.value = !1),
+        "onDsgTable:paginationData": ee,
+        "onDsgTable:loadSuccess": oe,
+        "onDsgTable:rowsSelected": n[11] || (n[11] = (r) => P("dsg-table:rows-selected", r)),
+        "onDsgTable:rowClicked": n[12] || (n[12] = (r, h, C) => P("dsg-table:row-clicked", r, h, C)),
+        "onDsgTable:rowHover": n[13] || (n[13] = (r, h, C) => P("dsg-table:row-hover", r, h, C)),
+        "onDsgTable:rowDblclick": n[14] || (n[14] = (r, h, C) => P("dsg-table:row-dblclick", r, h, C)),
+        "onDsgTable:rowExpanded": n[15] || (n[15] = (r, h) => P("dsg-table:row-expanded", r, h)),
+        "onDsgTable:rowCollapsed": n[16] || (n[16] = (r, h) => P("dsg-table:row-collapsed", r, h))
+      }, tt({
+        "dsg-field--actions": _((r) => [
+          F(i.$slots, "dsg-table-actions", { data: r }, () => [
+            (s(), O(He, {
+              key: r.rowIndex,
+              data: r,
+              "onDsgTable:actionEdit": n[2] || (n[2] = (h, C) => P("dsg-table:action-edit", h, C)),
+              "onDsgTable:actionView": n[3] || (n[3] = (h, C) => P("dsg-table:action-view", h, C)),
+              "onDsgTable:actionDelete": n[4] || (n[4] = (h, C) => P("dsg-table:action-delete", h, C)),
+              "onDsgTable:actionArchive": n[5] || (n[5] = (h, C) => P("dsg-table:action-archive", h, C)),
+              "onDsgTable:linkClicked": n[6] || (n[6] = (h, C, re) => P("dsg-table:link-clicked", h, C, re))
             }, null, 8, ["data"]))
           ])
         ]),
         _: 2
       }, [
-        N(W(b), (c, k) => ({
-          name: k,
-          fn: X((C) => [
-            String(k) !== "dsg-field--actions" ? M(n.$slots, k, Qe(fe({ key: 0 }, C))) : y("", !0)
+        j(N(b), (r, h) => ({
+          name: h,
+          fn: _((C) => [
+            String(h) !== "dsg-field--actions" ? F(i.$slots, h, at(pe({ key: 0 }, C))) : y("", !0)
           ])
         }))
-      ]), 1032, ["api-url", "filter-params", "per-page", "fields", "load-on-start", "pagination-path", "selectable", "track-by", "table-layout", "css", "data", "row-class", "api-mode", "replace-state", "replace-strategy"]),
-      e.hasFooter ? (s(), r("div", Xt, [
-        P("div", Zt, [
-          M(n.$slots, "dsg-table--footer-left", {
-            data: h.value,
-            perPage: u.value
+      ]), 1032, ["api-url", "filter-params", "per-page", "fields", "load-on-start", "pagination-path", "selectable", "track-by", "table-layout", "css", "data", "row-class", "api-mode", "replace-state", "replace-strategy", "has-detail-row", "expandable-rows", "expand-multiple", "show-expand-detail", "detail-row-transition", "detail-row-options"]),
+      e.hasFooter ? (s(), d("div", da, [
+        k("div", ra, [
+          F(i.$slots, "dsg-table--footer-left", {
+            data: w.value,
+            perPage: c.value
           }, () => [
-            e.displayPaginationInfo ? (s(), V(Fe, {
+            e.displayPaginationInfo ? (s(), O(Ue, {
               key: 0,
               ref: "paginationInfoStart",
-              pagination: h.value,
-              "onUpdate:pagination": o[15] || (o[15] = (c) => h.value = c),
-              "info-template": T.value
+              pagination: w.value,
+              "onUpdate:pagination": n[17] || (n[17] = (r) => w.value = r),
+              "info-template": S.value
             }, null, 8, ["pagination", "info-template"])) : y("", !0),
-            M(n.$slots, "dsg-table--footer-left-extras", {
-              data: h.value,
-              perPage: u.value
+            F(i.$slots, "dsg-table--footer-left-extras", {
+              data: w.value,
+              perPage: c.value
             })
           ])
         ]),
-        P("div", _t, [
-          M(n.$slots, "dsg-table--footer-center", {
-            data: h.value,
-            perPage: u.value
+        k("div", ua, [
+          F(i.$slots, "dsg-table--footer-center", {
+            data: w.value,
+            perPage: c.value
           }, () => [
-            M(n.$slots, "dsg-table--footer-center-extras", {
-              data: h.value,
-              perPage: u.value
+            F(i.$slots, "dsg-table--footer-center-extras", {
+              data: w.value,
+              perPage: c.value
             })
           ])
         ]),
-        P("div", ea, [
-          M(n.$slots, "dsg-table--footer-right", {
-            data: h.value,
-            perPage: u.value
+        k("div", ca, [
+          F(i.$slots, "dsg-table--footer-right", {
+            data: w.value,
+            perPage: c.value
           }, () => [
-            E.value === !1 && e.displayPaginationInfo ? (s(), V(xe, {
+            L.value === !1 && e.displayPaginationInfo ? (s(), O(Ae, {
               key: 0,
               ref: "pagination",
-              pagination: h.value,
-              "onUpdate:pagination": o[16] || (o[16] = (c) => h.value = c),
-              "onDsgTable:changePage": A
+              pagination: w.value,
+              "onUpdate:pagination": n[18] || (n[18] = (r) => w.value = r),
+              "onDsgTable:changePage": q
             }, null, 8, ["pagination"])) : y("", !0),
-            M(n.$slots, "dsg-table--footer-right-extras", {
-              data: h.value,
-              perPage: u.value
+            F(i.$slots, "dsg-table--footer-right-extras", {
+              data: w.value,
+              perPage: c.value
             })
           ])
         ])
       ], 512)) : y("", !0)
     ]));
   }
-}), aa = { class: "dsg-table--per-page" }, la = ["value", "textContent"], sa = /* @__PURE__ */ j({
+}), va = { class: "dsg-table--per-page" }, fa = ["value", "textContent"], ba = /* @__PURE__ */ Q({
   __name: "DsgTablePerPage",
   props: {
     perPageOptions: { default: () => [10, 20, 30, 50, 100] },
     perPage: {}
   },
   setup(e) {
-    return (L, v) => (s(), r("div", aa, [
-      be(P("select", {
-        "onUpdate:modelValue": v[0] || (v[0] = (d) => e.perPage.perPage = d),
+    return (M, v) => (s(), d("div", va, [
+      ke(k("select", {
+        "onUpdate:modelValue": v[0] || (v[0] = (u) => e.perPage.perPage = u),
         class: "dsg-table--per-page-select",
-        onChange: v[1] || (v[1] = (d) => e.perPage.change(e.perPage.perPage))
+        onChange: v[1] || (v[1] = (u) => e.perPage.change(e.perPage.perPage))
       }, [
-        (s(!0), r(H, null, N(e.perPageOptions, (d) => (s(), r("option", {
-          key: d,
-          value: d,
-          textContent: se(d)
-        }, null, 8, la))), 128))
+        (s(!0), d(H, null, j(e.perPageOptions, (u) => (s(), d("option", {
+          key: u,
+          value: u,
+          textContent: ne(u)
+        }, null, 8, fa))), 128))
       ], 544), [
-        [Ye, e.perPage.perPage]
+        [lt, e.perPage.perPage]
       ])
     ]));
   }
-}), na = ta, oa = Me, ia = sa, ra = Te, da = xe, ua = Fe, ca = Le, ga = Be, wa = {
-  DsgTable: na,
-  DsgTableActions: oa,
-  DsgTablePerPage: ia,
-  DsgTableFilter: ra,
-  DsgTablePagination: da,
-  DsgTablePaginationInfo: ua,
-  DsgTableSearch: ca,
-  DsgTableRowHeader: ga
+}), ha = ga, wa = He, ma = ba, ya = Le, pa = Ae, ka = Ue, Pa = Ie, Da = qe, Fa = {
+  DsgTable: ha,
+  DsgTableActions: wa,
+  DsgTablePerPage: ma,
+  DsgTableFilter: ya,
+  DsgTablePagination: pa,
+  DsgTablePaginationInfo: ka,
+  DsgTableSearch: Pa,
+  DsgTableRowHeader: Da
 };
 export {
-  na as DsgTable,
-  oa as DsgTableActions,
-  ra as DsgTableFilter,
-  da as DsgTablePagination,
-  ua as DsgTablePaginationInfo,
-  ia as DsgTablePerPage,
-  ga as DsgTableRowHeader,
-  ca as DsgTableSearch,
-  wa as default
+  ha as DsgTable,
+  wa as DsgTableActions,
+  ya as DsgTableFilter,
+  pa as DsgTablePagination,
+  ka as DsgTablePaginationInfo,
+  ma as DsgTablePerPage,
+  Da as DsgTableRowHeader,
+  Pa as DsgTableSearch,
+  Fa as default
 };