dap-design-system 0.62.0 → 0.62.2

package/dist/components/datatable/datatable.component.js

@@ -1,28 +1,28 @@
-var O = Object.defineProperty, M = Object.defineProperties;
+var D = Object.defineProperty, H = Object.defineProperties;
 var N = Object.getOwnPropertyDescriptors;
 var C = Object.getOwnPropertySymbols;
-var I = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
-var B = (d, t, e) => t in d ? O(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e, m = (d, t) => {
+var I = Object.prototype.hasOwnProperty, T = Object.prototype.propertyIsEnumerable;
+var B = (d, t, e) => t in d ? D(d, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[t] = e, m = (d, t) => {
   for (var e in t || (t = {}))
     I.call(t, e) && B(d, e, t[e]);
   if (C)
     for (var e of C(t))
-      P.call(t, e) && B(d, e, t[e]);
+      T.call(t, e) && B(d, e, t[e]);
   return d;
-}, S = (d, t) => M(d, N(t));
-var E = (d) => typeof d == "symbol" ? d : d + "", T = (d, t) => {
+}, S = (d, t) => H(d, N(t));
+var P = (d) => typeof d == "symbol" ? d : d + "", E = (d, t) => {
   var e = {};
   for (var i in d)
     I.call(d, i) && t.indexOf(i) < 0 && (e[i] = d[i]);
   if (d != null && C)
     for (var i of C(d))
-      t.indexOf(i) < 0 && P.call(d, i) && (e[i] = d[i]);
+      t.indexOf(i) < 0 && T.call(d, i) && (e[i] = d[i]);
   return e;
 };
-import { TableController as U, flexRender as R } from "../../node_modules/@tanstack/lit-table/build/lib/index.js";
-import { clsx as y } from "../../node_modules/clsx/dist/clsx.js";
+import { TableController as U, flexRender as _ } from "../../node_modules/@tanstack/lit-table/build/lib/index.js";
+import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as f } from "../../node_modules/lit-html/lit-html.js";
+import { nothing as y } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as z } from "../../node_modules/@lit/reactive-element/decorators/state.js";
@@ -31,9 +31,9 @@ import { repeat as w } from "../../node_modules/lit-html/directives/repeat.js";
 import { html as p, unsafeStatic as L } from "../../node_modules/lit-html/static.js";
 import { DdsElement as K } from "../../internal/dds-hu-element.js";
 import "../../localization/localization.js";
-import F from "../checkbox/checkbox.component.js";
-import j from "../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js";
-import W from "../icons/arrows/arrows-arrow-up-s-line/arrows-arrow-up-s-line.component.js";
+import W from "../checkbox/checkbox.component.js";
+import F from "../icons/arrows/arrows-arrow-down-s-line/arrows-arrow-down-s-line.component.js";
+import j from "../icons/arrows/arrows-arrow-up-s-line/arrows-arrow-up-s-line.component.js";
 import X from "../pager/pager.component.js";
 import Z from "../skeleton/skeleton.component.js";
 import G from "../spinner/spinner.component.js";
@@ -43,11 +43,11 @@ import { t as u } from "../../node_modules/i18next/dist/esm/i18next.js";
 import { getPaginationRowModel as q, getSortedRowModel as J, getCoreRowModel as Q } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
 import { unsafeCSS as tt } from "../../node_modules/@lit/reactive-element/css-tag.js";
 var et = Object.defineProperty, r = (d, t, e, i) => {
-  for (var n = void 0, s = d.length - 1, o; s >= 0; s--)
-    (o = d[s]) && (n = o(t, e, n) || n);
-  return n && et(t, e, n), n;
+  for (var o = void 0, s = d.length - 1, n; s >= 0; s--)
+    (n = d[s]) && (o = n(t, e, o) || o);
+  return o && et(t, e, o), o;
 };
-const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
+const x = "__multiSelect__", it = 40, nt = 100, A = 10, $ = class $ extends K {
   constructor() {
     super(...arguments), this.tableController = new U(this), this.stickyOffsets = /* @__PURE__ */ new Map(), this.data = [], this.columns = [], this.rowKey = "id", this.enableRowSelection = !1, this.stickySelectionColumn = !1, this.enableSorting = !1, this.enableColumnResizing = !1, this.manualSorting = !1, this.manualPagination = !1, this.autoResetPageIndex = !1, this.enableRowClick = !1, this.loading = !1, this.enableStripedRows = !1, this.loadingType = "spinner", this.loadingVariant = "neutral", this.loadingSize = "lg", this.disableHeaderOnEmpty = "true", this.showPagerOnEmpty = !1, this.pager = !1, this.showPageSizeOptions = "true", this.showPageIndex = "true", this.showPageCount = "true", this.showFirstButton = "true", this.showPreviousButton = "true", this.showNextButton = "true", this.showLastButton = "true", this.showPageNumbers = "false", this.siblingCount = 1, this.sortButtonTestId = "datatable-sort-button", this.pageSizeOptions = [10, 25, 50, 100], this._sorting = [], this._rowSelection = {}, this._pagination = {
       pageIndex: 0,
@@ -85,11 +85,12 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
       <colgroup>
         ${w(
         e,
-        (n, s) => n.id || `col-${s}`,
-        (n) => {
-          const s = n;
-          let o;
-          return i && s.id && i[s.id] ? o = `${i[s.id]}px` : s.size ? o = `${s.size}px` : o = "auto", p`<col style="width: ${o};" />`;
+        (o, s) => o.id || `col-${s}`,
+        (o) => {
+          const s = o;
+          let n;
+          const c = this.columnIdOf(s);
+          return c && i[c] ? n = `${i[c]}px` : s.size ? n = `${s.size}px` : n = "auto", p`<col style="width: ${n};" />`;
         }
       )}
       </colgroup>
@@ -102,7 +103,7 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
       (e) => p`
             <tr
               part="header-row"
-              class=${y("data-table-header-row", {
+              class=${f("data-table-header-row", {
         "data-table-header-row--striped": this.enableStripedRows
       })}>
               ${w(
@@ -116,14 +117,14 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
       </thead>
     `, this.renderSkeletonRows = (t, e) => p`
       ${w(
-      Array.from({ length: t }, (i, n) => n),
+      Array.from({ length: t }, (i, o) => o),
       (i) => i,
       (i) => p`
           <tr class="data-table-row">
             ${w(
-        Array.from({ length: e }, (n, s) => s),
-        (n) => n,
-        (n) => p`<td class="data-table-cell">
+        Array.from({ length: e }, (o, s) => s),
+        (o) => o,
+        (o) => p`<td class="data-table-cell">
                   <dap-ds-skeleton></dap-ds-skeleton>
                 </td>`
       )}
@@ -171,34 +172,34 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
                       </div>
                     </td>
                   </tr>` : t.getRowModel().rows.map(
-        (n, s) => p`
+        (o, s) => p`
                       <tr
                         part="row"
                         role=${this.enableRowClick ? "button" : "row"}
                         tabindex=${this.enableRowClick ? 0 : -1}
-                        aria-selected=${n.getIsSelected()}
+                        aria-selected=${o.getIsSelected()}
                         aria-rowindex=${s + 2}
-                        class=${y("data-table-row", {
-          "data-table-row--selected": n.getIsSelected(),
+                        class=${f("data-table-row", {
+          "data-table-row--selected": o.getIsSelected(),
           "data-table-row--clickable": this.enableRowClick,
           "data-table-row--striped": this.enableStripedRows
         })}
-                        @click=${() => this.handleRowClick(n)}
-                        @keydown=${(o) => this.handleRowKeydown(o, n)}>
-                        ${n.getVisibleCells().map((o) => {
-          const g = o.column.columnDef, c = this.stickyOffsets.get(o.column.id), h = [
-            g.textAlign && `text-align: ${g.textAlign};`,
-            this.getStickyStyle(o.column.id)
+                        @click=${() => this.handleRowClick(o)}
+                        @keydown=${(n) => this.handleRowKeydown(n, o)}>
+                        ${o.getVisibleCells().map((n) => {
+          const c = n.column.columnDef, g = this.stickyOffsets.get(n.column.id), h = [
+            c.textAlign && `text-align: ${c.textAlign};`,
+            this.getStickyStyle(n.column.id)
           ].filter(Boolean).join(" ") || void 0;
           return p`
                             <td
                               part="cell"
-                              class=${y(
+                              class=${f(
             "data-table-cell",
-            c && `data-table-cell--sticky-${c.side}`
+            g && `data-table-cell--sticky-${g.side}`
           )}
                               style="${b(h)}">
-                              ${this.renderCell(o)}
+                              ${this.renderCell(n)}
                             </td>
                           `;
         })}
@@ -244,14 +245,14 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
   // without a size contributes 0 and the next one on that side would overlap it.
   computeStickyOffsets(t) {
     const e = /* @__PURE__ */ new Map(), i = t.getVisibleLeafColumns();
-    let n = 0;
-    for (let o = i.length - 1; o >= 0; o--) {
-      const g = i[o];
-      g.columnDef.sticky === "right" && (e.set(g.id, { side: "right", offset: n }), n += g.getSize());
+    let o = 0;
+    for (let n = i.length - 1; n >= 0; n--) {
+      const c = i[n];
+      c.columnDef.sticky === "right" && (e.set(c.id, { side: "right", offset: o }), o += c.getSize());
     }
     let s = 0;
-    for (const o of i)
-      o.columnDef.sticky === "left" && (e.set(o.id, { side: "left", offset: s }), s += o.getSize());
+    for (const n of i)
+      n.columnDef.sticky === "left" && (e.set(n.id, { side: "left", offset: s }), s += n.getSize());
     this.stickyOffsets = e;
   }
   // Inline sticky positioning for a pinned column. z-index lifts the cell above
@@ -265,31 +266,31 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
   }
   renderHeaderCell(t, e = !1) {
     var k;
-    const i = t.column.columnDef, n = t.column.getCanSort(), s = t.column.getIsSorted(), o = t.column.getNextSortingOrder(), g = (k = i.disableDefaultSorting) != null ? k : !1, c = this.stickyOffsets.get(t.column.id), h = [this.getHeaderCellStyle(t), this.getStickyStyle(t.column.id)].filter(Boolean).join(" ") || void 0, v = i.headerTextAlign ? `justify-content: ${i.headerTextAlign};` : void 0, D = this.getSortIcon(s), H = this.getSortTitle(n, o), _ = this.getCanResize(t);
+    const i = t.column.columnDef, o = t.column.getCanSort(), s = t.column.getIsSorted(), n = t.column.getNextSortingOrder(), c = (k = i.disableDefaultSorting) != null ? k : !1, g = this.stickyOffsets.get(t.column.id), h = [this.getHeaderCellStyle(t), this.getStickyStyle(t.column.id)].filter(Boolean).join(" ") || void 0, v = i.headerTextAlign ? `justify-content: ${i.headerTextAlign};` : void 0, O = this.getSortIcon(s), M = this.getSortTitle(o, n), R = this.getCanResize(t);
     return p`
       <th
         colspan="${t.colSpan}"
         rowspan="${t.rowSpan}"
         part="header-cell"
         id="${this.getHeaderCellId(t.column.id)}"
-        class=${y(
+        class=${f(
       "data-table-header-cell",
-      c && `data-table-header-cell--sticky-${c.side}`,
-      _ && "data-table-header-cell--resizable"
+      g && `data-table-header-cell--sticky-${g.side}`,
+      R && "data-table-header-cell--resizable"
     )}
         scope="col"
-        aria-sort=${n && !this.shouldDisableHeaderActions ? this.getAriaSortValue(s) : "none"}
+        aria-sort=${o && !this.shouldDisableHeaderActions ? this.getAriaSortValue(s) : "none"}
         style="${b(h)}">
         ${this.renderHeaderCellContent(
       t,
       i,
-      n,
-      g,
-      H,
+      o,
+      c,
+      M,
       v,
-      D
+      O
     )}
-        ${_ ? this.renderResizeHandle(t) : f}
+        ${R ? this.renderResizeHandle(t) : y}
       </th>
     `;
   }
@@ -316,12 +317,12 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
     var s;
     const i = (s = this._columnSizing[t.column.id]) != null ? s : t.column.columnDef.size;
     if (i) return i;
-    const n = e.closest("th");
-    return (n == null ? void 0 : n.getBoundingClientRect().width) || t.column.getSize();
+    const o = e.closest("th");
+    return (o == null ? void 0 : o.getBoundingClientRect().width) || t.column.getSize();
   }
   setColumnWidth(t, e) {
-    const { min: i, max: n } = this.getResizeBounds(t), s = Math.round(
-      Math.min(Math.max(e, i), n != null ? n : Number.POSITIVE_INFINITY)
+    const { min: i, max: o } = this.getResizeBounds(t), s = Math.round(
+      Math.min(Math.max(e, i), o != null ? o : Number.POSITIVE_INFINITY)
     );
     return this._columnSizing[t.column.id] === s ? !1 : (this._columnSizing = S(m({}, this._columnSizing), { [t.column.id]: s }), !0);
   }
@@ -333,45 +334,45 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
   handleResizePointerDown(t, e) {
     if (t.button !== 0) return;
     t.preventDefault(), t.stopPropagation();
-    const i = t.currentTarget, n = t.clientX, s = this.getStartWidth(e, i);
-    let o = !1;
+    const i = t.currentTarget, o = t.clientX, s = this.getStartWidth(e, i);
+    let n = !1;
     try {
       i.setPointerCapture(t.pointerId);
     } catch (h) {
     }
     this.toggleAttribute("resizing", !0);
-    const g = (h) => {
-      o = this.setColumnWidth(e, s + h.clientX - n) || o;
-    }, c = () => {
-      window.removeEventListener("pointermove", g), window.removeEventListener("pointerup", c), window.removeEventListener("pointercancel", c), this.toggleAttribute("resizing", !1), o && this.emitColumnSizingChange();
+    const c = (h) => {
+      n = this.setColumnWidth(e, s + h.clientX - o) || n;
+    }, g = () => {
+      window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", g), window.removeEventListener("pointercancel", g), this.toggleAttribute("resizing", !1), n && this.emitColumnSizingChange();
     };
-    window.addEventListener("pointermove", g), window.addEventListener("pointerup", c), window.addEventListener("pointercancel", c);
+    window.addEventListener("pointermove", c), window.addEventListener("pointerup", g), window.addEventListener("pointercancel", g);
   }
   handleResizeKeydown(t, e) {
-    const { min: i, max: n } = this.getResizeBounds(e), s = this.getStartWidth(e, t.currentTarget), o = {
+    const { min: i, max: o } = this.getResizeBounds(e), s = this.getStartWidth(e, t.currentTarget), n = {
       ArrowLeft: s - A,
       ArrowRight: s + A,
       Home: i,
-      End: n
+      End: o
     };
-    if (!(t.key in o)) return;
+    if (!(t.key in n)) return;
     t.preventDefault(), t.stopPropagation();
-    const g = o[t.key];
-    g !== void 0 && this.setColumnWidth(e, g) && this.emitColumnSizingChange();
+    const c = n[t.key];
+    c !== void 0 && this.setColumnWidth(e, c) && this.emitColumnSizingChange();
   }
   // Double-click drops the override, so the column falls back to its defined size
   handleResizeReset(t, e) {
     var s;
     if (t.preventDefault(), t.stopPropagation(), !(e.column.id in this._columnSizing)) return;
-    const o = this._columnSizing, { [s = e.column.id]: i } = o, n = T(o, [E(s)]);
-    this._columnSizing = n, this.emitColumnSizingChange();
+    const n = this._columnSizing, { [s = e.column.id]: i } = n, o = E(n, [P(s)]);
+    this._columnSizing = o, this.emitColumnSizingChange();
   }
   // A focusable splitter (WAI-ARIA window splitter pattern): drag with the
   // pointer, ArrowLeft/ArrowRight to step, Home/End for the bounds. It is a
   // sibling of the sort button, so its clicks never toggle sorting.
   renderResizeHandle(t) {
     var s;
-    const { min: e, max: i } = this.getResizeBounds(t), n = Math.round(
+    const { min: e, max: i } = this.getResizeBounds(t), o = Math.round(
       (s = this._columnSizing[t.column.id]) != null ? s : t.column.getSize()
     );
     return p`<div
@@ -383,19 +384,19 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
       aria-labelledby="data-table-resize-label ${this.getHeaderCellId(
       t.column.id
     )}"
-      aria-valuenow=${n}
+      aria-valuenow=${o}
       aria-valuemin=${e}
       aria-valuemax=${b(i)}
-      @pointerdown=${(o) => this.handleResizePointerDown(o, t)}
-      @keydown=${(o) => this.handleResizeKeydown(o, t)}
-      @dblclick=${(o) => this.handleResizeReset(o, t)}
-      @click=${(o) => o.stopPropagation()}></div>`;
+      @pointerdown=${(n) => this.handleResizePointerDown(n, t)}
+      @keydown=${(n) => this.handleResizeKeydown(n, t)}
+      @dblclick=${(n) => this.handleResizeReset(n, t)}
+      @click=${(n) => n.stopPropagation()}></div>`;
   }
-  renderHeaderCellContent(t, e, i, n, s, o, g) {
+  renderHeaderCellContent(t, e, i, o, s, n, c) {
     if (!i)
-      return R(e.header, t.getContext());
-    const c = n || this.shouldDisableHeaderActions ? "div" : "dap-ds-button", h = !n && !this.shouldDisableHeaderActions ? t.column.getToggleSortingHandler() : null, v = i && !this.shouldDisableHeaderActions ? "pointer" : "not-allowed";
-    return p`<${L(c)}
+      return _(e.header, t.getContext());
+    const g = o || this.shouldDisableHeaderActions ? "div" : "dap-ds-button", h = !o && !this.shouldDisableHeaderActions ? t.column.getToggleSortingHandler() : null, v = i && !this.shouldDisableHeaderActions ? "pointer" : "not-allowed";
+    return p`<${L(g)}
       class="data-table-header-cell__controller"
       variant="clean"
       data-testid="${this.sortButtonTestId}-${t.column.id}"
@@ -405,15 +406,15 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
       <span 
         part="content" 
         class="data-table-header-cell__content"
-        style="${b(o)}">
-        ${R(e.header, t.getContext())}
-        ${g}
+        style="${b(n)}">
+        ${_(e.header, t.getContext())}
+        ${c}
       </span>
-    </${L(c)}>`;
+    </${L(g)}>`;
   }
   getHeaderCellStyle(t) {
-    var n;
-    const e = t.column.columnDef, i = (n = this._columnSizing[t.column.id]) != null ? n : e.size;
+    var o;
+    const e = t.column.columnDef, i = (o = this._columnSizing[t.column.id]) != null ? o : e.size;
     if (!(!i && !e.maxSize && !e.headerTextAlign))
       return `
       ${i ? `width: ${i}px;` : ""}
@@ -440,8 +441,8 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
    * render callbacks, and Lit templates
    */
   renderCell(t) {
-    const e = t.column.columnDef.cell, i = t.getContext(), n = typeof e == "function" ? e(i) : e, s = Y(n);
-    return typeof s == "string" || typeof s == "number" || typeof s == "boolean" || s === null || s === void 0 || s instanceof HTMLElement ? s : R(e, i);
+    const e = t.column.columnDef.cell, i = t.getContext(), o = typeof e == "function" ? e(i) : e, s = Y(o);
+    return typeof s == "string" || typeof s == "number" || typeof s == "boolean" || s === null || s === void 0 || s instanceof HTMLElement ? s : _(e, i);
   }
   handleRowClick(t) {
     this.enableRowClick && this.emit("dds-row-click", { row: t });
@@ -455,8 +456,25 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
       t.preventDefault(), this.handleRowClick(e);
     }
   }
+  // The id TanStack keys sizing state by: an explicit id, else the accessorKey
+  columnIdOf(t) {
+    var e;
+    return (e = t.id) != null ? e : t.accessorKey;
+  }
+  // The table's min-width: the sum of every column's nominal width. A fixed-layout
+  // table only grows to its sized columns, so without this the auto columns get
+  // squeezed out. (`min-width: max-content` is not an option: Firefox resolves a
+  // fixed-layout table's max-content to infinity and stretches the first column.)
+  // Reads the column definitions, not table.getAllLeafColumns(): TanStack merges
+  // its default 150px size into every column, which would hide the auto ones.
+  getTableMinWidth() {
+    return this.columnsMemo().reduce((t, e) => {
+      const i = e, o = this.columnIdOf(i), s = o && this._columnSizing[o] || i.size || i.minSize || nt;
+      return t + s;
+    }, 0);
+  }
   render() {
-    var e, i, n, s;
+    var e, i, o, s;
     const t = this.tableController.table(S(m({
       data: this.data,
       columns: this.columnsMemo(),
@@ -472,26 +490,26 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
       enableRowSelection: this.enableRowSelection,
       manualPagination: this.manualPagination,
       autoResetPageIndex: this.autoResetPageIndex,
-      onSortingChange: (o) => {
-        typeof o == "function" ? this._sorting = o(this._sorting) : this._sorting = o, this.emit("dds-sorting-change", { sorting: this._sorting });
+      onSortingChange: (n) => {
+        typeof n == "function" ? this._sorting = n(this._sorting) : this._sorting = n, this.emit("dds-sorting-change", { sorting: this._sorting });
       },
       getCoreRowModel: Q()
     }, !this.manualSorting && {
       getSortedRowModel: J()
     }), {
       getPaginationRowModel: q(),
-      onPaginationChange: (o) => {
-        typeof o == "function" ? this._pagination = o(this._pagination) : this._pagination = o, this.emit("dds-pagination-change", {
+      onPaginationChange: (n) => {
+        typeof n == "function" ? this._pagination = n(this._pagination) : this._pagination = n, this.emit("dds-pagination-change", {
           pagination: {
             pageIndex: this._pagination.pageIndex,
             pageSize: this._pagination.pageSize
           }
         });
       },
-      onRowSelectionChange: (o) => {
-        typeof o == "function" ? this._rowSelection = o(this._rowSelection) : this._rowSelection = o, this.emit("dds-selection-change", { selection: this._rowSelection });
+      onRowSelectionChange: (n) => {
+        typeof n == "function" ? this._rowSelection = n(this._rowSelection) : this._rowSelection = n, this.emit("dds-selection-change", { selection: this._rowSelection });
       },
-      getRowId: (o) => o[this.rowKey],
+      getRowId: (n) => n[this.rowKey],
       rowCount: (e = this.rowCount) != null ? e : this.data ? this.data.length : 0,
       debugTable: this.debug,
       debugHeaders: this.debug,
@@ -506,27 +524,28 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
       (i = this.ariaLabel) != null ? i : u("datatable.tableDescription")
     )}
           aria-describedby=${b(this.ariaDescribedBy)}
-          aria-rowcount=${(n = this.rowCount) != null ? n : this.data ? this.data.length : 0}
-          class=${y("data-table", {
+          aria-rowcount=${(o = this.rowCount) != null ? o : this.data ? this.data.length : 0}
+          class=${f("data-table", {
       "data-table--loading": this.loading
-    })}>
+    })}
+          style="min-width: ${this.getTableMinWidth()}px;">
           ${this.caption ? p`<caption class="visually-hidden">
                 ${this.caption}
-              </caption>` : f}
+              </caption>` : y}
           ${this.renderColgroup(t)} ${this.renderHeader(t)}
           ${this.renderBody(t)}
         </table>
       </div>
       ${this.enableColumnResizing ? p`<span id="data-table-resize-label" hidden
             >${u("datatable.resizeColumn")}</span
-          >` : f}
+          >` : y}
       ${this._statusMessage ? p`<div
             aria-live="polite"
             aria-atomic="true"
             class="visually-hidden"
             id="table-status">
             ${this._statusMessage}
-          </div>` : f}
+          </div>` : y}
       ${this.pager && !this.isTableEmpty || this.pager && this.showPagerOnEmpty && this.isTableEmpty ? p`<dap-ds-pager
             class="data-table-pager"
             part="pager"
@@ -551,8 +570,8 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
             .lastButtonLabel=${this.lastButtonLabel}
             .pageStateText=${this.pageStateText}
             exportparts="base:pager-base, first:pager-first, previous:pager-previous, next:pager-next, last:pager-last, page-size:pager-page-size-select, page-size-select-base:page-size-select-base, page-size-select-trigger:page-size-select-trigger, pager-button-first-base:pager-button-first-base, pager-button-first-content:pager-button-first-content, pager-button-previous-base:pager-button-previous-base, pager-button-previous-content:pager-button-previous-content, pager-button-next-base:pager-button-next-base, pager-button-next-content:pager-button-next-content, pager-button-last-base:pager-button-last-base, pager-button-last-content:pager-button-last-content, page-numbers:pager-page-numbers, page-number:pager-page-number, page-number-active:pager-page-number-active, page-number-base:pager-page-number-base, page-number-content:pager-page-number-content, page-info:pager-page-info"
-            @dds-pagination-change=${(o) => {
-      o.preventDefault(), o.stopPropagation(), o.detail.action === "pageSize" ? t.setPageSize(o.detail.pagination.pageSize) : t.setPageIndex(o.detail.pagination.pageIndex);
+            @dds-pagination-change=${(n) => {
+      n.preventDefault(), n.stopPropagation(), n.detail.action === "pageSize" ? t.setPageSize(n.detail.pagination.pageSize) : t.setPageIndex(n.detail.pagination.pageIndex);
     }}>
             <slot name="first-button-label" slot="first-button-label">
               ${this.firstButtonLabel || u("pager.first")}
@@ -566,14 +585,14 @@ const x = "__multiSelect__", it = 40, A = 10, $ = class $ extends K {
             <slot name="last-button-label" slot="last-button-label">
               ${this.lastButtonLabel || u("pager.last")}
             </slot>
-          </dap-ds-pager>` : f}
+          </dap-ds-pager>` : y}
     `;
   }
 };
 $.tagName = "dap-ds-datatable", $.dependencies = {
-  "dap-ds-checkbox": F,
-  "dap-ds-icon-arrow-up-s-line": W,
-  "dap-ds-icon-arrow-down-s-line": j,
+  "dap-ds-checkbox": W,
+  "dap-ds-icon-arrow-up-s-line": j,
+  "dap-ds-icon-arrow-down-s-line": F,
   "dap-ds-skeleton": Z,
   "dap-ds-spinner": G,
   "dap-ds-pager": X