npm - @rozie-ui/data-table-solid - Versions diffs - 0.4.0 → 0.6.0 - Mend

@rozie-ui/data-table-solid 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/README.md +66 -52
package/dist/index.cjs +3198 -837
package/dist/index.d.cts +71 -8
package/dist/index.d.mts +71 -8
package/dist/index.mjs +3122 -761
package/dist/source/index.jsx +6368 -0
package/package.json +8 -3
package/src/Column.tsx +3 -3
package/src/DataTable.tsx +1401 -133
package/src/EditorCheckbox.tsx +38 -4
package/src/EditorDate.tsx +79 -8
package/src/EditorNumber.tsx +52 -6
package/src/EditorSelect.tsx +51 -6
package/src/EditorText.tsx +34 -5
package/src/FilterNumberRange.tsx +79 -12
package/src/FilterSelect.tsx +18 -3
package/src/FilterText.tsx +48 -9
package/src/GroupBar.tsx +75 -3
package/src/helpers/columnDefUtils.ts +73 -1
package/src/helpers/dateValue.ts +55 -0
package/src/themes/base.css +122 -88
package/src/themes/bootstrap.css +60 -24
package/src/themes/material.css +54 -22
package/src/themes/shadcn.css +59 -23

package/dist/index.mjs CHANGED Viewed

@@ -1,3 +1,4 @@
+import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, style, template, use } from "solid-js/web";
 import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
 import { Key } from "@solid-primitives/keyed";
 import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from "@rozie/runtime-solid";
@@ -50,6 +51,48 @@ const collectGroupableLeafDefs = (defs) => {
 	}
 	return out;
 };
+const EDITOR_KINDS = [
+	"text",
+	"number",
+	"select",
+	"checkbox",
+	"custom"
+];
+const editorKindWarning = (id, editor) => {
+	if (editor == null) return null;
+	if (typeof editor === "string" && EDITOR_KINDS.indexOf(editor) !== -1) return null;
+	return "[rozie-data-table] column \"" + String(id) + "\": editor=\"" + String(editor) + "\" is not a built-in editor. The built-ins are text | number | select | checkbox; anything else needs editor=\"custom\" plus an #editor slot fill (that is how <EditorDate> is used). Falling back to the text input.";
+};
+const columnSpecsEquivalent = (a, b, depth) => {
+	const d = typeof depth === "number" ? depth : 0;
+	if (a === b) return true;
+	if (d > 4) return false;
+	const ta = typeof a;
+	if (ta !== typeof b) return false;
+	if (ta === "function") try {
+		return String(a) === String(b);
+	} catch (err) {
+		return false;
+	}
+	if (ta === "number") return a !== a && b !== b;
+	if (a === null || b === null || ta !== "object") return false;
+	const aArr = Array.isArray(a);
+	if (aArr !== Array.isArray(b)) return false;
+	if (aArr) {
+		if (a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i++) if (!columnSpecsEquivalent(a[i], b[i], d + 1)) return false;
+		return true;
+	}
+	const ka = Object.keys(a);
+	const kb = Object.keys(b);
+	if (ka.length !== kb.length) return false;
+	for (let i = 0; i < ka.length; i++) {
+		const k = ka[i];
+		if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+		if (!columnSpecsEquivalent(a[k], b[k], d + 1)) return false;
+	}
+	return true;
+};
 //#endregion
 //#region src/helpers/indexMath.ts
 const clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
@@ -195,7 +238,34 @@ const indexOfRowIn = (rows, rowOriginal, rowId) => {
 };
 //#endregion
 //#region src/DataTable.tsx
-__rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4c] {
+var _tmpl$$11 = /* @__PURE__ */ template(`<div class=rozie-data-table-wrap data-rozie-s-d5dcab4c=""><div class=rdt-column-defs aria-hidden=true data-rozie-s-d5dcab4c=""></div><div class=rdt-toolbar data-rozie-s-d5dcab4c=""><input type=text role=searchbox aria-label="Search table"class=rdt-global-filter data-rozie-s-d5dcab4c="">`), _tmpl$2$4 = /* @__PURE__ */ template(`<div class=rdt-sr-live role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-paste"data-testid=paste-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-range"data-testid=range-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$5$1 = /* @__PURE__ */ template(`<div class="rdt-sr-live rdt-sr-sortfilter"data-testid=sortfilter-announce role=status aria-live=polite aria-atomic=true data-rozie-s-d5dcab4c="">`), _tmpl$6 = /* @__PURE__ */ template(`<details class=rdt-colvis data-rozie-s-d5dcab4c=""><summary class=rdt-colvis-summary data-rozie-s-d5dcab4c="">Columns</summary><div class=rdt-colvis-menu role=group aria-label="Toggle columns"data-rozie-s-d5dcab4c="">`), _tmpl$7 = /* @__PURE__ */ template(`<label class=rdt-colvis-item data-rozie-s-d5dcab4c=""><input type=checkbox class=rdt-colvis-checkbox data-rozie-s-d5dcab4c=""><span class=rdt-colvis-label data-rozie-s-d5dcab4c="">`), _tmpl$8 = /* @__PURE__ */ template(`<div class=rdt-group-bar-host data-rozie-s-d5dcab4c="">`), _tmpl$9 = /* @__PURE__ */ template(`<span class=rdt-group-token data-group-token=""data-rozie-s-d5dcab4c="">`), _tmpl$0 = /* @__PURE__ */ template(`<div class=rdt-scroll data-rozie-s-d5dcab4c=""><table data-rozie-s-d5dcab4c=""><thead class=rdt-thead role=rowgroup data-rozie-s-d5dcab4c=""></thead><tbody class=rdt-tbody role=rowgroup data-rozie-s-d5dcab4c=""><tr class=rdt-spacer aria-hidden=true data-rozie-s-d5dcab4c=""><td data-rozie-s-d5dcab4c=""></td></tr><tr class=rdt-spacer aria-hidden=true data-rozie-s-d5dcab4c=""><td data-rozie-s-d5dcab4c="">`), _tmpl$1 = /* @__PURE__ */ template(`<table data-rozie-s-d5dcab4c=""><thead class=rdt-thead role=rowgroup data-rozie-s-d5dcab4c=""></thead><tbody class=rdt-tbody role=rowgroup data-rozie-s-d5dcab4c="">`), _tmpl$10 = /* @__PURE__ */ template(`<tr class=rdt-tr role=row data-rozie-s-d5dcab4c="">`), _tmpl$11 = /* @__PURE__ */ template(`<th role=columnheader data-grid-cell=""data-row=__header data-rozie-s-d5dcab4c="">`), _tmpl$12 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c="">`), _tmpl$13 = /* @__PURE__ */ template(`<div class=rdt-col-menu role=menu data-rozie-s-d5dcab4c=""><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Pin left</button><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Pin right</button><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Unpin</button><hr class=rdt-col-menu-sep data-rozie-s-d5dcab4c=""><button type=button role=menuitem class=rdt-col-menu-item data-rozie-s-d5dcab4c="">Hide column`), _tmpl$14 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><button type=button class=rdt-resize-handle data-rozie-s-d5dcab4c=""><span class=rdt-resize-grip aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$15 = /* @__PURE__ */ template(`<button type=button class=rdt-sort-btn data-rozie-s-d5dcab4c=""><span class=rdt-header-label data-rozie-s-d5dcab4c=""></span><span class=rdt-sort-ind aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$16 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><span class=rdt-header-label data-rozie-s-d5dcab4c="">`), _tmpl$17 = /* @__PURE__ */ template(`<button type=button class=rdt-col-menu-trigger data-rozie-s-d5dcab4c="">⋯`), _tmpl$18 = /* @__PURE__ */ template(`<input type=checkbox aria-label="Select all rows"class=rdt-select-all data-rozie-s-d5dcab4c="">`), _tmpl$19 = /* @__PURE__ */ template(`<tr class=rdt-filter-row data-rozie-s-d5dcab4c="">`), _tmpl$20 = /* @__PURE__ */ template(`<th role=presentation data-rozie-s-d5dcab4c="">`), _tmpl$21 = /* @__PURE__ */ template(`<input type=text class=rdt-col-filter data-rozie-s-d5dcab4c="">`), _tmpl$22 = /* @__PURE__ */ template(`<tr role=row data-rozie-s-d5dcab4c="">`), _tmpl$23 = /* @__PURE__ */ template(`<td data-grid-cell=""data-rozie-s-d5dcab4c="">`), _tmpl$24 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><button type=button data-expander=""class="rdt-expander rdt-group-toggle"data-rozie-s-d5dcab4c=""></button><span class=rdt-group-value data-rozie-s-d5dcab4c=""></span><span class=rdt-group-count data-rozie-s-d5dcab4c="">`), _tmpl$25 = /* @__PURE__ */ template(`<span class=rdt-cell-value data-rozie-s-d5dcab4c="">`), _tmpl$26 = /* @__PURE__ */ template(`<input type=number data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$27 = /* @__PURE__ */ template(`<select data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$28 = /* @__PURE__ */ template(`<input type=checkbox data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$29 = /* @__PURE__ */ template(`<input type=text data-editing-cell=""data-builtin-editor=""class=rdt-cell-editor data-rozie-s-d5dcab4c="">`), _tmpl$30 = /* @__PURE__ */ template(`<option data-rozie-s-d5dcab4c="">`), _tmpl$31 = /* @__PURE__ */ template(`<input type=checkbox aria-label="Select row"class=rdt-select-row data-rozie-s-d5dcab4c="">`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button data-expander=""class=rdt-expander data-rozie-s-d5dcab4c="">`), _tmpl$33 = /* @__PURE__ */ template(`<span data-fill-handle=""data-testid=fill-handle aria-hidden=true class=rdt-fill-handle data-rozie-s-d5dcab4c="">`), _tmpl$34 = /* @__PURE__ */ template(`<tr class=rdt-detail-row role=row data-rozie-s-d5dcab4c=""><td class=rdt-detail-cell data-rozie-s-d5dcab4c="">`), _tmpl$35 = /* @__PURE__ */ template(`<th class=rdt-col-spacer aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$36 = /* @__PURE__ */ template(`<td class=rdt-col-spacer aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$37 = /* @__PURE__ */ template(`<span data-rozie-s-d5dcab4c=""><input class=rdt-select-placeholder type=checkbox tabindex=-1 aria-hidden=true data-rozie-s-d5dcab4c="">`), _tmpl$38 = /* @__PURE__ */ template(`<span class=rdt-skeleton aria-hidden=true data-rozie-s-d5dcab4c="">&#8203;`), _tmpl$39 = /* @__PURE__ */ template(`<div class=rdt-pagination role=group aria-label=Pagination data-rozie-s-d5dcab4c=""><button type=button class="rdt-page-btn rdt-page-prev"data-rozie-s-d5dcab4c="">Prev</button><span class=rdt-page-status aria-live=polite data-rozie-s-d5dcab4c=""></span><button type=button class="rdt-page-btn rdt-page-next"data-rozie-s-d5dcab4c="">Next</button><select aria-label="Rows per page"class=rdt-page-size data-rozie-s-d5dcab4c=""><option value=10 data-rozie-s-d5dcab4c="">10</option><option value=25 data-rozie-s-d5dcab4c="">25</option><option value=50 data-rozie-s-d5dcab4c="">50</option><option value=100 data-rozie-s-d5dcab4c="">100`);
+__rozieInjectStyle("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
+  --rdt-color: var(--rozie-data-table-fg, var(--rdt-ds-fg));
+  --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, var(--rdt-ds-select-accent)));
+  --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--rdt-ds-border-color));
+  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
+  --rdt-filter-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-font: var(--rozie-data-table-font, var(--rdt-ds-font));
+  --rdt-cell-padding: var(--rozie-data-table-cell-padding, var(--rdt-ds-cell-padding));
+  --rdt-header-bg: var(--rozie-data-table-header-bg, var(--rdt-ds-header-bg));
+  --rdt-header-weight: var(--rozie-data-table-header-weight, var(--rdt-ds-header-weight));
+  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity, var(--rdt-ds-sort-indicator-opacity));
+  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color, var(--rdt-ds-resize-grip-color));
+  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active, var(--rozie-data-table-accent, var(--rdt-ds-resize-grip-active)));
+  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg, var(--rdt-ds-pin-active-bg));
+  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg, var(--rdt-ds-menu-bg));
+  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow, var(--rdt-ds-menu-shadow));
+  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color, var(--rdt-ds-border-color));
+  --rdt-colvis-menu-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
+  --rdt-colvis-summary-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity, var(--rdt-ds-disabled-opacity));
+  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
+  --rdt-page-btn-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
+  --rdt-page-size-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
   width: 100%;
   font: var(--rdt-font, 14px system-ui, sans-serif);
@@ -321,6 +391,16 @@ __rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4
   flex-direction: column;
   gap: var(--rdt-chrome-gap, 0.5rem);
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-skeleton[data-rozie-s-d5dcab4c] {
+  /* inline-block on the cell's own line box, exactly like a text value (a block box was 2px
+     short of a text row). */
+  display: inline-block;
+  width: 100%;
+  vertical-align: baseline;
+  border-radius: 4px;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: transparent;
+}
 .rozie-data-table-wrap[data-rozie-s-d5dcab4c] .rdt-toolbar[data-rozie-s-d5dcab4c] {
   display: flex;
   gap: var(--rdt-toolbar-gap, 0.5rem);
@@ -346,6 +426,9 @@ __rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-filter-row[data-rozie-s-d5dcab4c] {
   background: var(--rdt-filter-row-bg, rgba(0, 0, 0, 0.015));
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-pinned[data-rozie-s-d5dcab4c] {
+  box-sizing: border-box;
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-filter-cell[data-rozie-s-d5dcab4c] {
   padding: var(--rdt-filter-cell-padding, 0.35rem 0.75rem);
   border-bottom: var(--rdt-border, 1px solid rgba(0, 0, 0, 0.08));
@@ -465,6 +548,9 @@ __rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4
 .rozie-data-table-wrap[data-rozie-s-d5dcab4c] .rdt-colvis-summary[data-rozie-s-d5dcab4c] {
   cursor: pointer;
   font: inherit;
+  /* Own the margin too: content-site typography styles bare \`summary\` (VitePress sets
+     \`margin: 16px 0\`), which grew the <details> and stretched the toolbar's search input. */
+  margin: 0;
   padding: var(--rdt-colvis-summary-padding, 0.25rem 0.6rem);
   border: var(--rdt-colvis-summary-border, 1px solid rgba(0, 0, 0, 0.2));
   border-radius: var(--rdt-colvis-summary-radius, 4px);
@@ -503,6 +589,51 @@ __rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4
   text-align: var(--rdt-expander-col-align, center);
   white-space: nowrap;
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="1"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="2"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="3"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="4"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="5"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="6"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="7"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before,
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="8"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  content: '';
+  display: inline-block;
+  vertical-align: middle;
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="1"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(1 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="2"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(2 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="3"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(3 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="4"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(4 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="5"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(5 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="6"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(6 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="7"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(7 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] tbody[data-rozie-s-d5dcab4c] tr[data-depth="8"][data-rozie-s-d5dcab4c] > .rdt-expander-td[data-rozie-s-d5dcab4c] + .rdt-td[data-rozie-s-d5dcab4c]::before {
+  width: calc(8 * var(--rdt-tree-indent, 1.25rem));
+}
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] {
+  user-select: none;
+}
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] input[data-rozie-s-d5dcab4c],
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] textarea[data-rozie-s-d5dcab4c],
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] select[data-rozie-s-d5dcab4c],
+.rozie-data-table[role="grid"][data-rozie-s-d5dcab4c] [contenteditable="true"][data-rozie-s-d5dcab4c] {
+  user-select: text;
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-select-all[data-rozie-s-d5dcab4c],
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-select-row[data-rozie-s-d5dcab4c] {
   cursor: pointer;
@@ -516,6 +647,7 @@ function DataTable(_props) {
 		rowCount: null,
 		pageCount: null,
 		expandable: false,
+		getRowId: null,
 		getSubRows: null,
 		groupable: false,
 		stickyHeader: false,
@@ -540,6 +672,7 @@ function DataTable(_props) {
 		"pageCount",
 		"expandable",
 		"expanded",
+		"getRowId",
 		"getSubRows",
 		"groupable",
 		"grouping",
@@ -570,7 +703,9 @@ function DataTable(_props) {
 		"onReorderChange",
 		"onPinChange",
 		"onHistoryChange",
+		"onVisibleRangeChange",
 		"onActivecellChange",
+		"onRowActivate",
 		"onRangeChange",
 		"onCellEditCommit",
 		"onRowEditCommit"
@@ -680,11 +815,13 @@ function DataTable(_props) {
 	const [rangeAnchor, setRangeAnchor] = createSignal(null);
 	const [rangeFocus, setRangeFocus] = createSignal(null);
 	const [pasteAnnounce, setPasteAnnounce] = createSignal("");
+	const [rangeAnnounce, setRangeAnnounce] = createSignal("");
 	const [liveAnnounce, setLiveAnnounce] = createSignal("");
 	onMount(() => {
 		setDataDefault(data() || []);
+		seedColumnPinning();
 		table = createTable({
-			data: currentData(),
+			data: feedData(),
 			columns: tableColumns(),
 			state: currentState(),
 			getCoreRowModel: getCoreRowModel(),
@@ -693,7 +830,8 @@ function DataTable(_props) {
 			getPaginationRowModel: getPaginationRowModel(),
 			getExpandedRowModel: getExpandedRowModel(),
 			getSubRows: local.getSubRows || void 0,
-			getRowCanExpand: local.expandable === true && local.getSubRows == null ? () => true : void 0,
+			getRowId: rowIdOption(),
+			getRowCanExpand: local.expandable === true && local.getSubRows == null ? (row) => !rowIsLazyPlaceholder(row) : void 0,
 			onExpandedChange: onExpandedChangeCb,
 			autoResetExpanded: false,
 			getGroupedRowModel: getGroupedRowModel(),
@@ -706,7 +844,7 @@ function DataTable(_props) {
 			manualSorting: local.manual === true,
 			rowCount: local.rowCount ?? void 0,
 			pageCount: local.pageCount ?? void 0,
-			enableRowSelection: local.selectionMode !== "none",
+			enableRowSelection: rowSelectionOption(),
 			enableMultiRowSelection: local.selectionMode === "multiple",
 			onSortingChange: onSortingChangeCb,
 			onGlobalFilterChange: onGlobalFilterChangeCb,
@@ -731,6 +869,7 @@ function DataTable(_props) {
 			setHeaderGroups(nextGroups);
 			setRowModelVer(rowModelVer() + 1);
 			if (rowsWindowed() && virtualizer) {
+				migratePlaceholderSizeCache();
 				virtualizer.setOptions(virtualizerOptions());
 				virtualizer._willUpdate();
 			}
@@ -755,6 +894,17 @@ function DataTable(_props) {
 		};
 		refreshRowModel();
 		gridRoot = __rozieRootRef ? __rozieRootRef.querySelector(".rozie-data-table") : null;
+		if (typeof document !== "undefined") {
+			docPointerDown = (ev) => {
+				if (!gridRoot) {
+					outsidePointerDown = false;
+					return;
+				}
+				const path = ev && typeof ev.composedPath === "function" ? ev.composedPath() : null;
+				outsidePointerDown = !(path ? path.indexOf(gridRoot) !== -1 : !!(ev && ev.target && gridRoot.contains && gridRoot.contains(ev.target)));
+			};
+			document.addEventListener("pointerdown", docPointerDown, true);
+		}
 		if (isWindowed()) gridScrollEl = __rozieRootRef ? __rozieRootRef.querySelector(".rdt-scroll") : null;
 		if (rowsWindowed()) {
 			virtualizer = new Virtualizer(virtualizerOptions());
@@ -776,6 +926,7 @@ function DataTable(_props) {
 				}
 				if (colsWindowed()) {
 					if (!(gridScrollEl ? gridScrollEl.clientWidth : 0)) console.warn("[rozie-data-table] virtual is on for columns but the scroll container has no bounded width; set a CSS width on an ancestor so the column window can be measured");
+					bumpWindowVer();
 				}
 			};
 			if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));
@@ -786,6 +937,10 @@ function DataTable(_props) {
 		announceState.globalFilter = effectiveGlobalFilter();
 	});
 	onCleanup(() => {
+		if (docPointerDown && typeof document !== "undefined") {
+			document.removeEventListener("pointerdown", docPointerDown, true);
+			docPointerDown = null;
+		}
 		if (virtualizerCleanup) virtualizerCleanup();
 		if (colVirtualizerCleanup) colVirtualizerCleanup();
 		teardownColRtlWatch();
@@ -795,6 +950,8 @@ function DataTable(_props) {
 	});
 	createEffect(() => {
 		maybeClearHistoryOnExternalSwap();
+		emitVisibleRangeIfChanged();
+		remeasureColumnSizes();
 		if (!table) return;
 		const d = currentData() || [];
 		if (d === lastData && d.length === lastDataLen) return;
@@ -802,6 +959,7 @@ function DataTable(_props) {
 		lastDataLen = d.length;
 		reFeed();
 	});
+	createEffect(on(() => windowVer(), (v) => untrack(() => emitVisibleRangeIfChanged()), { defer: true }));
 	createEffect(on(() => [
 		sorting(),
 		globalFilter(),
@@ -825,6 +983,7 @@ function DataTable(_props) {
 		local.columns,
 		colReg()
 	], (v) => untrack(() => (() => {
+		seedColumnPinning();
 		reFeed();
 		maybeClearHistoryOnExternalSwap();
 	})()), { defer: true }));
@@ -849,8 +1008,13 @@ function DataTable(_props) {
 	let remeasurePending = false;
 	let remeasureRaf = null;
 	let remeasureDisposed = false;
+	let scrollEndPinned = false;
+	let scrollEndPinnedCount = -1;
+	let scrollEndPinnedTop = -1;
 	const GRID_PAGE_STEP = 10;
 	let gridRoot = null;
+	let outsidePointerDown = false;
+	let docPointerDown = null;
 	let programmatic = 0;
 	let focusIntentEpoch = 0;
 	const DATA_WRITE_TOKEN_KEY = "__rozieDataWriteToken";
@@ -873,6 +1037,34 @@ function DataTable(_props) {
 			left: rail.concat(deduped)
 		};
 	}
+	let pinSeedApplied = false;
+	function seedColumnPinning() {
+		if (pinSeedApplied) return;
+		const live = columnPinning() != null ? columnPinning() : columnPinningDefault();
+		const isRealPin = (id) => id !== SELECT_COL_ID && id !== EXPANDER_COL_ID;
+		if ((live && live.left ? live.left : []).filter(isRealPin).length > 0 || (live && live.right ? live.right : []).filter(isRealPin).length > 0) {
+			pinSeedApplied = true;
+			return;
+		}
+		const defs = columnDefs();
+		if (!defs.length) return;
+		const left = [];
+		const right = [];
+		for (let i = 0; i < defs.length; i++) {
+			const def = defs[i];
+			if (!def) continue;
+			if (def.pinned === "left") left.push(def.id);
+			else if (def.pinned === "right") right.push(def.id);
+		}
+		if (!left.length && !right.length) return;
+		pinSeedApplied = true;
+		const seeded = {
+			left,
+			right
+		};
+		setColumnPinningDefault(seeded);
+		setColumnPinning(seeded);
+	}
 	function currentState() {
 		return {
 			sorting: sorting() != null ? sorting() : sortingDefault(),
@@ -892,6 +1084,41 @@ function DataTable(_props) {
 	function currentData() {
 		return data() != null ? data() : dataDefault();
 	}
+	/**
+	* A-01 — translate the public per-column `width` into table-core's `size`.
+	*
+	* `width` was written onto the ColumnDef in both build branches and read by NOTHING:
+	* table-core resolves column width from `size` (a NUMBER of px), which only the two
+	* chrome columns ever set. So the documented API was completely inert — the exact
+	* sibling of the inert `pinned` that 0.5.0 closed.
+	*
+	* `size` is numeric px by construction, so only a number or a px string can map onto
+	* it; any other CSS length (`12rem`, `20%`, `auto`) has no numeric px value at build
+	* time and is deliberately NOT guessed — it returns null and the column keeps
+	* table-core's default. The `width` prop's docs say exactly this.
+	*
+	* Returns null (not undefined) for "no usable width" so callers can test `!= null`
+	* without tripping over a legitimate 0.
+	*/ function parseWidthToSize(w) {
+		if (typeof w === "number") return Number.isFinite(w) && w > 0 ? w : null;
+		if (typeof w !== "string") return null;
+		const t = w.trim();
+		if (t === "") return null;
+		const m = /^(\d+(?:\.\d+)?)(px)?$/i.exec(t);
+		if (!m) return null;
+		const n = Number.parseFloat(m[1]);
+		return Number.isFinite(n) && n > 0 ? n : null;
+	}
+	const editorWarned = Object.create(null);
+	function checkEditorKind(id, editor) {
+		const msg = editorKindWarning(id, editor);
+		if (!msg) return editor;
+		const key = id + "\0" + String(editor);
+		if (editorWarned[key]) return editor;
+		editorWarned[key] = true;
+		console.warn(msg);
+		return editor;
+	}
 	function buildConfigDef(c) {
 		if (!c) return null;
 		if (Array.isArray(c.columns)) {
@@ -928,9 +1155,10 @@ function DataTable(_props) {
 			aggregationFn: wrapAggregationFn(c.aggregationFn),
 			pinned: c.pinned != null ? c.pinned : "",
 			width: c.width != null ? c.width : "",
+			...parseWidthToSize(c.width) != null ? { size: parseWidthToSize(c.width) } : {},
 			meta: {
 				editable: c.editable === true,
-				editor: c.editor != null ? c.editor : "text",
+				editor: c.editor != null ? checkEditorKind(id, c.editor) : "text",
 				editorOptions: c.editorOptions != null ? c.editorOptions : [],
 				validate: typeof c.validate === "function" ? c.validate : null
 			}
@@ -970,9 +1198,10 @@ function DataTable(_props) {
 				aggregationFn: wrapAggregationFn(spec.aggregationFn),
 				pinned: spec.pinned != null ? spec.pinned : "",
 				width: spec.width != null ? spec.width : "",
+				...parseWidthToSize(spec.width) != null ? { size: parseWidthToSize(spec.width) } : {},
 				meta: {
 					editable: spec.editable === true,
-					editor: spec.editor != null ? spec.editor : "text",
+					editor: spec.editor != null ? checkEditorKind(id, spec.editor) : "text",
 					editorOptions: spec.editorOptions != null ? spec.editorOptions : [],
 					validate: typeof spec.validate === "function" ? spec.validate : null
 				}
@@ -1231,9 +1460,12 @@ function DataTable(_props) {
 	function onColumnPinningChangeCb(updater) {
 		writeColumnPinning(applyUpdater(updater, currentState().columnPinning));
 	}
+	let columnSizingInfoSync = null;
 	function onColumnSizingInfoChangeCb(updater) {
-		const next = applyUpdater(updater, columnSizingInfo());
-		setColumnSizingInfo(next != null ? next : columnSizingInfo());
+		const next = applyUpdater(updater, columnSizingInfoSync != null ? columnSizingInfoSync : columnSizingInfo());
+		if (next == null) return;
+		columnSizingInfoSync = next;
+		setColumnSizingInfo(next);
 	}
 	function resolveVirtual() {
 		const v = local.virtual;
@@ -1277,7 +1509,7 @@ function DataTable(_props) {
 				if (c && c.getIsPinned && c.getIsPinned()) out.push(i);
 			}
 		}
-		if (!activeIsHeader() && activeColIndex() >= 0 && out.indexOf(activeColIndex()) === -1) out.push(activeColIndex());
+		if (activeColIndex() >= 0 && out.indexOf(activeColIndex()) === -1) out.push(activeColIndex());
 		if (editingRow() >= 0 && editingCol() >= 0 && out.indexOf(editingCol()) === -1) out.push(editingCol());
 		return out;
 	}
@@ -1298,18 +1530,37 @@ function DataTable(_props) {
 		if (rowsWindowed()) return table.getPrePaginationRowModel().rows;
 		return table.getRowModel().rows;
 	}
+	const REMEASURE_MAX_FRAMES = 10;
 	function scheduleRemeasure() {
 		if (remeasureDisposed) return;
+		if (virtualizer && gridScrollEl && !virtualizer.scrollState && gridScrollEl.scrollTop !== scrollEndPinnedTop) {
+			scrollEndPinnedTop = gridScrollEl.scrollTop;
+			scrollEndPinned = virtualizer.getVirtualDistanceFromEnd() <= 1;
+			scrollEndPinnedCount = windowSource().length;
+		}
 		if (remeasurePending) return;
 		remeasurePending = true;
 		let ranMicro = false;
 		const microPass = () => {
 			remeasureWindow();
 		};
+		let rafAttempts = 0;
 		const rafPass = () => {
 			remeasureRaf = null;
+			const covered = remeasureWindow();
+			rafAttempts = rafAttempts + 1;
+			if (!covered && rafAttempts < REMEASURE_MAX_FRAMES && !remeasureDisposed && typeof requestAnimationFrame === "function") {
+				remeasureRaf = requestAnimationFrame(rafPass);
+				return;
+			}
+			if (scrollEndPinned && gridScrollEl && !remeasureDisposed && windowSource().length === scrollEndPinnedCount) {
+				const maxTop = gridScrollEl.scrollHeight - gridScrollEl.clientHeight;
+				if (maxTop - gridScrollEl.scrollTop > 1) {
+					gridScrollEl.scrollTop = maxTop;
+					scrollEndPinnedTop = gridScrollEl.scrollTop;
+				}
+			}
 			remeasurePending = false;
-			remeasureWindow();
 		};
 		if (typeof queueMicrotask !== "undefined") {
 			ranMicro = true;
@@ -1331,6 +1582,7 @@ function DataTable(_props) {
 	function pinnedEditIndex() {
 		if (editingRow() >= 0) return editingRow();
 		if (editingRowIndex() != null) return editingRowIndex();
+		if (local.interactionMode === "grid" && !activeIsHeader() && activeRow() >= 0) return activeRow();
 		return -1;
 	}
 	function pinnedMeasurement(pin) {
@@ -1339,12 +1591,86 @@ function DataTable(_props) {
 		return ms && ms[pin] ? ms[pin] : null;
 	}
 	function remeasureWindow() {
-		if (remeasureDisposed) return;
-		if (!virtualizer || !gridRoot) return;
-		if (virtualizer.scrollState) return;
+		if (remeasureDisposed) return true;
+		if (!virtualizer || !gridRoot) return true;
+		if (virtualizer.scrollState) return true;
 		const trs = gridRoot.querySelectorAll("tbody.rdt-tbody > tr[data-index]");
-		for (const tr of trs) virtualizer.measureElement(tr);
+		const rendered = /* @__PURE__ */ new Set();
+		for (const tr of trs) {
+			virtualizer.measureElement(tr);
+			rendered.add(tr.getAttribute("data-index"));
+		}
+		let covered = true;
+		const items = virtualizer.getVirtualItems();
+		for (let i = 0; i < items.length; i++) if (!rendered.has(String(items[i].index))) {
+			covered = false;
+			break;
+		}
 		if (afterRowRemeasure) afterRowRemeasure();
+		return covered;
+	}
+	const LAZY_PLACEHOLDER_KEY = "__rdtLazyPlaceholder";
+	const LAZY_PLACEHOLDER_ROW_ID_PREFIX = "__rdt_ph_";
+	let lazyPlaceholders = {};
+	function lazyRowsActive() {
+		return rowsWindowed() && !!local.manual && local.rowCount != null && local.rowCount > 0;
+	}
+	function isLazyPlaceholder(orig) {
+		return !!orig && orig[LAZY_PLACEHOLDER_KEY] === true;
+	}
+	function rowIsLazyPlaceholder(row) {
+		return !!row && isLazyPlaceholder(row.original);
+	}
+	function feedData() {
+		const d = currentData() || [];
+		if (!lazyRowsActive()) return d;
+		const n = Math.max(d.length, Number(local.rowCount));
+		const out = new Array(n);
+		for (let i = 0; i < n; i++) {
+			const v = d[i];
+			if (v != null) out[i] = v;
+			else {
+				if (!lazyPlaceholders[i]) lazyPlaceholders[i] = {
+					[LAZY_PLACEHOLDER_KEY]: true,
+					index: i
+				};
+				out[i] = lazyPlaceholders[i];
+			}
+		}
+		return out;
+	}
+	function migratePlaceholderSizeCache() {
+		if (!virtualizer || !virtualizer.itemSizeCache || !table) return;
+		const cache = virtualizer.itemSizeCache;
+		const coreRows = table.getCoreRowModel().rows;
+		let migrated = false;
+		for (const oldKey of Array.from(cache.keys())) {
+			if (typeof oldKey !== "string" || oldKey.indexOf(LAZY_PLACEHOLDER_ROW_ID_PREFIX) !== 0) continue;
+			const row = coreRows[Number(oldKey.slice(9))];
+			if (!row || rowIsLazyPlaceholder(row) || row.id === oldKey) continue;
+			cache.set(row.id, cache.get(oldKey));
+			cache.delete(oldKey);
+			migrated = true;
+		}
+		if (!migrated) return;
+		virtualizer.itemSizeCache = new Map(cache);
+		if (typeof virtualizer.itemSizeCacheVersion === "number") virtualizer.itemSizeCacheVersion++;
+	}
+	let lastRangeStart = -1;
+	let lastRangeEnd = -1;
+	function emitVisibleRangeIfChanged() {
+		if (!rowsWindowed() || !virtualizer) return;
+		const items = virtualizer.getVirtualItems();
+		if (!items.length) return;
+		const start = items[0].index;
+		const end = items[items.length - 1].index + 1;
+		if (start === lastRangeStart && end === lastRangeEnd) return;
+		lastRangeStart = start;
+		lastRangeEnd = end;
+		_props.onVisibleRangeChange?.({
+			start,
+			end
+		});
 	}
 	function virtualItemKey(i) {
 		const src = windowSource();
@@ -1451,6 +1777,7 @@ function DataTable(_props) {
 			}
 		}
 		bumpWindowVer();
+		scheduleRemeasure();
 	}
 	function virtualizerOptions() {
 		return {
@@ -1633,20 +1960,29 @@ function DataTable(_props) {
 		if (filterChanged) return totalRowCount() + " results";
 		return "";
 	}
+	function rowIdOption() {
+		const f = local.getRowId;
+		return f ? (originalRow, index, parent) => isLazyPlaceholder(originalRow) ? LAZY_PLACEHOLDER_ROW_ID_PREFIX + originalRow.index : String(f(originalRow, index, parent)) : void 0;
+	}
+	function rowSelectionOption() {
+		if (local.selectionMode === "none") return false;
+		return lazyRowsActive() ? (row) => !rowIsLazyPlaceholder(row) : true;
+	}
 	function reFeed() {
 		if (!table) return;
 		table.setOptions((prev) => ({
 			...prev,
-			data: currentData(),
+			data: feedData(),
 			columns: tableColumns(),
 			state: currentState(),
-			enableRowSelection: local.selectionMode !== "none",
+			enableRowSelection: rowSelectionOption(),
 			enableMultiRowSelection: local.selectionMode === "multiple",
 			rowCount: local.rowCount ?? void 0,
 			pageCount: local.pageCount ?? void 0,
 			getExpandedRowModel: getExpandedRowModel(),
 			getSubRows: local.getSubRows || void 0,
-			getRowCanExpand: local.expandable === true && local.getSubRows == null ? () => true : void 0,
+			getRowId: rowIdOption(),
+			getRowCanExpand: local.expandable === true && local.getSubRows == null ? (row) => !rowIsLazyPlaceholder(row) : void 0,
 			onExpandedChange: onExpandedChangeCb,
 			autoResetExpanded: false,
 			getGroupedRowModel: getGroupedRowModel(),
@@ -1804,9 +2140,9 @@ function DataTable(_props) {
 		if (side === "right") return "position:sticky;right:" + (col.getAfter ? col.getAfter("right") : 0) + "px;z-index:" + zIndex + ";";
 		return "";
 	}
-	function thStyle(header) {
+	function thStyle(header, widthPx = null) {
 		let s = "";
-		const w = headerWidth(header);
+		const w = widthPx != null && widthPx > 0 ? widthPx + "px" : headerWidth(header);
 		if (w) s += "width:" + w + ";";
 		s += pinStyle(header && header.column ? header.column.id : null, 2);
 		return s;
@@ -2069,6 +2405,16 @@ function DataTable(_props) {
 	function headerColIndexOf(hg, header) {
 		return (hg && hg.headers ? hg.headers : []).indexOf(header);
 	}
+	function headerLeafStart(hg, header) {
+		const list = hg && hg.headers ? hg.headers : [];
+		let leaf = 0;
+		for (let i = 0; i < list.length; i++) {
+			if (list[i] === header) return leaf;
+			const h = list[i];
+			leaf = leaf + (h && h.colSpan > 1 ? h.colSpan : 1);
+		}
+		return -1;
+	}
 	function pageRowOffset() {
 		if (!isGrid() || rowsWindowed()) return 0;
 		return pageIndex() * pageSize();
@@ -2114,14 +2460,15 @@ function DataTable(_props) {
 		const header = nextIsHeader == null ? activeIsHeader() : nextIsHeader;
 		const rowOut = rowsWindowed() && virtualizer && rowIsOutsideWindow(r);
 		const colOut = colsWindowed() && colVirtualizer && colIsOutsideWindow(c);
-		if (!header && (rowOut || colOut)) {
-			if (rowOut) virtualizer.scrollToIndex(r, { align: "center" });
+		const rowScroll = !header && rowOut;
+		if (rowScroll || colOut) {
+			if (rowScroll) virtualizer.scrollToIndex(r, { align: "center" });
 			if (colOut) colVirtualizer.scrollToIndex(c, { align: "center" });
 			let focusAttempts = 0;
 			const myEpoch = focusIntentEpoch;
 			const focusWhenReady = () => {
 				if (focusIntentEpoch !== myEpoch) return;
-				const el = resolveCellEl(String(r), c);
+				const el = resolveCellEl(header ? "__header" : String(r), c, header ? lvl : null);
 				if (el) {
 					el.focus();
 					return;
@@ -2140,6 +2487,10 @@ function DataTable(_props) {
 	}
 	function totalRowCount() {
 		if (!table) return (rows() || []).length;
+		if (local.manual === true) {
+			if (local.rowCount != null) return local.rowCount;
+			if (local.pageCount != null) return local.pageCount * pageSize();
+		}
 		const fm = table.getFilteredRowModel();
 		return fm && fm.rows ? fm.rows.length : (rows() || []).length;
 	}
@@ -2155,6 +2506,9 @@ function DataTable(_props) {
 	function bodyAriaRowIndex(row) {
 		return headerRowCount() + rowIndexOf(row) + ariaPageOffset() + 1;
 	}
+	function gridAriaColCount() {
+		return visibleColCount();
+	}
 	function visibleColCount() {
 		const rowList = rows() || [];
 		if (rowList.length) return rowList[0].getVisibleCells().length;
@@ -2326,6 +2680,9 @@ function DataTable(_props) {
 	function currentCellEl() {
 		return resolveCellEl(activeIsHeader() ? "__header" : String(activeRow()), activeColIndex(), activeIsHeader() ? activeHeaderLevel() : null);
 	}
+	function activeCellHasControls() {
+		return focusables(currentCellEl()).length > 0;
+	}
 	function enterControl() {
 		const list = focusables(currentCellEl());
 		if (!list.length) return;
@@ -2370,10 +2727,10 @@ function DataTable(_props) {
 		let nextLevel = prevLevel;
 		if ((e.ctrlKey || e.metaKey) && e.shiftKey && !activeIsHeader() && (key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight")) {
 			e.preventDefault();
-			if (key === "ArrowUp") extendRange(-activeRow(), 0);
-			else if (key === "ArrowDown") extendRange(bodyRowCount() - 1 - activeRow(), 0);
-			else if (key === "ArrowLeft") extendRange(0, -activeColIndex());
-			else extendRange(0, visibleColCount() - 1 - activeColIndex());
+			if (key === "ArrowUp") extendRange(-rangeFocusRow(), 0);
+			else if (key === "ArrowDown") extendRange(bodyRowCount() - 1 - rangeFocusRow(), 0);
+			else if (key === "ArrowLeft") extendRange(0, -rangeFocusCol());
+			else extendRange(0, visibleColCount() - 1 - rangeFocusCol());
 			return;
 		} else if ((e.ctrlKey || e.metaKey) && !activeIsHeader() && (key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight")) {
 			e.preventDefault();
@@ -2456,15 +2813,15 @@ function DataTable(_props) {
 				nextCol = en.col;
 				nextIsHeader = false;
 			} else nextCol = gotoColEdge(true);
-		} else if ((key === "c" || key === "C") && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed()) {
+		} else if ((key === "c" || key === "C") && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed() && clipboardWriteAvailable()) {
 			e.preventDefault();
 			copyRange();
 			return;
-		} else if ((key === "v" || key === "V") && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed()) {
+		} else if ((key === "v" || key === "V") && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed() && clipboardReadAvailable()) {
 			e.preventDefault();
 			pasteRange();
 			return;
-		} else if ((key === "x" || key === "X") && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed()) {
+		} else if ((key === "x" || key === "X") && (e.ctrlKey || e.metaKey) && clipboardActiveAllowed() && clipboardWriteAvailable()) {
 			e.preventDefault();
 			cutRange();
 			return;
@@ -2494,6 +2851,23 @@ function DataTable(_props) {
 			e.preventDefault();
 			if (!activeIsHeader()) selectAllBody();
 			return;
+		} else if (key === " " && e.shiftKey && !e.ctrlKey && !e.metaKey && !activeIsHeader()) {
+			e.preventDefault();
+			if (local.selectionMode !== "none") {
+				const selRow = (rows() || [])[activeRow()];
+				if (selRow && selRow.toggleSelected) selRow.toggleSelected(!rowIsSelected(selRow));
+			}
+			return;
+		} else if (key === " " && (e.ctrlKey || e.metaKey) && !e.shiftKey && !activeIsHeader()) {
+			e.preventDefault();
+			selectActiveColumn();
+			return;
+		} else if (key === "Escape") {
+			if (rangeActive || rangeAnchor() != null) {
+				e.preventDefault();
+				clearRange();
+			}
+			return;
 		} else if (key === "F2" && e.shiftKey && isActiveCellEditable()) {
 			e.preventDefault();
 			beginRowEdit((rows() || [])[activeRow()]);
@@ -2519,6 +2893,10 @@ function DataTable(_props) {
 			onToggleExpand((rows() || [])[activeRow()], e);
 			recoverGridFocus(String(grpRow), grpCol, null, true);
 			return;
+		} else if (key === "Enter" && !activeIsHeader() && !activeCellHasControls()) {
+			e.preventDefault();
+			activateRowAt(activeRow(), "keyboard");
+			return;
 		} else if (key === "Enter" || key === "F2") {
 			e.preventDefault();
 			enterControl();
@@ -2569,8 +2947,11 @@ function DataTable(_props) {
 		setActiveColIndex(col);
 		if (isHeader !== prevIsHeader || col !== prevCol || (isHeader ? movedLevel !== prevLevel : movedRow !== prevRow)) focusIntentEpoch = focusIntentEpoch + 1;
 		if (rangeTransition) rangeTransition = false;
-		else if (rangeClickPending) rangeClickPending = false;
-		else clearRange();
+		else if (rangeClickPending && rangeClickPending.isHeader === isHeader && rangeClickPending.r === movedRow && rangeClickPending.c === col) rangeClickPending = null;
+		else {
+			rangeClickPending = null;
+			clearRange();
+		}
 		if (tgt === cellEl) setActiveInControl(false);
 	}
 	function onGridMouseDown(e) {
@@ -2591,9 +2972,14 @@ function DataTable(_props) {
 			setActiveIsHeader(false);
 			setActiveRow(row);
 			setActiveColIndex(col);
-			rangeClickPending = true;
+			rangeClickPending = {
+				isHeader: false,
+				r: row,
+				c: col
+			};
 			return;
 		}
+		if (isEditing(row, col)) return;
 		beginRangeDrag(row, col);
 	}
 	function onGridDblClick(e) {
@@ -2621,7 +3007,39 @@ function DataTable(_props) {
 			beginEdit(row, col, null);
 		}
 	}
+	function activateRowAt(index, trigger) {
+		const row = (rows() || [])[index];
+		if (!row || rowIsGrouped(row) || rowIsLazyPlaceholder(row)) return;
+		_props.onRowActivate?.({
+			row: row.original,
+			index,
+			trigger
+		});
+	}
+	const ROW_ACTIVATE_CONTROLS = "input, button, a[href], select, textarea, label, summary, [contenteditable=\"\"], [contenteditable=\"true\"], [role=\"button\"], [role=\"checkbox\"], [role=\"link\"], [data-editing-cell]";
+	function maybeActivateRowFromClick(e) {
+		if (!e || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return;
+		if (rangeDragMoved) return;
+		const tgt = e.target;
+		if (!tgt || !tgt.closest) return;
+		const cellEl = tgt.closest("[data-row]");
+		if (!cellEl) return;
+		const control = tgt.closest(ROW_ACTIVATE_CONTROLS);
+		if (control && cellEl.contains(control)) return;
+		const rowAttr = cellEl.getAttribute("data-row");
+		if (rowAttr == null || rowAttr === "__header") return;
+		const index = parseInt(rowAttr, 10);
+		if (!Number.isFinite(index)) return;
+		if (isGrid() && local.singleClickEdit) {
+			const colAttr = cellEl.getAttribute("data-col-index");
+			const col = colAttr == null ? NaN : parseInt(colAttr, 10);
+			const colId = Number.isFinite(col) ? columnIdAt(index, col) : null;
+			if (colId != null && columnEditable(colId)) return;
+		}
+		activateRowAt(index, "click");
+	}
 	function onGridClick(e) {
+		maybeActivateRowFromClick(e);
 		if (!isGrid() || !e) return;
 		if (!local.singleClickEdit) return;
 		if (e.shiftKey) return;
@@ -2732,7 +3150,8 @@ function DataTable(_props) {
 		const headers = hg && hg.headers || [];
 		if (!colsWindowed()) return headers.map((h) => ({
 			header: h,
-			span: h && h.colSpan > 1 ? h.colSpan : 1
+			span: h && h.colSpan > 1 ? h.colSpan : 1,
+			width: null
 		}));
 		const idx = windowedColIndices();
 		const idxSet = {};
@@ -2746,10 +3165,15 @@ function DataTable(_props) {
 			const end = cursor + leafCount;
 			cursor = end;
 			let span = 0;
-			for (let c = start; c < end; c++) if (idxSet[c]) span = span + 1;
+			let width = 0;
+			for (let c = start; c < end; c++) if (idxSet[c]) {
+				span = span + 1;
+				width = width + columnSize(c);
+			}
 			if (span > 0) out.push({
 				header: h,
-				span
+				span,
+				width
 			});
 		}
 		return out;
@@ -2757,14 +3181,25 @@ function DataTable(_props) {
 	function windowedColSpan() {
 		return colsWindowed() ? windowedColIndices().length + 2 : visibleColCount();
 	}
+	let lastColSizeSig = 0;
+	function remeasureColumnSizes() {
+		if (!colsWindowed() || !colVirtualizer || !colVirtualizer.measure) return;
+		const n = columnCount();
+		let sig = n;
+		for (let i = 0; i < n; i++) sig = Math.imul(sig, 31) + columnSize(i) | 0;
+		if (sig === lastColSizeSig) return;
+		lastColSizeSig = sig;
+		colVirtualizer.measure();
+	}
 	function remeasureColumnWindow() {
 		if (!colsWindowed() || !colVirtualizer) return;
 		colVirtualizer.setOptions(columnVirtualizerOptions());
+		remeasureColumnSizes();
 		colVirtualizer._willUpdate();
 	}
 	let gridEmptyFallback = false;
 	let rangeTransition = false;
-	let rangeClickPending = false;
+	let rangeClickPending = null;
 	let rangeActive = false;
 	function inRange(rIdx, cIdx) {
 		const a = rangeAnchor();
@@ -2806,7 +3241,17 @@ function DataTable(_props) {
 		const c1 = a.colIndex > f.colIndex ? a.colIndex : f.colIndex;
 		return rIdx === r1 && cIdx === c1;
 	}
+	function rangeSummary(anchor, focus) {
+		if (!anchor || !focus) return "";
+		const rows = Math.abs(focus.rowIndex - anchor.rowIndex) + 1;
+		const cols = Math.abs(focus.colIndex - anchor.colIndex) + 1;
+		if (rows === 1 && cols === 1) return "1 cell selected";
+		const rowPart = rows + (rows === 1 ? " row" : " rows");
+		const colPart = cols + (cols === 1 ? " column" : " columns");
+		return rowPart + " by " + colPart + " selected, " + rows * cols + " cells";
+	}
 	function emitRangeChange(anchor, focus) {
+		setRangeAnnounce(rangeSummary(anchor, focus));
 		_props.onRangeChange?.({
 			anchor,
 			focus
@@ -2845,11 +3290,15 @@ function DataTable(_props) {
 		focusActiveCell(nextRow, nextCol, false);
 		if (!hadRange || nextRow !== focus.rowIndex || nextCol !== focus.colIndex) emitRangeChange(anchor, nextFocus);
 	}
-	function setRangeFocus$local(rIdx, cIdx) {
+	function setRangeFocus$local(rIdx, cIdx, anchorR = null, anchorC = null) {
 		const maxRow = bodyRowCount() - 1;
 		const maxCol = visibleColCount() - 1;
 		if (maxRow < 0 || maxCol < 0) return;
 		let anchor = rangeAnchor();
+		if (!anchor && anchorR != null && anchorC != null) anchor = {
+			rowIndex: clamp(Math.trunc(Number(anchorR)) || 0, 0, maxRow),
+			colIndex: clamp(Math.trunc(Number(anchorC)) || 0, 0, maxCol)
+		};
 		if (!anchor) anchor = {
 			rowIndex: activeRow(),
 			colIndex: activeColIndex()
@@ -2880,6 +3329,32 @@ function DataTable(_props) {
 		rangeActive = true;
 		emitRangeChange(anchor, focus);
 	}
+	function rangeFocusRow() {
+		const f = rangeFocus();
+		return f && f.rowIndex != null ? f.rowIndex : activeRow();
+	}
+	function rangeFocusCol() {
+		const f = rangeFocus();
+		return f && f.colIndex != null ? f.colIndex : activeColIndex();
+	}
+	function selectActiveColumn() {
+		const maxRow = bodyRowCount() - 1;
+		const maxCol = visibleColCount() - 1;
+		if (maxRow < 0 || maxCol < 0) return;
+		const c = clamp(Math.trunc(Number(activeColIndex())) || 0, 0, maxCol);
+		const anchor = {
+			rowIndex: 0,
+			colIndex: c
+		};
+		const focus = {
+			rowIndex: maxRow,
+			colIndex: c
+		};
+		setRangeAnchor(anchor);
+		setRangeFocus(focus);
+		rangeActive = true;
+		emitRangeChange(anchor, focus);
+	}
 	function clearRange() {
 		if (!rangeActive) return;
 		rangeActive = false;
@@ -2961,6 +3436,12 @@ function DataTable(_props) {
 		}
 		return lines.join("\n");
 	}
+	function clipboardWriteAvailable() {
+		return typeof navigator !== "undefined" && !!navigator.clipboard && typeof navigator.clipboard.writeText === "function";
+	}
+	function clipboardReadAvailable() {
+		return typeof navigator !== "undefined" && !!navigator.clipboard && typeof navigator.clipboard.readText === "function";
+	}
 	function copyRange() {
 		if (!clipboardActiveAllowed()) return;
 		if (typeof navigator === "undefined" || !navigator.clipboard || !navigator.clipboard.writeText) return;
@@ -2969,27 +3450,30 @@ function DataTable(_props) {
 			if (p && p.catch) p.catch(() => {});
 		} catch (err) {}
 	}
-	function applyGridToRange(grid, originRow, originCol) {
+	function applyGridToRange(grid, originRow, originCol, verb) {
+		const opVerb = typeof verb === "string" && verb !== "" ? verb : "pasted";
 		const maxRow = bodyRowCount() - 1;
 		const maxCol = visibleColCount() - 1;
 		if (maxRow < 0 || maxCol < 0) return {
 			wrote: 0,
+			changed: 0,
 			total: 0
 		};
 		let total = 0;
-		let wrote = 0;
+		let applied = 0;
 		const committed = [];
 		let next = currentData();
 		for (let gr = 0; gr < grid.length; gr++) {
 			const r = originRow + gr;
 			if (r > maxRow) break;
 			const rowGrouped = rowIndexIsGrouped(r);
+			const rowPlaceholder = rowIsLazyPlaceholder((rows() || [])[r]);
 			const cols = grid[gr] || [];
 			for (let gc = 0; gc < cols.length; gc++) {
 				const c = originCol + gc;
 				if (c > maxCol) break;
 				total = total + 1;
-				if (rowGrouped) continue;
+				if (rowGrouped || rowPlaceholder) continue;
 				const colId = columnIdAt(r, c);
 				if (colId == null || !columnEditable(colId)) continue;
 				const rowObj = rowOriginalAt(r);
@@ -2998,6 +3482,8 @@ function DataTable(_props) {
 				const field = fieldOfColId(colId);
 				const srcIndex = sourceIndexOfRow(r);
 				const oldValue = rowObj ? rowObj[field] : null;
+				applied = applied + 1;
+				if (oldValue === value) continue;
 				next = replaceRowValue(next, srcIndex, field, value);
 				committed.push({
 					rowId: rowIdAt(r),
@@ -3005,19 +3491,23 @@ function DataTable(_props) {
 					oldValue,
 					newValue: value
 				});
-				wrote = wrote + 1;
 			}
 		}
-		if (wrote > 0) {
+		if (committed.length > 0) {
 			editTransition = true;
 			writeData(next);
 			editTransition = false;
-			for (let i = 0; i < committed.length; i++) _props.onCellEditCommit?.(committed[i]);
+			for (let i = 0; i < committed.length; i++) try {
+				_props.onCellEditCommit?.(committed[i]);
+			} catch (err) {
+				console.error("[rozie-data-table] paste failed partway: a cell-edit-commit listener threw. The model was already written; the remaining cells still notify.", err);
+			}
 		}
-		if (wrote > 0) announce(wrote + " of " + total + " cells pasted");
-		else if (total > 0) announce("No cells pasted — " + total + " cells were invalid or read-only");
+		if (applied > 0) announce(applied + " of " + total + " cells " + opVerb);
+		else if (total > 0) announce("No cells " + opVerb + " — " + total + " cells were invalid or read-only");
 		return {
-			wrote,
+			wrote: applied,
+			changed: committed.length,
 			total
 		};
 	}
@@ -3049,10 +3539,14 @@ function DataTable(_props) {
 		}
 		if (!p || !p.then) return;
 		p.then((text) => {
-			const grid = parseTsv(text);
-			if (!grid.length) return;
-			applyGridToRange(tileGridToBox(grid, destBox), anchorRow, anchorCol);
-		}).catch(() => {});
+			try {
+				const grid = parseTsv(text);
+				if (!grid.length) return;
+				applyGridToRange(tileGridToBox(grid, destBox), anchorRow, anchorCol, "pasted");
+			} catch (err) {
+				console.error("[rozie-data-table] paste failed: a row accessor, the data model setter or other consumer code threw. The paste was abandoned.", err);
+			}
+		}, () => {});
 	}
 	function cutRange() {
 		if (!clipboardActiveAllowed()) return;
@@ -3071,7 +3565,7 @@ function DataTable(_props) {
 			for (let c = c0; c <= c1; c++) cols.push("");
 			grid.push(cols);
 		}
-		applyGridToRange(grid, r0, c0);
+		applyGridToRange(grid, r0, c0, "cut");
 	}
 	function clearActiveRange() {
 		if (!clipboardActiveAllowed()) return;
@@ -3086,7 +3580,7 @@ function DataTable(_props) {
 			for (let c = c0; c <= c1; c++) cols.push("");
 			grid.push(cols);
 		}
-		applyGridToRange(grid, r0, c0);
+		applyGridToRange(grid, r0, c0, "cleared");
 	}
 	function fillRange(sourceBox, endCell) {
 		let box;
@@ -3122,7 +3616,7 @@ function DataTable(_props) {
 			}
 			grid.push(cols);
 		}
-		applyGridToRange(grid, box.r0, box.c0);
+		applyGridToRange(grid, box.r0, box.c0, "filled");
 	}
 	let fillDragging = false;
 	let fillDragMove = null;
@@ -3284,7 +3778,7 @@ function DataTable(_props) {
 			if (cell && (cell.r !== lastCell.r || cell.c !== lastCell.c)) {
 				lastCell = cell;
 				rangeDragMoved = true;
-				setRangeFocus$local(cell.r, cell.c);
+				setRangeFocus$local(cell.r, cell.c, anchorR, anchorC);
 			}
 		};
 		const up = () => {
@@ -3306,6 +3800,7 @@ function DataTable(_props) {
 	}
 	function isActiveCellEditable() {
 		if (rowIndexIsGrouped(activeRow())) return false;
+		if (rowIsLazyPlaceholder((rows() || [])[activeRow()])) return false;
 		const colId = activeCellColumnId();
 		return colId != null && columnEditable(colId);
 	}
@@ -3419,12 +3914,14 @@ function DataTable(_props) {
 	}
 	function beginEdit(rowIndex, colIndex, seed) {
 		if (rowIndexIsGrouped(rowIndex)) return;
+		if (rowIsLazyPlaceholder((rows() || [])[rowIndex])) return;
 		const colId = columnIdAt(rowIndex, colIndex);
 		if (colId == null || !columnEditable(colId)) return;
 		committedThisSession = false;
 		setInvalid("");
 		setEditingRowIndex(null);
 		setRowDraft({});
+		rowDraftSync = {};
 		setEditingRow(rowIndex);
 		setEditingCol(colIndex);
 		setDraftValue(seed != null ? seed : cellValueAt(rowIndex, colIndex));
@@ -3439,6 +3936,11 @@ function DataTable(_props) {
 		const tryFocus = () => {
 			const el = resolveCellEl(String(row), col);
 			if (el) {
+				const ae = gridRoot && gridRoot.getRootNode ? gridRoot.getRootNode().activeElement : null;
+				if (ae && ae !== el && gridRoot.contains && gridRoot.contains(ae) && ae.closest) {
+					const aeCell = ae.closest("[data-grid-cell]");
+					if (aeCell && aeCell !== el) return;
+				}
 				el.focus();
 				return;
 			}
@@ -3462,6 +3964,7 @@ function DataTable(_props) {
 	function endRowEdit() {
 		setEditingRowIndex(null);
 		setRowDraft({});
+		rowDraftSync = {};
 		setInvalidMsg("");
 		setActiveInControl(false);
 		setEditVer(editVer() + 1);
@@ -3475,7 +3978,14 @@ function DataTable(_props) {
 		return editFocusColId() != null && editFocusColId() === colId;
 	}
 	function coerceCellValue(colId, raw) {
-		if (editorTypeOf(colId) !== "number") return raw;
+		const kind = editorTypeOf(colId);
+		if (kind === "checkbox") {
+			if (typeof raw === "boolean") return raw;
+			if (raw == null) return false;
+			if (typeof raw === "number") return raw !== 0;
+			return /^\s*(true|1|yes|y|on)\s*$/i.test(String(raw));
+		}
+		if (kind !== "number") return raw;
 		if (raw == null) return null;
 		if (typeof raw === "number") return Number.isNaN(raw) ? null : raw;
 		const s = String(raw).trim();
@@ -3531,10 +4041,11 @@ function DataTable(_props) {
 	}
 	function toggleActiveBooleanCell() {
 		if (rowIndexIsGrouped(activeRow())) return;
-		const colId = columnIdAt(activeRow(), activeColIndex());
-		if (colId == null || !columnEditable(colId)) return;
 		const row = (rows() || [])[activeRow()];
 		if (!row) return;
+		if (rowIsLazyPlaceholder(row)) return;
+		const colId = columnIdAt(activeRow(), activeColIndex());
+		if (colId == null || !columnEditable(colId)) return;
 		const rowOriginal = row.original;
 		const rowId = row.id;
 		const oldValue = cellValueAt(activeRow(), activeColIndex());
@@ -3616,6 +4127,7 @@ function DataTable(_props) {
 		const rowIndex = rowIndexOf(row);
 		if (rowIndex < 0) return;
 		if (rowIndexIsGrouped(rowIndex)) return;
+		if (rowIsLazyPlaceholder((rows() || [])[rowIndex])) return;
 		const editable = editableColumnsForRow(rowIndex);
 		if (editable.length === 0) return;
 		committedThisSession = false;
@@ -3631,6 +4143,7 @@ function DataTable(_props) {
 			draft[ec.colId] = orig ? orig[ec.field] : null;
 		}
 		setRowDraft(draft);
+		rowDraftSync = draft;
 		setEditingRowIndex(rowIndex);
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
@@ -3648,7 +4161,7 @@ function DataTable(_props) {
 		const r = (rows() || [])[rowIndex];
 		const rowOriginal = r ? r.original : null;
 		const rowId = r ? r.id : null;
-		const draft = rowDraft() || {};
+		const draft = rowDraftSync || {};
 		for (let i = 0; i < editable.length; i++) {
 			const ec = editable[i];
 			const err = runValidator(ec.colId, coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
@@ -3756,6 +4269,8 @@ function DataTable(_props) {
 	let editTransition = false;
 	let pendingEditFollow = null;
 	let committedThisSession = false;
+	let rowDraftSync = {};
+	let dropinTabFlush = null;
 	function inRowEdit() {
 		return editingRowIndex() != null;
 	}
@@ -3771,6 +4286,11 @@ function DataTable(_props) {
 				setRowDraft$local(colId, value);
 				return;
 			}
+			if (dropinTabFlush) {
+				dropinTabFlush.called = true;
+				if (commitEdit(value, true)) dropinTabFlush.committed = true;
+				return;
+			}
 			commitEdit(value);
 		};
 	}
@@ -3800,10 +4320,11 @@ function DataTable(_props) {
 		setDraftValue(v);
 	}
 	function setRowDraft$local(colId, value) {
-		const src = rowDraft() || {};
+		const src = rowDraftSync || {};
 		const next = {};
 		for (const k in src) next[k] = src[k];
 		next[colId] = value;
+		rowDraftSync = next;
 		setRowDraft(next);
 	}
 	function rowEditTab(target, backward) {
@@ -3858,6 +4379,56 @@ function DataTable(_props) {
 			cancelEdit();
 		}
 	}
+	function onEditorDropinKeyDown(e) {
+		if (!e) return;
+		const key = e.key;
+		if (inRowEdit()) {
+			if (key === "Enter") {
+				e.preventDefault();
+				commitRow();
+				return;
+			}
+			if (key === "Escape") {
+				e.preventDefault();
+				cancelRow();
+				return;
+			}
+			if (key === "Tab") {
+				e.preventDefault();
+				rowEditTab(e.target, e.shiftKey);
+				return;
+			}
+			return;
+		}
+		if (key !== "Tab" || e.defaultPrevented) return;
+		e.preventDefault();
+		const fromRow = editingRow();
+		const fromCol = editingCol();
+		const target = e.shiftKey ? prevEditableCell(fromRow, fromCol) : nextEditableCell(fromRow, fromCol);
+		const el = e.target;
+		const ownCell = el && el.closest ? el.closest("[data-grid-cell]") : null;
+		const flush = {
+			called: false,
+			committed: false
+		};
+		dropinTabFlush = flush;
+		if (ownCell && ownCell.focus) ownCell.focus();
+		else if (el && el.blur) el.blur();
+		dropinTabFlush = null;
+		if (!flush.called) {
+			onEditorKeyDown(e);
+			return;
+		}
+		if (!flush.committed) {
+			if (el && el.focus) el.focus();
+			return;
+		}
+		if (target) {
+			setActiveRow(target.row);
+			setActiveColIndex(target.col);
+			beginEdit(target.row, target.col, null);
+		} else focusCellWhenReady(fromRow, fromCol);
+	}
 	function onEditorBlur(e) {
 		if (inRowEdit()) {
 			if (editTransition) return;
@@ -3870,13 +4441,20 @@ function DataTable(_props) {
 		}
 		if (editingRow() < 0 || editTransition) return;
 		const next = e ? e.relatedTarget : null;
-		if (next == null) return;
+		const fromCell = e && e.target && e.target.closest ? e.target.closest("[data-grid-cell]") : null;
+		if (next == null) {
+			if (!outsidePointerDown) return;
+			outsidePointerDown = false;
+			if (!fromCell) return;
+			if (fromCell.getAttribute("data-row") !== String(editingRow()) || fromCell.getAttribute("data-col-index") !== String(editingCol())) return;
+			commitEdit(void 0, true);
+			return;
+		}
 		if (!(gridRoot && gridRoot.contains && gridRoot.contains(next))) {
 			commitEdit(void 0);
 			return;
 		}
 		const nextCell = next.closest ? next.closest("[data-grid-cell]") : null;
-		const fromCell = e && e.target && e.target.closest ? e.target.closest("[data-grid-cell]") : null;
 		if (!nextCell || !fromCell || nextCell === fromCell) return;
 		const fromRow = fromCell.getAttribute("data-row");
 		const fromCol = fromCell.getAttribute("data-col-index");
@@ -4042,545 +4620,1943 @@ function DataTable(_props) {
 		if (!col || !col.getFacetedMinMaxValues) return null;
 		return col.getFacetedMinMaxValues() || null;
 	}
-	return <__ctx_data_table_columns.Provider value={{
-		registerColumn: (id, spec) => {
-			if (id == null) return;
-			const key = String(id);
-			if (key === "__proto__" || key === "constructor" || key === "prototype") return;
-			setColReg({
-				...colReg(),
-				[key]: spec
-			});
+	return createComponent(__ctx_data_table_columns.Provider, {
+		value: {
+			registerColumn: (id, spec) => {
+				if (id == null) return;
+				const key = String(id);
+				if (key === "__proto__" || key === "constructor" || key === "prototype") return;
+				const prev = colReg() ? colReg()[key] : void 0;
+				if (prev !== void 0 && columnSpecsEquivalent(prev, spec)) return;
+				setColReg({
+					...colReg(),
+					[key]: spec
+				});
+			},
+			unregisterColumn: (id) => {
+				if (id == null) return;
+				const r = { ...colReg() };
+				delete r[String(id)];
+				setColReg(r);
+			}
 		},
-		unregisterColumn: (id) => {
-			if (id == null) return;
-			const r = { ...colReg() };
-			delete r[String(id)];
-			setColReg(r);
-		}
-	}}>
-    <>
-    <div class={"rozie-data-table-wrap"} ref={(el) => {
-		__rozieRootRef = el;
-	}} data-rozie-s-d5dcab4c="">
-    <div class={"rdt-column-defs"} style={{ display: "none" }} aria-hidden="true" data-rozie-s-d5dcab4c="">{resolved()}</div>
-    {<Show when={!!invalidMsg()}><div class={"rdt-sr-live"} role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{invalidMsg()}</div></Show>}{<Show when={!!pasteAnnounce()}><div class={"rdt-sr-live rdt-sr-paste"} data-testid="paste-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{pasteAnnounce()}</div></Show>}{<Show when={!!liveAnnounce()}><div class={"rdt-sr-live rdt-sr-sortfilter"} data-testid="sortfilter-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c="">{liveAnnounce()}</div></Show>}<div class={"rdt-toolbar"} data-rozie-s-d5dcab4c="">
-      <input type="text" role="searchbox" aria-label="Search table" class={"rdt-global-filter"} value={globalFilterValue()} onInput={($event) => {
-		onGlobalFilterInput($event);
-	}} data-rozie-s-d5dcab4c="" />
-      {<Show when={allLeafColumns().length}><details class={"rdt-colvis"} data-rozie-s-d5dcab4c="">
-        <summary class={"rdt-colvis-summary"} data-rozie-s-d5dcab4c="">Columns</summary>
-        <div class={"rdt-colvis-menu"} role="group" aria-label="Toggle columns" data-rozie-s-d5dcab4c="">
-          <Key each={allLeafColumns()} by={(lc) => lc.id}>{(lc) => <label class={"rdt-colvis-item"} data-rozie-s-d5dcab4c="">
-            <input type="checkbox" class={"rdt-colvis-checkbox"} checked={lc().visible} onChange={($event) => {
-		onToggleVisibility(lc().id);
-	}} data-rozie-s-d5dcab4c="" />
-            <span class={"rdt-colvis-label"} data-rozie-s-d5dcab4c="">{rozieDisplay(lc().label)}</span>
-          </label>}</Key>
-        </div>
-      </details></Show>}</div>
-    {<Show when={local.groupable}><div class={"rdt-group-bar-host"} data-rozie-s-d5dcab4c="">
-      {(_props.groupBarSlot ?? _props.slots?.["groupBar"])?.({
-		grouping: groupingKeys(),
-		groupableColumns: groupableColumns(),
-		applyGrouping,
-		clearGrouping
-	}) ?? <Key each={groupingKeys()} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{rozieDisplay(gk())}</span>}</Key>}
-    </div></Show>}{<Show when={isWindowed()} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table " + rozieClass({ "rdt-sticky": local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event) => {
-		onGridKeyDown($event);
-	}} onFocusIn={($event) => {
-		syncActiveFromEvent($event);
-	}} onFocusOut={($event) => {
-		onGridFocusOut($event);
-	}} onMouseDown={($event) => {
-		onGridMouseDown($event);
-	}} onDblClick={($event) => {
-		onGridDblClick($event);
-	}} onClick={($event) => {
-		onGridClick($event);
-	}} data-rozie-s-d5dcab4c="">
-      <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
-        <Key each={headerGroups()} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} data-rozie-s-d5dcab4c="">
-          <Key each={hg().headers} by={(header) => header.id}>{(header) => <th class={"rdt-th " + rozieClass({
-		"rdt-select-th": isSelectColumn(header().column.id),
-		"rdt-expander-th": isExpanderColumn(header().column.id),
-		"rdt-th-resizing": columnIsResizing(header().column.id),
-		"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), header()), hgLevel())
-	})} role="columnheader" data-col={rozieAttr(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(header().colSpan > 1 ? header().colSpan : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header()))} data-rozie-s-d5dcab4c="">
-            {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={header().column.getCanSort && header().column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {_props.slots?.[`colHeader-${header().column.id}`]?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
-	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
-	}) ?? rozieDisplay(headerLabel(header().column.id))}
-                </span>
-              </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
-		onHeaderSort(header().column.id, $event);
-	}} data-rozie-s-d5dcab4c="">
-                <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {_props.slots?.[`colHeader-${header().column.id}`]?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
-	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
-	}) ?? rozieDisplay(headerLabel(header().column.id))}
-                </span>
-                <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(header().column.id))}</span>
-              </button></Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
-                  <button type="button" class={"rdt-col-menu-trigger"} aria-label={rozieAttr("Column options for " + headerLabel(header().column.id))} data-rozie-s-d5dcab4c="">⋯</button>
-                </>}><div class={"rdt-col-menu"} role="menu" data-rozie-s-d5dcab4c="">
-                  <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === "left"} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(header().column.id, "left", $event);
-	}} data-rozie-s-d5dcab4c="">Pin left</button>
-                  <button type="button" role="menuitem" aria-pressed={columnPinSide(header().column.id) === "right"} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(header().column.id, "right", $event);
-	}} data-rozie-s-d5dcab4c="">Pin right</button>
-                  <button type="button" role="menuitem" aria-pressed={!columnPinSide(header().column.id)} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(header().column.id, false, $event);
-	}} data-rozie-s-d5dcab4c="">Unpin</button>
-                  <hr class={"rdt-col-menu-sep"} data-rozie-s-d5dcab4c="" />
-                  <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event) => {
-		onHideColumn(header().column.id, $event);
-	}} data-rozie-s-d5dcab4c="">Hide column</button>
-                </div></Popover>
-              <button type="button" aria-label={rozieAttr("Resize " + headerLabel(header().column.id))} class={"rdt-resize-handle"} onPointerDown={($event) => {
-		onResizeStart(header().column.id, $event);
-	}} onTouchStart={($event) => {
-		onResizeStart(header().column.id, $event);
-	}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
-            </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
-		checked: isAllRowsSelected(),
-		indeterminate: isSomeRowsSelected(),
-		toggle: onToggleAllRows
-	}) ?? <Show when={local.selectionMode === "multiple"}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event) => {
-		onToggleAllRows($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}
-            </span></Show>}</th>}</Key>
-        </tr>}</Key>
-        {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
-          <Key each={headerGroups()[headerGroups().length - 1].headers} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell"} role="presentation" style={parseInlineStyle(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
-            {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`filter-${header().column.id}`]?.({
-		columnId: header().column.id,
-		value: columnFilterValue(header().column.id),
-		uniqueValues: getFacetedUniqueValues$1(header().column.id),
-		minMax: getFacetedMinMaxValues$1(header().column.id),
-		setFilter: setColumnFilter
-	}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
-		columnId: header().column.id,
-		value: columnFilterValue(header().column.id),
-		uniqueValues: getFacetedUniqueValues$1(header().column.id),
-		minMax: getFacetedMinMaxValues$1(header().column.id),
-		setFilter: setColumnFilter
-	}) ?? <input type="text" aria-label={rozieAttr("Filter " + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event) => {
-		onColumnFilterInput(header().column.id, $event);
-	}} onClick={($event) => {
-		stopEvent($event);
-	}} data-rozie-s-d5dcab4c="" />}
-              </span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
-        </tr></Show>}</thead>
-      <tbody class={"rdt-tbody"} role="rowgroup" data-rozie-s-d5dcab4c="">
-        <Key each={rows()} by={(row) => row.id}>{(row) => <>
-        <tr class={"rdt-tr " + rozieClass({ "rdt-group-header": rowIsGrouped(row()) })} role="row" data-depth={rozieAttr(row().depth)} aria-rowindex={rozieAttr(bodyAriaRowIndex(row()))} data-group-header={rozieAttr(rowIsGrouped(row()) ? row().id : null)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(row()) ? row().id : null)} aria-expanded={(rowIsGrouped(row()) ? !!rowIsExpanded(row()) : null) ?? void 0} aria-selected={(local.selectionMode !== "none" ? !!rowIsSelected(row()) : null) ?? void 0} aria-level={rozieAttr(groupingActive() ? row().depth + 1 : null)} data-rozie-s-d5dcab4c="">
-          <Key each={visibleCellsFor(row())} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td " + rozieClass({
-		"rdt-select-td": isSelectColumn(cell().column.id),
-		"rdt-expander-td": isExpanderColumn(cell().column.id),
-		"rdt-in-range": inRange(rowIndexOf(row()), colIndexOf(row(), cell())),
-		"rdt-cell-active": isActiveCell(String(rowIndexOf(row())), colIndexOf(row(), cell()))
-	})} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row()))} data-col-index={rozieAttr(colIndexOf(row(), cell()))} tabIndex={rozieAttr(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={parseInlineStyle(bodyCellStyle(row(), cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} data-in-range={rozieAttr(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? "true" : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
-            {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(rowIndexOf(row()), colIndexOf(row(), cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
-              {_props.slots?.[`cell-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: cell().getValue()
-	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: cell().getValue()
-	}) ?? rozieDisplay(cell().getValue())}
-            </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Show when={editorTypeOf(cell().column.id) === "custom"} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
-		onCellEditorInput(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`editor-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: editorValueFor(cell().column.id),
-		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor(),
-		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
-	}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: editorValueFor(cell().column.id),
-		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor(),
-		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
-	}) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
-		onCellEditorInput(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" />}
-              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
-		onCellEditorCheckbox(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
-		onCellEditorInput(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="">
-                <Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
-              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
-		onCellEditorInput(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
-		onToggleExpand(row(), $event);
-	}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? "▾" : "▸")}</button>
-              <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`cell-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: cell().getValue()
-	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: cell().getValue()
-	}) ?? rozieDisplay(cell().getValue())}
-              </span>
-              <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(row()) + ")")}</span>
-            </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: cellSlotRow(row()),
-		checked: rowIsSelected(row()),
-		toggle: (e) => onToggleRow(row(), e)
-	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event) => {
-		onToggleRow(row(), $event);
-	}} data-rozie-s-d5dcab4c="" />}
-            </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={rowCanExpand(row())}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? "Collapse row" : "Expand row")} class={"rdt-expander"} onClick={($event) => {
-		onToggleExpand(row(), $event);
-	}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? "▾" : "▸")}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(rowIndexOf(row()), colIndexOf(row(), cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event) => {
-		onFillHandlePointerDown($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
-        </tr>
-        {<Show when={rowShowsDetail(row())}><tr class={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(row().id)} data-rozie-s-d5dcab4c="">
-          <td class={"rdt-detail-cell"} colSpan={rozieAttr(visibleColCount())} data-rozie-s-d5dcab4c="">
-            {(_props.detailSlot ?? _props.slots?.["detail"])?.({ row: row().original })}
-          </td>
-        </tr></Show>}</>}</Key>
-      </tbody>
-    </table>}><div class={"rdt-scroll"} style={parseInlineStyle(rowsWindowed() && local.maxHeight ? "max-height:" + local.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + local.maxHeight : "overflow:auto")} data-rozie-s-d5dcab4c="">
-    <table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table " + rozieClass({
-		"rdt-sticky": local.stickyHeader,
-		"rdt-col-windowed": colsWindowed()
-	})} role={rozieAttr(tableRole())} onKeyDown={($event) => {
-		onGridKeyDown($event);
-	}} onFocusIn={($event) => {
-		syncActiveFromEvent($event);
-	}} onFocusOut={($event) => {
-		onGridFocusOut($event);
-	}} onMouseDown={($event) => {
-		onGridMouseDown($event);
-	}} onDblClick={($event) => {
-		onGridDblClick($event);
-	}} onClick={($event) => {
-		onGridClick($event);
-	}} data-rozie-s-d5dcab4c="">
-      <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
-        <Key each={headerGroups()} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} data-rozie-s-d5dcab4c="">
-          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(hg(), hgLevel())} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-th " + rozieClass({
-		"rdt-select-th": isSelectColumn(wh().header.column.id),
-		"rdt-expander-th": isExpanderColumn(wh().header.column.id),
-		"rdt-th-resizing": columnIsResizing(wh().header.column.id),
-		"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), wh().header), hgLevel())
-	})} role="columnheader" data-col={rozieAttr(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(wh().span > 1 ? wh().span : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), wh().header))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header))} data-rozie-s-d5dcab4c="">
-            {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={wh().header.column.getCanSort && wh().header.column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
-		columnId: wh().header.column.id,
-		column: wh().header.column,
-		label: headerLabel(wh().header.column.id)
-	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
-		columnId: wh().header.column.id,
-		column: wh().header.column,
-		label: headerLabel(wh().header.column.id)
-	}) ?? rozieDisplay(headerLabel(wh().header.column.id))}
-                </span>
-              </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
-		onHeaderSort(wh().header.column.id, $event);
-	}} data-rozie-s-d5dcab4c="">
-                <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
-		columnId: wh().header.column.id,
-		column: wh().header.column,
-		label: headerLabel(wh().header.column.id)
-	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
-		columnId: wh().header.column.id,
-		column: wh().header.column,
-		label: headerLabel(wh().header.column.id)
-	}) ?? rozieDisplay(headerLabel(wh().header.column.id))}
-                </span>
-                <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(wh().header.column.id))}</span>
-              </button></Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => <>
-                  <button type="button" class={"rdt-col-menu-trigger"} aria-label={rozieAttr("Column options for " + headerLabel(wh().header.column.id))} data-rozie-s-d5dcab4c="">⋯</button>
-                </>}><div class={"rdt-col-menu"} role="menu" data-rozie-s-d5dcab4c="">
-                  <button type="button" role="menuitem" aria-pressed={columnPinSide(wh().header.column.id) === "left"} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(wh().header.column.id, "left", $event);
-	}} data-rozie-s-d5dcab4c="">Pin left</button>
-                  <button type="button" role="menuitem" aria-pressed={columnPinSide(wh().header.column.id) === "right"} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(wh().header.column.id, "right", $event);
-	}} data-rozie-s-d5dcab4c="">Pin right</button>
-                  <button type="button" role="menuitem" aria-pressed={!columnPinSide(wh().header.column.id)} class={"rdt-col-menu-item"} onClick={($event) => {
-		onPinColumn(wh().header.column.id, false, $event);
-	}} data-rozie-s-d5dcab4c="">Unpin</button>
-                  <hr class={"rdt-col-menu-sep"} data-rozie-s-d5dcab4c="" />
-                  <button type="button" role="menuitem" class={"rdt-col-menu-item"} onClick={($event) => {
-		onHideColumn(wh().header.column.id, $event);
-	}} data-rozie-s-d5dcab4c="">Hide column</button>
-                </div></Popover>
-              <button type="button" aria-label={rozieAttr("Resize " + headerLabel(wh().header.column.id))} class={"rdt-resize-handle"} onPointerDown={($event) => {
-		onResizeStart(wh().header.column.id, $event);
-	}} onTouchStart={($event) => {
-		onResizeStart(wh().header.column.id, $event);
-	}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
-            </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
-		checked: isAllRowsSelected(),
-		indeterminate: isSomeRowsSelected(),
-		toggle: onToggleAllRows
-	}) ?? <Show when={local.selectionMode === "multiple"}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event) => {
-		onToggleAllRows($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}
-            </span></Show>}</th>}</Key>
-          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}</tr>}</Key>
-        {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
-          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(headerGroups()[headerGroups().length - 1], headerGroups().length - 1)} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-filter-cell"} role="presentation" data-col={rozieAttr(wh().header.column.id)} style={parseInlineStyle(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
-            {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`filter-${wh().header.column.id}`]?.({
-		columnId: wh().header.column.id,
-		value: columnFilterValue(wh().header.column.id),
-		uniqueValues: getFacetedUniqueValues$1(wh().header.column.id),
-		minMax: getFacetedMinMaxValues$1(wh().header.column.id),
-		setFilter: setColumnFilter
-	}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
-		columnId: wh().header.column.id,
-		value: columnFilterValue(wh().header.column.id),
-		uniqueValues: getFacetedUniqueValues$1(wh().header.column.id),
-		minMax: getFacetedMinMaxValues$1(wh().header.column.id),
-		setFilter: setColumnFilter
-	}) ?? <input type="text" aria-label={rozieAttr("Filter " + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event) => {
-		onColumnFilterInput(wh().header.column.id, $event);
-	}} onClick={($event) => {
-		stopEvent($event);
-	}} data-rozie-s-d5dcab4c="" />}
-              </span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
-          {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}</tr></Show>}</thead>
-      <tbody class={"rdt-tbody"} role="rowgroup" data-rozie-s-d5dcab4c="">
-        <tr class={"rdt-spacer"} aria-hidden="true" data-rozie-s-d5dcab4c="">
-          <td colSpan={rozieAttr(windowedColSpan())} style={parseInlineStyle("height:" + padTop() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" />
-        </tr>
-        <Key each={windowedRows()} by={(wr) => wr.row.id}>{(wr) => <>
-        <tr class={"rdt-tr " + rozieClass({
-		"rdt-group-header": rowIsGrouped(wr().row),
-		"rdt-row-pinned": wr().pinned
-	})} role="row" data-row={rozieAttr(wr().vi.index)} aria-rowindex={rozieAttr(headerRowCount() + wr().vi.index + 1)} data-index={rozieAttr(wr().vi.index)} data-pinned={rozieAttr(wr().pinned ? "true" : null)} data-depth={rozieAttr(wr().row.depth)} data-group-header={rozieAttr(rowIsGrouped(wr().row) ? wr().row.id : null)} data-group-leaf={rozieAttr(groupingActive() && !rowIsGrouped(wr().row) ? wr().row.id : null)} aria-expanded={(rowIsGrouped(wr().row) ? !!rowIsExpanded(wr().row) : null) ?? void 0} aria-selected={(local.selectionMode !== "none" ? !!rowIsSelected(wr().row) : null) ?? void 0} aria-level={rozieAttr(groupingActive() ? wr().row.depth + 1 : null)} data-rozie-s-d5dcab4c="">
-          {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedCells(wr().row)} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td " + rozieClass({
-		"rdt-select-td": isSelectColumn(cell().column.id),
-		"rdt-expander-td": isExpanderColumn(cell().column.id),
-		"rdt-in-range": inRange(wr().vi.index, colIndexOf(wr().row, cell())),
-		"rdt-cell-active": isActiveCell(String(wr().vi.index), colIndexOf(wr().row, cell()))
-	})} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(wr().vi.index)} data-col-index={rozieAttr(colIndexOf(wr().row, cell()))} tabIndex={rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={parseInlineStyle(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? "true" : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
-            {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
-              {_props.slots?.[`cell-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: cell().getValue()
-	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: cell().getValue()
-	}) ?? rozieDisplay(cell().getValue())}
-            </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Show when={editorTypeOf(cell().column.id) === "custom"} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
-		onCellEditorInput(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`editor-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: editorValueFor(cell().column.id),
-		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor(),
-		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
-	}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: editorValueFor(cell().column.id),
-		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor(),
-		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
-	}) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
-		onCellEditorInput(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" />}
-              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
-		onCellEditorCheckbox(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
-		onCellEditorInput(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="">
-                <Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
-              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
-		onCellEditorInput(cell().column.id, $event);
-	}} onKeyDown={($event) => {
-		onEditorKeyDown($event);
-	}} onBlur={($event) => {
-		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
-		onToggleExpand(wr().row, $event);
-	}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? "▾" : "▸")}</button>
-              <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`cell-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: cell().getValue()
-	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: cell().getValue()
-	}) ?? rozieDisplay(cell().getValue())}
-              </span>
-              <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(wr().row) + ")")}</span>
-            </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: cellSlotRow(wr().row),
-		checked: rowIsSelected(wr().row),
-		toggle: (e) => onToggleRow(wr().row, e)
-	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event) => {
-		onToggleRow(wr().row, $event);
-	}} data-rozie-s-d5dcab4c="" />}
-            </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={rowCanExpand(wr().row)}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? "Collapse row" : "Expand row")} class={"rdt-expander"} onClick={($event) => {
-		onToggleExpand(wr().row, $event);
-	}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? "▾" : "▸")}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(wr().vi.index, colIndexOf(wr().row, cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event) => {
-		onFillHandlePointerDown($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
-          {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}</tr>
-        {<Show when={rowShowsDetail(wr().row)}><tr class={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(wr().row.id)} data-rozie-s-d5dcab4c="">
-          <td class={"rdt-detail-cell"} colSpan={rozieAttr(windowedColSpan())} data-rozie-s-d5dcab4c="">
-            {(_props.detailSlot ?? _props.slots?.["detail"])?.({ row: wr().row.original })}
-          </td>
-        </tr></Show>}</>}</Key>
-        <tr class={"rdt-spacer"} aria-hidden="true" data-rozie-s-d5dcab4c="">
-          <td colSpan={rozieAttr(windowedColSpan())} style={parseInlineStyle("height:" + padBottom() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" />
-        </tr>
-      </tbody>
-    </table>
-    </div></Show>}{<Show when={!rowsWindowed()}><div class={"rdt-pagination"} role="group" aria-label="Pagination" data-rozie-s-d5dcab4c="">
-      <button type="button" class={"rdt-page-btn rdt-page-prev"} disabled={!canPrevPage()} onClick={($event) => {
-		onPrevPage();
-	}} data-rozie-s-d5dcab4c="">Prev</button>
-      <span class={"rdt-page-status"} aria-live="polite" data-rozie-s-d5dcab4c="">
-        {rozieDisplay("Page " + (pageIndex() + 1) + " of " + displayPageCount())}
-      </span>
-      <button type="button" class={"rdt-page-btn rdt-page-next"} disabled={!canNextPage()} onClick={($event) => {
-		onNextPage();
-	}} data-rozie-s-d5dcab4c="">Next</button>
-      <select aria-label="Rows per page" class={"rdt-page-size"} value={pageSize()} onChange={($event) => {
-		onPageSizeChange($event);
-	}} data-rozie-s-d5dcab4c="">
-        <option value={10} data-rozie-s-d5dcab4c="">10</option>
-        <option value={25} data-rozie-s-d5dcab4c="">25</option>
-        <option value={50} data-rozie-s-d5dcab4c="">50</option>
-        <option value={100} data-rozie-s-d5dcab4c="">100</option>
-      </select>
-    </div></Show>}</div>
-    </>
-    </__ctx_data_table_columns.Provider>;
+		get children() {
+			var _el$ = _tmpl$$11(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+			use((el) => {
+				__rozieRootRef = el;
+			}, _el$);
+			_el$2.style.setProperty("display", "none");
+			insert(_el$2, resolved);
+			insert(_el$, () => createComponent(Show, {
+				get when() {
+					return !!invalidMsg();
+				},
+				get children() {
+					var _el$5 = _tmpl$2$4();
+					insert(_el$5, invalidMsg);
+					return _el$5;
+				}
+			}), _el$3);
+			insert(_el$, () => createComponent(Show, {
+				get when() {
+					return !!pasteAnnounce();
+				},
+				get children() {
+					var _el$6 = _tmpl$3$1();
+					insert(_el$6, pasteAnnounce);
+					return _el$6;
+				}
+			}), _el$3);
+			insert(_el$, () => createComponent(Show, {
+				get when() {
+					return !!rangeAnnounce();
+				},
+				get children() {
+					var _el$7 = _tmpl$4$1();
+					insert(_el$7, rangeAnnounce);
+					return _el$7;
+				}
+			}), _el$3);
+			insert(_el$, () => createComponent(Show, {
+				get when() {
+					return !!liveAnnounce();
+				},
+				get children() {
+					var _el$8 = _tmpl$5$1();
+					insert(_el$8, liveAnnounce);
+					return _el$8;
+				}
+			}), _el$3);
+			_el$4.$$input = ($event) => {
+				onGlobalFilterInput($event);
+			};
+			insert(_el$3, () => createComponent(Show, {
+				get when() {
+					return allLeafColumns().length;
+				},
+				get children() {
+					var _el$9 = _tmpl$6(), _el$1 = _el$9.firstChild.nextSibling;
+					insert(_el$1, createComponent(Key, {
+						get each() {
+							return allLeafColumns();
+						},
+						by: (lc) => lc.id,
+						children: (lc) => (() => {
+							var _el$10 = _tmpl$7(), _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling;
+							_el$11.addEventListener("change", ($event) => {
+								onToggleVisibility(lc().id);
+							});
+							insert(_el$12, () => rozieDisplay(lc().label));
+							effect(() => _el$11.checked = lc().visible);
+							return _el$10;
+						})()
+					}));
+					return _el$9;
+				}
+			}), null);
+			insert(_el$, () => createComponent(Show, {
+				get when() {
+					return local.groupable;
+				},
+				get children() {
+					var _el$13 = _tmpl$8();
+					insert(_el$13, () => (_props.groupBarSlot ?? _props.slots?.["groupBar"])?.({
+						get grouping() {
+							return groupingKeys();
+						},
+						get groupableColumns() {
+							return groupableColumns();
+						},
+						applyGrouping,
+						clearGrouping
+					}) ?? createComponent(Key, {
+						get each() {
+							return groupingKeys();
+						},
+						by: (gk) => gk,
+						children: (gk) => (() => {
+							var _el$14 = _tmpl$9();
+							insert(_el$14, () => rozieDisplay(gk()));
+							return _el$14;
+						})()
+					}));
+					return _el$13;
+				}
+			}), null);
+			insert(_el$, () => createComponent(Show, {
+				get when() {
+					return isWindowed();
+				},
+				get fallback() {
+					return (() => {
+						var _el$23 = _tmpl$1(), _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling;
+						_el$23.$$click = ($event) => {
+							onGridClick($event);
+						};
+						_el$23.$$dblclick = ($event) => {
+							onGridDblClick($event);
+						};
+						_el$23.$$mousedown = ($event) => {
+							onGridMouseDown($event);
+						};
+						_el$23.$$focusout = ($event) => {
+							onGridFocusOut($event);
+						};
+						_el$23.$$focusin = ($event) => {
+							syncActiveFromEvent($event);
+						};
+						_el$23.$$keydown = ($event) => {
+							onGridKeyDown($event);
+						};
+						insert(_el$24, createComponent(Key, {
+							get each() {
+								return headerGroups();
+							},
+							by: (hg) => hg.id,
+							children: (hg, hgLevel) => (() => {
+								var _el$26 = _tmpl$10();
+								insert(_el$26, createComponent(Key, {
+									get each() {
+										return hg().headers;
+									},
+									by: (header) => header.id,
+									children: (header) => (() => {
+										var _el$27 = _tmpl$11();
+										insert(_el$27, () => createComponent(Show, {
+											get when() {
+												return isSelectColumn(header().column.id);
+											},
+											get fallback() {
+												return createComponent(Show, {
+													get when() {
+														return isExpanderColumn(header().column.id);
+													},
+													get fallback() {
+														return (() => {
+															var _el$30 = _tmpl$14(), _el$37 = _el$30.firstChild;
+															_el$30.style.setProperty("display", "contents");
+															insert(_el$30, () => createComponent(Show, {
+																get when() {
+																	return memo(() => !!header().column.getCanSort)() && header().column.getCanSort();
+																},
+																get fallback() {
+																	return (() => {
+																		var _el$41 = _tmpl$16(), _el$42 = _el$41.firstChild;
+																		_el$41.style.setProperty("display", "contents");
+																		insert(_el$42, () => _props.slots?.[`colHeader-${header().column.id}`]?.({
+																			get columnId() {
+																				return header().column.id;
+																			},
+																			get column() {
+																				return header().column;
+																			},
+																			get label() {
+																				return headerLabel(header().column.id);
+																			}
+																		}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
+																			get columnId() {
+																				return header().column.id;
+																			},
+																			get column() {
+																				return header().column;
+																			},
+																			get label() {
+																				return headerLabel(header().column.id);
+																			}
+																		}) ?? rozieDisplay(headerLabel(header().column.id)));
+																		return _el$41;
+																	})();
+																},
+																get children() {
+																	var _el$38 = _tmpl$15(), _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling;
+																	_el$38.$$click = ($event) => {
+																		onHeaderSort(header().column.id, $event);
+																	};
+																	insert(_el$39, () => _props.slots?.[`colHeader-${header().column.id}`]?.({
+																		get columnId() {
+																			return header().column.id;
+																		},
+																		get column() {
+																			return header().column;
+																		},
+																		get label() {
+																			return headerLabel(header().column.id);
+																		}
+																	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
+																		get columnId() {
+																			return header().column.id;
+																		},
+																		get column() {
+																			return header().column;
+																		},
+																		get label() {
+																			return headerLabel(header().column.id);
+																		}
+																	}) ?? rozieDisplay(headerLabel(header().column.id)));
+																	insert(_el$40, () => rozieDisplay(sortIndicator(header().column.id)));
+																	return _el$38;
+																}
+															}), _el$37);
+															insert(_el$30, createComponent(Popover, {
+																trigger: "click",
+																placement: "bottom-end",
+																strategy: "fixed",
+																offset: 4,
+																"data-rozie-s-d5dcab4c": "",
+																anchorSlot: () => (() => {
+																	var _el$43 = _tmpl$17();
+																	effect(() => setAttribute(_el$43, "aria-label", rozieAttr("Column options for " + headerLabel(header().column.id))));
+																	return _el$43;
+																})(),
+																get children() {
+																	var _el$31 = _tmpl$13(), _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$34 = _el$33.nextSibling, _el$36 = _el$34.nextSibling.nextSibling;
+																	_el$32.$$click = ($event) => {
+																		onPinColumn(header().column.id, "left", $event);
+																	};
+																	_el$33.$$click = ($event) => {
+																		onPinColumn(header().column.id, "right", $event);
+																	};
+																	_el$34.$$click = ($event) => {
+																		onPinColumn(header().column.id, false, $event);
+																	};
+																	_el$36.$$click = ($event) => {
+																		onHideColumn(header().column.id, $event);
+																	};
+																	effect((_p$) => {
+																		var _v$21 = columnPinSide(header().column.id) === "left", _v$22 = columnPinSide(header().column.id) === "right", _v$23 = !columnPinSide(header().column.id);
+																		_v$21 !== _p$.e && setAttribute(_el$32, "aria-pressed", _p$.e = _v$21);
+																		_v$22 !== _p$.t && setAttribute(_el$33, "aria-pressed", _p$.t = _v$22);
+																		_v$23 !== _p$.a && setAttribute(_el$34, "aria-pressed", _p$.a = _v$23);
+																		return _p$;
+																	}, {
+																		e: void 0,
+																		t: void 0,
+																		a: void 0
+																	});
+																	return _el$31;
+																}
+															}), _el$37);
+															_el$37.$$touchstart = ($event) => {
+																onResizeStart(header().column.id, $event);
+															};
+															_el$37.$$pointerdown = ($event) => {
+																onResizeStart(header().column.id, $event);
+															};
+															effect(() => setAttribute(_el$37, "aria-label", rozieAttr("Resize " + headerLabel(header().column.id))));
+															return _el$30;
+														})();
+													},
+													get children() {
+														var _el$29 = _tmpl$12();
+														_el$29.style.setProperty("display", "contents");
+														return _el$29;
+													}
+												});
+											},
+											get children() {
+												var _el$28 = _tmpl$12();
+												_el$28.style.setProperty("display", "contents");
+												insert(_el$28, () => (_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
+													get checked() {
+														return isAllRowsSelected();
+													},
+													get indeterminate() {
+														return isSomeRowsSelected();
+													},
+													get toggle() {
+														return onToggleAllRows;
+													}
+												}) ?? createComponent(Show, {
+													get when() {
+														return local.selectionMode === "multiple";
+													},
+													get children() {
+														var _el$44 = _tmpl$18();
+														_el$44.addEventListener("change", ($event) => {
+															onToggleAllRows($event);
+														});
+														effect(() => _el$44.checked = isAllRowsSelected());
+														return _el$44;
+													}
+												}));
+												return _el$28;
+											}
+										}));
+										effect((_p$) => {
+											var _v$12 = "rdt-th " + rozieClass({
+												"rdt-select-th": isSelectColumn(header().column.id),
+												"rdt-expander-th": isExpanderColumn(header().column.id),
+												"rdt-pinned": columnPinSide(header().column.id) !== "",
+												"rdt-th-resizing": columnIsResizing(header().column.id),
+												"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), header()), hgLevel())
+											}), _v$13 = rozieAttr(header().column.id), _v$14 = rozieAttr(hgLevel()), _v$15 = rozieAttr(header().colSpan > 1 ? header().colSpan : null), _v$16 = rozieAttr(headerColIndexOf(hg(), header())), _v$17 = rozieAttr(headerLeafStart(hg(), header()) + 1), _v$18 = rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel())), _v$19 = rozieAttr(ariaSortFor(header().column.id)), _v$20 = parseInlineStyle(thStyle(header()));
+											_v$12 !== _p$.e && className(_el$27, _p$.e = _v$12);
+											_v$13 !== _p$.t && setAttribute(_el$27, "data-col", _p$.t = _v$13);
+											_v$14 !== _p$.a && setAttribute(_el$27, "data-header-level", _p$.a = _v$14);
+											_v$15 !== _p$.o && setAttribute(_el$27, "colspan", _p$.o = _v$15);
+											_v$16 !== _p$.i && setAttribute(_el$27, "data-col-index", _p$.i = _v$16);
+											_v$17 !== _p$.n && setAttribute(_el$27, "aria-colindex", _p$.n = _v$17);
+											_v$18 !== _p$.s && setAttribute(_el$27, "tabindex", _p$.s = _v$18);
+											_v$19 !== _p$.h && setAttribute(_el$27, "aria-sort", _p$.h = _v$19);
+											_p$.r = style(_el$27, _v$20, _p$.r);
+											return _p$;
+										}, {
+											e: void 0,
+											t: void 0,
+											a: void 0,
+											o: void 0,
+											i: void 0,
+											n: void 0,
+											s: void 0,
+											h: void 0,
+											r: void 0
+										});
+										return _el$27;
+									})()
+								}));
+								effect(() => setAttribute(_el$26, "aria-rowindex", rozieAttr(hgLevel() + 1)));
+								return _el$26;
+							})()
+						}), null);
+						insert(_el$24, () => createComponent(Show, {
+							get when() {
+								return hasAnyFilterableColumn();
+							},
+							get children() {
+								var _el$45 = _tmpl$19();
+								insert(_el$45, createComponent(Key, {
+									get each() {
+										return headerGroups()[headerGroups().length - 1].headers;
+									},
+									by: (header) => header.id,
+									children: (header) => (() => {
+										var _el$46 = _tmpl$20();
+										insert(_el$46, () => createComponent(Show, {
+											get when() {
+												return isSelectColumn(header().column.id);
+											},
+											get fallback() {
+												return createComponent(Show, {
+													get when() {
+														return isExpanderColumn(header().column.id);
+													},
+													get fallback() {
+														return (() => {
+															var _el$49 = _tmpl$12();
+															_el$49.style.setProperty("display", "contents");
+															insert(_el$49, () => createComponent(Show, {
+																get when() {
+																	return columnIsFilterable(header().column.id);
+																},
+																get children() {
+																	var _el$50 = _tmpl$12();
+																	_el$50.style.setProperty("display", "contents");
+																	insert(_el$50, () => _props.slots?.[`filter-${header().column.id}`]?.({
+																		get columnId() {
+																			return header().column.id;
+																		},
+																		get value() {
+																			return columnFilterValue(header().column.id);
+																		},
+																		get uniqueValues() {
+																			return getFacetedUniqueValues$1(header().column.id);
+																		},
+																		get minMax() {
+																			return getFacetedMinMaxValues$1(header().column.id);
+																		},
+																		get columnLabel() {
+																			return headerLabel(header().column.id);
+																		},
+																		get setFilter() {
+																			return setColumnFilter;
+																		}
+																	}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
+																		get columnId() {
+																			return header().column.id;
+																		},
+																		get value() {
+																			return columnFilterValue(header().column.id);
+																		},
+																		get uniqueValues() {
+																			return getFacetedUniqueValues$1(header().column.id);
+																		},
+																		get minMax() {
+																			return getFacetedMinMaxValues$1(header().column.id);
+																		},
+																		get columnLabel() {
+																			return headerLabel(header().column.id);
+																		},
+																		get setFilter() {
+																			return setColumnFilter;
+																		}
+																	}) ?? (() => {
+																		var _el$51 = _tmpl$21();
+																		_el$51.$$click = ($event) => {
+																			stopEvent($event);
+																		};
+																		_el$51.$$input = ($event) => {
+																			onColumnFilterInput(header().column.id, $event);
+																		};
+																		effect(() => setAttribute(_el$51, "aria-label", rozieAttr("Filter " + headerLabel(header().column.id))));
+																		effect(() => _el$51.value = columnFilterValue(header().column.id));
+																		return _el$51;
+																	})());
+																	return _el$50;
+																}
+															}));
+															return _el$49;
+														})();
+													},
+													get children() {
+														var _el$48 = _tmpl$12();
+														_el$48.style.setProperty("display", "contents");
+														return _el$48;
+													}
+												});
+											},
+											get children() {
+												var _el$47 = _tmpl$12();
+												_el$47.style.setProperty("display", "contents");
+												return _el$47;
+											}
+										}));
+										effect((_p$) => {
+											var _v$24 = "rdt-filter-cell " + rozieClass({ "rdt-pinned": columnPinSide(header().column.id) !== "" }), _v$25 = parseInlineStyle(pinStyle(header().column.id));
+											_v$24 !== _p$.e && className(_el$46, _p$.e = _v$24);
+											_p$.t = style(_el$46, _v$25, _p$.t);
+											return _p$;
+										}, {
+											e: void 0,
+											t: void 0
+										});
+										return _el$46;
+									})()
+								}));
+								return _el$45;
+							}
+						}), null);
+						insert(_el$25, createComponent(Key, {
+							get each() {
+								return rows();
+							},
+							by: (row) => row.id,
+							children: (row) => [(() => {
+								var _el$52 = _tmpl$22();
+								insert(_el$52, createComponent(Key, {
+									get each() {
+										return visibleCellsFor(row());
+									},
+									by: (cell) => cell.id,
+									children: (cell) => (() => {
+										var _el$53 = _tmpl$23();
+										insert(_el$53, () => createComponent(Show, {
+											get when() {
+												return isExpanderColumn(cell().column.id);
+											},
+											get fallback() {
+												return createComponent(Show, {
+													get when() {
+														return isSelectColumn(cell().column.id);
+													},
+													get fallback() {
+														return createComponent(Show, {
+															get when() {
+																return cellIsGrouped(cell());
+															},
+															get fallback() {
+																return createComponent(Show, {
+																	get when() {
+																		return isEditing(rowIndexOf(row()), colIndexOf(row(), cell()));
+																	},
+																	get fallback() {
+																		return createComponent(Show, {
+																			get when() {
+																				return cellIsPlaceholder(cell());
+																			},
+																			get fallback() {
+																				return (() => {
+																					var _el$62 = _tmpl$25();
+																					insert(_el$62, () => _props.slots?.[`cell-${cell().column.id}`]?.({
+																						get columnId() {
+																							return cell().column.id;
+																						},
+																						get column() {
+																							return cell().column;
+																						},
+																						get row() {
+																							return cellSlotRow(row());
+																						},
+																						get value() {
+																							return cell().getValue();
+																						}
+																					}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
+																						get columnId() {
+																							return cell().column.id;
+																						},
+																						get column() {
+																							return cell().column;
+																						},
+																						get row() {
+																							return cellSlotRow(row());
+																						},
+																						get value() {
+																							return cell().getValue();
+																						}
+																					}) ?? rozieDisplay(cell().getValue()));
+																					return _el$62;
+																				})();
+																			},
+																			get children() {
+																				var _el$61 = _tmpl$12();
+																				_el$61.style.setProperty("display", "contents");
+																				return _el$61;
+																			}
+																		});
+																	},
+																	get children() {
+																		var _el$60 = _tmpl$12();
+																		_el$60.style.setProperty("display", "contents");
+																		insert(_el$60, () => createComponent(Show, {
+																			get when() {
+																				return editorTypeOf(cell().column.id) === "number";
+																			},
+																			get fallback() {
+																				return createComponent(Show, {
+																					get when() {
+																						return editorTypeOf(cell().column.id) === "select";
+																					},
+																					get fallback() {
+																						return createComponent(Show, {
+																							get when() {
+																								return editorTypeOf(cell().column.id) === "checkbox";
+																							},
+																							get fallback() {
+																								return createComponent(Show, {
+																									get when() {
+																										return editorTypeOf(cell().column.id) === "custom";
+																									},
+																									get fallback() {
+																										return (() => {
+																											var _el$67 = _tmpl$29();
+																											_el$67.addEventListener("blur", ($event) => {
+																												onEditorBlur($event);
+																											});
+																											_el$67.$$keydown = ($event) => {
+																												onEditorKeyDown($event);
+																											};
+																											_el$67.$$input = ($event) => {
+																												onCellEditorInput(cell().column.id, $event);
+																											};
+																											effect(() => setAttribute(_el$67, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																											effect(() => _el$67.value = editorValueFor(cell().column.id));
+																											return _el$67;
+																										})();
+																									},
+																									get children() {
+																										var _el$66 = _tmpl$12();
+																										_el$66.$$keydown = ($event) => {
+																											onEditorDropinKeyDown($event);
+																										};
+																										_el$66.style.setProperty("display", "contents");
+																										insert(_el$66, () => _props.slots?.[`editor-${cell().column.id}`]?.({
+																											get columnId() {
+																												return cell().column.id;
+																											},
+																											get column() {
+																												return cell().column;
+																											},
+																											get row() {
+																												return cellSlotRow(row());
+																											},
+																											get value() {
+																												return editorValueFor(cell().column.id);
+																											},
+																											get commit() {
+																												return editorCommitFor(cell().column.id);
+																											},
+																											get cancel() {
+																												return editorCancelFor();
+																											},
+																											get columnLabel() {
+																												return headerLabel(cell().column.id);
+																											},
+																											get autofocus() {
+																												return editorAutofocusFor(cell().column.id, rowIndexOf(row()));
+																											}
+																										}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
+																											get columnId() {
+																												return cell().column.id;
+																											},
+																											get column() {
+																												return cell().column;
+																											},
+																											get row() {
+																												return cellSlotRow(row());
+																											},
+																											get value() {
+																												return editorValueFor(cell().column.id);
+																											},
+																											get commit() {
+																												return editorCommitFor(cell().column.id);
+																											},
+																											get cancel() {
+																												return editorCancelFor();
+																											},
+																											get columnLabel() {
+																												return headerLabel(cell().column.id);
+																											},
+																											get autofocus() {
+																												return editorAutofocusFor(cell().column.id, rowIndexOf(row()));
+																											}
+																										}) ?? (() => {
+																											var _el$68 = _tmpl$29();
+																											_el$68.addEventListener("blur", ($event) => {
+																												onEditorBlur($event);
+																											});
+																											_el$68.$$keydown = ($event) => {
+																												onEditorKeyDown($event);
+																											};
+																											_el$68.$$input = ($event) => {
+																												onCellEditorInput(cell().column.id, $event);
+																											};
+																											effect(() => setAttribute(_el$68, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																											effect(() => _el$68.value = editorValueFor(cell().column.id));
+																											return _el$68;
+																										})());
+																										return _el$66;
+																									}
+																								});
+																							},
+																							get children() {
+																								var _el$65 = _tmpl$28();
+																								_el$65.addEventListener("blur", ($event) => {
+																									onEditorBlur($event);
+																								});
+																								_el$65.$$keydown = ($event) => {
+																									onEditorKeyDown($event);
+																								};
+																								_el$65.addEventListener("change", ($event) => {
+																									onCellEditorCheckbox(cell().column.id, $event);
+																								});
+																								effect(() => setAttribute(_el$65, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																								effect(() => _el$65.checked = editorCheckedFor(cell().column.id));
+																								return _el$65;
+																							}
+																						});
+																					},
+																					get children() {
+																						var _el$64 = _tmpl$27();
+																						_el$64.addEventListener("blur", ($event) => {
+																							onEditorBlur($event);
+																						});
+																						_el$64.$$keydown = ($event) => {
+																							onEditorKeyDown($event);
+																						};
+																						_el$64.addEventListener("change", ($event) => {
+																							onCellEditorInput(cell().column.id, $event);
+																						});
+																						insert(_el$64, createComponent(Key, {
+																							get each() {
+																								return editorOptionsOf(cell().column.id);
+																							},
+																							by: (opt) => opt.value,
+																							children: (opt) => (() => {
+																								var _el$69 = _tmpl$30();
+																								insert(_el$69, () => rozieDisplay(opt().label));
+																								effect(() => _el$69.value = rozieAttr(opt().value));
+																								return _el$69;
+																							})()
+																						}));
+																						effect(() => setAttribute(_el$64, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																						effect(() => _el$64.value = editorValueFor(cell().column.id));
+																						return _el$64;
+																					}
+																				});
+																			},
+																			get children() {
+																				var _el$63 = _tmpl$26();
+																				_el$63.addEventListener("blur", ($event) => {
+																					onEditorBlur($event);
+																				});
+																				_el$63.$$keydown = ($event) => {
+																					onEditorKeyDown($event);
+																				};
+																				_el$63.$$input = ($event) => {
+																					onCellEditorInput(cell().column.id, $event);
+																				};
+																				effect(() => setAttribute(_el$63, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																				effect(() => _el$63.value = editorValueFor(cell().column.id));
+																				return _el$63;
+																			}
+																		}));
+																		return _el$60;
+																	}
+																});
+															},
+															get children() {
+																var _el$56 = _tmpl$24(), _el$57 = _el$56.firstChild, _el$58 = _el$57.nextSibling, _el$59 = _el$58.nextSibling;
+																_el$56.style.setProperty("display", "contents");
+																_el$57.$$click = ($event) => {
+																	onToggleExpand(row(), $event);
+																};
+																insert(_el$57, () => rozieDisplay(rowIsExpanded(row()) ? "▾" : "▸"));
+																insert(_el$58, () => _props.slots?.[`cell-${cell().column.id}`]?.({
+																	get columnId() {
+																		return cell().column.id;
+																	},
+																	get column() {
+																		return cell().column;
+																	},
+																	get row() {
+																		return cellSlotRow(row());
+																	},
+																	get value() {
+																		return cell().getValue();
+																	}
+																}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
+																	get columnId() {
+																		return cell().column.id;
+																	},
+																	get column() {
+																		return cell().column;
+																	},
+																	get row() {
+																		return cellSlotRow(row());
+																	},
+																	get value() {
+																		return cell().getValue();
+																	}
+																}) ?? rozieDisplay(cell().getValue()));
+																insert(_el$59, () => rozieDisplay("(" + groupSubRowCount(row()) + ")"));
+																effect((_p$) => {
+																	var _v$46 = !!rowIsExpanded(row()), _v$47 = rozieAttr(rowIsExpanded(row()) ? "Collapse group" : "Expand group");
+																	_v$46 !== _p$.e && setAttribute(_el$57, "aria-expanded", _p$.e = _v$46);
+																	_v$47 !== _p$.t && setAttribute(_el$57, "aria-label", _p$.t = _v$47);
+																	return _p$;
+																}, {
+																	e: void 0,
+																	t: void 0
+																});
+																return _el$56;
+															}
+														});
+													},
+													get children() {
+														var _el$55 = _tmpl$12();
+														_el$55.style.setProperty("display", "contents");
+														insert(_el$55, () => (_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
+															get row() {
+																return cellSlotRow(row());
+															},
+															get checked() {
+																return rowIsSelected(row());
+															},
+															toggle: (e) => onToggleRow(row(), e)
+														}) ?? (() => {
+															var _el$70 = _tmpl$31();
+															_el$70.addEventListener("change", ($event) => {
+																onToggleRow(row(), $event);
+															});
+															effect(() => _el$70.checked = rowIsSelected(row()));
+															return _el$70;
+														})());
+														return _el$55;
+													}
+												});
+											},
+											get children() {
+												var _el$54 = _tmpl$12();
+												_el$54.style.setProperty("display", "contents");
+												insert(_el$54, () => createComponent(Show, {
+													get when() {
+														return rowCanExpand(row());
+													},
+													get children() {
+														var _el$71 = _tmpl$32();
+														_el$71.$$click = ($event) => {
+															onToggleExpand(row(), $event);
+														};
+														insert(_el$71, () => rozieDisplay(rowIsExpanded(row()) ? "▾" : "▸"));
+														effect((_p$) => {
+															var _v$48 = !!rowIsExpanded(row()), _v$49 = rozieAttr(rowIsExpanded(row()) ? "Collapse row" : "Expand row");
+															_v$48 !== _p$.e && setAttribute(_el$71, "aria-expanded", _p$.e = _v$48);
+															_v$49 !== _p$.t && setAttribute(_el$71, "aria-label", _p$.t = _v$49);
+															return _p$;
+														}, {
+															e: void 0,
+															t: void 0
+														});
+														return _el$71;
+													}
+												}));
+												return _el$54;
+											}
+										}), null);
+										insert(_el$53, () => createComponent(Show, {
+											get when() {
+												return isFillHandleCell(rowIndexOf(row()), colIndexOf(row(), cell()));
+											},
+											get children() {
+												var _el$72 = _tmpl$33();
+												_el$72.$$pointerdown = ($event) => {
+													onFillHandlePointerDown($event);
+												};
+												return _el$72;
+											}
+										}), null);
+										effect((_p$) => {
+											var _v$34 = "rdt-td " + rozieClass({
+												"rdt-select-td": isSelectColumn(cell().column.id),
+												"rdt-expander-td": isExpanderColumn(cell().column.id),
+												"rdt-pinned": columnPinSide(cell().column.id) !== "",
+												"rdt-in-range": inRange(rowIndexOf(row()), colIndexOf(row(), cell())),
+												"rdt-cell-active": isActiveCell(String(rowIndexOf(row())), colIndexOf(row(), cell()))
+											}), _v$35 = rozieAttr(cellRole()), _v$36 = rozieAttr(cell().column.id), _v$37 = rozieAttr(rowIndexOf(row())), _v$38 = rozieAttr(colIndexOf(row(), cell())), _v$39 = rozieAttr(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell()))), _v$40 = parseInlineStyle(bodyCellStyle(row(), cell().column.id)), _v$41 = rozieAttr(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell()))), _v$42 = rozieAttr(colIndexOf(row(), cell()) + 1), _v$43 = (inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? "true" : null) ?? void 0, _v$44 = rozieAttr(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? "true" : null), _v$45 = rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null);
+											_v$34 !== _p$.e && className(_el$53, _p$.e = _v$34);
+											_v$35 !== _p$.t && setAttribute(_el$53, "role", _p$.t = _v$35);
+											_v$36 !== _p$.a && setAttribute(_el$53, "data-col", _p$.a = _v$36);
+											_v$37 !== _p$.o && setAttribute(_el$53, "data-row", _p$.o = _v$37);
+											_v$38 !== _p$.i && setAttribute(_el$53, "data-col-index", _p$.i = _v$38);
+											_v$39 !== _p$.n && setAttribute(_el$53, "tabindex", _p$.n = _v$39);
+											_p$.s = style(_el$53, _v$40, _p$.s);
+											_v$41 !== _p$.h && setAttribute(_el$53, "aria-invalid", _p$.h = _v$41);
+											_v$42 !== _p$.r && setAttribute(_el$53, "aria-colindex", _p$.r = _v$42);
+											_v$43 !== _p$.d && setAttribute(_el$53, "aria-selected", _p$.d = _v$43);
+											_v$44 !== _p$.l && setAttribute(_el$53, "data-in-range", _p$.l = _v$44);
+											_v$45 !== _p$.u && setAttribute(_el$53, "data-agg-cell", _p$.u = _v$45);
+											return _p$;
+										}, {
+											e: void 0,
+											t: void 0,
+											a: void 0,
+											o: void 0,
+											i: void 0,
+											n: void 0,
+											s: void 0,
+											h: void 0,
+											r: void 0,
+											d: void 0,
+											l: void 0,
+											u: void 0
+										});
+										return _el$53;
+									})()
+								}));
+								effect((_p$) => {
+									var _v$26 = "rdt-tr " + rozieClass({ "rdt-group-header": rowIsGrouped(row()) }), _v$27 = rozieAttr(row().depth), _v$28 = rozieAttr(bodyAriaRowIndex(row())), _v$29 = rozieAttr(rowIsGrouped(row()) ? row().id : null), _v$30 = rozieAttr(groupingActive() && !rowIsGrouped(row()) ? row().id : null), _v$31 = (rowIsGrouped(row()) ? !!rowIsExpanded(row()) : null) ?? void 0, _v$32 = (local.selectionMode !== "none" ? !!rowIsSelected(row()) : null) ?? void 0, _v$33 = rozieAttr(groupingActive() ? row().depth + 1 : null);
+									_v$26 !== _p$.e && className(_el$52, _p$.e = _v$26);
+									_v$27 !== _p$.t && setAttribute(_el$52, "data-depth", _p$.t = _v$27);
+									_v$28 !== _p$.a && setAttribute(_el$52, "aria-rowindex", _p$.a = _v$28);
+									_v$29 !== _p$.o && setAttribute(_el$52, "data-group-header", _p$.o = _v$29);
+									_v$30 !== _p$.i && setAttribute(_el$52, "data-group-leaf", _p$.i = _v$30);
+									_v$31 !== _p$.n && setAttribute(_el$52, "aria-expanded", _p$.n = _v$31);
+									_v$32 !== _p$.s && setAttribute(_el$52, "aria-selected", _p$.s = _v$32);
+									_v$33 !== _p$.h && setAttribute(_el$52, "aria-level", _p$.h = _v$33);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0,
+									a: void 0,
+									o: void 0,
+									i: void 0,
+									n: void 0,
+									s: void 0,
+									h: void 0
+								});
+								return _el$52;
+							})(), memo(() => createComponent(Show, {
+								get when() {
+									return rowShowsDetail(row());
+								},
+								get children() {
+									var _el$73 = _tmpl$34(), _el$74 = _el$73.firstChild;
+									insert(_el$74, () => (_props.detailSlot ?? _props.slots?.["detail"])?.({ get row() {
+										return row().original;
+									} }));
+									effect((_p$) => {
+										var _v$50 = rozieAttr(row().id), _v$51 = rozieAttr(visibleColCount());
+										_v$50 !== _p$.e && setAttribute(_el$73, "data-detail-row", _p$.e = _v$50);
+										_v$51 !== _p$.t && setAttribute(_el$74, "colspan", _p$.t = _v$51);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0
+									});
+									return _el$73;
+								}
+							}))]
+						}));
+						effect((_p$) => {
+							var _v$0 = rozieAttr(gridAriaRowCount()), _v$1 = rozieAttr(gridAriaColCount()), _v$10 = "rozie-data-table " + rozieClass({ "rdt-sticky": local.stickyHeader }), _v$11 = rozieAttr(tableRole());
+							_v$0 !== _p$.e && setAttribute(_el$23, "aria-rowcount", _p$.e = _v$0);
+							_v$1 !== _p$.t && setAttribute(_el$23, "aria-colcount", _p$.t = _v$1);
+							_v$10 !== _p$.a && className(_el$23, _p$.a = _v$10);
+							_v$11 !== _p$.o && setAttribute(_el$23, "role", _p$.o = _v$11);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0,
+							a: void 0,
+							o: void 0
+						});
+						return _el$23;
+					})();
+				},
+				get children() {
+					var _el$15 = _tmpl$0(), _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling, _el$22 = _el$21.firstChild;
+					_el$16.$$click = ($event) => {
+						onGridClick($event);
+					};
+					_el$16.$$dblclick = ($event) => {
+						onGridDblClick($event);
+					};
+					_el$16.$$mousedown = ($event) => {
+						onGridMouseDown($event);
+					};
+					_el$16.$$focusout = ($event) => {
+						onGridFocusOut($event);
+					};
+					_el$16.$$focusin = ($event) => {
+						syncActiveFromEvent($event);
+					};
+					_el$16.$$keydown = ($event) => {
+						onGridKeyDown($event);
+					};
+					insert(_el$17, createComponent(Key, {
+						get each() {
+							return headerGroups();
+						},
+						by: (hg) => hg.id,
+						children: (hg, hgLevel) => (() => {
+							var _el$75 = _tmpl$10();
+							insert(_el$75, () => createComponent(Show, {
+								get when() {
+									return colsWindowed();
+								},
+								get children() {
+									var _el$76 = _tmpl$35();
+									effect((_$p) => style(_el$76, parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0"), _$p));
+									return _el$76;
+								}
+							}), null);
+							insert(_el$75, createComponent(Key, {
+								get each() {
+									return windowedHeadersFor(hg(), hgLevel());
+								},
+								by: (wh) => wh.header.id,
+								children: (wh) => (() => {
+									var _el$77 = _tmpl$11();
+									insert(_el$77, () => createComponent(Show, {
+										get when() {
+											return isSelectColumn(wh().header.column.id);
+										},
+										get fallback() {
+											return createComponent(Show, {
+												get when() {
+													return isExpanderColumn(wh().header.column.id);
+												},
+												get fallback() {
+													return (() => {
+														var _el$80 = _tmpl$14(), _el$87 = _el$80.firstChild;
+														_el$80.style.setProperty("display", "contents");
+														insert(_el$80, () => createComponent(Show, {
+															get when() {
+																return memo(() => !!wh().header.column.getCanSort)() && wh().header.column.getCanSort();
+															},
+															get fallback() {
+																return (() => {
+																	var _el$91 = _tmpl$16(), _el$92 = _el$91.firstChild;
+																	_el$91.style.setProperty("display", "contents");
+																	insert(_el$92, () => _props.slots?.[`colHeader-${wh().header.column.id}`]?.({
+																		get columnId() {
+																			return wh().header.column.id;
+																		},
+																		get column() {
+																			return wh().header.column;
+																		},
+																		get label() {
+																			return headerLabel(wh().header.column.id);
+																		}
+																	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
+																		get columnId() {
+																			return wh().header.column.id;
+																		},
+																		get column() {
+																			return wh().header.column;
+																		},
+																		get label() {
+																			return headerLabel(wh().header.column.id);
+																		}
+																	}) ?? rozieDisplay(headerLabel(wh().header.column.id)));
+																	return _el$91;
+																})();
+															},
+															get children() {
+																var _el$88 = _tmpl$15(), _el$89 = _el$88.firstChild, _el$90 = _el$89.nextSibling;
+																_el$88.$$click = ($event) => {
+																	onHeaderSort(wh().header.column.id, $event);
+																};
+																insert(_el$89, () => _props.slots?.[`colHeader-${wh().header.column.id}`]?.({
+																	get columnId() {
+																		return wh().header.column.id;
+																	},
+																	get column() {
+																		return wh().header.column;
+																	},
+																	get label() {
+																		return headerLabel(wh().header.column.id);
+																	}
+																}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
+																	get columnId() {
+																		return wh().header.column.id;
+																	},
+																	get column() {
+																		return wh().header.column;
+																	},
+																	get label() {
+																		return headerLabel(wh().header.column.id);
+																	}
+																}) ?? rozieDisplay(headerLabel(wh().header.column.id)));
+																insert(_el$90, () => rozieDisplay(sortIndicator(wh().header.column.id)));
+																return _el$88;
+															}
+														}), _el$87);
+														insert(_el$80, createComponent(Popover, {
+															trigger: "click",
+															placement: "bottom-end",
+															strategy: "fixed",
+															offset: 4,
+															"data-rozie-s-d5dcab4c": "",
+															anchorSlot: () => (() => {
+																var _el$93 = _tmpl$17();
+																effect(() => setAttribute(_el$93, "aria-label", rozieAttr("Column options for " + headerLabel(wh().header.column.id))));
+																return _el$93;
+															})(),
+															get children() {
+																var _el$81 = _tmpl$13(), _el$82 = _el$81.firstChild, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$86 = _el$84.nextSibling.nextSibling;
+																_el$82.$$click = ($event) => {
+																	onPinColumn(wh().header.column.id, "left", $event);
+																};
+																_el$83.$$click = ($event) => {
+																	onPinColumn(wh().header.column.id, "right", $event);
+																};
+																_el$84.$$click = ($event) => {
+																	onPinColumn(wh().header.column.id, false, $event);
+																};
+																_el$86.$$click = ($event) => {
+																	onHideColumn(wh().header.column.id, $event);
+																};
+																effect((_p$) => {
+																	var _v$61 = columnPinSide(wh().header.column.id) === "left", _v$62 = columnPinSide(wh().header.column.id) === "right", _v$63 = !columnPinSide(wh().header.column.id);
+																	_v$61 !== _p$.e && setAttribute(_el$82, "aria-pressed", _p$.e = _v$61);
+																	_v$62 !== _p$.t && setAttribute(_el$83, "aria-pressed", _p$.t = _v$62);
+																	_v$63 !== _p$.a && setAttribute(_el$84, "aria-pressed", _p$.a = _v$63);
+																	return _p$;
+																}, {
+																	e: void 0,
+																	t: void 0,
+																	a: void 0
+																});
+																return _el$81;
+															}
+														}), _el$87);
+														_el$87.$$touchstart = ($event) => {
+															onResizeStart(wh().header.column.id, $event);
+														};
+														_el$87.$$pointerdown = ($event) => {
+															onResizeStart(wh().header.column.id, $event);
+														};
+														effect(() => setAttribute(_el$87, "aria-label", rozieAttr("Resize " + headerLabel(wh().header.column.id))));
+														return _el$80;
+													})();
+												},
+												get children() {
+													var _el$79 = _tmpl$12();
+													_el$79.style.setProperty("display", "contents");
+													return _el$79;
+												}
+											});
+										},
+										get children() {
+											var _el$78 = _tmpl$12();
+											_el$78.style.setProperty("display", "contents");
+											insert(_el$78, () => (_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
+												get checked() {
+													return isAllRowsSelected();
+												},
+												get indeterminate() {
+													return isSomeRowsSelected();
+												},
+												get toggle() {
+													return onToggleAllRows;
+												}
+											}) ?? createComponent(Show, {
+												get when() {
+													return local.selectionMode === "multiple";
+												},
+												get children() {
+													var _el$94 = _tmpl$18();
+													_el$94.addEventListener("change", ($event) => {
+														onToggleAllRows($event);
+													});
+													effect(() => _el$94.checked = isAllRowsSelected());
+													return _el$94;
+												}
+											}));
+											return _el$78;
+										}
+									}));
+									effect((_p$) => {
+										var _v$52 = "rdt-th " + rozieClass({
+											"rdt-select-th": isSelectColumn(wh().header.column.id),
+											"rdt-expander-th": isExpanderColumn(wh().header.column.id),
+											"rdt-pinned": columnPinSide(wh().header.column.id) !== "",
+											"rdt-th-resizing": columnIsResizing(wh().header.column.id),
+											"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), wh().header), hgLevel())
+										}), _v$53 = rozieAttr(wh().header.column.id), _v$54 = rozieAttr(hgLevel()), _v$55 = rozieAttr(wh().span > 1 ? wh().span : null), _v$56 = rozieAttr(headerColIndexOf(hg(), wh().header)), _v$57 = rozieAttr(headerLeafStart(hg(), wh().header) + 1), _v$58 = rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel())), _v$59 = rozieAttr(ariaSortFor(wh().header.column.id)), _v$60 = parseInlineStyle(thStyle(wh().header, wh().width));
+										_v$52 !== _p$.e && className(_el$77, _p$.e = _v$52);
+										_v$53 !== _p$.t && setAttribute(_el$77, "data-col", _p$.t = _v$53);
+										_v$54 !== _p$.a && setAttribute(_el$77, "data-header-level", _p$.a = _v$54);
+										_v$55 !== _p$.o && setAttribute(_el$77, "colspan", _p$.o = _v$55);
+										_v$56 !== _p$.i && setAttribute(_el$77, "data-col-index", _p$.i = _v$56);
+										_v$57 !== _p$.n && setAttribute(_el$77, "aria-colindex", _p$.n = _v$57);
+										_v$58 !== _p$.s && setAttribute(_el$77, "tabindex", _p$.s = _v$58);
+										_v$59 !== _p$.h && setAttribute(_el$77, "aria-sort", _p$.h = _v$59);
+										_p$.r = style(_el$77, _v$60, _p$.r);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0,
+										o: void 0,
+										i: void 0,
+										n: void 0,
+										s: void 0,
+										h: void 0,
+										r: void 0
+									});
+									return _el$77;
+								})()
+							}), null);
+							insert(_el$75, () => createComponent(Show, {
+								get when() {
+									return colsWindowed();
+								},
+								get children() {
+									var _el$95 = _tmpl$35();
+									effect((_$p) => style(_el$95, parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0"), _$p));
+									return _el$95;
+								}
+							}), null);
+							effect(() => setAttribute(_el$75, "aria-rowindex", rozieAttr(hgLevel() + 1)));
+							return _el$75;
+						})()
+					}), null);
+					insert(_el$17, () => createComponent(Show, {
+						get when() {
+							return hasAnyFilterableColumn();
+						},
+						get children() {
+							var _el$96 = _tmpl$19();
+							insert(_el$96, () => createComponent(Show, {
+								get when() {
+									return colsWindowed();
+								},
+								get children() {
+									var _el$97 = _tmpl$35();
+									effect((_$p) => style(_el$97, parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0"), _$p));
+									return _el$97;
+								}
+							}), null);
+							insert(_el$96, createComponent(Key, {
+								get each() {
+									return windowedHeadersFor(headerGroups()[headerGroups().length - 1], headerGroups().length - 1);
+								},
+								by: (wh) => wh.header.id,
+								children: (wh) => (() => {
+									var _el$98 = _tmpl$20();
+									insert(_el$98, () => createComponent(Show, {
+										get when() {
+											return isSelectColumn(wh().header.column.id);
+										},
+										get fallback() {
+											return createComponent(Show, {
+												get when() {
+													return isExpanderColumn(wh().header.column.id);
+												},
+												get fallback() {
+													return (() => {
+														var _el$101 = _tmpl$12();
+														_el$101.style.setProperty("display", "contents");
+														insert(_el$101, () => createComponent(Show, {
+															get when() {
+																return columnIsFilterable(wh().header.column.id);
+															},
+															get children() {
+																var _el$102 = _tmpl$12();
+																_el$102.style.setProperty("display", "contents");
+																insert(_el$102, () => _props.slots?.[`filter-${wh().header.column.id}`]?.({
+																	get columnId() {
+																		return wh().header.column.id;
+																	},
+																	get value() {
+																		return columnFilterValue(wh().header.column.id);
+																	},
+																	get uniqueValues() {
+																		return getFacetedUniqueValues$1(wh().header.column.id);
+																	},
+																	get minMax() {
+																		return getFacetedMinMaxValues$1(wh().header.column.id);
+																	},
+																	get columnLabel() {
+																		return headerLabel(wh().header.column.id);
+																	},
+																	get setFilter() {
+																		return setColumnFilter;
+																	}
+																}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
+																	get columnId() {
+																		return wh().header.column.id;
+																	},
+																	get value() {
+																		return columnFilterValue(wh().header.column.id);
+																	},
+																	get uniqueValues() {
+																		return getFacetedUniqueValues$1(wh().header.column.id);
+																	},
+																	get minMax() {
+																		return getFacetedMinMaxValues$1(wh().header.column.id);
+																	},
+																	get columnLabel() {
+																		return headerLabel(wh().header.column.id);
+																	},
+																	get setFilter() {
+																		return setColumnFilter;
+																	}
+																}) ?? (() => {
+																	var _el$103 = _tmpl$21();
+																	_el$103.$$click = ($event) => {
+																		stopEvent($event);
+																	};
+																	_el$103.$$input = ($event) => {
+																		onColumnFilterInput(wh().header.column.id, $event);
+																	};
+																	effect(() => setAttribute(_el$103, "aria-label", rozieAttr("Filter " + headerLabel(wh().header.column.id))));
+																	effect(() => _el$103.value = columnFilterValue(wh().header.column.id));
+																	return _el$103;
+																})());
+																return _el$102;
+															}
+														}));
+														return _el$101;
+													})();
+												},
+												get children() {
+													var _el$100 = _tmpl$12();
+													_el$100.style.setProperty("display", "contents");
+													return _el$100;
+												}
+											});
+										},
+										get children() {
+											var _el$99 = _tmpl$12();
+											_el$99.style.setProperty("display", "contents");
+											return _el$99;
+										}
+									}));
+									effect((_p$) => {
+										var _v$64 = "rdt-filter-cell " + rozieClass({ "rdt-pinned": columnPinSide(wh().header.column.id) !== "" }), _v$65 = rozieAttr(wh().header.column.id), _v$66 = parseInlineStyle(pinStyle(wh().header.column.id));
+										_v$64 !== _p$.e && className(_el$98, _p$.e = _v$64);
+										_v$65 !== _p$.t && setAttribute(_el$98, "data-col", _p$.t = _v$65);
+										_p$.a = style(_el$98, _v$66, _p$.a);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0
+									});
+									return _el$98;
+								})()
+							}), null);
+							insert(_el$96, () => createComponent(Show, {
+								get when() {
+									return colsWindowed();
+								},
+								get children() {
+									var _el$104 = _tmpl$35();
+									effect((_$p) => style(_el$104, parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0"), _$p));
+									return _el$104;
+								}
+							}), null);
+							return _el$96;
+						}
+					}), null);
+					insert(_el$18, createComponent(Key, {
+						get each() {
+							return windowedRows();
+						},
+						by: (wr) => wr.row.id,
+						children: (wr) => [(() => {
+							var _el$105 = _tmpl$22();
+							insert(_el$105, () => createComponent(Show, {
+								get when() {
+									return colsWindowed();
+								},
+								get children() {
+									var _el$106 = _tmpl$36();
+									effect((_$p) => style(_el$106, parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0"), _$p));
+									return _el$106;
+								}
+							}), null);
+							insert(_el$105, createComponent(Key, {
+								get each() {
+									return windowedCells(wr().row);
+								},
+								by: (cell) => cell.id,
+								children: (cell) => (() => {
+									var _el$107 = _tmpl$23();
+									insert(_el$107, () => createComponent(Show, {
+										get when() {
+											return memo(() => !!rowIsLazyPlaceholder(wr().row))() && isSelectColumn(cell().column.id);
+										},
+										get fallback() {
+											return createComponent(Show, {
+												get when() {
+													return memo(() => !!rowIsLazyPlaceholder(wr().row))() && isExpanderColumn(cell().column.id);
+												},
+												get fallback() {
+													return createComponent(Show, {
+														get when() {
+															return rowIsLazyPlaceholder(wr().row);
+														},
+														get fallback() {
+															return createComponent(Show, {
+																get when() {
+																	return isExpanderColumn(cell().column.id);
+																},
+																get fallback() {
+																	return createComponent(Show, {
+																		get when() {
+																			return isSelectColumn(cell().column.id);
+																		},
+																		get fallback() {
+																			return createComponent(Show, {
+																				get when() {
+																					return cellIsGrouped(cell());
+																				},
+																				get fallback() {
+																					return createComponent(Show, {
+																						get when() {
+																							return isEditing(wr().vi.index, colIndexOf(wr().row, cell()));
+																						},
+																						get fallback() {
+																							return createComponent(Show, {
+																								get when() {
+																									return cellIsPlaceholder(cell());
+																								},
+																								get fallback() {
+																									return (() => {
+																										var _el$120 = _tmpl$25();
+																										insert(_el$120, () => _props.slots?.[`cell-${cell().column.id}`]?.({
+																											get columnId() {
+																												return cell().column.id;
+																											},
+																											get column() {
+																												return cell().column;
+																											},
+																											get row() {
+																												return cellSlotRow(wr().row);
+																											},
+																											get value() {
+																												return cell().getValue();
+																											}
+																										}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
+																											get columnId() {
+																												return cell().column.id;
+																											},
+																											get column() {
+																												return cell().column;
+																											},
+																											get row() {
+																												return cellSlotRow(wr().row);
+																											},
+																											get value() {
+																												return cell().getValue();
+																											}
+																										}) ?? rozieDisplay(cell().getValue()));
+																										return _el$120;
+																									})();
+																								},
+																								get children() {
+																									var _el$119 = _tmpl$12();
+																									_el$119.style.setProperty("display", "contents");
+																									return _el$119;
+																								}
+																							});
+																						},
+																						get children() {
+																							var _el$118 = _tmpl$12();
+																							_el$118.style.setProperty("display", "contents");
+																							insert(_el$118, () => createComponent(Show, {
+																								get when() {
+																									return editorTypeOf(cell().column.id) === "number";
+																								},
+																								get fallback() {
+																									return createComponent(Show, {
+																										get when() {
+																											return editorTypeOf(cell().column.id) === "select";
+																										},
+																										get fallback() {
+																											return createComponent(Show, {
+																												get when() {
+																													return editorTypeOf(cell().column.id) === "checkbox";
+																												},
+																												get fallback() {
+																													return createComponent(Show, {
+																														get when() {
+																															return editorTypeOf(cell().column.id) === "custom";
+																														},
+																														get fallback() {
+																															return (() => {
+																																var _el$125 = _tmpl$29();
+																																_el$125.addEventListener("blur", ($event) => {
+																																	onEditorBlur($event);
+																																});
+																																_el$125.$$keydown = ($event) => {
+																																	onEditorKeyDown($event);
+																																};
+																																_el$125.$$input = ($event) => {
+																																	onCellEditorInput(cell().column.id, $event);
+																																};
+																																effect(() => setAttribute(_el$125, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																																effect(() => _el$125.value = editorValueFor(cell().column.id));
+																																return _el$125;
+																															})();
+																														},
+																														get children() {
+																															var _el$124 = _tmpl$12();
+																															_el$124.$$keydown = ($event) => {
+																																onEditorDropinKeyDown($event);
+																															};
+																															_el$124.style.setProperty("display", "contents");
+																															insert(_el$124, () => _props.slots?.[`editor-${cell().column.id}`]?.({
+																																get columnId() {
+																																	return cell().column.id;
+																																},
+																																get column() {
+																																	return cell().column;
+																																},
+																																get row() {
+																																	return cellSlotRow(wr().row);
+																																},
+																																get value() {
+																																	return editorValueFor(cell().column.id);
+																																},
+																																get commit() {
+																																	return editorCommitFor(cell().column.id);
+																																},
+																																get cancel() {
+																																	return editorCancelFor();
+																																},
+																																get columnLabel() {
+																																	return headerLabel(cell().column.id);
+																																},
+																																get autofocus() {
+																																	return editorAutofocusFor(cell().column.id, wr().vi.index);
+																																}
+																															}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
+																																get columnId() {
+																																	return cell().column.id;
+																																},
+																																get column() {
+																																	return cell().column;
+																																},
+																																get row() {
+																																	return cellSlotRow(wr().row);
+																																},
+																																get value() {
+																																	return editorValueFor(cell().column.id);
+																																},
+																																get commit() {
+																																	return editorCommitFor(cell().column.id);
+																																},
+																																get cancel() {
+																																	return editorCancelFor();
+																																},
+																																get columnLabel() {
+																																	return headerLabel(cell().column.id);
+																																},
+																																get autofocus() {
+																																	return editorAutofocusFor(cell().column.id, wr().vi.index);
+																																}
+																															}) ?? (() => {
+																																var _el$126 = _tmpl$29();
+																																_el$126.addEventListener("blur", ($event) => {
+																																	onEditorBlur($event);
+																																});
+																																_el$126.$$keydown = ($event) => {
+																																	onEditorKeyDown($event);
+																																};
+																																_el$126.$$input = ($event) => {
+																																	onCellEditorInput(cell().column.id, $event);
+																																};
+																																effect(() => setAttribute(_el$126, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																																effect(() => _el$126.value = editorValueFor(cell().column.id));
+																																return _el$126;
+																															})());
+																															return _el$124;
+																														}
+																													});
+																												},
+																												get children() {
+																													var _el$123 = _tmpl$28();
+																													_el$123.addEventListener("blur", ($event) => {
+																														onEditorBlur($event);
+																													});
+																													_el$123.$$keydown = ($event) => {
+																														onEditorKeyDown($event);
+																													};
+																													_el$123.addEventListener("change", ($event) => {
+																														onCellEditorCheckbox(cell().column.id, $event);
+																													});
+																													effect(() => setAttribute(_el$123, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																													effect(() => _el$123.checked = editorCheckedFor(cell().column.id));
+																													return _el$123;
+																												}
+																											});
+																										},
+																										get children() {
+																											var _el$122 = _tmpl$27();
+																											_el$122.addEventListener("blur", ($event) => {
+																												onEditorBlur($event);
+																											});
+																											_el$122.$$keydown = ($event) => {
+																												onEditorKeyDown($event);
+																											};
+																											_el$122.addEventListener("change", ($event) => {
+																												onCellEditorInput(cell().column.id, $event);
+																											});
+																											insert(_el$122, createComponent(Key, {
+																												get each() {
+																													return editorOptionsOf(cell().column.id);
+																												},
+																												by: (opt) => opt.value,
+																												children: (opt) => (() => {
+																													var _el$127 = _tmpl$30();
+																													insert(_el$127, () => rozieDisplay(opt().label));
+																													effect(() => _el$127.value = rozieAttr(opt().value));
+																													return _el$127;
+																												})()
+																											}));
+																											effect(() => setAttribute(_el$122, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																											effect(() => _el$122.value = editorValueFor(cell().column.id));
+																											return _el$122;
+																										}
+																									});
+																								},
+																								get children() {
+																									var _el$121 = _tmpl$26();
+																									_el$121.addEventListener("blur", ($event) => {
+																										onEditorBlur($event);
+																									});
+																									_el$121.$$keydown = ($event) => {
+																										onEditorKeyDown($event);
+																									};
+																									_el$121.$$input = ($event) => {
+																										onCellEditorInput(cell().column.id, $event);
+																									};
+																									effect(() => setAttribute(_el$121, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
+																									effect(() => _el$121.value = editorValueFor(cell().column.id));
+																									return _el$121;
+																								}
+																							}));
+																							return _el$118;
+																						}
+																					});
+																				},
+																				get children() {
+																					var _el$114 = _tmpl$24(), _el$115 = _el$114.firstChild, _el$116 = _el$115.nextSibling, _el$117 = _el$116.nextSibling;
+																					_el$114.style.setProperty("display", "contents");
+																					_el$115.$$click = ($event) => {
+																						onToggleExpand(wr().row, $event);
+																					};
+																					insert(_el$115, () => rozieDisplay(rowIsExpanded(wr().row) ? "▾" : "▸"));
+																					insert(_el$116, () => _props.slots?.[`cell-${cell().column.id}`]?.({
+																						get columnId() {
+																							return cell().column.id;
+																						},
+																						get column() {
+																							return cell().column;
+																						},
+																						get row() {
+																							return cellSlotRow(wr().row);
+																						},
+																						get value() {
+																							return cell().getValue();
+																						}
+																					}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
+																						get columnId() {
+																							return cell().column.id;
+																						},
+																						get column() {
+																							return cell().column;
+																						},
+																						get row() {
+																							return cellSlotRow(wr().row);
+																						},
+																						get value() {
+																							return cell().getValue();
+																						}
+																					}) ?? rozieDisplay(cell().getValue()));
+																					insert(_el$117, () => rozieDisplay("(" + groupSubRowCount(wr().row) + ")"));
+																					effect((_p$) => {
+																						var _v$91 = !!rowIsExpanded(wr().row), _v$92 = rozieAttr(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group");
+																						_v$91 !== _p$.e && setAttribute(_el$115, "aria-expanded", _p$.e = _v$91);
+																						_v$92 !== _p$.t && setAttribute(_el$115, "aria-label", _p$.t = _v$92);
+																						return _p$;
+																					}, {
+																						e: void 0,
+																						t: void 0
+																					});
+																					return _el$114;
+																				}
+																			});
+																		},
+																		get children() {
+																			var _el$113 = _tmpl$12();
+																			_el$113.style.setProperty("display", "contents");
+																			insert(_el$113, () => (_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
+																				get row() {
+																					return cellSlotRow(wr().row);
+																				},
+																				get checked() {
+																					return rowIsSelected(wr().row);
+																				},
+																				toggle: (e) => onToggleRow(wr().row, e)
+																			}) ?? (() => {
+																				var _el$128 = _tmpl$31();
+																				_el$128.addEventListener("change", ($event) => {
+																					onToggleRow(wr().row, $event);
+																				});
+																				effect(() => _el$128.checked = rowIsSelected(wr().row));
+																				return _el$128;
+																			})());
+																			return _el$113;
+																		}
+																	});
+																},
+																get children() {
+																	var _el$112 = _tmpl$12();
+																	_el$112.style.setProperty("display", "contents");
+																	insert(_el$112, () => createComponent(Show, {
+																		get when() {
+																			return rowCanExpand(wr().row);
+																		},
+																		get children() {
+																			var _el$129 = _tmpl$32();
+																			_el$129.$$click = ($event) => {
+																				onToggleExpand(wr().row, $event);
+																			};
+																			insert(_el$129, () => rozieDisplay(rowIsExpanded(wr().row) ? "▾" : "▸"));
+																			effect((_p$) => {
+																				var _v$93 = !!rowIsExpanded(wr().row), _v$94 = rozieAttr(rowIsExpanded(wr().row) ? "Collapse row" : "Expand row");
+																				_v$93 !== _p$.e && setAttribute(_el$129, "aria-expanded", _p$.e = _v$93);
+																				_v$94 !== _p$.t && setAttribute(_el$129, "aria-label", _p$.t = _v$94);
+																				return _p$;
+																			}, {
+																				e: void 0,
+																				t: void 0
+																			});
+																			return _el$129;
+																		}
+																	}));
+																	return _el$112;
+																}
+															});
+														},
+														get children() {
+															var _el$111 = _tmpl$12();
+															_el$111.style.setProperty("display", "contents");
+															insert(_el$111, () => (_props.placeholderSlot ?? _props.slots?.["placeholder"])?.({
+																get index() {
+																	return wr().vi.index;
+																},
+																get columnId() {
+																	return cell().column.id;
+																}
+															}) ?? _tmpl$38());
+															return _el$111;
+														}
+													});
+												},
+												get children() {
+													var _el$110 = _tmpl$12();
+													_el$110.style.setProperty("display", "contents");
+													return _el$110;
+												}
+											});
+										},
+										get children() {
+											var _el$108 = _tmpl$37(), _el$109 = _el$108.firstChild;
+											_el$108.style.setProperty("display", "contents");
+											_el$109.disabled = true;
+											_el$109.style.setProperty("visibility", "hidden");
+											return _el$108;
+										}
+									}), null);
+									insert(_el$107, () => createComponent(Show, {
+										get when() {
+											return isFillHandleCell(wr().vi.index, colIndexOf(wr().row, cell()));
+										},
+										get children() {
+											var _el$131 = _tmpl$33();
+											_el$131.$$pointerdown = ($event) => {
+												onFillHandlePointerDown($event);
+											};
+											return _el$131;
+										}
+									}), null);
+									effect((_p$) => {
+										var _v$79 = "rdt-td " + rozieClass({
+											"rdt-select-td": isSelectColumn(cell().column.id),
+											"rdt-expander-td": isExpanderColumn(cell().column.id),
+											"rdt-pinned": columnPinSide(cell().column.id) !== "",
+											"rdt-in-range": inRange(wr().vi.index, colIndexOf(wr().row, cell())),
+											"rdt-cell-active": isActiveCell(String(wr().vi.index), colIndexOf(wr().row, cell()))
+										}), _v$80 = rozieAttr(cellRole()), _v$81 = rozieAttr(cell().column.id), _v$82 = rozieAttr(wr().vi.index), _v$83 = rozieAttr(colIndexOf(wr().row, cell())), _v$84 = rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell()))), _v$85 = parseInlineStyle(bodyCellStyle(wr().row, cell().column.id)), _v$86 = rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell()))), _v$87 = rozieAttr(colIndexOf(wr().row, cell()) + 1), _v$88 = (inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? "true" : null) ?? void 0, _v$89 = rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? "true" : null), _v$90 = rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null);
+										_v$79 !== _p$.e && className(_el$107, _p$.e = _v$79);
+										_v$80 !== _p$.t && setAttribute(_el$107, "role", _p$.t = _v$80);
+										_v$81 !== _p$.a && setAttribute(_el$107, "data-col", _p$.a = _v$81);
+										_v$82 !== _p$.o && setAttribute(_el$107, "data-row", _p$.o = _v$82);
+										_v$83 !== _p$.i && setAttribute(_el$107, "data-col-index", _p$.i = _v$83);
+										_v$84 !== _p$.n && setAttribute(_el$107, "tabindex", _p$.n = _v$84);
+										_p$.s = style(_el$107, _v$85, _p$.s);
+										_v$86 !== _p$.h && setAttribute(_el$107, "aria-invalid", _p$.h = _v$86);
+										_v$87 !== _p$.r && setAttribute(_el$107, "aria-colindex", _p$.r = _v$87);
+										_v$88 !== _p$.d && setAttribute(_el$107, "aria-selected", _p$.d = _v$88);
+										_v$89 !== _p$.l && setAttribute(_el$107, "data-in-range", _p$.l = _v$89);
+										_v$90 !== _p$.u && setAttribute(_el$107, "data-agg-cell", _p$.u = _v$90);
+										return _p$;
+									}, {
+										e: void 0,
+										t: void 0,
+										a: void 0,
+										o: void 0,
+										i: void 0,
+										n: void 0,
+										s: void 0,
+										h: void 0,
+										r: void 0,
+										d: void 0,
+										l: void 0,
+										u: void 0
+									});
+									return _el$107;
+								})()
+							}), null);
+							insert(_el$105, () => createComponent(Show, {
+								get when() {
+									return colsWindowed();
+								},
+								get children() {
+									var _el$132 = _tmpl$36();
+									effect((_$p) => style(_el$132, parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0"), _$p));
+									return _el$132;
+								}
+							}), null);
+							effect((_p$) => {
+								var _v$67 = "rdt-tr " + rozieClass({
+									"rdt-group-header": rowIsGrouped(wr().row),
+									"rdt-row-pinned": wr().pinned,
+									"rdt-placeholder-row": rowIsLazyPlaceholder(wr().row)
+								}), _v$68 = rozieAttr(wr().vi.index), _v$69 = rozieAttr(headerRowCount() + wr().vi.index + 1), _v$70 = rozieAttr(wr().vi.index), _v$71 = rozieAttr(wr().pinned ? "true" : null), _v$72 = rozieAttr(wr().row.depth), _v$73 = rozieAttr(rowIsGrouped(wr().row) ? wr().row.id : null), _v$74 = rozieAttr(groupingActive() && !rowIsGrouped(wr().row) ? wr().row.id : null), _v$75 = (rowIsGrouped(wr().row) ? !!rowIsExpanded(wr().row) : null) ?? void 0, _v$76 = (local.selectionMode !== "none" ? !!rowIsSelected(wr().row) : null) ?? void 0, _v$77 = rozieAttr(groupingActive() ? wr().row.depth + 1 : null), _v$78 = (rowIsLazyPlaceholder(wr().row) ? "true" : null) ?? void 0;
+								_v$67 !== _p$.e && className(_el$105, _p$.e = _v$67);
+								_v$68 !== _p$.t && setAttribute(_el$105, "data-row", _p$.t = _v$68);
+								_v$69 !== _p$.a && setAttribute(_el$105, "aria-rowindex", _p$.a = _v$69);
+								_v$70 !== _p$.o && setAttribute(_el$105, "data-index", _p$.o = _v$70);
+								_v$71 !== _p$.i && setAttribute(_el$105, "data-pinned", _p$.i = _v$71);
+								_v$72 !== _p$.n && setAttribute(_el$105, "data-depth", _p$.n = _v$72);
+								_v$73 !== _p$.s && setAttribute(_el$105, "data-group-header", _p$.s = _v$73);
+								_v$74 !== _p$.h && setAttribute(_el$105, "data-group-leaf", _p$.h = _v$74);
+								_v$75 !== _p$.r && setAttribute(_el$105, "aria-expanded", _p$.r = _v$75);
+								_v$76 !== _p$.d && setAttribute(_el$105, "aria-selected", _p$.d = _v$76);
+								_v$77 !== _p$.l && setAttribute(_el$105, "aria-level", _p$.l = _v$77);
+								_v$78 !== _p$.u && setAttribute(_el$105, "aria-busy", _p$.u = _v$78);
+								return _p$;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0,
+								o: void 0,
+								i: void 0,
+								n: void 0,
+								s: void 0,
+								h: void 0,
+								r: void 0,
+								d: void 0,
+								l: void 0,
+								u: void 0
+							});
+							return _el$105;
+						})(), memo(() => createComponent(Show, {
+							get when() {
+								return rowShowsDetail(wr().row);
+							},
+							get children() {
+								var _el$133 = _tmpl$34(), _el$134 = _el$133.firstChild;
+								insert(_el$134, () => (_props.detailSlot ?? _props.slots?.["detail"])?.({ get row() {
+									return wr().row.original;
+								} }));
+								effect((_p$) => {
+									var _v$95 = rozieAttr(wr().row.id), _v$96 = rozieAttr(windowedColSpan());
+									_v$95 !== _p$.e && setAttribute(_el$133, "data-detail-row", _p$.e = _v$95);
+									_v$96 !== _p$.t && setAttribute(_el$134, "colspan", _p$.t = _v$96);
+									return _p$;
+								}, {
+									e: void 0,
+									t: void 0
+								});
+								return _el$133;
+							}
+						}))]
+					}), _el$21);
+					effect((_p$) => {
+						var _v$ = parseInlineStyle(rowsWindowed() && local.maxHeight ? "max-height:" + local.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + local.maxHeight : "overflow:auto"), _v$2 = rozieAttr(gridAriaRowCount()), _v$3 = rozieAttr(gridAriaColCount()), _v$4 = "rozie-data-table " + rozieClass({
+							"rdt-sticky": local.stickyHeader,
+							"rdt-col-windowed": colsWindowed()
+						}), _v$5 = rozieAttr(tableRole()), _v$6 = rozieAttr(windowedColSpan()), _v$7 = parseInlineStyle("height:" + padTop() + "px;padding:0;border:0"), _v$8 = rozieAttr(windowedColSpan()), _v$9 = parseInlineStyle("height:" + padBottom() + "px;padding:0;border:0");
+						_p$.e = style(_el$15, _v$, _p$.e);
+						_v$2 !== _p$.t && setAttribute(_el$16, "aria-rowcount", _p$.t = _v$2);
+						_v$3 !== _p$.a && setAttribute(_el$16, "aria-colcount", _p$.a = _v$3);
+						_v$4 !== _p$.o && className(_el$16, _p$.o = _v$4);
+						_v$5 !== _p$.i && setAttribute(_el$16, "role", _p$.i = _v$5);
+						_v$6 !== _p$.n && setAttribute(_el$20, "colspan", _p$.n = _v$6);
+						_p$.s = style(_el$20, _v$7, _p$.s);
+						_v$8 !== _p$.h && setAttribute(_el$22, "colspan", _p$.h = _v$8);
+						_p$.r = style(_el$22, _v$9, _p$.r);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0,
+						n: void 0,
+						s: void 0,
+						h: void 0,
+						r: void 0
+					});
+					return _el$15;
+				}
+			}), null);
+			insert(_el$, () => createComponent(Show, {
+				get when() {
+					return !rowsWindowed();
+				},
+				get children() {
+					var _el$135 = _tmpl$39(), _el$136 = _el$135.firstChild, _el$137 = _el$136.nextSibling, _el$138 = _el$137.nextSibling, _el$139 = _el$138.nextSibling;
+					_el$136.$$click = ($event) => {
+						onPrevPage();
+					};
+					insert(_el$137, () => rozieDisplay("Page " + (pageIndex() + 1) + " of " + displayPageCount()));
+					_el$138.$$click = ($event) => {
+						onNextPage();
+					};
+					_el$139.addEventListener("change", ($event) => {
+						onPageSizeChange($event);
+					});
+					effect((_p$) => {
+						var _v$97 = !canPrevPage(), _v$98 = !canNextPage();
+						_v$97 !== _p$.e && (_el$136.disabled = _p$.e = _v$97);
+						_v$98 !== _p$.t && (_el$138.disabled = _p$.t = _v$98);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					effect(() => _el$139.value = pageSize());
+					return _el$135;
+				}
+			}), null);
+			effect(() => _el$4.value = globalFilterValue());
+			return _el$;
+		}
+	});
 }
+delegateEvents([
+	"input",
+	"keydown",
+	"focusin",
+	"focusout",
+	"mousedown",
+	"dblclick",
+	"click",
+	"pointerdown",
+	"touchstart"
+]);
 //#endregion
 //#region src/Column.tsx
+var _tmpl$$10 = /* @__PURE__ */ template(`<div class=rozie-data-table-column data-rozie-s-289f2d72="">`);
 function Column(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		id: "",
@@ -4676,13 +6652,15 @@ function Column(_props) {
 			validate: local.validate
 		};
 	}
-	return <>
-    <div class={"rozie-data-table-column"} style={{ display: "none" }} data-rozie-s-289f2d72="" />
-    </>;
+	return (() => {
+		var _el$ = _tmpl$$10();
+		_el$.style.setProperty("display", "none");
+		return _el$;
+	})();
 }
 //#endregion
 //#region src/EditorText.tsx
+var _tmpl$$9 = /* @__PURE__ */ template(`<input type=text data-editing-cell=""class=rdt-cell-editor data-rozie-s-0d17f43a="">`);
 function EditorText(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		columnId: "",
@@ -4691,7 +6669,8 @@ function EditorText(_props) {
 		value: null,
 		commit: null,
 		cancel: null,
-		autofocus: false
+		autofocus: false,
+		columnLabel: ""
 	}, _props), [
 		"columnId",
 		"column",
@@ -4699,9 +6678,11 @@ function EditorText(_props) {
 		"value",
 		"commit",
 		"cancel",
-		"autofocus"
+		"autofocus",
+		"columnLabel"
 	]);
 	const [draft, setDraft] = createSignal("");
+	const [touched, setTouched] = createSignal(false);
 	onMount(() => {
 		if (local.autofocus) inputElRef?.focus();
 	});
@@ -4709,12 +6690,15 @@ function EditorText(_props) {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
 	let inputElRef = null;
-	setDraft(local.value != null ? String(local.value) : "");
+	function draftValue() {
+		return touched() ? draft() : local.value != null ? String(local.value) : "";
+	}
 	function onInput(e) {
 		setDraft(e && e.target ? e.target.value : "");
+		setTouched(true);
 	}
 	function doCommit() {
-		local.commit && local.commit(draft());
+		local.commit && local.commit(draftValue());
 	}
 	function doCancel() {
 		local.cancel && local.cancel();
@@ -4731,20 +6715,33 @@ function EditorText(_props) {
 	function onBlur() {
 		doCommit();
 	}
-	return <>
-    <input type="text" data-editing-cell="" aria-label={local.columnId} ref={(el) => {
-		inputElRef = el;
-	}} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
-		onInput($event);
-	}} onKeyDown={($event) => {
-		onKeydown($event);
-	}} onBlur={($event) => {
-		onBlur();
-	}} data-rozie-s-0d17f43a="" />
-    </>;
+	function a11yLabel() {
+		if (typeof local.columnLabel === "string" && local.columnLabel !== "") return local.columnLabel;
+		return local.columnId;
+	}
+	return (() => {
+		var _el$ = _tmpl$$9();
+		_el$.addEventListener("blur", ($event) => {
+			onBlur();
+		});
+		_el$.$$keydown = ($event) => {
+			onKeydown($event);
+		};
+		_el$.$$input = ($event) => {
+			onInput($event);
+		};
+		use((el) => {
+			inputElRef = el;
+		}, _el$);
+		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
+		effect(() => _el$.value = draftValue());
+		return _el$;
+	})();
 }
+delegateEvents(["input", "keydown"]);
 //#endregion
 //#region src/EditorNumber.tsx
+var _tmpl$$8 = /* @__PURE__ */ template(`<input type=number data-editing-cell=""class=rdt-cell-editor data-rozie-s-b2792b32="">`);
 function EditorNumber(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		columnId: "",
@@ -4752,23 +6749,38 @@ function EditorNumber(_props) {
 		row: null,
 		value: null,
 		commit: null,
-		cancel: null
+		cancel: null,
+		autofocus: false,
+		columnLabel: ""
 	}, _props), [
 		"columnId",
 		"column",
 		"row",
 		"value",
 		"commit",
-		"cancel"
+		"cancel",
+		"autofocus",
+		"columnLabel"
 	]);
 	const [draft, setDraft] = createSignal("");
-	setDraft(local.value != null ? String(local.value) : "");
+	const [touched, setTouched] = createSignal(false);
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
+	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
+		if (v) inputElRef?.focus();
+	})(v)), { defer: true }));
+	let inputElRef = null;
+	function draftValue() {
+		return touched() ? draft() : local.value != null ? String(local.value) : "";
+	}
 	function onInput(e) {
 		setDraft(e && e.target ? e.target.value : "");
+		setTouched(true);
 	}
 	function doCommit() {
 		if (!local.commit) return;
-		const raw = draft();
+		const raw = draftValue();
 		if (raw == null || String(raw).trim() === "") {
 			local.commit(null);
 			return;
@@ -4791,18 +6803,33 @@ function EditorNumber(_props) {
 	function onBlur() {
 		doCommit();
 	}
-	return <>
-    <input type="number" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
-		onInput($event);
-	}} onKeyDown={($event) => {
-		onKeydown($event);
-	}} onBlur={($event) => {
-		onBlur();
-	}} data-rozie-s-b2792b32="" />
-    </>;
+	function a11yLabel() {
+		if (typeof local.columnLabel === "string" && local.columnLabel !== "") return local.columnLabel;
+		return local.columnId;
+	}
+	return (() => {
+		var _el$ = _tmpl$$8();
+		_el$.addEventListener("blur", ($event) => {
+			onBlur();
+		});
+		_el$.$$keydown = ($event) => {
+			onKeydown($event);
+		};
+		_el$.$$input = ($event) => {
+			onInput($event);
+		};
+		use((el) => {
+			inputElRef = el;
+		}, _el$);
+		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
+		effect(() => _el$.value = draftValue());
+		return _el$;
+	})();
 }
+delegateEvents(["input", "keydown"]);
 //#endregion
 //#region src/EditorSelect.tsx
+var _tmpl$$7 = /* @__PURE__ */ template(`<select data-editing-cell=""class=rdt-cell-editor data-rozie-s-117f1a16="">`), _tmpl$2$3 = /* @__PURE__ */ template(`<option data-rozie-s-117f1a16="">`);
 function EditorSelect(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		columnId: "",
@@ -4811,7 +6838,9 @@ function EditorSelect(_props) {
 		value: null,
 		commit: null,
 		cancel: null,
-		options: []
+		options: [],
+		autofocus: false,
+		columnLabel: ""
 	}, _props), [
 		"columnId",
 		"column",
@@ -4819,15 +6848,28 @@ function EditorSelect(_props) {
 		"value",
 		"commit",
 		"cancel",
-		"options"
+		"options",
+		"autofocus",
+		"columnLabel"
 	]);
 	const [draft, setDraft] = createSignal("");
-	setDraft(local.value != null ? String(local.value) : "");
+	const [touched, setTouched] = createSignal(false);
+	onMount(() => {
+		if (local.autofocus) selectElRef?.focus();
+	});
+	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
+		if (v) selectElRef?.focus();
+	})(v)), { defer: true }));
+	let selectElRef = null;
+	function draftValue() {
+		return touched() ? draft() : local.value != null ? String(local.value) : "";
+	}
 	function onChange(e) {
 		setDraft(e && e.target ? e.target.value : "");
+		setTouched(true);
 	}
 	function doCommit() {
-		local.commit && local.commit(draft());
+		local.commit && local.commit(draftValue());
 	}
 	function doCancel() {
 		local.cancel && local.cancel();
@@ -4844,20 +6886,45 @@ function EditorSelect(_props) {
 	function onBlur() {
 		doCommit();
 	}
-	return <>
-    <select data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onChange={($event) => {
-		onChange($event);
-	}} onKeyDown={($event) => {
-		onKeydown($event);
-	}} onBlur={($event) => {
-		onBlur();
-	}} data-rozie-s-117f1a16="">
-      <Key each={local.options} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-117f1a16="">{rozieDisplay(opt().label)}</option>}</Key>
-    </select>
-    </>;
+	function a11yLabel() {
+		if (typeof local.columnLabel === "string" && local.columnLabel !== "") return local.columnLabel;
+		return local.columnId;
+	}
+	return (() => {
+		var _el$ = _tmpl$$7();
+		_el$.addEventListener("blur", ($event) => {
+			onBlur();
+		});
+		_el$.$$keydown = ($event) => {
+			onKeydown($event);
+		};
+		_el$.addEventListener("change", ($event) => {
+			onChange($event);
+		});
+		use((el) => {
+			selectElRef = el;
+		}, _el$);
+		insert(_el$, createComponent(Key, {
+			get each() {
+				return local.options;
+			},
+			by: (opt) => opt.value,
+			children: (opt) => (() => {
+				var _el$2 = _tmpl$2$3();
+				insert(_el$2, () => rozieDisplay(opt().label));
+				effect(() => _el$2.value = rozieAttr(opt().value));
+				return _el$2;
+			})()
+		}));
+		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
+		effect(() => _el$.value = draftValue());
+		return _el$;
+	})();
 }
+delegateEvents(["keydown"]);
 //#endregion
 //#region src/EditorCheckbox.tsx
+var _tmpl$$6 = /* @__PURE__ */ template(`<input type=checkbox data-editing-cell=""class=rdt-cell-editor data-rozie-s-3d792482="">`);
 function EditorCheckbox(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		columnId: "",
@@ -4865,15 +6932,26 @@ function EditorCheckbox(_props) {
 		row: null,
 		value: null,
 		commit: null,
-		cancel: null
+		cancel: null,
+		autofocus: false,
+		columnLabel: ""
 	}, _props), [
 		"columnId",
 		"column",
 		"row",
 		"value",
 		"commit",
-		"cancel"
+		"cancel",
+		"autofocus",
+		"columnLabel"
 	]);
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
+	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
+		if (v) inputElRef?.focus();
+	})(v)), { defer: true }));
+	let inputElRef = null;
 	function onChange(e) {
 		local.commit && local.commit(!!(e && e.target ? e.target.checked : false));
 	}
@@ -4883,16 +6961,63 @@ function EditorCheckbox(_props) {
 			local.cancel && local.cancel();
 		}
 	}
-	return <>
-    <input type="checkbox" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} checked={!!local.value} onChange={($event) => {
-		onChange($event);
-	}} onKeyDown={($event) => {
-		onKeydown($event);
-	}} data-rozie-s-3d792482="" />
-    </>;
+	function a11yLabel() {
+		if (typeof local.columnLabel === "string" && local.columnLabel !== "") return local.columnLabel;
+		return local.columnId;
+	}
+	return (() => {
+		var _el$ = _tmpl$$6();
+		_el$.$$keydown = ($event) => {
+			onKeydown($event);
+		};
+		_el$.addEventListener("change", ($event) => {
+			onChange($event);
+		});
+		use((el) => {
+			inputElRef = el;
+		}, _el$);
+		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
+		effect(() => _el$.checked = !!local.value);
+		return _el$;
+	})();
 }
+delegateEvents(["keydown"]);
+//#endregion
+//#region src/helpers/dateValue.ts
+/**
+* Coerce an arbitrary cell value to the `YYYY-MM-DD` string a native date input accepts.
+* Returns `''` for anything that cannot be read as a date — which is what the input shows for
+* "no date", so an unparseable value degrades to empty rather than to a broken control.
+*/
+const toIsoDateString = (v) => {
+	if (v == null || v === "") return "";
+	if (typeof v === "string") {
+		const s = v.trim();
+		if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
+		const iso = /^(\d{4}-\d{2}-\d{2})T/.exec(s);
+		if (iso) return iso[1];
+		return fromDate(new Date(s));
+	}
+	if (typeof v === "number") return Number.isFinite(v) ? fromDate(new Date(v)) : "";
+	if (typeof v === "object" && typeof v.getTime === "function") return fromDate(v);
+	return "";
+};
+/**
+* Format a Date as `YYYY-MM-DD` from its LOCAL parts. Local, not UTC: the input renders a
+* calendar day, and `toISOString()` would show the previous day for anyone west of UTC on a
+* midnight-local value.
+*/
+const fromDate = (d) => {
+	const t = d.getTime();
+	if (!Number.isFinite(t)) return "";
+	const y = d.getFullYear();
+	const m = d.getMonth() + 1;
+	const day = d.getDate();
+	return String(y).padStart(4, "0") + "-" + String(m).padStart(2, "0") + "-" + String(day).padStart(2, "0");
+};
 //#endregion
 //#region src/EditorDate.tsx
+var _tmpl$$5 = /* @__PURE__ */ template(`<input type=date data-editing-cell=""class=rdt-cell-editor data-rozie-s-7abe1a56="">`);
 function EditorDate(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		columnId: "",
@@ -4900,28 +7025,44 @@ function EditorDate(_props) {
 		row: null,
 		value: null,
 		commit: null,
-		cancel: null
+		cancel: null,
+		autofocus: false,
+		columnLabel: ""
 	}, _props), [
 		"columnId",
 		"column",
 		"row",
 		"value",
 		"commit",
-		"cancel"
+		"cancel",
+		"autofocus",
+		"columnLabel"
 	]);
 	const [draft, setDraft] = createSignal("");
-	setDraft(local.value != null ? String(local.value) : "");
+	const [touched, setTouched] = createSignal(false);
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
+	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
+		if (v) inputElRef?.focus();
+	})(v)), { defer: true }));
+	let inputElRef = null;
+	function draftValue() {
+		return touched() ? draft() : toIsoDateString(local.value);
+	}
 	function onInput(e) {
 		setDraft(e && e.target ? e.target.value : "");
+		setTouched(true);
 	}
 	function doCommit() {
-		local.commit && local.commit(draft());
+		local.commit && local.commit(draftValue());
 	}
 	function doCancel() {
 		local.cancel && local.cancel();
 	}
 	function onChange(e) {
 		setDraft(e && e.target ? e.target.value : "");
+		setTouched(true);
 	}
 	function onKeydown(e) {
 		if (e && e.key === "Enter") {
@@ -4935,42 +7076,66 @@ function EditorDate(_props) {
 	function onBlur() {
 		doCommit();
 	}
-	return <>
-    <input type="date" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
-		onInput($event);
-	}} onChange={($event) => {
-		onChange($event);
-	}} onKeyDown={($event) => {
-		onKeydown($event);
-	}} onBlur={($event) => {
-		onBlur();
-	}} data-rozie-s-7abe1a56="" />
-    </>;
+	function a11yLabel() {
+		if (typeof local.columnLabel === "string" && local.columnLabel !== "") return local.columnLabel;
+		return local.columnId;
+	}
+	return (() => {
+		var _el$ = _tmpl$$5();
+		_el$.addEventListener("blur", ($event) => {
+			onBlur();
+		});
+		_el$.$$keydown = ($event) => {
+			onKeydown($event);
+		};
+		_el$.addEventListener("change", ($event) => {
+			onChange($event);
+		});
+		_el$.$$input = ($event) => {
+			onInput($event);
+		};
+		use((el) => {
+			inputElRef = el;
+		}, _el$);
+		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
+		effect(() => _el$.value = draftValue());
+		return _el$;
+	})();
 }
+delegateEvents(["input", "keydown"]);
 //#endregion
 //#region src/FilterText.tsx
+var _tmpl$$4 = /* @__PURE__ */ template(`<input part=col-filter type=text class=rdt-col-filter data-rozie-s-18cbb44e="">`);
 function FilterText(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		columnId: "",
 		column: null,
 		value: null,
-		setFilter: null
+		setFilter: null,
+		columnLabel: ""
 	}, _props), [
 		"columnId",
 		"column",
 		"value",
-		"setFilter"
+		"setFilter",
+		"columnLabel"
 	]);
 	const [draft, setDraft] = createSignal("");
-	setDraft(local.value != null ? String(local.value) : "");
+	const [touched, setTouched] = createSignal(false);
+	createEffect(on(() => local.value, (v) => untrack(() => (setTouched(false), void 0)), { defer: true }));
+	function draftValue() {
+		return touched() ? draft() : local.value != null ? String(local.value) : "";
+	}
 	function onInput(e) {
 		setDraft(e && e.target ? e.target.value : "");
+		setTouched(true);
 	}
 	function applyFilter() {
-		local.setFilter && local.setFilter(local.columnId, draft());
+		local.setFilter && local.setFilter(local.columnId, draftValue());
 	}
 	function clearFilter() {
 		setDraft("");
+		setTouched(false);
 		local.setFilter && local.setFilter(local.columnId, "");
 	}
 	function onKeydown(e) {
@@ -4985,41 +7150,69 @@ function FilterText(_props) {
 	function onBlur() {
 		applyFilter();
 	}
-	return <>
-    <input part="col-filter" type="text" aria-label={local.columnId} class={"rdt-col-filter"} value={draft()} onInput={($event) => {
-		onInput($event);
-	}} onKeyDown={($event) => {
-		onKeydown($event);
-	}} onBlur={($event) => {
-		onBlur();
-	}} data-rozie-s-18cbb44e="" />
-    </>;
+	function a11yLabel() {
+		if (typeof local.columnLabel === "string" && local.columnLabel !== "") return local.columnLabel;
+		return local.columnId;
+	}
+	return (() => {
+		var _el$ = _tmpl$$4();
+		_el$.addEventListener("blur", ($event) => {
+			onBlur();
+		});
+		_el$.$$keydown = ($event) => {
+			onKeydown($event);
+		};
+		_el$.$$input = ($event) => {
+			onInput($event);
+		};
+		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
+		effect(() => _el$.value = draftValue());
+		return _el$;
+	})();
 }
+delegateEvents(["input", "keydown"]);
 //#endregion
 //#region src/FilterNumberRange.tsx
+var _tmpl$$3 = /* @__PURE__ */ template(`<span data-rozie-s-97b2c090=""><input part=col-filter type=number class=rdt-col-filter data-rozie-s-97b2c090=""><span data-rozie-s-97b2c090=""> - </span><input part=col-filter type=number class=rdt-col-filter data-rozie-s-97b2c090="">`);
 function FilterNumberRange(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		columnId: "",
 		column: null,
 		value: null,
 		setFilter: null,
-		minMax: null
+		minMax: null,
+		columnLabel: ""
 	}, _props), [
 		"columnId",
 		"column",
 		"value",
 		"setFilter",
-		"minMax"
+		"minMax",
+		"columnLabel"
 	]);
 	const [minDraft, setMinDraft] = createSignal("");
 	const [maxDraft, setMaxDraft] = createSignal("");
-	setMinDraft(Array.isArray(local.value) && local.value[0] != null ? String(local.value[0]) : "");
-	setMaxDraft(Array.isArray(local.value) && local.value[1] != null ? String(local.value[1]) : "");
+	const [touched, setTouched] = createSignal(false);
+	createEffect(on(() => Array.isArray(local.value) ? String(local.value[0]) + "\0" + String(local.value[1]) : "", (v) => untrack(() => (setTouched(false), void 0)), { defer: true }));
+	function minDraftValue() {
+		return touched() ? minDraft() : Array.isArray(local.value) && local.value[0] != null ? String(local.value[0]) : "";
+	}
+	function maxDraftValue() {
+		return touched() ? maxDraft() : Array.isArray(local.value) && local.value[1] != null ? String(local.value[1]) : "";
+	}
 	function onMinInput(e) {
 		setMinDraft(e && e.target ? e.target.value : "");
+		setTouched(true);
 	}
 	function onMaxInput(e) {
 		setMaxDraft(e && e.target ? e.target.value : "");
+		setTouched(true);
+	}
+	function onKeydown(e) {
+		if (e && e.key === "Enter") applyRange(minDraftValue(), maxDraftValue());
+	}
+	function onBlur() {
+		applyRange(minDraftValue(), maxDraftValue());
 	}
 	function minPlaceholder() {
 		return Array.isArray(local.minMax) && local.minMax[0] != null ? String(local.minMax[0]) : "";
@@ -5027,46 +7220,75 @@ function FilterNumberRange(_props) {
 	function maxPlaceholder() {
 		return Array.isArray(local.minMax) && local.minMax[1] != null ? String(local.minMax[1]) : "";
 	}
-	function applyRange() {
-		const minNum = minDraft() === "" ? void 0 : Number(minDraft());
-		const maxNum = maxDraft() === "" ? void 0 : Number(maxDraft());
+	function applyRange(minDraft, maxDraft) {
+		const minNum = minDraft === "" ? void 0 : Number(minDraft);
+		const maxNum = maxDraft === "" ? void 0 : Number(maxDraft);
 		if (minNum === void 0 && maxNum === void 0) local.setFilter && local.setFilter(local.columnId, "");
 		else local.setFilter && local.setFilter(local.columnId, [minNum, maxNum]);
 	}
-	return <>
-    <span style={{
-		display: "flex",
-		"align-items": "center"
-	}} data-rozie-s-97b2c090="">
-      <input part="col-filter" type="number" aria-label={rozieAttr(local.columnId + " min")} class={"rdt-col-filter"} placeholder={rozieAttr(minPlaceholder())} value={minDraft()} onInput={($event) => {
-		onMinInput($event);
-	}} onChange={($event) => {
-		applyRange();
-	}} data-rozie-s-97b2c090="" />
-      <span data-rozie-s-97b2c090=""> - </span>
-      <input part="col-filter" type="number" aria-label={rozieAttr(local.columnId + " max")} class={"rdt-col-filter"} placeholder={rozieAttr(maxPlaceholder())} value={maxDraft()} onInput={($event) => {
-		onMaxInput($event);
-	}} onChange={($event) => {
-		applyRange();
-	}} data-rozie-s-97b2c090="" />
-    </span>
-    </>;
+	function a11yLabel() {
+		if (typeof local.columnLabel === "string" && local.columnLabel !== "") return local.columnLabel;
+		return local.columnId;
+	}
+	return (() => {
+		var _el$ = _tmpl$$3(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling.nextSibling;
+		_el$.style.setProperty("display", "flex");
+		_el$.style.setProperty("align-items", "center");
+		_el$2.addEventListener("blur", ($event) => {
+			onBlur();
+		});
+		_el$2.$$keydown = ($event) => {
+			onKeydown($event);
+		};
+		_el$2.$$input = ($event) => {
+			onMinInput($event);
+		};
+		_el$4.addEventListener("blur", ($event) => {
+			onBlur();
+		});
+		_el$4.$$keydown = ($event) => {
+			onKeydown($event);
+		};
+		_el$4.$$input = ($event) => {
+			onMaxInput($event);
+		};
+		effect((_p$) => {
+			var _v$ = rozieAttr(a11yLabel() + " min"), _v$2 = rozieAttr(minPlaceholder()), _v$3 = rozieAttr(a11yLabel() + " max"), _v$4 = rozieAttr(maxPlaceholder());
+			_v$ !== _p$.e && setAttribute(_el$2, "aria-label", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$2, "placeholder", _p$.t = _v$2);
+			_v$3 !== _p$.a && setAttribute(_el$4, "aria-label", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$4, "placeholder", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		effect(() => _el$2.value = minDraftValue());
+		effect(() => _el$4.value = maxDraftValue());
+		return _el$;
+	})();
 }
+delegateEvents(["input", "keydown"]);
 //#endregion
 //#region src/FilterSelect.tsx
+var _tmpl$$2 = /* @__PURE__ */ template(`<select part=col-filter class=rdt-col-filter data-rozie-s-d75b42b2=""><option value=""data-rozie-s-d75b42b2="">All`), _tmpl$2$2 = /* @__PURE__ */ template(`<option data-rozie-s-d75b42b2="">`);
 function FilterSelect(_props) {
 	const [local, attrs] = splitProps(mergeProps({
 		columnId: "",
 		column: null,
 		value: null,
 		setFilter: null,
-		uniqueValues: []
+		uniqueValues: [],
+		columnLabel: ""
 	}, _props), [
 		"columnId",
 		"column",
 		"value",
 		"setFilter",
-		"uniqueValues"
+		"uniqueValues",
+		"columnLabel"
 	]);
 	function selectValue() {
 		return local.value != null ? String(local.value) : "";
@@ -5076,17 +7298,36 @@ function FilterSelect(_props) {
 		if (v === "") local.setFilter && local.setFilter(local.columnId, "");
 		else local.setFilter && local.setFilter(local.columnId, v);
 	}
-	return <>
-    <select part="col-filter" aria-label={local.columnId} class={"rdt-col-filter"} value={selectValue()} onChange={($event) => {
-		onChange($event);
-	}} data-rozie-s-d75b42b2="">
-      <option value="" data-rozie-s-d75b42b2="">All</option>
-      <Key each={local.uniqueValues} by={(opt) => opt}>{(opt) => <option value={rozieAttr(opt())} data-rozie-s-d75b42b2="">{rozieDisplay(opt())}</option>}</Key>
-    </select>
-    </>;
+	function a11yLabel() {
+		if (typeof local.columnLabel === "string" && local.columnLabel !== "") return local.columnLabel;
+		return local.columnId;
+	}
+	return (() => {
+		var _el$ = _tmpl$$2();
+		_el$.firstChild;
+		_el$.addEventListener("change", ($event) => {
+			onChange($event);
+		});
+		insert(_el$, createComponent(Key, {
+			get each() {
+				return local.uniqueValues;
+			},
+			by: (opt) => opt,
+			children: (opt) => (() => {
+				var _el$3 = _tmpl$2$2();
+				insert(_el$3, () => rozieDisplay(opt()));
+				effect(() => _el$3.value = rozieAttr(opt()));
+				return _el$3;
+			})()
+		}), null);
+		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
+		effect(() => _el$.value = selectValue());
+		return _el$;
+	})();
 }
 //#endregion
 //#region src/GroupBar.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<div class=rdt-group-bar data-rozie-s-546c469a=""><span data-group-drop-zone=""role=list aria-label="Active grouping"data-rozie-s-546c469a="">`), _tmpl$2$1 = /* @__PURE__ */ template(`<button type=button part=group-token draggable=true class="rdt-group-token rdt-group-token-add"data-rozie-s-546c469a="">`), _tmpl$3 = /* @__PURE__ */ template(`<span class=rdt-group-drop-hint data-rozie-s-546c469a="">Drag columns here to group`), _tmpl$4 = /* @__PURE__ */ template(`<span part=group-token data-group-token=""draggable=true role=listitem tabindex=0 data-rozie-s-546c469a=""><button type=button class=rdt-group-token-remove data-rozie-s-546c469a="">×`), _tmpl$5 = /* @__PURE__ */ template(`<button type=button class=rdt-group-clear data-rozie-s-546c469a="">Clear`);
 __rozieInjectStyle("GroupBar-546c469a", `.rdt-group-drop-zone[data-rozie-s-546c469a] {
   display: inline-flex;
   flex-wrap: wrap;
@@ -5104,6 +7345,18 @@ __rozieInjectStyle("GroupBar-546c469a", `.rdt-group-drop-zone[data-rozie-s-546c4
   border-color: var(--rdt-group-drop-zone-border-over, rgba(37, 99, 235, 0.7));
   background: var(--rdt-group-drop-zone-bg-over, rgba(37, 99, 235, 0.08));
 }
+.rdt-group-token-add[data-rozie-s-546c469a] {
+  font: inherit;
+  color: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.rdt-group-token-add[data-rozie-s-546c469a]:focus-visible,
+.rdt-group-drop-zone[data-rozie-s-546c469a] [data-group-token][data-rozie-s-546c469a]:focus-visible {
+  outline: var(--rdt-focus-ring, 2px solid #2563eb);
+  outline-offset: 1px;
+}
 .rdt-group-drop-hint[data-rozie-s-546c469a] {
   opacity: 0.55;
   font-size: 0.8125em;
@@ -5218,6 +7471,42 @@ function GroupBar(_props) {
 	function removeKey(key) {
 		local.applyGrouping && local.applyGrouping(local.grouping.filter((k) => k !== key));
 	}
+	function toggleKey(id) {
+		if (!id) return;
+		if (local.grouping.indexOf(id) !== -1) {
+			removeKey(id);
+			return;
+		}
+		local.applyGrouping && local.applyGrouping(local.grouping.concat([id]));
+	}
+	function moveKey(key, delta) {
+		const cur = local.grouping;
+		const from = cur.indexOf(key);
+		if (from === -1) return;
+		const to = from + delta;
+		if (to < 0 || to >= cur.length) return;
+		const next = cur.slice();
+		next.splice(from, 1);
+		next.splice(to, 0, key);
+		local.applyGrouping && local.applyGrouping(next);
+	}
+	function onTokenKeydown(e, gk) {
+		if (!e) return;
+		const key = e.key;
+		if (key === "Delete" || key === "Backspace") {
+			e.preventDefault();
+			removeKey(gk);
+			return;
+		}
+		if (!e.altKey) return;
+		if (key === "ArrowLeft") {
+			e.preventDefault();
+			moveKey(gk, -1);
+		} else if (key === "ArrowRight") {
+			e.preventDefault();
+			moveKey(gk, 1);
+		}
+	}
 	function clearAll() {
 		local.clearGrouping && local.clearGrouping();
 	}
@@ -5225,46 +7514,111 @@ function GroupBar(_props) {
 		const col = local.groupableColumns.find((c) => c.id === key);
 		return col && col.label || key;
 	}
-	return <>
-    <div class={"rdt-group-bar"} data-rozie-s-546c469a="">
-      <Key each={local.groupableColumns} by={(col) => col.id}>{(col) => <span part="group-token" draggable="true" class={"rdt-group-token"} onDragStart={($event) => {
-		onChipDragStart($event, col().id);
-	}} onDragEnd={($event) => {
-		onDragEnd();
-	}} data-rozie-s-546c469a="">{rozieDisplay(col().label)}</span>}</Key>
-      <span data-group-drop-zone="" class={"rdt-group-drop-zone " + rozieClass({ "is-over": isOver() })} onDragOver={($event) => {
-		onDragOver($event);
-	}} onDragLeave={($event) => {
-		onDragLeave($event);
-	}} onDrop={($event) => {
-		onDrop($event);
-	}} data-rozie-s-546c469a="">
-        {<Show when={!local.grouping.length}><span class={"rdt-group-drop-hint"} data-rozie-s-546c469a="">Drag columns here to group</span></Show>}<Key each={local.grouping} by={(gk) => gk}>{(gk) => <span part="group-token" data-group-token="" draggable="true" class={"rdt-group-token " + rozieClass({ "is-drop-target": dragKind() === "token" && dropKey() === gk() && draggingId() !== gk() })} onDragStart={($event) => {
-		onTokenDragStart($event, gk());
-	}} onDragOver={($event) => {
-		onTokenDragOver($event, gk());
-	}} onDragEnd={($event) => {
-		onDragEnd();
-	}} data-rozie-s-546c469a="">
-          {rozieDisplay(labelFor(gk()))}
-          <button type="button" aria-label={rozieAttr("Remove " + labelFor(gk()) + " grouping")} class={"rdt-group-token-remove"} onClick={($event) => {
-		removeKey(gk());
-	}} data-rozie-s-546c469a="">×</button>
-        </span>}</Key>
-      </span>
-      {<Show when={local.grouping.length}><button type="button" class={"rdt-group-clear"} onClick={($event) => {
-		clearAll();
-	}} data-rozie-s-546c469a="">Clear</button></Show>}</div>
-    </>;
+	return (() => {
+		var _el$ = _tmpl$$1(), _el$2 = _el$.firstChild;
+		insert(_el$, createComponent(Key, {
+			get each() {
+				return local.groupableColumns;
+			},
+			by: (col) => col.id,
+			children: (col) => (() => {
+				var _el$3 = _tmpl$2$1();
+				_el$3.$$click = ($event) => {
+					toggleKey(col().id);
+				};
+				_el$3.addEventListener("dragend", ($event) => {
+					onDragEnd();
+				});
+				_el$3.addEventListener("dragstart", ($event) => {
+					onChipDragStart($event, col().id);
+				});
+				insert(_el$3, () => rozieDisplay(col().label));
+				effect((_p$) => {
+					var _v$ = rozieAttr(local.grouping.indexOf(col().id) !== -1 ? "true" : "false"), _v$2 = rozieAttr("Group by " + col().label);
+					_v$ !== _p$.e && setAttribute(_el$3, "aria-pressed", _p$.e = _v$);
+					_v$2 !== _p$.t && setAttribute(_el$3, "aria-label", _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$3;
+			})()
+		}), _el$2);
+		_el$2.addEventListener("drop", ($event) => {
+			onDrop($event);
+		});
+		_el$2.addEventListener("dragleave", ($event) => {
+			onDragLeave($event);
+		});
+		_el$2.addEventListener("dragover", ($event) => {
+			onDragOver($event);
+		});
+		insert(_el$2, () => createComponent(Show, {
+			get when() {
+				return !local.grouping.length;
+			},
+			get children() {
+				return _tmpl$3();
+			}
+		}), null);
+		insert(_el$2, createComponent(Key, {
+			get each() {
+				return local.grouping;
+			},
+			by: (gk) => gk,
+			children: (gk) => (() => {
+				var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
+				_el$5.$$keydown = ($event) => {
+					onTokenKeydown($event, gk());
+				};
+				_el$5.addEventListener("dragend", ($event) => {
+					onDragEnd();
+				});
+				_el$5.addEventListener("dragover", ($event) => {
+					onTokenDragOver($event, gk());
+				});
+				_el$5.addEventListener("dragstart", ($event) => {
+					onTokenDragStart($event, gk());
+				});
+				insert(_el$5, () => rozieDisplay(labelFor(gk())), _el$6);
+				_el$6.$$click = ($event) => {
+					removeKey(gk());
+				};
+				effect((_p$) => {
+					var _v$3 = rozieAttr(labelFor(gk()) + " grouping, position " + (local.grouping.indexOf(gk()) + 1) + " of " + local.grouping.length + ". Alt+Arrow to reorder, Delete to remove."), _v$4 = "rdt-group-token " + rozieClass({ "is-drop-target": dragKind() === "token" && dropKey() === gk() && draggingId() !== gk() }), _v$5 = rozieAttr("Remove " + labelFor(gk()) + " grouping");
+					_v$3 !== _p$.e && setAttribute(_el$5, "aria-label", _p$.e = _v$3);
+					_v$4 !== _p$.t && className(_el$5, _p$.t = _v$4);
+					_v$5 !== _p$.a && setAttribute(_el$6, "aria-label", _p$.a = _v$5);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				});
+				return _el$5;
+			})()
+		}), null);
+		insert(_el$, () => createComponent(Show, {
+			get when() {
+				return local.grouping.length;
+			},
+			get children() {
+				var _el$7 = _tmpl$5();
+				_el$7.$$click = ($event) => {
+					clearAll();
+				};
+				return _el$7;
+			}
+		}), null);
+		effect(() => className(_el$2, "rdt-group-drop-zone " + rozieClass({ "is-over": isOver() })));
+		return _el$;
+	})();
 }
+delegateEvents(["click", "keydown"]);
 //#endregion
 //#region src/DetailPanel.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<dl class=rdt-detail-panel data-rozie-s-8f65bdaa="">`), _tmpl$2 = /* @__PURE__ */ template(`<div class=rdt-detail-entry data-rozie-s-8f65bdaa=""><dt class=rdt-detail-key data-rozie-s-8f65bdaa=""></dt><dd class=rdt-detail-value data-rozie-s-8f65bdaa="">`);
 function DetailPanel(_props) {
 	const [local, attrs] = splitProps(mergeProps({ row: null }, _props), ["row"]);
 	function entries() {
@@ -5275,15 +7629,22 @@ function DetailPanel(_props) {
 			value: r[key] == null ? "" : String(r[key])
 		}));
 	}
-	return <>
-    <dl class={"rdt-detail-panel"} data-rozie-s-8f65bdaa="">
-      <Key each={entries()} by={(pair) => pair.key}>{(pair) => <div class={"rdt-detail-entry"} data-rozie-s-8f65bdaa="">
-        <dt class={"rdt-detail-key"} data-rozie-s-8f65bdaa="">{rozieDisplay(pair().key)}</dt>
-        <dd class={"rdt-detail-value"} data-rozie-s-8f65bdaa="">{rozieDisplay(pair().value)}</dd>
-      </div>}</Key>
-    </dl>
-    </>;
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(Key, {
+			get each() {
+				return entries();
+			},
+			by: (pair) => pair.key,
+			children: (pair) => (() => {
+				var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+				insert(_el$3, () => rozieDisplay(pair().key));
+				insert(_el$4, () => rozieDisplay(pair().value));
+				return _el$2;
+			})()
+		}));
+		return _el$;
+	})();
 }
 //#endregion
 export { Column, DataTable, DataTable as default, DetailPanel, EditorCheckbox, EditorDate, EditorNumber, EditorSelect, EditorText, FilterNumberRange, FilterSelect, FilterText, GroupBar };