@k2b/ui 0.48.0 → 0.50.0

package/dist/ssr/content/DataTable.js

@@ -1,5 +1,5 @@
-import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
@@ -10,22 +10,37 @@ var _tmpl$ = ["<span class=\"k2b-data-table__header-title\">", "</span>"],
   _tmpl$4 = ["<a", " class=\"k2b-data-table__header-content k2b-data-table__sort\"", ">", "</a>"],
   _tmpl$5 = ["<button type=\"button\" class=\"k2b-data-table__header-content k2b-data-table__sort\"", ">", "</button>"],
   _tmpl$6 = ["<div class=\"k2b-data-table__header-content\"", ">", "</div>"],
-  _tmpl$7 = ["<caption class=\"k2b-sr-only\">", "</caption>"],
-  _tmpl$8 = ["<tr aria-hidden=\"true\"><td class=\"k2b-data-table__fill\"", "></td></tr>"],
-  _tmpl$9 = "<div class=\"k2b-data-table__sentinel\" aria-hidden=\"true\"></div>",
-  _tmpl$0 = ["<div role=\"region\"", " tabindex=\"0\" class=\"", "\"", "><table", ">", "<thead class=\"k2b-data-table__head\"", "><tr class=\"k2b-data-table__head-row\">", "</tr></thead><tbody>", "</tbody>", "</table>", "</div>"],
-  _tmpl$1 = ["<th scope=\"col\" class=\"", "\"", ">", "</th>"],
-  _tmpl$10 = ["<tr><td class=\"k2b-data-table__empty\"", ">", "</td></tr>"],
-  _tmpl$11 = ["<tr class=\"k2b-data-table__row\" data-loading=\"true\" aria-hidden=\"true\">", "</tr>"],
-  _tmpl$12 = ["<td", "><span class=\"k2b-data-table__skeleton\"></span></td>"],
-  _tmpl$13 = ["<tr class=\"", "\"", ">", "</tr>"],
-  _tmpl$14 = ["<td class=\"", "\"", "><div", ">", "</div></td>"],
-  _tmpl$15 = ["<tfoot class=\"k2b-data-table__foot\" data-sticky=\"true\"><tr class=\"k2b-data-table__foot-row\">", "</tr></tfoot>"],
-  _tmpl$16 = ["<td class=\"k2b-data-table__footer-cell\"", ">", "</td>"],
-  _tmpl$17 = ["<div class=\"k2b-data-table__scrollbar\"", " aria-hidden=\"true\"><span style=\"", "\"></span></div>"],
-  _tmpl$18 = ["<div class=\"", "\">", "</div>"],
-  _tmpl$19 = ["<span", ">", "</span>"],
-  _tmpl$20 = ["<footer class=\"", "\">", "</footer>"];
+  _tmpl$7 = ["<span class=\"k2b-data-table__bar\">", "<span class=\"k2b-data-table__bar-track\" aria-hidden=\"true\"><span style=\"", "\"></span></span></span>"],
+  _tmpl$8 = ["<td class=\"k2b-data-table__details-toggle\"><button type=\"button\" class=\"k2b-data-table__details-button\"", "><i class=\"", "\" aria-hidden=\"true\"></i></button></td>"],
+  _tmpl$9 = ["<tr class=\"", "\"", ">", "", "</tr>"],
+  _tmpl$0 = ["<tr class=\"k2b-data-table__details\"", "", "><td", "><dl>", "</dl></td></tr>"],
+  _tmpl$1 = ["<td class=\"", "\"", "><div", ">", "</div></td>"],
+  _tmpl$10 = ["<div", "><dt>", "</dt><dd>", "</dd></div>"],
+  _tmpl$11 = ["<caption class=\"k2b-sr-only\">", "</caption>"],
+  _tmpl$12 = ["<th scope=\"col\" class=\"k2b-data-table__details-toggle\"><span class=\"k2b-sr-only\">", "</span></th>"],
+  _tmpl$13 = "<div class=\"k2b-data-table__sentinel\" aria-hidden=\"true\"></div>",
+  _tmpl$14 = ["<div role=\"region\"", " tabindex=\"0\" class=\"", "\"", "><table", ">", "<thead class=\"k2b-data-table__head\"", "><tr class=\"k2b-data-table__head-row\">", "", "</tr></thead>", "", "</table>", "</div>"],
+  _tmpl$15 = ["<th scope=\"col\" class=\"", "\"", ">", "</th>"],
+  _tmpl$16 = ["<tr aria-hidden=\"true\"><td class=\"k2b-data-table__fill\"", "></td></tr>"],
+  _tmpl$17 = ["<tbody>", "</tbody>"],
+  _tmpl$18 = ["<tr>", "</tr>"],
+  _tmpl$19 = ["<td class=\"k2b-data-table__empty\"", ">", "</td>"],
+  _tmpl$20 = ["<button type=\"button\" class=\"k2b-data-table__clear-query\">", "</button>"],
+  _tmpl$21 = ["<td class=\"k2b-data-table__no-match\"", ">", " ", "</td>"],
+  _tmpl$22 = "<td class=\"k2b-data-table__details-toggle\"></td>",
+  _tmpl$23 = ["<tr class=\"k2b-data-table__row\" data-loading=\"true\" aria-hidden=\"true\">", "", "</tr>"],
+  _tmpl$24 = ["<td", "><span class=\"k2b-data-table__skeleton\"></span></td>"],
+  _tmpl$25 = ["<tbody>", "", "</tbody>"],
+  _tmpl$26 = ["<tbody aria-hidden=\"true\"><tr><td class=\"k2b-data-table__fill\"", "></td></tr></tbody>"],
+  _tmpl$27 = ["<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>", "</tbody>"],
+  _tmpl$28 = "<td class=\"k2b-data-table__footer-cell k2b-data-table__details-toggle\"></td>",
+  _tmpl$29 = ["<tr class=\"k2b-data-table__details\" data-footer=\"true\"><td", "><dl>", "</dl></td></tr>"],
+  _tmpl$30 = ["<tfoot class=\"k2b-data-table__foot\" data-sticky=\"true\"><tr class=\"k2b-data-table__foot-row\">", "", "</tr>", "</tfoot>"],
+  _tmpl$31 = ["<td class=\"k2b-data-table__footer-cell\"", ">", "</td>"],
+  _tmpl$32 = ["<div class=\"k2b-data-table__scrollbar\"", " aria-hidden=\"true\"><span style=\"", "\"></span></div>"],
+  _tmpl$33 = ["<div class=\"", "\">", "</div>"],
+  _tmpl$34 = ["<span", ">", "</span>"],
+  _tmpl$35 = ["<footer class=\"", "\">", "</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";
@@ -33,15 +48,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);
 };
@@ -190,17 +210,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;
@@ -223,6 +240,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;
 
   /**
@@ -280,8 +335,51 @@ 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 _$ssr(_tmpl$7, _$escape(formatTableNumber(number, col, locale())), _$ssrStyleProperty("width:", `${max > 0 ? _$escape(Math.min(100, Math.abs(number) / max * 100), true) : 0}%`));
+    }
+    return tableCellText(value, col, locale());
+  };
   const onRowKeyDown = (event, row) => {
     if (!isInteractive()) return;
     if (isNestedRowControl(event)) return;
@@ -305,6 +403,53 @@ 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 [_$ssr(_tmpl$9, `k2b-data-table__row ${_$escape(rowClass(row), true)}`, _$ssrAttribute("data-hover", shouldHoverRows() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-clickable", shouldHoverRows() && isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", isSelected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-details-open", open() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-last", detailsPriority() && last() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-selected", props.selection ? !!isSelected() : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
+      get each() {
+        return props.columns;
+      },
+      children: (col, index) => {
+        const value = () => valueOf(row, col);
+        return _$ssr(_tmpl$1, `${_$escape(col.cellClass ?? "", true)} ${_$escape(col.class ?? "", true)}`, _$ssrAttribute("data-nowrap", _$escape(nowrapAttr(col), true), false) + _$ssrAttribute("data-wrap", _$escape(wrapAttr(col), true), false) + _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-priority", _$escape(priorityAttr(col), true), false) + _$ssrAttribute("data-valign", props.verticalAlign && props.verticalAlign !== "middle" ? _$escape(props.verticalAlign, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false), _$ssrAttribute("class", _$escape(cellContentClass(), true), false), _$escape(cellContent(row, col, value())));
+      }
+    })), _$escape(_$createComponent(Show, {
+      get when() {
+        return detailsPriority();
+      },
+      get children() {
+        return _$ssr(_tmpl$8, _$ssrAttribute("aria-expanded", _$escape(open(), true), false) + _$ssrAttribute("aria-controls", _$escape(detailsId, true), false) + _$ssrAttribute("aria-label", _$escape(dataTableMessages().showDetails, true), false), `ti ${open() ? "ti-chevron-up" : "ti-chevron-down"}`);
+      }
+    }))), _$createComponent(Show, {
+      get when() {
+        return detailsPriority();
+      },
+      get children() {
+        return _$ssr(_tmpl$0, _$ssrAttribute("id", _$escape(detailsId, true), false), _$ssrAttribute("hidden", !open(), true), _$ssrAttribute("colspan", _$escape(columnCount(), true), false), _$escape(_$createComponent(For, {
+          get each() {
+            return hiddenColumns();
+          },
+          children: col => _$ssr(_tmpl$10, _$ssrAttribute("data-priority", _$escape(priorityAttr(col), true), false), _$escape(detailLabel(col)), _$escape(cellContent(row, col, valueOf(row, col))))
+        })));
+      }
+    })];
+  };
   onMount(() => {
     if (typeof IntersectionObserver === "undefined" || !loadMoreRef) return;
     // The viewport root notices the end whichever element scrolls; `isNearBottom` decides.
@@ -372,6 +517,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;
         },
@@ -386,35 +534,59 @@ function DataTableRoot(props) {
         },
         onMouseLeave: () => setHoveredColumn(null),
         get children() {
-          return [_$ssr(_tmpl$0, _$ssrAttribute("aria-label", labelledBy() ? _$escape(undefined, true) : _$escape(props.ariaLabel ?? dataTableMessages().dataTable, true), false) + _$ssrAttribute("aria-labelledby", _$escape(labelledBy(), true), false) + _$ssrAttribute("aria-busy", props.loading ? "true" : _$escape(undefined, true), false), `k2b-table-wrap${props.scrollClass ? ` ${_$escape(props.scrollClass, true)}` : ""}`, _$ssrAttribute("data-density", props.density === "compact" ? "compact" : _$escape(undefined, true), false) + _$ssrAttribute("data-has-footer", props.footer ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-surface", _$escape(surface(), true), false) + _$ssrAttribute("data-scroll-preserve", _$escape(props.scrollPreserveKey || undefined, true), false), _$ssrAttribute("class", _$escape(tableClass(), true), false) + _$ssrAttribute("data-fill", props.fillHeight ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+          return [_$ssr(_tmpl$14, _$ssrAttribute("aria-label", labelledBy() ? _$escape(undefined, true) : _$escape(props.ariaLabel ?? dataTableMessages().dataTable, true), false) + _$ssrAttribute("aria-labelledby", _$escape(labelledBy(), true), false) + _$ssrAttribute("aria-busy", props.loading ? "true" : _$escape(undefined, true), false), `k2b-table-wrap${props.scrollClass ? ` ${_$escape(props.scrollClass, true)}` : ""}`, _$ssrAttribute("data-density", props.density === "compact" ? "compact" : _$escape(undefined, true), false) + _$ssrAttribute("data-has-footer", props.footer ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-surface", _$escape(surface(), true), false) + _$ssrAttribute("data-scroll-preserve", _$escape(props.scrollPreserveKey || undefined, true), false), _$ssrAttribute("class", _$escape(tableClass(), true), false) + _$ssrAttribute("data-fill", props.fillHeight ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
             get when() {
               return props.loading;
             },
             get children() {
-              return _$ssr(_tmpl$7, _$escape(dataTableMessages().loadingRows));
+              return _$ssr(_tmpl$11, _$escape(dataTableMessages().loadingRows));
             }
           })), _$ssrAttribute("data-sticky", props.stickyHeader === false ? _$escape(undefined, true) : "true", false), _$escape(_$createComponent(For, {
             get each() {
               return props.columns;
             },
-            children: (col, index) => _$ssr(_tmpl$1, `${_$escape(col.headerClass ?? "", true)} ${_$escape(col.class ?? "", true)}`, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false) + _$ssrAttribute("aria-sort", _$escape(ariaSortFor(col), true), false), props.renderHeader ? _$escape(props.renderHeader({
+            children: (col, index) => _$ssr(_tmpl$15, `${_$escape(col.headerClass ?? "", true)} ${_$escape(col.class ?? "", true)}`, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-priority", _$escape(priorityAttr(col), true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false) + _$ssrAttribute("aria-sort", _$escape(ariaSortFor(col), true), false), props.renderHeader ? _$escape(props.renderHeader({
               col,
               render: () => renderHeaderDefault(col)
             })) : _$escape(renderHeaderDefault(col)))
+          })), _$escape(_$createComponent(Show, {
+            get when() {
+              return detailsPriority();
+            },
+            get children() {
+              return _$ssr(_tmpl$12, _$escape(dataTableMessages().details));
+            }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return props.rows.length > 0;
             },
             get fallback() {
-              return _$createComponent(Show, {
+              return _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
                 get when() {
                   return props.loading;
                 },
                 get fallback() {
-                  return _$ssr(_tmpl$10, _$ssrAttribute("colspan", _$escape(props.columns.length, true), false), _$escape(_$createComponent(Placeholder, {
-                    get description() {
-                      return props.empty ?? dataTableMessages().noRecords;
-                    }
+                  return _$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
+                    get when() {
+                      return props.query?.trim();
+                    },
+                    get fallback() {
+                      return _$ssr(_tmpl$19, _$ssrAttribute("colspan", _$escape(columnCount(), true), false), _$escape(_$createComponent(Placeholder, {
+                        get description() {
+                          return props.empty ?? dataTableMessages().noRecords;
+                        }
+                      })));
+                    },
+                    children: query => _$ssr(_tmpl$21, _$ssrAttribute("colspan", _$escape(columnCount(), true), false), _$escape(dataTableMessages().noMatch({
+                      query: query()
+                    })), _$escape(_$createComponent(Show, {
+                      get when() {
+                        return props.onClearQuery;
+                      },
+                      get children() {
+                        return _$ssr(_tmpl$20, _$escape(dataTableMessages().clearSearch));
+                      }
+                    })))
                   })));
                 },
                 get children() {
@@ -424,73 +596,110 @@ function DataTableRoot(props) {
                         length: loadingRows()
                       });
                     },
-                    children: () => _$ssr(_tmpl$11, _$escape(_$createComponent(For, {
+                    children: () => _$ssr(_tmpl$23, _$escape(_$createComponent(For, {
                       get each() {
                         return props.columns;
                       },
-                      children: col => _$ssr(_tmpl$12, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false))
+                      children: col => _$ssr(_tmpl$24, _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-priority", _$escape(priorityAttr(col), true), false))
+                    })), _$escape(_$createComponent(Show, {
+                      get when() {
+                        return detailsPriority();
+                      },
+                      get children() {
+                        return _$ssr(_tmpl$22);
+                      }
                     })))
                   }), _$createComponent(Show, {
                     get when() {
                       return props.fillHeight;
                     },
                     get children() {
-                      return _$ssr(_tmpl$8, _$ssrAttribute("colspan", _$escape(props.columns.length, true), false));
+                      return _$ssr(_tmpl$16, _$ssrAttribute("colspan", _$escape(columnCount(), true), false));
                     }
                   })];
                 }
-              });
+              })));
             },
             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;
-                  return _$ssr(_tmpl$13, `k2b-data-table__row ${_$escape(rowClass(row), true)}`, _$ssrAttribute("data-hover", shouldHoverRows() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-clickable", shouldHoverRows() && isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", isSelected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-selected", props.selection ? !!isSelected() : _$escape(undefined, true), false) + _$ssrAttribute("tabindex", props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
+                get fallback() {
+                  return _$ssr(_tmpl$25, _$escape(_$createComponent(For, {
                     get each() {
-                      return props.columns;
+                      return props.rows;
+                    },
+                    children: (row, index) => renderRow(row, () => index() === props.rows.length - 1)
+                  })), _$escape(_$createComponent(Show, {
+                    get when() {
+                      return props.fillHeight;
                     },
-                    children: (col, index) => {
-                      const value = () => valueOf(row, col);
-                      return _$ssr(_tmpl$14, `${_$escape(col.cellClass ?? "", true)} ${_$escape(col.class ?? "", true)}`, _$ssrAttribute("data-nowrap", _$escape(nowrapAttr(col), true), false) + _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-valign", props.verticalAlign && props.verticalAlign !== "middle" ? _$escape(props.verticalAlign, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false), _$ssrAttribute("class", _$escape(cellContentClass(), true), false), props.renderCell ? _$escape(props.renderCell({
-                        row,
-                        col,
-                        value: value(),
-                        render: v => renderCellDefault(row, {
-                          ...col,
-                          value: () => v
-                        })
-                      })) : _$escape(renderValueDefault(value())));
+                    get children() {
+                      return _$ssr(_tmpl$16, _$ssrAttribute("colspan", _$escape(columnCount(), true), false));
                     }
                   })));
-                }
-              }), _$createComponent(Show, {
-                get when() {
-                  return props.fillHeight;
                 },
-                get children() {
-                  return _$ssr(_tmpl$8, _$ssrAttribute("colspan", _$escape(props.columns.length, true), false));
-                }
-              })];
+                children: list => [_$createComponent(For, {
+                  get each() {
+                    return list();
+                  },
+                  children: group => _$ssr(_tmpl$27, _$ssrAttribute("colspan", _$escape(columnCount(), true), false), _$escape(group.label || "—"), _$escape(group.rows.length), _$escape(dataTableMessages().rowCount({
+                    count: group.rows.length
+                  })), _$escape(_$createComponent(For, {
+                    get each() {
+                      return group.rows;
+                    },
+                    children: (row, index) => renderRow(row, () => index() === group.rows.length - 1)
+                  })))
+                }), _$createComponent(Show, {
+                  get when() {
+                    return props.fillHeight;
+                  },
+                  get children() {
+                    return _$ssr(_tmpl$26, _$ssrAttribute("colspan", _$escape(columnCount(), true), false));
+                  }
+                })]
+              });
             }
           })), _$escape(_$createComponent(Show, {
             get when() {
               return props.footer;
             },
-            children: footer => _$ssr(_tmpl$15, _$escape(_$createComponent(For, {
+            children: footer => _$ssr(_tmpl$30, _$escape(_$createComponent(For, {
               get each() {
                 return props.columns;
               },
               children: (col, index) => {
                 const value = () => footer().values?.[col.id];
-                return _$ssr(_tmpl$16, _$ssrAttribute("data-nowrap", _$escape(nowrapAttr(col), true), false) + _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false), footer().renderCell ? _$escape(footer().renderCell({
+                return _$ssr(_tmpl$31, _$ssrAttribute("data-nowrap", _$escape(nowrapAttr(col), true), false) + _$ssrAttribute("data-align", _$escape(alignAttr(col), true), false) + _$ssrAttribute("data-priority", _$escape(priorityAttr(col), true), false) + _$ssrAttribute("data-highlighted", _$escape(columnHighlighted(index()), true), false), footer().renderCell ? _$escape(footer().renderCell({
                   col,
                   value: value(),
-                  render: renderValueDefault
-                })) : _$escape(renderValueDefault(value())));
+                  render: v => renderTypedValue(col, v)
+                })) : _$escape(renderTypedValue(col, value())));
+              }
+            })), _$escape(_$createComponent(Show, {
+              get when() {
+                return detailsPriority();
+              },
+              get children() {
+                return _$ssr(_tmpl$28);
+              }
+            })), _$escape(_$createComponent(Show, {
+              get when() {
+                return detailsPriority();
+              },
+              get children() {
+                return _$ssr(_tmpl$29, _$ssrAttribute("colspan", _$escape(columnCount(), true), false), _$escape(_$createComponent(For, {
+                  get each() {
+                    return hiddenColumns();
+                  },
+                  children: col => _$ssr(_tmpl$10, _$ssrAttribute("data-priority", _$escape(priorityAttr(col), true), false), _$escape(detailLabel(col)), footer().renderCell ? _$escape(footer().renderCell({
+                    col,
+                    value: footer().values?.[col.id],
+                    render: v => renderTypedValue(col, v)
+                  })) : _$escape(renderTypedValue(col, footer().values?.[col.id])))
+                })));
               }
             })))
           })), _$escape(_$createComponent(Show, {
@@ -498,11 +707,11 @@ function DataTableRoot(props) {
               return shouldRenderLoadMoreSentinel();
             },
             get children() {
-              return _$ssr(_tmpl$9);
+              return _$ssr(_tmpl$13);
             }
           }))), _$createComponent(For, {
             each: ["y", "x"],
-            children: axis => _$ssr(_tmpl$17, _$ssrAttribute("data-axis", _$escape(axis, true), false) + _$ssrAttribute("data-overflow", scrollbars()[axis].overflow ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-data-table-scroll-offset:", `${_$escape(scrollbars()[axis].offset, true)}px`) + _$ssrStyleProperty(";--k2b-data-table-scroll-size:", `${_$escape(scrollbars()[axis].size, true)}px`))
+            children: axis => _$ssr(_tmpl$32, _$ssrAttribute("data-axis", _$escape(axis, true), false) + _$ssrAttribute("data-overflow", scrollbars()[axis].overflow ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-data-table-scroll-offset:", `${_$escape(scrollbars()[axis].offset, true)}px`) + _$ssrStyleProperty(";--k2b-data-table-scroll-size:", `${_$escape(scrollbars()[axis].size, true)}px`))
           })];
         }
       });
@@ -535,9 +744,9 @@ const DataTablePanel = props => {
 const DataTableHeader = props => {
   const panel = useContext(DataTablePanelContext);
   panel?.registerHeading();
-  return _$ssr(_tmpl$18, `k2b-data-panel__header ${_$escape(props.class ?? "", true)}`, _$escape(_$createComponent(PanelHeader, {
+  return _$ssr(_tmpl$33, `k2b-data-panel__header ${_$escape(props.class ?? "", true)}`, _$escape(_$createComponent(PanelHeader, {
     get title() {
-      return _$ssr(_tmpl$19, _$ssrAttribute("id", _$escape(panel?.headingId, true), false), _$escape(props.title));
+      return _$ssr(_tmpl$34, _$ssrAttribute("id", _$escape(panel?.headingId, true), false), _$escape(props.title));
     },
     get subtitle() {
       return props.subtitle;
@@ -553,8 +762,8 @@ const DataTableHeader = props => {
     }
   })));
 };
-const DataTableControls = props => _$ssr(_tmpl$18, `k2b-data-panel__controls ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
-const DataTablePanelFooter = props => _$ssr(_tmpl$20, `k2b-data-panel__footer ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+const DataTableControls = props => _$ssr(_tmpl$33, `k2b-data-panel__controls ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
+const DataTablePanelFooter = props => _$ssr(_tmpl$35, `k2b-data-panel__footer ${_$escape(props.class ?? "", true)}`, _$escape(props.children));
 const DataTable = DataTableRoot;
 DataTable.Panel = DataTablePanel;
 DataTable.Header = DataTableHeader;