@k2b/ui 0.48.0 → 0.50.0

package/dist/browser/content/DataTable.js

@@ -1,8 +1,9 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
@@ -17,22 +18,37 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-title>`
   _tmpl$4 = /*#__PURE__*/_$template(`<a class="k2b-data-table__header-content k2b-data-table__sort">`),
   _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class="k2b-data-table__header-content k2b-data-table__sort">`),
   _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-data-table__header-content>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<caption class=k2b-sr-only>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div role=region tabindex=0><table><!$><!/><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row></tr></thead><tbody></tbody><!$><!/></table><!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<th scope=col>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<tr><td class=k2b-data-table__empty>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<tr class=k2b-data-table__row data-loading=true aria-hidden=true>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<td><span class=k2b-data-table__skeleton>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<tr>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<td><div>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<tfoot class=k2b-data-table__foot data-sticky=true><tr class=k2b-data-table__foot-row>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<td class=k2b-data-table__footer-cell>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-data-table__scrollbar aria-hidden=true><span>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<footer>`);
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-data-table__bar><!$><!/><span class=k2b-data-table__bar-track aria-hidden=true><span>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<td class=k2b-data-table__details-toggle><button type=button class=k2b-data-table__details-button><i aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<tr><!$><!/><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<tr class=k2b-data-table__details><td><dl>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<td><div>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div><dt></dt><dd>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<caption class=k2b-sr-only>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<th scope=col class=k2b-data-table__details-toggle><span class=k2b-sr-only>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div role=region tabindex=0><table><!$><!/><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row><!$><!/><!$><!/></tr></thead><!$><!/><!$><!/></table><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<th scope=col>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<tbody>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<tr>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<td class=k2b-data-table__empty>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<button type=button class=k2b-data-table__clear-query>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<td class=k2b-data-table__no-match><!$><!/> <!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<td class=k2b-data-table__details-toggle>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<tr class=k2b-data-table__row data-loading=true aria-hidden=true><!$><!/><!$><!/>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<td><span class=k2b-data-table__skeleton>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<tbody><!$><!/><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<tbody aria-hidden=true><tr><td class=k2b-data-table__fill>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<tbody class=k2b-data-table__group><tr class=k2b-data-table__group-row><th scope=rowgroup><!$><!/><span class=k2b-data-table__group-count><span aria-hidden=true></span><span class=k2b-sr-only>, <!$><!/></span></span></th></tr><!$><!/>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<td class="k2b-data-table__footer-cell k2b-data-table__details-toggle">`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<tr class=k2b-data-table__details data-footer=true><td><dl>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<tfoot class=k2b-data-table__foot data-sticky=true><tr class=k2b-data-table__foot-row><!$><!/><!$><!/></tr><!$><!/>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<td class=k2b-data-table__footer-cell>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div class=k2b-data-table__scrollbar aria-hidden=true><span>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<footer>`);
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, Match, on, onCleanup, onMount, Show, Switch, useContext } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { announce } from "../feedback/announce";
@@ -40,15 +56,20 @@ import { suppressTextSelection } from "../internal/text-selection";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { PanelHeader } from "../layout/PanelHeader";
+import { DeltaBadge } from "../surfaces/delta-badge";
 import { Paper } from "../surfaces/Paper";
 import Placeholder from "../surfaces/Placeholder";
+import { StatusBadge } from "../surfaces/StatusBadge";
+import { formatTableNumber, groupRows, isEmptyCell, isNumericColumnType, readTableValue, tableCellText } from "./data-table-columns";
 import { useDataTableMessages } from "./data-table-messages";
+import { FlowAmount } from "./FlowAmount";
 const DataTablePanelContext = createContext();
-const defaultRender = (value, locale, messages) => {
+const defaultRender = (value, locale, numbers, messages) => {
   if (value === null || value === undefined || value === "") return "—";
   if (value instanceof Date) return value.toLocaleString(locale);
   if (typeof value === "boolean") return value ? messages.yes : messages.no;
-  if (typeof value === "number" || typeof value === "bigint") return String(value);
+  // Numbers read in the reader's language: grouping and decimal mark follow the locale, at most three decimals.
+  if (typeof value === "number" || typeof value === "bigint") return numbers.format(Object.is(value, -0) ? 0 : value);
   if (typeof value === "string") return value;
   return JSON.stringify(value);
 };
@@ -197,17 +218,14 @@ function DataTableRoot(props) {
     suppressTextSelection(event.pointerId);
     scrollFromPointer(event, axis);
   };
-  const valueOf = (row, col) => {
-    if (typeof col.value === "function") return col.value(row);
-    if (col.value) return row[col.value];
-    return undefined;
-  };
+  const valueOf = (row, col) => readTableValue(row, col);
   const columnPresentation = createMemo(() => {
     const presentation = new Map();
     for (const col of props.columns) {
-      let numeric = false;
-      let date = false;
-      if (col.align === undefined || col.nowrap === undefined) {
+      // A typed column says what it holds; only an untyped one is read from its first value.
+      let numeric = isNumericColumnType(col.type);
+      let date = col.type === "date";
+      if (!col.type && (col.align === undefined || col.nowrap === undefined)) {
         for (const row of props.rows) {
           const value = valueOf(row, col);
           if (value === null || value === undefined || value === "") continue;
@@ -230,6 +248,44 @@ function DataTableRoot(props) {
     return align === "left" ? undefined : align;
   };
   const nowrapAttr = col => columnPresentation().get(col.id)?.nowrap ? "true" : undefined;
+  /** Text columns wrap inside their cell; every other value keeps one line. */
+  const wrapAttr = col => col.type === "text" && col.nowrap !== true ? "true" : undefined;
+  const priorityAttr = col => col.priority === 2 || col.priority === 3 ? String(col.priority) : undefined;
+  /** The lowest priority present: 3 shows the details toggle below 560 px, 2 below 420 px. */
+  const detailsPriority = createMemo(() => {
+    const priorities = props.columns.map(col => col.priority ?? 1);
+    return priorities.includes(3) ? "3" : priorities.includes(2) ? "2" : undefined;
+  });
+  const hiddenColumns = () => props.columns.filter(col => priorityAttr(col));
+  const columnCount = () => props.columns.length + (detailsPriority() ? 1 : 0);
+  const [openDetails, setOpenDetails] = createSignal(new Set());
+  const toggleDetails = row => setOpenDetails(open => {
+    const next = new Set(open);
+    if (!next.delete(row)) next.add(row);
+    return next;
+  });
+  /** A bar column fills its track at `max`, or else at its largest value. */
+  const barMax = createMemo(() => {
+    const max = new Map();
+    for (const col of props.columns) {
+      if (col.type !== "bar") continue;
+      if (col.max !== undefined && col.max > 0) {
+        max.set(col.id, col.max);
+        continue;
+      }
+      let largest = 0;
+      for (const row of props.rows) {
+        const value = Number(valueOf(row, col));
+        if (Number.isFinite(value)) largest = Math.max(largest, Math.abs(value));
+      }
+      max.set(col.id, largest);
+    }
+    return max;
+  });
+  const groups = createMemo(() => {
+    const col = props.groupBy ? props.columns.find(entry => entry.id === props.groupBy) : undefined;
+    return col ? groupRows(props.rows, col, locale()) : null;
+  });
   const sortKeyOf = col => col.sortable === true ? col.id : typeof col.sortable === "string" ? col.sortable : null;
 
   /**
@@ -332,8 +388,60 @@ function DataTableRoot(props) {
       }
     });
   };
-  const renderValueDefault = value => defaultRender(value, locale(), messages());
-  const renderCellDefault = (row, col) => renderValueDefault(valueOf(row, col));
+  const numberFormat = createMemo(() => new Intl.NumberFormat(locale()));
+  const renderValueDefault = value => defaultRender(value, locale(), numberFormat(), messages());
+  /** A typed column shows its value the way its type reads; an untyped one falls back to the plain rendering. */
+  const renderTypedValue = (col, value) => {
+    if (!col.type || isEmptyCell(value)) return renderValueDefault(value);
+    if (col.type === "status") {
+      const state = col.states?.[String(value)];
+      return state ? _$createComponent(StatusBadge, {
+        get tone() {
+          return state.tone;
+        },
+        get label() {
+          return state.label;
+        },
+        variant: "dot"
+      }) : String(value);
+    }
+    if (col.type === "flow" && col.format?.currency && Number.isFinite(Number(value))) return _$createComponent(FlowAmount, {
+      get value() {
+        return Number(value);
+      },
+      get currency() {
+        return col.format.currency;
+      },
+      get decimals() {
+        return col.format.decimals;
+      }
+    });
+    if (col.type === "delta" && Number.isFinite(Number(value))) return _$createComponent(DeltaBadge, {
+      get delta() {
+        return {
+          value: Number(value),
+          unit: col.delta?.unit,
+          better: col.delta?.better
+        };
+      }
+    });
+    if (col.type === "bar") {
+      const number = Number(value);
+      const max = barMax().get(col.id) ?? 0;
+      if (!Number.isFinite(number)) return String(value);
+      return (() => {
+        var _el$0 = _$getNextElement(_tmpl$7),
+          _el$11 = _el$0.firstChild,
+          [_el$12, _co$2] = _$getNextMarker(_el$11.nextSibling),
+          _el$1 = _el$12.nextSibling,
+          _el$10 = _el$1.firstChild;
+        _$insert(_el$0, () => formatTableNumber(number, col, locale()), _el$12, _co$2);
+        _$effect(_$p => _$setStyleProperty(_el$10, "width", `${max > 0 ? Math.min(100, Math.abs(number) / max * 100) : 0}%`));
+        return _el$0;
+      })();
+    }
+    return tableCellText(value, col, locale());
+  };
   const onRowKeyDown = (event, row) => {
     if (!isInteractive()) return;
     if (isNestedRowControl(event)) return;
@@ -357,6 +465,179 @@ function DataTableRoot(props) {
     if (typeof props.rowClass === "function") return props.rowClass(row) ?? "";
     return props.rowClass ?? "";
   };
+
+  // A heading given as a JSX node lives in the head; each details line needs its own copy, so it takes text or a fresh call.
+  const detailLabel = col => typeof col.header === "function" ? col.header({
+    col
+  }) : typeof col.header === "string" || typeof col.header === "number" ? col.header : col.id;
+  const cellContent = (row, col, value) => props.renderCell ? props.renderCell({
+    row,
+    col,
+    value,
+    render: v => renderTypedValue(col, v)
+  }) : renderTypedValue(col, value);
+
+  /** `last` marks the final row of its body when details rows follow every row, so the frame keeps the only edge. */
+  const renderRow = (row, last) => {
+    const id = () => rowId(row);
+    const isSelected = () => props.selection ? props.selection.selected().has(id() ?? "") : props.selectedRowId && id() === props.selectedRowId;
+    const detailsId = `k2b-data-table-${createUniqueId()}-details`;
+    const open = () => openDetails().has(row);
+    return [(() => {
+      var _el$13 = _$getNextElement(_tmpl$9),
+        _el$17 = _el$13.firstChild,
+        [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling),
+        _el$19 = _el$18.nextSibling,
+        [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling);
+      _el$13.$$keydown = e => onRowKeyDown(e, row);
+      _el$13.$$contextmenu = () => props.onRowContextMenu?.(row);
+      _el$13.$$dblclick = event => onRowDoubleClick(event, row);
+      _el$13.$$click = event => onRowClick(event, row);
+      _el$13.addEventListener("focus", () => {
+        const key = id();
+        if (key !== undefined) props.selection?.markFocused(key);
+      });
+      _$use(element => {
+        const key = id();
+        if (key !== undefined) props.selection?.register(key, element);
+      }, _el$13);
+      _$insert(_el$13, _$createComponent(For, {
+        get each() {
+          return props.columns;
+        },
+        children: (col, index) => {
+          const value = () => valueOf(row, col);
+          return (() => {
+            var _el$24 = _$getNextElement(_tmpl$1),
+              _el$25 = _el$24.firstChild;
+            _el$24.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+            _$insert(_el$25, () => cellContent(row, col, value()));
+            _$effect(_p$ => {
+              var _v$16 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
+                _v$17 = nowrapAttr(col),
+                _v$18 = wrapAttr(col),
+                _v$19 = alignAttr(col),
+                _v$20 = priorityAttr(col),
+                _v$21 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
+                _v$22 = columnHighlighted(index()),
+                _v$23 = cellContentClass();
+              _v$16 !== _p$.e && _$className(_el$24, _p$.e = _v$16);
+              _v$17 !== _p$.t && _$setAttribute(_el$24, "data-nowrap", _p$.t = _v$17);
+              _v$18 !== _p$.a && _$setAttribute(_el$24, "data-wrap", _p$.a = _v$18);
+              _v$19 !== _p$.o && _$setAttribute(_el$24, "data-align", _p$.o = _v$19);
+              _v$20 !== _p$.i && _$setAttribute(_el$24, "data-priority", _p$.i = _v$20);
+              _v$21 !== _p$.n && _$setAttribute(_el$24, "data-valign", _p$.n = _v$21);
+              _v$22 !== _p$.s && _$setAttribute(_el$24, "data-highlighted", _p$.s = _v$22);
+              _v$23 !== _p$.h && _$className(_el$25, _p$.h = _v$23);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined,
+              i: undefined,
+              n: undefined,
+              s: undefined,
+              h: undefined
+            });
+            return _el$24;
+          })();
+        }
+      }), _el$18, _co$3);
+      _$insert(_el$13, _$createComponent(Show, {
+        get when() {
+          return detailsPriority();
+        },
+        get children() {
+          var _el$14 = _$getNextElement(_tmpl$8),
+            _el$15 = _el$14.firstChild,
+            _el$16 = _el$15.firstChild;
+          _el$15.$$click = () => toggleDetails(row);
+          _$setAttribute(_el$15, "aria-controls", detailsId);
+          _$effect(_p$ => {
+            var _v$5 = open(),
+              _v$6 = dataTableMessages().showDetails,
+              _v$7 = `ti ${open() ? "ti-chevron-up" : "ti-chevron-down"}`;
+            _v$5 !== _p$.e && _$setAttribute(_el$15, "aria-expanded", _p$.e = _v$5);
+            _v$6 !== _p$.t && _$setAttribute(_el$15, "aria-label", _p$.t = _v$6);
+            _v$7 !== _p$.a && _$className(_el$16, _p$.a = _v$7);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          _$runHydrationEvents();
+          return _el$14;
+        }
+      }), _el$20, _co$4);
+      _$effect(_p$ => {
+        var _v$8 = `k2b-data-table__row ${rowClass(row)}`,
+          _v$9 = shouldHoverRows() ? "true" : undefined,
+          _v$0 = shouldHoverRows() && isInteractive() ? "true" : undefined,
+          _v$1 = isSelected() ? "true" : undefined,
+          _v$10 = open() ? "true" : undefined,
+          _v$11 = detailsPriority() && last() ? "true" : undefined,
+          _v$12 = props.selection ? !!isSelected() : undefined,
+          _v$13 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
+        _v$8 !== _p$.e && _$className(_el$13, _p$.e = _v$8);
+        _v$9 !== _p$.t && _$setAttribute(_el$13, "data-hover", _p$.t = _v$9);
+        _v$0 !== _p$.a && _$setAttribute(_el$13, "data-clickable", _p$.a = _v$0);
+        _v$1 !== _p$.o && _$setAttribute(_el$13, "data-selected", _p$.o = _v$1);
+        _v$10 !== _p$.i && _$setAttribute(_el$13, "data-details-open", _p$.i = _v$10);
+        _v$11 !== _p$.n && _$setAttribute(_el$13, "data-last", _p$.n = _v$11);
+        _v$12 !== _p$.s && _$setAttribute(_el$13, "aria-selected", _p$.s = _v$12);
+        _v$13 !== _p$.h && _$setAttribute(_el$13, "tabindex", _p$.h = _v$13);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined,
+        h: undefined
+      });
+      _$runHydrationEvents();
+      return _el$13;
+    })(), _$createComponent(Show, {
+      get when() {
+        return detailsPriority();
+      },
+      get children() {
+        var _el$21 = _$getNextElement(_tmpl$0),
+          _el$22 = _el$21.firstChild,
+          _el$23 = _el$22.firstChild;
+        _$setAttribute(_el$21, "id", detailsId);
+        _$insert(_el$23, _$createComponent(For, {
+          get each() {
+            return hiddenColumns();
+          },
+          children: col => (() => {
+            var _el$26 = _$getNextElement(_tmpl$10),
+              _el$27 = _el$26.firstChild,
+              _el$28 = _el$27.nextSibling;
+            _$insert(_el$27, () => detailLabel(col));
+            _$insert(_el$28, () => cellContent(row, col, valueOf(row, col)));
+            _$effect(() => _$setAttribute(_el$26, "data-priority", priorityAttr(col)));
+            return _el$26;
+          })()
+        }));
+        _$effect(_p$ => {
+          var _v$14 = !open(),
+            _v$15 = columnCount();
+          _v$14 !== _p$.e && _$setProperty(_el$21, "hidden", _p$.e = _v$14);
+          _v$15 !== _p$.t && _$setAttribute(_el$22, "colspan", _p$.t = _v$15);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$21;
+      }
+    })];
+  };
   onMount(() => {
     if (typeof IntersectionObserver === "undefined" || !loadMoreRef) return;
     // The viewport root notices the end whichever element scrolls; `isNearBottom` decides.
@@ -424,6 +705,9 @@ function DataTableRoot(props) {
         get ["data-has-footer"]() {
           return props.footer ? "true" : undefined;
         },
+        get ["data-priorities"]() {
+          return detailsPriority();
+        },
         get ["data-overflow-x"]() {
           return scrollbars().x.overflow ? "true" : undefined;
         },
@@ -439,40 +723,45 @@ function DataTableRoot(props) {
         onMouseLeave: () => setHoveredColumn(null),
         get children() {
           return [(() => {
-            var _el$0 = _$getNextElement(_tmpl$0),
-              _el$1 = _el$0.firstChild,
-              _el$16 = _el$1.firstChild,
-              [_el$17, _co$2] = _$getNextMarker(_el$16.nextSibling),
-              _el$11 = _el$17.nextSibling,
-              _el$12 = _el$11.firstChild,
-              _el$13 = _el$11.nextSibling,
-              _el$18 = _el$13.nextSibling,
-              [_el$19, _co$3] = _$getNextMarker(_el$18.nextSibling),
-              _el$21 = _el$1.nextSibling,
-              [_el$22, _co$4] = _$getNextMarker(_el$21.nextSibling);
-            _el$0.addEventListener("scroll", onScroll);
+            var _el$29 = _$getNextElement(_tmpl$14),
+              _el$30 = _el$29.firstChild,
+              _el$40 = _el$30.firstChild,
+              [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling),
+              _el$32 = _el$41.nextSibling,
+              _el$33 = _el$32.firstChild,
+              _el$36 = _el$33.firstChild,
+              [_el$37, _co$5] = _$getNextMarker(_el$36.nextSibling),
+              _el$38 = _el$37.nextSibling,
+              [_el$39, _co$6] = _$getNextMarker(_el$38.nextSibling),
+              _el$42 = _el$32.nextSibling,
+              [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
+              _el$44 = _el$43.nextSibling,
+              [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling),
+              _el$47 = _el$30.nextSibling,
+              [_el$48, _co$0] = _$getNextMarker(_el$47.nextSibling);
+            _el$29.addEventListener("scroll", onScroll);
             var _ref$ = scrollRef;
-            typeof _ref$ === "function" ? _$use(_ref$, _el$0) : scrollRef = _el$0;
+            typeof _ref$ === "function" ? _$use(_ref$, _el$29) : scrollRef = _el$29;
             var _ref$2 = tableRef;
-            typeof _ref$2 === "function" ? _$use(_ref$2, _el$1) : tableRef = _el$1;
-            _$insert(_el$1, _$createComponent(Show, {
+            typeof _ref$2 === "function" ? _$use(_ref$2, _el$30) : tableRef = _el$30;
+            _$insert(_el$30, _$createComponent(Show, {
               get when() {
                 return props.loading;
               },
               get children() {
-                var _el$10 = _$getNextElement(_tmpl$7);
-                _$insert(_el$10, () => dataTableMessages().loadingRows);
-                return _el$10;
+                var _el$31 = _$getNextElement(_tmpl$11);
+                _$insert(_el$31, () => dataTableMessages().loadingRows);
+                return _el$31;
               }
-            }), _el$17, _co$2);
-            _$insert(_el$12, _$createComponent(For, {
+            }), _el$41, _co$7);
+            _$insert(_el$33, _$createComponent(For, {
               get each() {
                 return props.columns;
               },
               children: (col, index) => (() => {
-                var _el$23 = _$getNextElement(_tmpl$1);
-                _el$23.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                _$insert(_el$23, (() => {
+                var _el$49 = _$getNextElement(_tmpl$15);
+                _el$49.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                _$insert(_el$49, (() => {
                   var _c$ = _$memo(() => !!props.renderHeader);
                   return () => _c$() ? props.renderHeader({
                     col,
@@ -480,268 +769,362 @@ function DataTableRoot(props) {
                   }) : renderHeaderDefault(col);
                 })());
                 _$effect(_p$ => {
-                  var _v$14 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
-                    _v$15 = alignAttr(col),
-                    _v$16 = columnHighlighted(index()),
-                    _v$17 = ariaSortFor(col);
-                  _v$14 !== _p$.e && _$className(_el$23, _p$.e = _v$14);
-                  _v$15 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$15);
-                  _v$16 !== _p$.a && _$setAttribute(_el$23, "data-highlighted", _p$.a = _v$16);
-                  _v$17 !== _p$.o && _$setAttribute(_el$23, "aria-sort", _p$.o = _v$17);
+                  var _v$35 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
+                    _v$36 = alignAttr(col),
+                    _v$37 = priorityAttr(col),
+                    _v$38 = columnHighlighted(index()),
+                    _v$39 = ariaSortFor(col);
+                  _v$35 !== _p$.e && _$className(_el$49, _p$.e = _v$35);
+                  _v$36 !== _p$.t && _$setAttribute(_el$49, "data-align", _p$.t = _v$36);
+                  _v$37 !== _p$.a && _$setAttribute(_el$49, "data-priority", _p$.a = _v$37);
+                  _v$38 !== _p$.o && _$setAttribute(_el$49, "data-highlighted", _p$.o = _v$38);
+                  _v$39 !== _p$.i && _$setAttribute(_el$49, "aria-sort", _p$.i = _v$39);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
                   a: undefined,
-                  o: undefined
+                  o: undefined,
+                  i: undefined
                 });
-                return _el$23;
+                return _el$49;
               })()
-            }));
-            _$insert(_el$13, _$createComponent(Show, {
+            }), _el$37, _co$5);
+            _$insert(_el$33, _$createComponent(Show, {
+              get when() {
+                return detailsPriority();
+              },
+              get children() {
+                var _el$34 = _$getNextElement(_tmpl$12),
+                  _el$35 = _el$34.firstChild;
+                _$insert(_el$35, () => dataTableMessages().details);
+                return _el$34;
+              }
+            }), _el$39, _co$6);
+            _$insert(_el$30, _$createComponent(Show, {
               get when() {
                 return props.rows.length > 0;
               },
               get fallback() {
-                return _$createComponent(Show, {
-                  get when() {
-                    return props.loading;
-                  },
-                  get fallback() {
-                    return (() => {
-                      var _el$26 = _$getNextElement(_tmpl$10),
-                        _el$27 = _el$26.firstChild;
-                      _$insert(_el$27, _$createComponent(Placeholder, {
-                        get description() {
-                          return _$memo(() => props.empty ?? dataTableMessages().noRecords);
-                        }
-                      }));
-                      _$effect(() => _$setAttribute(_el$27, "colspan", props.columns.length));
-                      return _el$26;
-                    })();
-                  },
-                  get children() {
-                    return [_$createComponent(For, {
-                      get each() {
-                        return Array.from({
-                          length: loadingRows()
-                        });
-                      },
-                      children: () => (() => {
-                        var _el$28 = _$getNextElement(_tmpl$11);
-                        _$insert(_el$28, _$createComponent(For, {
-                          get each() {
-                            return props.columns;
+                return (() => {
+                  var _el$50 = _$getNextElement(_tmpl$17);
+                  _$insert(_el$50, _$createComponent(Show, {
+                    get when() {
+                      return props.loading;
+                    },
+                    get fallback() {
+                      return (() => {
+                        var _el$53 = _$getNextElement(_tmpl$18);
+                        _$insert(_el$53, _$createComponent(Show, {
+                          get when() {
+                            return props.query?.trim();
+                          },
+                          get fallback() {
+                            return (() => {
+                              var _el$54 = _$getNextElement(_tmpl$19);
+                              _$insert(_el$54, _$createComponent(Placeholder, {
+                                get description() {
+                                  return _$memo(() => props.empty ?? dataTableMessages().noRecords);
+                                }
+                              }));
+                              _$effect(() => _$setAttribute(_el$54, "colspan", columnCount()));
+                              return _el$54;
+                            })();
                           },
-                          children: col => (() => {
-                            var _el$29 = _$getNextElement(_tmpl$12);
-                            _$effect(() => _$setAttribute(_el$29, "data-align", alignAttr(col)));
-                            return _el$29;
+                          children: query => (() => {
+                            var _el$55 = _$getNextElement(_tmpl$21),
+                              _el$58 = _el$55.firstChild,
+                              [_el$59, _co$1] = _$getNextMarker(_el$58.nextSibling),
+                              _el$56 = _el$59.nextSibling,
+                              _el$60 = _el$56.nextSibling,
+                              [_el$61, _co$10] = _$getNextMarker(_el$60.nextSibling);
+                            _$insert(_el$55, () => dataTableMessages().noMatch({
+                              query: query()
+                            }), _el$59, _co$1);
+                            _$insert(_el$55, _$createComponent(Show, {
+                              get when() {
+                                return props.onClearQuery;
+                              },
+                              get children() {
+                                var _el$57 = _$getNextElement(_tmpl$20);
+                                _el$57.$$click = () => props.onClearQuery?.();
+                                _$insert(_el$57, () => dataTableMessages().clearSearch);
+                                _$runHydrationEvents();
+                                return _el$57;
+                              }
+                            }), _el$61, _co$10);
+                            _$effect(() => _$setAttribute(_el$55, "colspan", columnCount()));
+                            return _el$55;
                           })()
                         }));
-                        return _el$28;
-                      })()
-                    }), _$createComponent(Show, {
-                      get when() {
-                        return props.fillHeight;
-                      },
-                      get children() {
-                        var _el$24 = _$getNextElement(_tmpl$8),
-                          _el$25 = _el$24.firstChild;
-                        _$effect(() => _$setAttribute(_el$25, "colspan", props.columns.length));
-                        return _el$24;
-                      }
-                    })];
-                  }
-                });
+                        return _el$53;
+                      })();
+                    },
+                    get children() {
+                      return [_$createComponent(For, {
+                        get each() {
+                          return Array.from({
+                            length: loadingRows()
+                          });
+                        },
+                        children: () => (() => {
+                          var _el$62 = _$getNextElement(_tmpl$23),
+                            _el$64 = _el$62.firstChild,
+                            [_el$65, _co$11] = _$getNextMarker(_el$64.nextSibling),
+                            _el$66 = _el$65.nextSibling,
+                            [_el$67, _co$12] = _$getNextMarker(_el$66.nextSibling);
+                          _$insert(_el$62, _$createComponent(For, {
+                            get each() {
+                              return props.columns;
+                            },
+                            children: col => (() => {
+                              var _el$68 = _$getNextElement(_tmpl$24);
+                              _$effect(_p$ => {
+                                var _v$40 = alignAttr(col),
+                                  _v$41 = priorityAttr(col);
+                                _v$40 !== _p$.e && _$setAttribute(_el$68, "data-align", _p$.e = _v$40);
+                                _v$41 !== _p$.t && _$setAttribute(_el$68, "data-priority", _p$.t = _v$41);
+                                return _p$;
+                              }, {
+                                e: undefined,
+                                t: undefined
+                              });
+                              return _el$68;
+                            })()
+                          }), _el$65, _co$11);
+                          _$insert(_el$62, _$createComponent(Show, {
+                            get when() {
+                              return detailsPriority();
+                            },
+                            get children() {
+                              return _$getNextElement(_tmpl$22);
+                            }
+                          }), _el$67, _co$12);
+                          return _el$62;
+                        })()
+                      }), _$createComponent(Show, {
+                        get when() {
+                          return props.fillHeight;
+                        },
+                        get children() {
+                          var _el$51 = _$getNextElement(_tmpl$16),
+                            _el$52 = _el$51.firstChild;
+                          _$effect(() => _$setAttribute(_el$52, "colspan", columnCount()));
+                          return _el$51;
+                        }
+                      })];
+                    }
+                  }));
+                  return _el$50;
+                })();
               },
               get children() {
-                return [_$createComponent(For, {
-                  get each() {
-                    return props.rows;
+                return _$createComponent(Show, {
+                  get when() {
+                    return groups();
                   },
-                  children: row => {
-                    const id = () => rowId(row);
-                    const isSelected = () => props.selection ? props.selection.selected().has(id() ?? "") : props.selectedRowId && id() === props.selectedRowId;
+                  get fallback() {
                     return (() => {
-                      var _el$30 = _$getNextElement(_tmpl$13);
-                      _el$30.$$keydown = e => onRowKeyDown(e, row);
-                      _el$30.$$contextmenu = () => props.onRowContextMenu?.(row);
-                      _el$30.$$dblclick = event => onRowDoubleClick(event, row);
-                      _el$30.$$click = event => onRowClick(event, row);
-                      _el$30.addEventListener("focus", () => {
-                        const key = id();
-                        if (key !== undefined) props.selection?.markFocused(key);
-                      });
-                      _$use(element => {
-                        const key = id();
-                        if (key !== undefined) props.selection?.register(key, element);
-                      }, _el$30);
-                      _$insert(_el$30, _$createComponent(For, {
+                      var _el$69 = _$getNextElement(_tmpl$25),
+                        _el$72 = _el$69.firstChild,
+                        [_el$73, _co$13] = _$getNextMarker(_el$72.nextSibling),
+                        _el$74 = _el$73.nextSibling,
+                        [_el$75, _co$14] = _$getNextMarker(_el$74.nextSibling);
+                      _$insert(_el$69, _$createComponent(For, {
                         get each() {
-                          return props.columns;
+                          return props.rows;
+                        },
+                        children: (row, index) => renderRow(row, () => index() === props.rows.length - 1)
+                      }), _el$73, _co$13);
+                      _$insert(_el$69, _$createComponent(Show, {
+                        get when() {
+                          return props.fillHeight;
                         },
-                        children: (col, index) => {
-                          const value = () => valueOf(row, col);
-                          return (() => {
-                            var _el$31 = _$getNextElement(_tmpl$14),
-                              _el$32 = _el$31.firstChild;
-                            _el$31.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                            _$insert(_el$32, (() => {
-                              var _c$2 = _$memo(() => !!props.renderCell);
-                              return () => _c$2() ? props.renderCell({
-                                row,
-                                col,
-                                value: value(),
-                                render: v => renderCellDefault(row, {
-                                  ...col,
-                                  value: () => v
-                                })
-                              }) : renderValueDefault(value());
-                            })());
-                            _$effect(_p$ => {
-                              var _v$24 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
-                                _v$25 = nowrapAttr(col),
-                                _v$26 = alignAttr(col),
-                                _v$27 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
-                                _v$28 = columnHighlighted(index()),
-                                _v$29 = cellContentClass();
-                              _v$24 !== _p$.e && _$className(_el$31, _p$.e = _v$24);
-                              _v$25 !== _p$.t && _$setAttribute(_el$31, "data-nowrap", _p$.t = _v$25);
-                              _v$26 !== _p$.a && _$setAttribute(_el$31, "data-align", _p$.a = _v$26);
-                              _v$27 !== _p$.o && _$setAttribute(_el$31, "data-valign", _p$.o = _v$27);
-                              _v$28 !== _p$.i && _$setAttribute(_el$31, "data-highlighted", _p$.i = _v$28);
-                              _v$29 !== _p$.n && _$className(_el$32, _p$.n = _v$29);
-                              return _p$;
-                            }, {
-                              e: undefined,
-                              t: undefined,
-                              a: undefined,
-                              o: undefined,
-                              i: undefined,
-                              n: undefined
-                            });
-                            return _el$31;
-                          })();
+                        get children() {
+                          var _el$70 = _$getNextElement(_tmpl$16),
+                            _el$71 = _el$70.firstChild;
+                          _$effect(() => _$setAttribute(_el$71, "colspan", columnCount()));
+                          return _el$70;
                         }
-                      }));
-                      _$effect(_p$ => {
-                        var _v$18 = `k2b-data-table__row ${rowClass(row)}`,
-                          _v$19 = shouldHoverRows() ? "true" : undefined,
-                          _v$20 = shouldHoverRows() && isInteractive() ? "true" : undefined,
-                          _v$21 = isSelected() ? "true" : undefined,
-                          _v$22 = props.selection ? !!isSelected() : undefined,
-                          _v$23 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
-                        _v$18 !== _p$.e && _$className(_el$30, _p$.e = _v$18);
-                        _v$19 !== _p$.t && _$setAttribute(_el$30, "data-hover", _p$.t = _v$19);
-                        _v$20 !== _p$.a && _$setAttribute(_el$30, "data-clickable", _p$.a = _v$20);
-                        _v$21 !== _p$.o && _$setAttribute(_el$30, "data-selected", _p$.o = _v$21);
-                        _v$22 !== _p$.i && _$setAttribute(_el$30, "aria-selected", _p$.i = _v$22);
-                        _v$23 !== _p$.n && _$setAttribute(_el$30, "tabindex", _p$.n = _v$23);
-                        return _p$;
-                      }, {
-                        e: undefined,
-                        t: undefined,
-                        a: undefined,
-                        o: undefined,
-                        i: undefined,
-                        n: undefined
-                      });
-                      _$runHydrationEvents();
-                      return _el$30;
+                      }), _el$75, _co$14);
+                      return _el$69;
                     })();
-                  }
-                }), _$createComponent(Show, {
-                  get when() {
-                    return props.fillHeight;
                   },
-                  get children() {
-                    var _el$14 = _$getNextElement(_tmpl$8),
-                      _el$15 = _el$14.firstChild;
-                    _$effect(() => _$setAttribute(_el$15, "colspan", props.columns.length));
-                    return _el$14;
-                  }
-                })];
+                  children: list => [_$createComponent(For, {
+                    get each() {
+                      return list();
+                    },
+                    children: group => (() => {
+                      var _el$79 = _$getNextElement(_tmpl$27),
+                        _el$80 = _el$79.firstChild,
+                        _el$81 = _el$80.firstChild,
+                        _el$88 = _el$81.firstChild,
+                        [_el$89, _co$16] = _$getNextMarker(_el$88.nextSibling),
+                        _el$82 = _el$89.nextSibling,
+                        _el$83 = _el$82.firstChild,
+                        _el$84 = _el$83.nextSibling,
+                        _el$85 = _el$84.firstChild,
+                        _el$86 = _el$85.nextSibling,
+                        [_el$87, _co$15] = _$getNextMarker(_el$86.nextSibling),
+                        _el$90 = _el$80.nextSibling,
+                        [_el$91, _co$17] = _$getNextMarker(_el$90.nextSibling);
+                      _$insert(_el$81, () => group.label || "—", _el$89, _co$16);
+                      _$insert(_el$83, () => group.rows.length);
+                      _$insert(_el$84, () => dataTableMessages().rowCount({
+                        count: group.rows.length
+                      }), _el$87, _co$15);
+                      _$insert(_el$79, _$createComponent(For, {
+                        get each() {
+                          return group.rows;
+                        },
+                        children: (row, index) => renderRow(row, () => index() === group.rows.length - 1)
+                      }), _el$91, _co$17);
+                      _$effect(() => _$setAttribute(_el$81, "colspan", columnCount()));
+                      return _el$79;
+                    })()
+                  }), _$createComponent(Show, {
+                    get when() {
+                      return props.fillHeight;
+                    },
+                    get children() {
+                      var _el$76 = _$getNextElement(_tmpl$26),
+                        _el$77 = _el$76.firstChild,
+                        _el$78 = _el$77.firstChild;
+                      _$effect(() => _$setAttribute(_el$78, "colspan", columnCount()));
+                      return _el$76;
+                    }
+                  })]
+                });
               }
-            }));
-            _$insert(_el$1, _$createComponent(Show, {
+            }), _el$43, _co$8);
+            _$insert(_el$30, _$createComponent(Show, {
               get when() {
                 return props.footer;
               },
               children: footer => (() => {
-                var _el$33 = _$getNextElement(_tmpl$15),
-                  _el$34 = _el$33.firstChild;
-                _$insert(_el$34, _$createComponent(For, {
+                var _el$92 = _$getNextElement(_tmpl$30),
+                  _el$93 = _el$92.firstChild,
+                  _el$95 = _el$93.firstChild,
+                  [_el$96, _co$18] = _$getNextMarker(_el$95.nextSibling),
+                  _el$97 = _el$96.nextSibling,
+                  [_el$98, _co$19] = _$getNextMarker(_el$97.nextSibling),
+                  _el$102 = _el$93.nextSibling,
+                  [_el$103, _co$20] = _$getNextMarker(_el$102.nextSibling);
+                _$insert(_el$93, _$createComponent(For, {
                   get each() {
                     return props.columns;
                   },
                   children: (col, index) => {
                     const value = () => footer().values?.[col.id];
                     return (() => {
-                      var _el$35 = _$getNextElement(_tmpl$16);
-                      _el$35.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                      _$insert(_el$35, (() => {
-                        var _c$3 = _$memo(() => !!footer().renderCell);
-                        return () => _c$3() ? footer().renderCell({
+                      var _el$104 = _$getNextElement(_tmpl$31);
+                      _el$104.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                      _$insert(_el$104, (() => {
+                        var _c$2 = _$memo(() => !!footer().renderCell);
+                        return () => _c$2() ? footer().renderCell({
                           col,
                           value: value(),
-                          render: renderValueDefault
-                        }) : renderValueDefault(value());
+                          render: v => renderTypedValue(col, v)
+                        }) : renderTypedValue(col, value());
                       })());
                       _$effect(_p$ => {
-                        var _v$30 = nowrapAttr(col),
-                          _v$31 = alignAttr(col),
-                          _v$32 = columnHighlighted(index());
-                        _v$30 !== _p$.e && _$setAttribute(_el$35, "data-nowrap", _p$.e = _v$30);
-                        _v$31 !== _p$.t && _$setAttribute(_el$35, "data-align", _p$.t = _v$31);
-                        _v$32 !== _p$.a && _$setAttribute(_el$35, "data-highlighted", _p$.a = _v$32);
+                        var _v$42 = nowrapAttr(col),
+                          _v$43 = alignAttr(col),
+                          _v$44 = priorityAttr(col),
+                          _v$45 = columnHighlighted(index());
+                        _v$42 !== _p$.e && _$setAttribute(_el$104, "data-nowrap", _p$.e = _v$42);
+                        _v$43 !== _p$.t && _$setAttribute(_el$104, "data-align", _p$.t = _v$43);
+                        _v$44 !== _p$.a && _$setAttribute(_el$104, "data-priority", _p$.a = _v$44);
+                        _v$45 !== _p$.o && _$setAttribute(_el$104, "data-highlighted", _p$.o = _v$45);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined,
-                        a: undefined
+                        a: undefined,
+                        o: undefined
                       });
-                      return _el$35;
+                      return _el$104;
                     })();
                   }
-                }));
-                return _el$33;
+                }), _el$96, _co$18);
+                _$insert(_el$93, _$createComponent(Show, {
+                  get when() {
+                    return detailsPriority();
+                  },
+                  get children() {
+                    return _$getNextElement(_tmpl$28);
+                  }
+                }), _el$98, _co$19);
+                _$insert(_el$92, _$createComponent(Show, {
+                  get when() {
+                    return detailsPriority();
+                  },
+                  get children() {
+                    var _el$99 = _$getNextElement(_tmpl$29),
+                      _el$100 = _el$99.firstChild,
+                      _el$101 = _el$100.firstChild;
+                    _$insert(_el$101, _$createComponent(For, {
+                      get each() {
+                        return hiddenColumns();
+                      },
+                      children: col => (() => {
+                        var _el$105 = _$getNextElement(_tmpl$10),
+                          _el$106 = _el$105.firstChild,
+                          _el$107 = _el$106.nextSibling;
+                        _$insert(_el$106, () => detailLabel(col));
+                        _$insert(_el$107, (() => {
+                          var _c$3 = _$memo(() => !!footer().renderCell);
+                          return () => _c$3() ? footer().renderCell({
+                            col,
+                            value: footer().values?.[col.id],
+                            render: v => renderTypedValue(col, v)
+                          }) : renderTypedValue(col, footer().values?.[col.id]);
+                        })());
+                        _$effect(() => _$setAttribute(_el$105, "data-priority", priorityAttr(col)));
+                        return _el$105;
+                      })()
+                    }));
+                    _$effect(() => _$setAttribute(_el$100, "colspan", columnCount()));
+                    return _el$99;
+                  }
+                }), _el$103, _co$20);
+                return _el$92;
               })()
-            }), _el$19, _co$3);
-            _$insert(_el$0, _$createComponent(Show, {
+            }), _el$45, _co$9);
+            _$insert(_el$29, _$createComponent(Show, {
               get when() {
                 return shouldRenderLoadMoreSentinel();
               },
               get children() {
-                var _el$20 = _$getNextElement(_tmpl$9);
+                var _el$46 = _$getNextElement(_tmpl$13);
                 var _ref$3 = loadMoreRef;
-                typeof _ref$3 === "function" ? _$use(_ref$3, _el$20) : loadMoreRef = _el$20;
-                return _el$20;
+                typeof _ref$3 === "function" ? _$use(_ref$3, _el$46) : loadMoreRef = _el$46;
+                return _el$46;
               }
-            }), _el$22, _co$4);
+            }), _el$48, _co$0);
             _$effect(_p$ => {
-              var _v$5 = labelledBy() ? undefined : props.ariaLabel ?? dataTableMessages().dataTable,
-                _v$6 = labelledBy(),
-                _v$7 = props.loading ? "true" : undefined,
-                _v$8 = `k2b-table-wrap${props.scrollClass ? ` ${props.scrollClass}` : ""}`,
-                _v$9 = props.density === "compact" ? "compact" : undefined,
-                _v$0 = props.footer ? "true" : undefined,
-                _v$1 = surface(),
-                _v$10 = props.scrollPreserveKey || undefined,
-                _v$11 = tableClass(),
-                _v$12 = props.fillHeight ? "true" : undefined,
-                _v$13 = props.stickyHeader === false ? undefined : "true";
-              _v$5 !== _p$.e && _$setAttribute(_el$0, "aria-label", _p$.e = _v$5);
-              _v$6 !== _p$.t && _$setAttribute(_el$0, "aria-labelledby", _p$.t = _v$6);
-              _v$7 !== _p$.a && _$setAttribute(_el$0, "aria-busy", _p$.a = _v$7);
-              _v$8 !== _p$.o && _$className(_el$0, _p$.o = _v$8);
-              _v$9 !== _p$.i && _$setAttribute(_el$0, "data-density", _p$.i = _v$9);
-              _v$0 !== _p$.n && _$setAttribute(_el$0, "data-has-footer", _p$.n = _v$0);
-              _v$1 !== _p$.s && _$setAttribute(_el$0, "data-surface", _p$.s = _v$1);
-              _v$10 !== _p$.h && _$setAttribute(_el$0, "data-scroll-preserve", _p$.h = _v$10);
-              _v$11 !== _p$.r && _$className(_el$1, _p$.r = _v$11);
-              _v$12 !== _p$.d && _$setAttribute(_el$1, "data-fill", _p$.d = _v$12);
-              _v$13 !== _p$.l && _$setAttribute(_el$11, "data-sticky", _p$.l = _v$13);
+              var _v$24 = labelledBy() ? undefined : props.ariaLabel ?? dataTableMessages().dataTable,
+                _v$25 = labelledBy(),
+                _v$26 = props.loading ? "true" : undefined,
+                _v$27 = `k2b-table-wrap${props.scrollClass ? ` ${props.scrollClass}` : ""}`,
+                _v$28 = props.density === "compact" ? "compact" : undefined,
+                _v$29 = props.footer ? "true" : undefined,
+                _v$30 = surface(),
+                _v$31 = props.scrollPreserveKey || undefined,
+                _v$32 = tableClass(),
+                _v$33 = props.fillHeight ? "true" : undefined,
+                _v$34 = props.stickyHeader === false ? undefined : "true";
+              _v$24 !== _p$.e && _$setAttribute(_el$29, "aria-label", _p$.e = _v$24);
+              _v$25 !== _p$.t && _$setAttribute(_el$29, "aria-labelledby", _p$.t = _v$25);
+              _v$26 !== _p$.a && _$setAttribute(_el$29, "aria-busy", _p$.a = _v$26);
+              _v$27 !== _p$.o && _$className(_el$29, _p$.o = _v$27);
+              _v$28 !== _p$.i && _$setAttribute(_el$29, "data-density", _p$.i = _v$28);
+              _v$29 !== _p$.n && _$setAttribute(_el$29, "data-has-footer", _p$.n = _v$29);
+              _v$30 !== _p$.s && _$setAttribute(_el$29, "data-surface", _p$.s = _v$30);
+              _v$31 !== _p$.h && _$setAttribute(_el$29, "data-scroll-preserve", _p$.h = _v$31);
+              _v$32 !== _p$.r && _$className(_el$30, _p$.r = _v$32);
+              _v$33 !== _p$.d && _$setAttribute(_el$30, "data-fill", _p$.d = _v$33);
+              _v$34 !== _p$.l && _$setAttribute(_el$32, "data-sticky", _p$.l = _v$34);
               return _p$;
             }, {
               e: undefined,
@@ -756,26 +1139,26 @@ function DataTableRoot(props) {
               d: undefined,
               l: undefined
             });
-            return _el$0;
+            return _el$29;
           })(), _$createComponent(For, {
             each: ["y", "x"],
             children: axis => (() => {
-              var _el$36 = _$getNextElement(_tmpl$17),
-                _el$37 = _el$36.firstChild;
-              _el$36.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
-              _el$36.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
-              _el$36.$$pointermove = event => {
+              var _el$108 = _$getNextElement(_tmpl$32),
+                _el$109 = _el$108.firstChild;
+              _el$108.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
+              _el$108.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
+              _el$108.$$pointermove = event => {
                 if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event, axis);
               };
-              _el$36.$$pointerdown = event => startScrollbarDrag(event, axis);
-              _$setAttribute(_el$36, "data-axis", axis);
+              _el$108.$$pointerdown = event => startScrollbarDrag(event, axis);
+              _$setAttribute(_el$108, "data-axis", axis);
               _$effect(_p$ => {
-                var _v$33 = scrollbars()[axis].overflow ? "true" : undefined,
-                  _v$34 = `${scrollbars()[axis].offset}px`,
-                  _v$35 = `${scrollbars()[axis].size}px`;
-                _v$33 !== _p$.e && _$setAttribute(_el$36, "data-overflow", _p$.e = _v$33);
-                _v$34 !== _p$.t && _$setStyleProperty(_el$37, "--k2b-data-table-scroll-offset", _p$.t = _v$34);
-                _v$35 !== _p$.a && _$setStyleProperty(_el$37, "--k2b-data-table-scroll-size", _p$.a = _v$35);
+                var _v$46 = scrollbars()[axis].overflow ? "true" : undefined,
+                  _v$47 = `${scrollbars()[axis].offset}px`,
+                  _v$48 = `${scrollbars()[axis].size}px`;
+                _v$46 !== _p$.e && _$setAttribute(_el$108, "data-overflow", _p$.e = _v$46);
+                _v$47 !== _p$.t && _$setStyleProperty(_el$109, "--k2b-data-table-scroll-offset", _p$.t = _v$47);
+                _v$48 !== _p$.a && _$setStyleProperty(_el$109, "--k2b-data-table-scroll-size", _p$.a = _v$48);
                 return _p$;
               }, {
                 e: undefined,
@@ -783,7 +1166,7 @@ function DataTableRoot(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$36;
+              return _el$108;
             })()
           })];
         }
@@ -818,14 +1201,14 @@ const DataTableHeader = props => {
   const panel = useContext(DataTablePanelContext);
   panel?.registerHeading();
   return (() => {
-    var _el$38 = _$getNextElement(_tmpl$18);
-    _$insert(_el$38, _$createComponent(PanelHeader, {
+    var _el$110 = _$getNextElement(_tmpl$33);
+    _$insert(_el$110, _$createComponent(PanelHeader, {
       get title() {
         return (() => {
-          var _el$39 = _$getNextElement(_tmpl$19);
-          _$insert(_el$39, () => props.title);
-          _$effect(() => _$setAttribute(_el$39, "id", panel?.headingId));
-          return _el$39;
+          var _el$111 = _$getNextElement(_tmpl$34);
+          _$insert(_el$111, () => props.title);
+          _$effect(() => _$setAttribute(_el$111, "id", panel?.headingId));
+          return _el$111;
         })();
       },
       get subtitle() {
@@ -841,21 +1224,21 @@ const DataTableHeader = props => {
         return props.size;
       }
     }));
-    _$effect(() => _$className(_el$38, `k2b-data-panel__header ${props.class ?? ""}`));
-    return _el$38;
+    _$effect(() => _$className(_el$110, `k2b-data-panel__header ${props.class ?? ""}`));
+    return _el$110;
   })();
 };
 const DataTableControls = props => (() => {
-  var _el$40 = _$getNextElement(_tmpl$18);
-  _$insert(_el$40, () => props.children);
-  _$effect(() => _$className(_el$40, `k2b-data-panel__controls ${props.class ?? ""}`));
-  return _el$40;
+  var _el$112 = _$getNextElement(_tmpl$33);
+  _$insert(_el$112, () => props.children);
+  _$effect(() => _$className(_el$112, `k2b-data-panel__controls ${props.class ?? ""}`));
+  return _el$112;
 })();
 const DataTablePanelFooter = props => (() => {
-  var _el$41 = _$getNextElement(_tmpl$20);
-  _$insert(_el$41, () => props.children);
-  _$effect(() => _$className(_el$41, `k2b-data-panel__footer ${props.class ?? ""}`));
-  return _el$41;
+  var _el$113 = _$getNextElement(_tmpl$35);
+  _$insert(_el$113, () => props.children);
+  _$effect(() => _$className(_el$113, `k2b-data-panel__footer ${props.class ?? ""}`));
+  return _el$113;
 })();
 const DataTable = DataTableRoot;
 DataTable.Panel = DataTablePanel;