@k2b/ui 0.1.0-rc.0

package/dist/browser/content/DataTable.js

@@ -0,0 +1,724 @@
+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 { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } 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 class=k2b-table-wrap><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";
+import { Dynamic } from "solid-js/web";
+import { useUiMessages } from "../intl/messages";
+import { useLocale } from "../intl/locale";
+import { PanelHeader } from "../layout/PanelHeader";
+import { Paper } from "../surfaces/Paper";
+import Placeholder from "../surfaces/Placeholder";
+const DataTablePanelContext = createContext();
+const defaultRender = (value, locale, 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);
+  if (typeof value === "string") return value;
+  return JSON.stringify(value);
+};
+const renderColumnPart = (part, col) => {
+  if (typeof part === "function") return part({
+    col
+  });
+  return part;
+};
+const rowInteractiveSelector = ["a[href]", "button", "input", "select", "textarea", "summary", "[contenteditable]", "[role='button']", "[role='checkbox']", "[role='link']", "[role='menuitem']", "[role='option']", "[role='radio']", "[role='switch']", "[role='tab']", "[tabindex]"].join(",");
+const isNestedRowControl = event => event.target instanceof Element && event.target.closest(rowInteractiveSelector) !== event.currentTarget;
+const scrollbarMetrics = (viewportSize, contentSize, scrollOffset) => {
+  if (viewportSize <= 0 || contentSize <= viewportSize + 1) return {
+    overflow: false,
+    offset: 0,
+    size: 0
+  };
+  const size = Math.min(viewportSize, Math.max(24, viewportSize * viewportSize / contentSize));
+  const offset = scrollOffset / (contentSize - viewportSize) * (viewportSize - size);
+  return {
+    overflow: true,
+    offset,
+    size
+  };
+};
+function DataTableRoot(props) {
+  const messages = useUiMessages();
+  const locale = useLocale();
+  const [hoveredColumn, setHoveredColumn] = createSignal(null);
+  const [scrollbars, setScrollbars] = createSignal({
+    x: {
+      overflow: false,
+      offset: 0,
+      size: 0
+    },
+    y: {
+      overflow: false,
+      offset: 0,
+      size: 0
+    }
+  });
+  const [scrollbarEnhanced, setScrollbarEnhanced] = createSignal(false);
+  const [scrolling, setScrolling] = createSignal(false);
+  const panel = useContext(DataTablePanelContext);
+  let tableRef;
+  let scrollRef;
+  let loadMoreRef;
+  let scrollingTimeout;
+  let scrollbarDragOffset = 0;
+  let hasMore = false;
+  let loadingMore = false;
+  let onLoadMore;
+  let loadMoreRequested = false;
+  let previousRowsLength = props.rows.length;
+  let previousLoadingMore = !!props.loadingMore;
+  let previousHasMore = !!props.hasMore;
+  const rowId = row => props.getRowId?.(row);
+  const isInteractive = () => !!props.onRowClick || !!props.onRowDoubleClick;
+  const shouldHoverRows = () => props.hoverRows ?? isInteractive();
+  const shouldRenderLoadMoreSentinel = () => !!props.onLoadMore;
+  const labelledBy = () => props.ariaLabelledBy ?? (panel?.hasHeading() ? panel.headingId : undefined);
+  const surface = () => props.surface ?? (props.class ? "plain" : "paper");
+  const cellContentClass = () => props.cellContentClass ?? "k2b-data-table__cell-text";
+  const tableClass = () => `k2b-data-table ${props.tableClass ?? ""}`.trim();
+  const columnHighlighted = index => props.highlightColumns !== false && shouldHoverRows() && hoveredColumn() === index ? "true" : undefined;
+  const setHoveredColumnIfEnabled = index => {
+    if (shouldHoverRows()) setHoveredColumn(index);
+  };
+  const isNearBottom = () => {
+    if (!scrollRef) return false;
+    return scrollRef.scrollTop + scrollRef.clientHeight >= scrollRef.scrollHeight - 240;
+  };
+  const maybeLoadMore = () => {
+    if (!hasMore || loadingMore || loadMoreRequested || !onLoadMore) return;
+    if (!isNearBottom()) return;
+    loadMoreRequested = true;
+    try {
+      onLoadMore();
+    } catch (error) {
+      loadMoreRequested = false;
+      throw error;
+    }
+  };
+  const syncScrollbars = () => {
+    if (!scrollRef) return;
+    setScrollbars({
+      x: scrollbarMetrics(scrollRef.clientWidth, scrollRef.scrollWidth, scrollRef.scrollLeft),
+      y: scrollbarMetrics(scrollRef.clientHeight, scrollRef.scrollHeight, scrollRef.scrollTop)
+    });
+  };
+  const revealScrollbars = () => {
+    setScrolling(true);
+    if (scrollingTimeout !== undefined) clearTimeout(scrollingTimeout);
+    scrollingTimeout = setTimeout(() => {
+      setScrolling(false);
+      scrollingTimeout = undefined;
+    }, 700);
+  };
+  const onScroll = () => {
+    syncScrollbars();
+    revealScrollbars();
+    maybeLoadMore();
+  };
+  const scrollFromPointer = (event, axis) => {
+    if (!scrollRef) return;
+    const track = event.currentTarget;
+    const metrics = scrollbars()[axis];
+    const rect = track.getBoundingClientRect();
+    const trackSize = axis === "y" ? rect.height : rect.width;
+    const pointerOffset = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+    const available = Math.max(1, trackSize - metrics.size);
+    const thumbOffset = Math.min(available, Math.max(0, pointerOffset - scrollbarDragOffset));
+    const maxScroll = axis === "y" ? scrollRef.scrollHeight - scrollRef.clientHeight : scrollRef.scrollWidth - scrollRef.clientWidth;
+    if (axis === "y") scrollRef.scrollTop = thumbOffset / available * maxScroll;else scrollRef.scrollLeft = thumbOffset / available * maxScroll;
+    syncScrollbars();
+    revealScrollbars();
+  };
+  const startScrollbarDrag = (event, axis) => {
+    event.preventDefault();
+    const metrics = scrollbars()[axis];
+    const rect = event.currentTarget.getBoundingClientRect();
+    const pointerOffset = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+    scrollbarDragOffset = event.target === event.currentTarget ? metrics.size / 2 : Math.min(metrics.size, Math.max(0, pointerOffset - metrics.offset));
+    event.currentTarget.setPointerCapture(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 columnAlignments = createMemo(() => {
+    const alignments = 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;
+      }
+      alignments.set(col.id, align);
+    }
+    return alignments;
+  });
+
+  /** `data-align` mirrors Cloud's `text-left/center/right` on the same cell. */
+  const alignAttr = col => {
+    const align = columnAlignments().get(col.id) ?? "left";
+    return align === "left" ? undefined : align;
+  };
+  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.
+   */
+  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
+    };
+  };
+
+  /** Only a sortable column carries a sort state; the rest carry none at all. */
+  const ariaSortFor = col => {
+    const sort = sortLinkFor(col);
+    if (!sort) return undefined;
+    if (!sort.active) return "none";
+    return props.sort?.direction === "asc" ? "ascending" : "descending";
+  };
+  const renderHeaderDefault = col => {
+    const sort = sortLinkFor(col);
+    const title = [(() => {
+      var _el$ = _$getNextElement(_tmpl$);
+      _$insert(_el$, () => renderColumnPart(col.header, col));
+      return _el$;
+    })(), _$createComponent(Show, {
+      get when() {
+        return col.subtitle !== undefined;
+      },
+      get children() {
+        var _el$2 = _$getNextElement(_tmpl$2);
+        _$insert(_el$2, () => renderColumnPart(col.subtitle, col));
+        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$);
+      _$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);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      return _el$4;
+    })();
+  };
+  const renderValueDefault = value => defaultRender(value, locale(), messages());
+  const renderCellDefault = (row, col) => renderValueDefault(valueOf(row, col));
+  const onRowKeyDown = (event, row) => {
+    if (!isInteractive()) return;
+    if (isNestedRowControl(event)) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    (props.onRowClick ?? props.onRowDoubleClick)?.(row);
+  };
+  const onRowClick = (event, row) => {
+    if (isNestedRowControl(event)) return;
+    props.onRowClick?.(row);
+  };
+  const onRowDoubleClick = (event, row) => {
+    if (isNestedRowControl(event)) return;
+    props.onRowDoubleClick?.(row);
+  };
+  const rowClass = row => {
+    if (typeof props.rowClass === "function") return props.rowClass(row) ?? "";
+    return props.rowClass ?? "";
+  };
+  onMount(() => {
+    if (typeof IntersectionObserver === "undefined" || !scrollRef || !loadMoreRef) return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries.some(entry => entry.isIntersecting)) maybeLoadMore();
+    }, {
+      root: scrollRef,
+      rootMargin: "240px"
+    });
+    observer.observe(loadMoreRef);
+    onCleanup(() => observer.disconnect());
+  });
+  onMount(() => {
+    setScrollbarEnhanced(true);
+    syncScrollbars();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(syncScrollbars);
+    if (scrollRef) observer?.observe(scrollRef);
+    if (tableRef) observer?.observe(tableRef);
+    onCleanup(() => {
+      observer?.disconnect();
+      if (scrollingTimeout !== undefined) clearTimeout(scrollingTimeout);
+    });
+  });
+  createEffect(() => {
+    const rowsLength = props.rows.length;
+    const nextHasMore = !!props.hasMore;
+    const nextLoadingMore = !!props.loadingMore;
+    if (rowsLength !== previousRowsLength || previousLoadingMore && !nextLoadingMore || !previousHasMore && nextHasMore) {
+      loadMoreRequested = false;
+    }
+    previousRowsLength = rowsLength;
+    previousLoadingMore = nextLoadingMore;
+    previousHasMore = nextHasMore;
+    hasMore = nextHasMore;
+    loadingMore = nextLoadingMore;
+    onLoadMore = props.onLoadMore;
+    maybeLoadMore();
+    queueMicrotask(syncScrollbars);
+  });
+  return _$createComponent(Show, {
+    get when() {
+      return props.columns.length > 0;
+    },
+    get fallback() {
+      return _$createComponent(Placeholder, {
+        surface: "paper",
+        get description() {
+          return _$memo(() => messages().noColumns);
+        }
+      });
+    },
+    get children() {
+      return _$createComponent(Dynamic, {
+        get component() {
+          return surface() === "paper" ? Paper : "div";
+        },
+        get ["class"]() {
+          return `k2b-table-shell ${props.class ?? ""}`;
+        },
+        get ["data-surface"]() {
+          return surface();
+        },
+        get ["data-has-footer"]() {
+          return props.footer ? "true" : undefined;
+        },
+        get ["data-overflow-x"]() {
+          return scrollbars().x.overflow ? "true" : undefined;
+        },
+        get ["data-overflow-y"]() {
+          return scrollbars().y.overflow ? "true" : undefined;
+        },
+        get ["data-scrollbar-enhanced"]() {
+          return scrollbarEnhanced() ? "true" : undefined;
+        },
+        get ["data-scrolling"]() {
+          return scrolling() ? "true" : undefined;
+        },
+        onMouseLeave: () => setHoveredColumn(null),
+        get children() {
+          return [(() => {
+            var _el$9 = _$getNextElement(_tmpl$7),
+              _el$0 = _el$9.firstChild,
+              _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);
+            var _ref$ = scrollRef;
+            typeof _ref$ === "function" ? _$use(_ref$, _el$9) : scrollRef = _el$9;
+            var _ref$2 = tableRef;
+            typeof _ref$2 === "function" ? _$use(_ref$2, _el$0) : tableRef = _el$0;
+            _$insert(_el$10, _$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 _c$ = _$memo(() => !!props.renderHeader);
+                  return () => _c$() ? props.renderHeader({
+                    col,
+                    render: () => renderHeaderDefault(col)
+                  }) : renderHeaderDefault(col);
+                })());
+                _$effect(_p$ => {
+                  var _v$12 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
+                    _v$13 = alignAttr(col),
+                    _v$14 = columnHighlighted(index()),
+                    _v$15 = ariaSortFor(col);
+                  _v$12 !== _p$.e && _$className(_el$19, _p$.e = _v$12);
+                  _v$13 !== _p$.t && _$setAttribute(_el$19, "data-align", _p$.t = _v$13);
+                  _v$14 !== _p$.a && _$setAttribute(_el$19, "data-highlighted", _p$.a = _v$14);
+                  _v$15 !== _p$.o && _$setAttribute(_el$19, "aria-sort", _p$.o = _v$15);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined
+                });
+                return _el$19;
+              })()
+            }));
+            _$insert(_el$11, _$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, {
+                    get description() {
+                      return _$memo(() => props.empty ?? messages().noRecords);
+                    }
+                  }));
+                  _$effect(() => _$setAttribute(_el$21, "colspan", props.columns.length));
+                  return _el$20;
+                })();
+              },
+              get children() {
+                return [_$createComponent(For, {
+                  get each() {
+                    return props.rows;
+                  },
+                  children: row => {
+                    const id = () => rowId(row);
+                    const isSelected = () => props.selectedRowId && id() === props.selectedRowId;
+                    return (() => {
+                      var _el$22 = _$getNextElement(_tmpl$0);
+                      _el$22.$$keydown = e => onRowKeyDown(e, row);
+                      _el$22.$$dblclick = event => onRowDoubleClick(event, row);
+                      _el$22.$$click = event => onRowClick(event, row);
+                      _$insert(_el$22, _$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 _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$21 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
+                                _v$22 = alignAttr(col),
+                                _v$23 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
+                                _v$24 = columnHighlighted(index()),
+                                _v$25 = cellContentClass();
+                              _v$21 !== _p$.e && _$className(_el$23, _p$.e = _v$21);
+                              _v$22 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$22);
+                              _v$23 !== _p$.a && _$setAttribute(_el$23, "data-valign", _p$.a = _v$23);
+                              _v$24 !== _p$.o && _$setAttribute(_el$23, "data-highlighted", _p$.o = _v$24);
+                              _v$25 !== _p$.i && _$className(_el$24, _p$.i = _v$25);
+                              return _p$;
+                            }, {
+                              e: undefined,
+                              t: undefined,
+                              a: undefined,
+                              o: undefined,
+                              i: undefined
+                            });
+                            return _el$23;
+                          })();
+                        }
+                      }));
+                      _$effect(_p$ => {
+                        var _v$16 = `k2b-data-table__row ${rowClass(row)}`,
+                          _v$17 = shouldHoverRows() ? "true" : undefined,
+                          _v$18 = shouldHoverRows() && isInteractive() ? "true" : undefined,
+                          _v$19 = isSelected() ? "true" : undefined,
+                          _v$20 = isInteractive() ? 0 : undefined;
+                        _v$16 !== _p$.e && _$className(_el$22, _p$.e = _v$16);
+                        _v$17 !== _p$.t && _$setAttribute(_el$22, "data-hover", _p$.t = _v$17);
+                        _v$18 !== _p$.a && _$setAttribute(_el$22, "data-clickable", _p$.a = _v$18);
+                        _v$19 !== _p$.o && _$setAttribute(_el$22, "data-selected", _p$.o = _v$19);
+                        _v$20 !== _p$.i && _$setAttribute(_el$22, "tabindex", _p$.i = _v$20);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined,
+                        a: undefined,
+                        o: undefined,
+                        i: undefined
+                      });
+                      _$runHydrationEvents();
+                      return _el$22;
+                    })();
+                  }
+                }), _$createComponent(Show, {
+                  get when() {
+                    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;
+                  }
+                })];
+              }
+            }));
+            _$insert(_el$0, _$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, {
+                  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 _c$3 = _$memo(() => !!footer().renderCell);
+                        return () => _c$3() ? footer().renderCell({
+                          col,
+                          value: value(),
+                          render: renderValueDefault
+                        }) : renderValueDefault(value());
+                      })());
+                      _$effect(_p$ => {
+                        var _v$26 = alignAttr(col),
+                          _v$27 = columnHighlighted(index());
+                        _v$26 !== _p$.e && _$setAttribute(_el$27, "data-align", _p$.e = _v$26);
+                        _v$27 !== _p$.t && _$setAttribute(_el$27, "data-highlighted", _p$.t = _v$27);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined
+                      });
+                      return _el$27;
+                    })();
+                  }
+                }));
+                return _el$25;
+              })()
+            }), _el$15, _co$2);
+            _$insert(_el$9, _$createComponent(Show, {
+              get when() {
+                return shouldRenderLoadMoreSentinel();
+              },
+              get children() {
+                var _el$16 = _$getNextElement(_tmpl$6);
+                var _ref$3 = loadMoreRef;
+                typeof _ref$3 === "function" ? _$use(_ref$3, _el$16) : loadMoreRef = _el$16;
+                return _el$16;
+              }
+            }), _el$18, _co$3);
+            _$effect(_p$ => {
+              var _v$5 = labelledBy() ? undefined : props.ariaLabel ?? messages().dataTable,
+                _v$6 = labelledBy(),
+                _v$7 = props.density === "compact" ? "compact" : undefined,
+                _v$8 = props.footer ? "true" : undefined,
+                _v$9 = surface(),
+                _v$0 = props.scrollPreserveKey || undefined,
+                _v$1 = tableClass(),
+                _v$10 = props.fillHeight ? "true" : undefined,
+                _v$11 = 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 && _$setAttribute(_el$9, "data-density", _p$.a = _v$7);
+              _v$8 !== _p$.o && _$setAttribute(_el$9, "data-has-footer", _p$.o = _v$8);
+              _v$9 !== _p$.i && _$setAttribute(_el$9, "data-surface", _p$.i = _v$9);
+              _v$0 !== _p$.n && _$setAttribute(_el$9, "data-scroll-preserve", _p$.n = _v$0);
+              _v$1 !== _p$.s && _$className(_el$0, _p$.s = _v$1);
+              _v$10 !== _p$.h && _$setAttribute(_el$0, "data-fill", _p$.h = _v$10);
+              _v$11 !== _p$.r && _$setAttribute(_el$1, "data-sticky", _p$.r = _v$11);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined,
+              i: undefined,
+              n: undefined,
+              s: undefined,
+              h: undefined,
+              r: undefined
+            });
+            return _el$9;
+          })(), _$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 => {
+                if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event, axis);
+              };
+              _el$28.$$pointerdown = event => startScrollbarDrag(event, axis);
+              _$setAttribute(_el$28, "data-axis", axis);
+              _$effect(_p$ => {
+                var _v$28 = scrollbars()[axis].overflow ? "true" : undefined,
+                  _v$29 = `${scrollbars()[axis].offset}px`,
+                  _v$30 = `${scrollbars()[axis].size}px`;
+                _v$28 !== _p$.e && _$setAttribute(_el$28, "data-overflow", _p$.e = _v$28);
+                _v$29 !== _p$.t && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-offset", _p$.t = _v$29);
+                _v$30 !== _p$.a && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-size", _p$.a = _v$30);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              _$runHydrationEvents();
+              return _el$28;
+            })()
+          })];
+        }
+      });
+    }
+  });
+}
+const DataTablePanel = props => {
+  const headingId = `k2b-data-table-${createUniqueId()}-heading`;
+  const [hasHeading, setHasHeading] = createSignal(false);
+  const context = {
+    headingId,
+    hasHeading,
+    registerHeading: () => setHasHeading(true)
+  };
+  return _$createComponent(DataTablePanelContext.Provider, {
+    value: context,
+    get children() {
+      return _$createComponent(Paper, {
+        as: "section",
+        get ["class"]() {
+          return `k2b-data-panel ${props.class ?? ""}`;
+        },
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+};
+const DataTableHeader = props => {
+  const panel = useContext(DataTablePanelContext);
+  panel?.registerHeading();
+  return (() => {
+    var _el$30 = _$getNextElement(_tmpl$13);
+    _$insert(_el$30, _$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;
+        })();
+      },
+      get subtitle() {
+        return props.subtitle;
+      },
+      get actions() {
+        return props.children;
+      },
+      get as() {
+        return props.as;
+      },
+      get size() {
+        return props.size;
+      }
+    }));
+    _$effect(() => _$className(_el$30, `k2b-data-panel__header ${props.class ?? ""}`));
+    return _el$30;
+  })();
+};
+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 ?? ""}`));
+  return _el$33;
+})();
+const DataTable = DataTableRoot;
+DataTable.Panel = DataTablePanel;
+DataTable.Header = DataTableHeader;
+DataTable.Controls = DataTableControls;
+DataTable.Footer = DataTablePanelFooter;
+export default DataTable;
+_$delegateEvents(["click", "dblclick", "keydown", "pointerdown", "pointermove", "pointerup"]);
+//# sourceMappingURL=DataTable.js.map