@k2b/ui 0.22.0 → 0.24.0

package/dist/browser/content/DataTable.js

@@ -1,34 +1,36 @@
 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 { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-import { className as _$className } from "solid-js/web";
-import { getNextMarker as _$getNextMarker } 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";
 import { effect as _$effect } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-title>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-subtitle>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-data-table__header-content>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<a class="k2b-data-table__header-content k2b-data-table__sort"><span class=k2b-data-table__header-line><!$><!/><i aria-hidden=true>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
-  _tmpl$7 = /*#__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$8 = /*#__PURE__*/_$template(`<th scope=col>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<tr><td class=k2b-data-table__empty>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<tr>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<td><div>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<tfoot class=k2b-data-table__foot data-sticky=true><tr class=k2b-data-table__foot-row>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<td class=k2b-data-table__footer-cell>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-data-table__scrollbar aria-hidden=true><span>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<footer>`);
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, useContext } from "solid-js";
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-line><!$><!/><i aria-hidden=true>`),
+  _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(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
+  _tmpl$9 = /*#__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$0 = /*#__PURE__*/_$template(`<th scope=col>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<tr><td class=k2b-data-table__empty>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<tr>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<td><div>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<tfoot class=k2b-data-table__foot data-sticky=true><tr class=k2b-data-table__foot-row>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<td class=k2b-data-table__footer-cell>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-data-table__scrollbar aria-hidden=true><span>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<footer>`);
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, Match, onCleanup, onMount, Show, Switch, useContext } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { suppressTextSelection } from "../internal/text-selection";
 import { useLocale } from "../intl/locale";
@@ -195,61 +197,60 @@ function DataTableRoot(props) {
     if (col.value) return row[col.value];
     return undefined;
   };
-  const columnAlignments = createMemo(() => {
-    const alignments = new Map();
+  const columnPresentation = createMemo(() => {
+    const presentation = new Map();
     for (const col of props.columns) {
-      if (col.align) {
-        alignments.set(col.id, col.align);
-        continue;
-      }
-      let align = "left";
-      for (const row of props.rows) {
-        const value = valueOf(row, col);
-        if (value === null || value === undefined || value === "") continue;
-        align = typeof value === "number" || typeof value === "bigint" ? "right" : "left";
-        break;
+      let numeric = false;
+      let date = false;
+      if (col.align === undefined || col.nowrap === undefined) {
+        for (const row of props.rows) {
+          const value = valueOf(row, col);
+          if (value === null || value === undefined || value === "") continue;
+          numeric = typeof value === "number" || typeof value === "bigint";
+          date = value instanceof Date;
+          break;
+        }
       }
-      alignments.set(col.id, align);
+      presentation.set(col.id, {
+        align: col.align ?? (numeric ? "right" : "left"),
+        nowrap: col.nowrap ?? (numeric || date)
+      });
     }
-    return alignments;
+    return presentation;
   });
 
   /** `data-align` mirrors Cloud's `text-left/center/right` on the same cell. */
   const alignAttr = col => {
-    const align = columnAlignments().get(col.id) ?? "left";
+    const align = columnPresentation().get(col.id)?.align ?? "left";
     return align === "left" ? undefined : align;
   };
+  const nowrapAttr = col => columnPresentation().get(col.id)?.nowrap ? "true" : undefined;
   const sortKeyOf = col => col.sortable === true ? col.id : typeof col.sortable === "string" ? col.sortable : null;
 
   /**
-   * Sorting is a link, not a handler: these tables are server-rendered, so the
-   * order belongs in the URL. Clicking the active column flips its direction.
+   * Sorting is a link by default: server-rendered tables keep the order in the
+   * URL. Client tables pass onSortChange instead. Clicking the active column
+   * flips its direction.
    */
-  const sortLinkFor = col => {
-    const key = sortKeyOf(col);
-    if (!key || !props.sortHref) return null;
-    const active = props.sort?.key === key;
-    const direction = active && props.sort?.direction === "desc" ? "asc" : "desc";
-    return {
-      href: props.sortHref({
-        key,
-        direction
-      }),
-      active,
-      direction
-    };
-  };
+  const nextSortFor = key => ({
+    key,
+    direction: props.sort?.key === key && props.sort?.direction === "desc" ? "asc" : "desc"
+  });
 
   /** Only a sortable column carries a sort state; the rest carry none at all. */
   const ariaSortFor = col => {
     const key = sortKeyOf(col);
-    if (!key || !props.sortHref && !props.renderHeader) return undefined;
+    if (!key || !props.sortHref && !props.onSortChange && !props.renderHeader) return undefined;
     if (props.sort?.key !== key) return "none";
     return props.sort?.direction === "asc" ? "ascending" : "descending";
   };
   const renderHeaderDefault = col => {
-    const sort = sortLinkFor(col);
-    const title = [(() => {
+    const key = sortKeyOf(col);
+    // Only how a column sorts decides the element. The order lives in its attributes, so a header button keeps
+    // keyboard focus when a click sorts the table and the reader can press it again to reverse the order.
+    const mode = createMemo(() => !key ? null : props.sortHref ? "link" : props.onSortChange ? "button" : null);
+    const active = () => key !== null && props.sort?.key === key;
+    const title = () => [(() => {
       var _el$ = _$getNextElement(_tmpl$);
       _$insert(_el$, () => renderColumnPart(col.header, col));
       return _el$;
@@ -263,37 +264,68 @@ function DataTableRoot(props) {
         return _el$2;
       }
     })];
-    if (!sort) return (() => {
-      var _el$3 = _$getNextElement(_tmpl$3);
-      _$insert(_el$3, title);
-      _$effect(() => _$setAttribute(_el$3, "data-align", alignAttr(col)));
-      return _el$3;
-    })();
-    return (() => {
-      var _el$4 = _$getNextElement(_tmpl$4),
-        _el$5 = _el$4.firstChild,
-        _el$7 = _el$5.firstChild,
-        [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling),
-        _el$6 = _el$8.nextSibling;
-      _$insert(_el$5, title, _el$8, _co$);
+    const line = () => (() => {
+      var _el$3 = _$getNextElement(_tmpl$3),
+        _el$5 = _el$3.firstChild,
+        [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+        _el$4 = _el$6.nextSibling;
+      _$insert(_el$3, title, _el$6, _co$);
       _$effect(_p$ => {
-        var _v$ = sort.href,
-          _v$2 = alignAttr(col),
-          _v$3 = `k2b-data-table__sort-icon ti ${props.sort?.direction === "asc" && sort.active ? "ti-arrow-up" : "ti-arrow-down"}`,
-          _v$4 = sort.active ? "true" : undefined;
-        _v$ !== _p$.e && _$setAttribute(_el$4, "href", _p$.e = _v$);
-        _v$2 !== _p$.t && _$setAttribute(_el$4, "data-align", _p$.t = _v$2);
-        _v$3 !== _p$.a && _$className(_el$6, _p$.a = _v$3);
-        _v$4 !== _p$.o && _$setAttribute(_el$6, "data-active", _p$.o = _v$4);
+        var _v$ = `k2b-data-table__sort-icon ti ${active() && props.sort?.direction === "asc" ? "ti-arrow-up" : "ti-arrow-down"}`,
+          _v$2 = active() ? "true" : undefined;
+        _v$ !== _p$.e && _$className(_el$4, _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$4, "data-active", _p$.t = _v$2);
         return _p$;
       }, {
         e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined
+        t: undefined
       });
-      return _el$4;
+      return _el$3;
     })();
+    return _$createComponent(Switch, {
+      get fallback() {
+        return (() => {
+          var _el$9 = _$getNextElement(_tmpl$6);
+          _$insert(_el$9, title);
+          _$effect(() => _$setAttribute(_el$9, "data-align", alignAttr(col)));
+          return _el$9;
+        })();
+      },
+      get children() {
+        return [_$createComponent(Match, {
+          get when() {
+            return mode() === "link";
+          },
+          get children() {
+            var _el$7 = _$getNextElement(_tmpl$4);
+            _$insert(_el$7, line);
+            _$effect(_p$ => {
+              var _v$3 = key ? props.sortHref?.(nextSortFor(key)) : undefined,
+                _v$4 = alignAttr(col);
+              _v$3 !== _p$.e && _$setAttribute(_el$7, "href", _p$.e = _v$3);
+              _v$4 !== _p$.t && _$setAttribute(_el$7, "data-align", _p$.t = _v$4);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$7;
+          }
+        }), _$createComponent(Match, {
+          get when() {
+            return mode() === "button";
+          },
+          get children() {
+            var _el$8 = _$getNextElement(_tmpl$5);
+            _el$8.$$click = () => key && props.onSortChange?.(nextSortFor(key));
+            _$insert(_el$8, line);
+            _$effect(() => _$setAttribute(_el$8, "data-align", alignAttr(col)));
+            _$runHydrationEvents();
+            return _el$8;
+          }
+        })];
+      }
+    });
   };
   const renderValueDefault = value => defaultRender(value, locale(), messages());
   const renderCellDefault = (row, col) => renderValueDefault(valueOf(row, col));
@@ -397,28 +429,28 @@ function DataTableRoot(props) {
         onMouseLeave: () => setHoveredColumn(null),
         get children() {
           return [(() => {
-            var _el$9 = _$getNextElement(_tmpl$7),
-              _el$0 = _el$9.firstChild,
+            var _el$0 = _$getNextElement(_tmpl$9),
               _el$1 = _el$0.firstChild,
               _el$10 = _el$1.firstChild,
-              _el$11 = _el$1.nextSibling,
-              _el$14 = _el$11.nextSibling,
-              [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling),
-              _el$17 = _el$0.nextSibling,
-              [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling);
-            _el$9.addEventListener("scroll", onScroll);
+              _el$11 = _el$10.firstChild,
+              _el$12 = _el$10.nextSibling,
+              _el$15 = _el$12.nextSibling,
+              [_el$16, _co$2] = _$getNextMarker(_el$15.nextSibling),
+              _el$18 = _el$1.nextSibling,
+              [_el$19, _co$3] = _$getNextMarker(_el$18.nextSibling);
+            _el$0.addEventListener("scroll", onScroll);
             var _ref$ = scrollRef;
-            typeof _ref$ === "function" ? _$use(_ref$, _el$9) : scrollRef = _el$9;
+            typeof _ref$ === "function" ? _$use(_ref$, _el$0) : scrollRef = _el$0;
             var _ref$2 = tableRef;
-            typeof _ref$2 === "function" ? _$use(_ref$2, _el$0) : tableRef = _el$0;
-            _$insert(_el$10, _$createComponent(For, {
+            typeof _ref$2 === "function" ? _$use(_ref$2, _el$1) : tableRef = _el$1;
+            _$insert(_el$11, _$createComponent(For, {
               get each() {
                 return props.columns;
               },
               children: (col, index) => (() => {
-                var _el$19 = _$getNextElement(_tmpl$8);
-                _el$19.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                _$insert(_el$19, (() => {
+                var _el$20 = _$getNextElement(_tmpl$0);
+                _el$20.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                _$insert(_el$20, (() => {
                   var _c$ = _$memo(() => !!props.renderHeader);
                   return () => _c$() ? props.renderHeader({
                     col,
@@ -430,10 +462,10 @@ function DataTableRoot(props) {
                     _v$14 = alignAttr(col),
                     _v$15 = columnHighlighted(index()),
                     _v$16 = ariaSortFor(col);
-                  _v$13 !== _p$.e && _$className(_el$19, _p$.e = _v$13);
-                  _v$14 !== _p$.t && _$setAttribute(_el$19, "data-align", _p$.t = _v$14);
-                  _v$15 !== _p$.a && _$setAttribute(_el$19, "data-highlighted", _p$.a = _v$15);
-                  _v$16 !== _p$.o && _$setAttribute(_el$19, "aria-sort", _p$.o = _v$16);
+                  _v$13 !== _p$.e && _$className(_el$20, _p$.e = _v$13);
+                  _v$14 !== _p$.t && _$setAttribute(_el$20, "data-align", _p$.t = _v$14);
+                  _v$15 !== _p$.a && _$setAttribute(_el$20, "data-highlighted", _p$.a = _v$15);
+                  _v$16 !== _p$.o && _$setAttribute(_el$20, "aria-sort", _p$.o = _v$16);
                   return _p$;
                 }, {
                   e: undefined,
@@ -441,24 +473,24 @@ function DataTableRoot(props) {
                   a: undefined,
                   o: undefined
                 });
-                return _el$19;
+                return _el$20;
               })()
             }));
-            _$insert(_el$11, _$createComponent(Show, {
+            _$insert(_el$12, _$createComponent(Show, {
               get when() {
                 return props.rows.length > 0;
               },
               get fallback() {
                 return (() => {
-                  var _el$20 = _$getNextElement(_tmpl$9),
-                    _el$21 = _el$20.firstChild;
-                  _$insert(_el$21, _$createComponent(Placeholder, {
+                  var _el$21 = _$getNextElement(_tmpl$1),
+                    _el$22 = _el$21.firstChild;
+                  _$insert(_el$22, _$createComponent(Placeholder, {
                     get description() {
                       return _$memo(() => props.empty ?? dataTableMessages().noRecords);
                     }
                   }));
-                  _$effect(() => _$setAttribute(_el$21, "colspan", props.columns.length));
-                  return _el$20;
+                  _$effect(() => _$setAttribute(_el$22, "colspan", props.columns.length));
+                  return _el$21;
                 })();
               },
               get children() {
@@ -470,30 +502,30 @@ function DataTableRoot(props) {
                     const id = () => rowId(row);
                     const isSelected = () => props.selection ? props.selection.selected().has(id() ?? "") : props.selectedRowId && id() === props.selectedRowId;
                     return (() => {
-                      var _el$22 = _$getNextElement(_tmpl$0);
-                      _el$22.$$keydown = e => onRowKeyDown(e, row);
-                      _el$22.$$contextmenu = () => props.onRowContextMenu?.(row);
-                      _el$22.$$dblclick = event => onRowDoubleClick(event, row);
-                      _el$22.$$click = event => onRowClick(event, row);
-                      _el$22.addEventListener("focus", () => {
+                      var _el$23 = _$getNextElement(_tmpl$10);
+                      _el$23.$$keydown = e => onRowKeyDown(e, row);
+                      _el$23.$$contextmenu = () => props.onRowContextMenu?.(row);
+                      _el$23.$$dblclick = event => onRowDoubleClick(event, row);
+                      _el$23.$$click = event => onRowClick(event, row);
+                      _el$23.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$22);
-                      _$insert(_el$22, _$createComponent(For, {
+                      }, _el$23);
+                      _$insert(_el$23, _$createComponent(For, {
                         get each() {
                           return props.columns;
                         },
                         children: (col, index) => {
                           const value = () => valueOf(row, col);
                           return (() => {
-                            var _el$23 = _$getNextElement(_tmpl$1),
-                              _el$24 = _el$23.firstChild;
-                            _el$23.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                            _$insert(_el$24, (() => {
+                            var _el$24 = _$getNextElement(_tmpl$11),
+                              _el$25 = _el$24.firstChild;
+                            _el$24.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                            _$insert(_el$25, (() => {
                               var _c$2 = _$memo(() => !!props.renderCell);
                               return () => _c$2() ? props.renderCell({
                                 row,
@@ -507,24 +539,27 @@ function DataTableRoot(props) {
                             })());
                             _$effect(_p$ => {
                               var _v$23 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
-                                _v$24 = alignAttr(col),
-                                _v$25 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
-                                _v$26 = columnHighlighted(index()),
-                                _v$27 = cellContentClass();
-                              _v$23 !== _p$.e && _$className(_el$23, _p$.e = _v$23);
-                              _v$24 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$24);
-                              _v$25 !== _p$.a && _$setAttribute(_el$23, "data-valign", _p$.a = _v$25);
-                              _v$26 !== _p$.o && _$setAttribute(_el$23, "data-highlighted", _p$.o = _v$26);
-                              _v$27 !== _p$.i && _$className(_el$24, _p$.i = _v$27);
+                                _v$24 = nowrapAttr(col),
+                                _v$25 = alignAttr(col),
+                                _v$26 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
+                                _v$27 = columnHighlighted(index()),
+                                _v$28 = cellContentClass();
+                              _v$23 !== _p$.e && _$className(_el$24, _p$.e = _v$23);
+                              _v$24 !== _p$.t && _$setAttribute(_el$24, "data-nowrap", _p$.t = _v$24);
+                              _v$25 !== _p$.a && _$setAttribute(_el$24, "data-align", _p$.a = _v$25);
+                              _v$26 !== _p$.o && _$setAttribute(_el$24, "data-valign", _p$.o = _v$26);
+                              _v$27 !== _p$.i && _$setAttribute(_el$24, "data-highlighted", _p$.i = _v$27);
+                              _v$28 !== _p$.n && _$className(_el$25, _p$.n = _v$28);
                               return _p$;
                             }, {
                               e: undefined,
                               t: undefined,
                               a: undefined,
                               o: undefined,
-                              i: undefined
+                              i: undefined,
+                              n: undefined
                             });
-                            return _el$23;
+                            return _el$24;
                           })();
                         }
                       }));
@@ -535,12 +570,12 @@ function DataTableRoot(props) {
                           _v$20 = isSelected() ? "true" : undefined,
                           _v$21 = props.selection ? !!isSelected() : undefined,
                           _v$22 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
-                        _v$17 !== _p$.e && _$className(_el$22, _p$.e = _v$17);
-                        _v$18 !== _p$.t && _$setAttribute(_el$22, "data-hover", _p$.t = _v$18);
-                        _v$19 !== _p$.a && _$setAttribute(_el$22, "data-clickable", _p$.a = _v$19);
-                        _v$20 !== _p$.o && _$setAttribute(_el$22, "data-selected", _p$.o = _v$20);
-                        _v$21 !== _p$.i && _$setAttribute(_el$22, "aria-selected", _p$.i = _v$21);
-                        _v$22 !== _p$.n && _$setAttribute(_el$22, "tabindex", _p$.n = _v$22);
+                        _v$17 !== _p$.e && _$className(_el$23, _p$.e = _v$17);
+                        _v$18 !== _p$.t && _$setAttribute(_el$23, "data-hover", _p$.t = _v$18);
+                        _v$19 !== _p$.a && _$setAttribute(_el$23, "data-clickable", _p$.a = _v$19);
+                        _v$20 !== _p$.o && _$setAttribute(_el$23, "data-selected", _p$.o = _v$20);
+                        _v$21 !== _p$.i && _$setAttribute(_el$23, "aria-selected", _p$.i = _v$21);
+                        _v$22 !== _p$.n && _$setAttribute(_el$23, "tabindex", _p$.n = _v$22);
                         return _p$;
                       }, {
                         e: undefined,
@@ -551,7 +586,7 @@ function DataTableRoot(props) {
                         n: undefined
                       });
                       _$runHydrationEvents();
-                      return _el$22;
+                      return _el$23;
                     })();
                   }
                 }), _$createComponent(Show, {
@@ -559,31 +594,31 @@ function DataTableRoot(props) {
                     return props.fillHeight;
                   },
                   get children() {
-                    var _el$12 = _$getNextElement(_tmpl$5),
-                      _el$13 = _el$12.firstChild;
-                    _$effect(() => _$setAttribute(_el$13, "colspan", props.columns.length));
-                    return _el$12;
+                    var _el$13 = _$getNextElement(_tmpl$7),
+                      _el$14 = _el$13.firstChild;
+                    _$effect(() => _$setAttribute(_el$14, "colspan", props.columns.length));
+                    return _el$13;
                   }
                 })];
               }
             }));
-            _$insert(_el$0, _$createComponent(Show, {
+            _$insert(_el$1, _$createComponent(Show, {
               get when() {
                 return props.footer;
               },
               children: footer => (() => {
-                var _el$25 = _$getNextElement(_tmpl$10),
-                  _el$26 = _el$25.firstChild;
-                _$insert(_el$26, _$createComponent(For, {
+                var _el$26 = _$getNextElement(_tmpl$12),
+                  _el$27 = _el$26.firstChild;
+                _$insert(_el$27, _$createComponent(For, {
                   get each() {
                     return props.columns;
                   },
                   children: (col, index) => {
                     const value = () => footer().values?.[col.id];
                     return (() => {
-                      var _el$27 = _$getNextElement(_tmpl$11);
-                      _el$27.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                      _$insert(_el$27, (() => {
+                      var _el$28 = _$getNextElement(_tmpl$13);
+                      _el$28.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                      _$insert(_el$28, (() => {
                         var _c$3 = _$memo(() => !!footer().renderCell);
                         return () => _c$3() ? footer().renderCell({
                           col,
@@ -592,33 +627,36 @@ function DataTableRoot(props) {
                         }) : renderValueDefault(value());
                       })());
                       _$effect(_p$ => {
-                        var _v$28 = alignAttr(col),
-                          _v$29 = columnHighlighted(index());
-                        _v$28 !== _p$.e && _$setAttribute(_el$27, "data-align", _p$.e = _v$28);
-                        _v$29 !== _p$.t && _$setAttribute(_el$27, "data-highlighted", _p$.t = _v$29);
+                        var _v$29 = nowrapAttr(col),
+                          _v$30 = alignAttr(col),
+                          _v$31 = columnHighlighted(index());
+                        _v$29 !== _p$.e && _$setAttribute(_el$28, "data-nowrap", _p$.e = _v$29);
+                        _v$30 !== _p$.t && _$setAttribute(_el$28, "data-align", _p$.t = _v$30);
+                        _v$31 !== _p$.a && _$setAttribute(_el$28, "data-highlighted", _p$.a = _v$31);
                         return _p$;
                       }, {
                         e: undefined,
-                        t: undefined
+                        t: undefined,
+                        a: undefined
                       });
-                      return _el$27;
+                      return _el$28;
                     })();
                   }
                 }));
-                return _el$25;
+                return _el$26;
               })()
-            }), _el$15, _co$2);
-            _$insert(_el$9, _$createComponent(Show, {
+            }), _el$16, _co$2);
+            _$insert(_el$0, _$createComponent(Show, {
               get when() {
                 return shouldRenderLoadMoreSentinel();
               },
               get children() {
-                var _el$16 = _$getNextElement(_tmpl$6);
+                var _el$17 = _$getNextElement(_tmpl$8);
                 var _ref$3 = loadMoreRef;
-                typeof _ref$3 === "function" ? _$use(_ref$3, _el$16) : loadMoreRef = _el$16;
-                return _el$16;
+                typeof _ref$3 === "function" ? _$use(_ref$3, _el$17) : loadMoreRef = _el$17;
+                return _el$17;
               }
-            }), _el$18, _co$3);
+            }), _el$19, _co$3);
             _$effect(_p$ => {
               var _v$5 = labelledBy() ? undefined : props.ariaLabel ?? dataTableMessages().dataTable,
                 _v$6 = labelledBy(),
@@ -630,16 +668,16 @@ function DataTableRoot(props) {
                 _v$10 = tableClass(),
                 _v$11 = props.fillHeight ? "true" : undefined,
                 _v$12 = props.stickyHeader === false ? undefined : "true";
-              _v$5 !== _p$.e && _$setAttribute(_el$9, "aria-label", _p$.e = _v$5);
-              _v$6 !== _p$.t && _$setAttribute(_el$9, "aria-labelledby", _p$.t = _v$6);
-              _v$7 !== _p$.a && _$className(_el$9, _p$.a = _v$7);
-              _v$8 !== _p$.o && _$setAttribute(_el$9, "data-density", _p$.o = _v$8);
-              _v$9 !== _p$.i && _$setAttribute(_el$9, "data-has-footer", _p$.i = _v$9);
-              _v$0 !== _p$.n && _$setAttribute(_el$9, "data-surface", _p$.n = _v$0);
-              _v$1 !== _p$.s && _$setAttribute(_el$9, "data-scroll-preserve", _p$.s = _v$1);
-              _v$10 !== _p$.h && _$className(_el$0, _p$.h = _v$10);
-              _v$11 !== _p$.r && _$setAttribute(_el$0, "data-fill", _p$.r = _v$11);
-              _v$12 !== _p$.d && _$setAttribute(_el$1, "data-sticky", _p$.d = _v$12);
+              _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 && _$className(_el$0, _p$.a = _v$7);
+              _v$8 !== _p$.o && _$setAttribute(_el$0, "data-density", _p$.o = _v$8);
+              _v$9 !== _p$.i && _$setAttribute(_el$0, "data-has-footer", _p$.i = _v$9);
+              _v$0 !== _p$.n && _$setAttribute(_el$0, "data-surface", _p$.n = _v$0);
+              _v$1 !== _p$.s && _$setAttribute(_el$0, "data-scroll-preserve", _p$.s = _v$1);
+              _v$10 !== _p$.h && _$className(_el$1, _p$.h = _v$10);
+              _v$11 !== _p$.r && _$setAttribute(_el$1, "data-fill", _p$.r = _v$11);
+              _v$12 !== _p$.d && _$setAttribute(_el$10, "data-sticky", _p$.d = _v$12);
               return _p$;
             }, {
               e: undefined,
@@ -653,26 +691,26 @@ function DataTableRoot(props) {
               r: undefined,
               d: undefined
             });
-            return _el$9;
+            return _el$0;
           })(), _$createComponent(For, {
             each: ["y", "x"],
             children: axis => (() => {
-              var _el$28 = _$getNextElement(_tmpl$12),
-                _el$29 = _el$28.firstChild;
-              _el$28.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
-              _el$28.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
-              _el$28.$$pointermove = event => {
+              var _el$29 = _$getNextElement(_tmpl$14),
+                _el$30 = _el$29.firstChild;
+              _el$29.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
+              _el$29.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
+              _el$29.$$pointermove = event => {
                 if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event, axis);
               };
-              _el$28.$$pointerdown = event => startScrollbarDrag(event, axis);
-              _$setAttribute(_el$28, "data-axis", axis);
+              _el$29.$$pointerdown = event => startScrollbarDrag(event, axis);
+              _$setAttribute(_el$29, "data-axis", axis);
               _$effect(_p$ => {
-                var _v$30 = scrollbars()[axis].overflow ? "true" : undefined,
-                  _v$31 = `${scrollbars()[axis].offset}px`,
-                  _v$32 = `${scrollbars()[axis].size}px`;
-                _v$30 !== _p$.e && _$setAttribute(_el$28, "data-overflow", _p$.e = _v$30);
-                _v$31 !== _p$.t && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-offset", _p$.t = _v$31);
-                _v$32 !== _p$.a && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-size", _p$.a = _v$32);
+                var _v$32 = scrollbars()[axis].overflow ? "true" : undefined,
+                  _v$33 = `${scrollbars()[axis].offset}px`,
+                  _v$34 = `${scrollbars()[axis].size}px`;
+                _v$32 !== _p$.e && _$setAttribute(_el$29, "data-overflow", _p$.e = _v$32);
+                _v$33 !== _p$.t && _$setStyleProperty(_el$30, "--k2b-data-table-scroll-offset", _p$.t = _v$33);
+                _v$34 !== _p$.a && _$setStyleProperty(_el$30, "--k2b-data-table-scroll-size", _p$.a = _v$34);
                 return _p$;
               }, {
                 e: undefined,
@@ -680,7 +718,7 @@ function DataTableRoot(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$28;
+              return _el$29;
             })()
           })];
         }
@@ -715,14 +753,14 @@ const DataTableHeader = props => {
   const panel = useContext(DataTablePanelContext);
   panel?.registerHeading();
   return (() => {
-    var _el$30 = _$getNextElement(_tmpl$13);
-    _$insert(_el$30, _$createComponent(PanelHeader, {
+    var _el$31 = _$getNextElement(_tmpl$15);
+    _$insert(_el$31, _$createComponent(PanelHeader, {
       get title() {
         return (() => {
-          var _el$31 = _$getNextElement(_tmpl$14);
-          _$insert(_el$31, () => props.title);
-          _$effect(() => _$setAttribute(_el$31, "id", panel?.headingId));
-          return _el$31;
+          var _el$32 = _$getNextElement(_tmpl$16);
+          _$insert(_el$32, () => props.title);
+          _$effect(() => _$setAttribute(_el$32, "id", panel?.headingId));
+          return _el$32;
         })();
       },
       get subtitle() {
@@ -738,22 +776,22 @@ const DataTableHeader = props => {
         return props.size;
       }
     }));
-    _$effect(() => _$className(_el$30, `k2b-data-panel__header ${props.class ?? ""}`));
-    return _el$30;
+    _$effect(() => _$className(_el$31, `k2b-data-panel__header ${props.class ?? ""}`));
+    return _el$31;
   })();
 };
 const DataTableControls = props => (() => {
-  var _el$32 = _$getNextElement(_tmpl$13);
-  _$insert(_el$32, () => props.children);
-  _$effect(() => _$className(_el$32, `k2b-data-panel__controls ${props.class ?? ""}`));
-  return _el$32;
-})();
-const DataTablePanelFooter = props => (() => {
   var _el$33 = _$getNextElement(_tmpl$15);
   _$insert(_el$33, () => props.children);
-  _$effect(() => _$className(_el$33, `k2b-data-panel__footer ${props.class ?? ""}`));
+  _$effect(() => _$className(_el$33, `k2b-data-panel__controls ${props.class ?? ""}`));
   return _el$33;
 })();
+const DataTablePanelFooter = props => (() => {
+  var _el$34 = _$getNextElement(_tmpl$17);
+  _$insert(_el$34, () => props.children);
+  _$effect(() => _$className(_el$34, `k2b-data-panel__footer ${props.class ?? ""}`));
+  return _el$34;
+})();
 const DataTable = DataTableRoot;
 DataTable.Panel = DataTablePanel;
 DataTable.Header = DataTableHeader;