@rozie-ui/data-table-lit 0.5.0 → 0.7.0

package/dist/index.mjs

@@ -53,6 +53,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;
@@ -263,6 +305,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			defaultValue: null,
 			initialControlledValue: void 0
 		});
+		this.getRowId = null;
 		this.getSubRows = null;
 		this.groupable = false;
 		this._grouping_attr = null;
@@ -369,9 +412,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this._rangeAnchor = signal(null);
 		this._rangeFocus = signal(null);
 		this._pasteAnnounce = signal("");
+		this._rangeAnnounce = signal("");
 		this._liveAnnounce = signal("");
 		this.__rozieWatchInitial_0 = true;
 		this.__rozieWatchInitial_1 = true;
+		this.__rozieWatchInitial_2 = true;
 		this.__rozieCtxProvider_data_table_columns = new ContextProvider(this, {
 			context: __rozieCtx_data_table_columns$1,
 			initialValue: ((__rozieCtxHost) => ({
@@ -379,6 +424,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					if (id == null) return;
 					const key = String(id);
 					if (key === "__proto__" || key === "constructor" || key === "prototype") return;
+					const prev = __rozieCtxHost._colReg.value ? __rozieCtxHost._colReg.value[key] : void 0;
+					if (prev !== void 0 && columnSpecsEquivalent(prev, spec)) return;
 					__rozieCtxHost._colReg.value = {
 						...__rozieCtxHost._colReg.value,
 						[key]: spec
@@ -398,6 +445,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this._hasSlotSelectAll = false;
 		this._hasSlotDynamicColHeader = false;
 		this._hasSlotDynamicFilter = false;
+		this._hasSlotPlaceholder = false;
 		this._hasSlotSelectCell = false;
 		this._hasSlotDynamicCell = false;
 		this._hasSlotDynamicEditor = false;
@@ -417,8 +465,13 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.remeasurePending = false;
 		this.remeasureRaf = null;
 		this.remeasureDisposed = false;
+		this.scrollEndPinned = false;
+		this.scrollEndPinnedCount = -1;
+		this.scrollEndPinnedTop = -1;
 		this.GRID_PAGE_STEP = 10;
 		this.gridRoot = null;
+		this.outsidePointerDown = false;
+		this.docPointerDown = null;
 		this.programmatic = 0;
 		this.focusIntentEpoch = 0;
 		this.DATA_WRITE_TOKEN_KEY = "__rozieDataWriteToken";
@@ -482,6 +535,26 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			columnSizingInfo: this._columnSizingInfo.value
 		});
 		this.currentData = () => this.data != null ? this.data : this._dataDefault.value;
+		this.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;
+		};
+		this.editorWarned = Object.create(null);
+		this.checkEditorKind = (id, editor) => {
+			const msg = editorKindWarning(id, editor);
+			if (!msg) return editor;
+			const key = id + "\0" + String(editor);
+			if (this.editorWarned[key]) return editor;
+			this.editorWarned[key] = true;
+			console.warn(msg);
+			return editor;
+		};
 		this.buildConfigDef = (c) => {
 			if (!c) return null;
 			if (Array.isArray(c.columns)) {
@@ -518,9 +591,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				aggregationFn: wrapAggregationFn(c.aggregationFn),
 				pinned: c.pinned != null ? c.pinned : "",
 				width: c.width != null ? c.width : "",
+				...this.parseWidthToSize(c.width) != null ? { size: this.parseWidthToSize(c.width) } : {},
 				meta: {
 					editable: c.editable === true,
-					editor: c.editor != null ? c.editor : "text",
+					editor: c.editor != null ? this.checkEditorKind(id, c.editor) : "text",
 					editorOptions: c.editorOptions != null ? c.editorOptions : [],
 					validate: typeof c.validate === "function" ? c.validate : null
 				}
@@ -560,9 +634,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					aggregationFn: wrapAggregationFn(spec.aggregationFn),
 					pinned: spec.pinned != null ? spec.pinned : "",
 					width: spec.width != null ? spec.width : "",
+					...this.parseWidthToSize(spec.width) != null ? { size: this.parseWidthToSize(spec.width) } : {},
 					meta: {
 						editable: spec.editable === true,
-						editor: spec.editor != null ? spec.editor : "text",
+						editor: spec.editor != null ? this.checkEditorKind(id, spec.editor) : "text",
 						editorOptions: spec.editorOptions != null ? spec.editorOptions : [],
 						validate: typeof spec.validate === "function" ? spec.validate : null
 					}
@@ -906,7 +981,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					if (c && c.getIsPinned && c.getIsPinned()) out.push(i);
 				}
 			}
-			if (!this._activeIsHeader.value && this._activeColIndex.value >= 0 && out.indexOf(this._activeColIndex.value) === -1) out.push(this._activeColIndex.value);
+			if (this._activeColIndex.value >= 0 && out.indexOf(this._activeColIndex.value) === -1) out.push(this._activeColIndex.value);
 			if (this._editingRow.value >= 0 && this._editingCol.value >= 0 && out.indexOf(this._editingCol.value) === -1) out.push(this._editingCol.value);
 			return out;
 		};
@@ -927,18 +1002,37 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (this.rowsWindowed()) return this.table.getPrePaginationRowModel().rows;
 			return this.table.getRowModel().rows;
 		};
+		this.REMEASURE_MAX_FRAMES = 10;
 		this.scheduleRemeasure = () => {
 			if (this.remeasureDisposed) return;
+			if (this.virtualizer && this.gridScrollEl && !this.virtualizer.scrollState && this.gridScrollEl.scrollTop !== this.scrollEndPinnedTop) {
+				this.scrollEndPinnedTop = this.gridScrollEl.scrollTop;
+				this.scrollEndPinned = this.virtualizer.getVirtualDistanceFromEnd() <= 1;
+				this.scrollEndPinnedCount = this.windowSource().length;
+			}
 			if (this.remeasurePending) return;
 			this.remeasurePending = true;
 			let ranMicro = false;
 			const microPass = () => {
 				this.remeasureWindow();
 			};
+			let rafAttempts = 0;
 			const rafPass = () => {
 				this.remeasureRaf = null;
+				const covered = this.remeasureWindow();
+				rafAttempts = rafAttempts + 1;
+				if (!covered && rafAttempts < this.REMEASURE_MAX_FRAMES && !this.remeasureDisposed && typeof requestAnimationFrame === "function") {
+					this.remeasureRaf = requestAnimationFrame(rafPass);
+					return;
+				}
+				if (this.scrollEndPinned && this.gridScrollEl && !this.remeasureDisposed && this.windowSource().length === this.scrollEndPinnedCount) {
+					const maxTop = this.gridScrollEl.scrollHeight - this.gridScrollEl.clientHeight;
+					if (maxTop - this.gridScrollEl.scrollTop > 1) {
+						this.gridScrollEl.scrollTop = maxTop;
+						this.scrollEndPinnedTop = this.gridScrollEl.scrollTop;
+					}
+				}
 				this.remeasurePending = false;
-				this.remeasureWindow();
 			};
 			if (typeof queueMicrotask !== "undefined") {
 				ranMicro = true;
@@ -960,6 +1054,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.pinnedEditIndex = () => {
 			if (this._editingRow.value >= 0) return this._editingRow.value;
 			if (this._editingRowIndex.value != null) return this._editingRowIndex.value;
+			if (this.interactionMode === "grid" && !this._activeIsHeader.value && this._activeRow.value >= 0) return this._activeRow.value;
 			return -1;
 		};
 		this.pinnedMeasurement = (pin) => {
@@ -968,13 +1063,90 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return ms && ms[pin] ? ms[pin] : null;
 		};
 		this.remeasureWindow = () => {
-			if (this.remeasureDisposed) return;
-			if (!this.virtualizer || !this.gridRoot) return;
-			if (this.virtualizer.scrollState) return;
+			if (this.remeasureDisposed) return true;
+			if (!this.virtualizer || !this.gridRoot) return true;
+			if (this.virtualizer.scrollState) return true;
 			const trs = this.gridRoot.querySelectorAll("tbody.rdt-tbody > tr[data-index]");
-			for (const tr of trs) this.virtualizer.measureElement(tr);
+			const rendered = /* @__PURE__ */ new Set();
+			for (const tr of trs) {
+				this.virtualizer.measureElement(tr);
+				rendered.add(tr.getAttribute("data-index"));
+			}
+			let covered = true;
+			const items = this.virtualizer.getVirtualItems();
+			for (let i = 0; i < items.length; i++) if (!rendered.has(String(items[i].index))) {
+				covered = false;
+				break;
+			}
 			if (this.afterRowRemeasure) this.afterRowRemeasure();
+			return covered;
+		};
+		this.LAZY_PLACEHOLDER_KEY = "__rdtLazyPlaceholder";
+		this.LAZY_PLACEHOLDER_ROW_ID_PREFIX = "__rdt_ph_";
+		this.lazyPlaceholders = {};
+		this.lazyRowsActive = () => this.rowsWindowed() && !!this.manual && this.rowCount != null && this.rowCount > 0;
+		this.isLazyPlaceholder = (orig) => !!orig && orig[this.LAZY_PLACEHOLDER_KEY] === true;
+		this.rowIsLazyPlaceholder = (row) => !!row && this.isLazyPlaceholder(row.original);
+		this.feedData = () => {
+			const d = this.currentData() || [];
+			if (!this.lazyRowsActive()) return d;
+			const n = Math.max(d.length, Number(this.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 (!this.lazyPlaceholders[i]) this.lazyPlaceholders[i] = {
+						[this.LAZY_PLACEHOLDER_KEY]: true,
+						index: i
+					};
+					out[i] = this.lazyPlaceholders[i];
+				}
+			}
+			return out;
+		};
+		this.migratePlaceholderSizeCache = () => {
+			if (!this.virtualizer || !this.virtualizer.itemSizeCache || !this.table) return;
+			const cache = this.virtualizer.itemSizeCache;
+			const coreRows = this.table.getCoreRowModel().rows;
+			let migrated = false;
+			for (const oldKey of Array.from(cache.keys())) {
+				if (typeof oldKey !== "string" || oldKey.indexOf(this.LAZY_PLACEHOLDER_ROW_ID_PREFIX) !== 0) continue;
+				const row = coreRows[Number(oldKey.slice(this.LAZY_PLACEHOLDER_ROW_ID_PREFIX.length))];
+				if (!row || this.rowIsLazyPlaceholder(row) || row.id === oldKey) continue;
+				cache.set(row.id, cache.get(oldKey));
+				cache.delete(oldKey);
+				migrated = true;
+			}
+			if (!migrated) return;
+			this.virtualizer.itemSizeCache = new Map(cache);
+			if (typeof this.virtualizer.itemSizeCacheVersion === "number") this.virtualizer.itemSizeCacheVersion++;
+		};
+		this.lastRangeStart = -1;
+		this.lastRangeEnd = -1;
+		this.emitVisibleRangeIfChanged = () => {
+			if (!this.rowsWindowed() || !this.virtualizer) return;
+			const items = this.virtualizer.getVirtualItems();
+			if (!items.length) return;
+			const start = items[0].index;
+			const end = items[items.length - 1].index + 1;
+			if (start === this.lastRangeStart && end === this.lastRangeEnd) return;
+			this.lastRangeStart = start;
+			this.lastRangeEnd = end;
+			this.dispatchEvent(new CustomEvent("visible-range-change", {
+				detail: {
+					start,
+					end
+				},
+				bubbles: true,
+				composed: true
+			}));
 		};
+		this.scrollToRow = (index, options) => {
+			if (!this.rowsWindowed() || !this.virtualizer) return;
+			this.virtualizer.scrollToIndex(Math.trunc(Number(index)) || 0, options || void 0);
+		};
+		this.getScrollElement = () => this.gridScrollEl;
 		this.virtualItemKey = (i) => {
 			const src = this.windowSource();
 			return src && src[i] ? src[i].id : void 0;
@@ -1080,6 +1252,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				}
 			}
 			this.bumpWindowVer();
+			this.scheduleRemeasure();
 		};
 		this.virtualizerOptions = () => ({
 			count: this.windowSource().length,
@@ -1252,20 +1425,29 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (filterChanged) return this.totalRowCount() + " results";
 			return "";
 		};
+		this.rowIdOption = () => {
+			const f = this.getRowId;
+			return f ? (originalRow, index, parent) => this.isLazyPlaceholder(originalRow) ? this.LAZY_PLACEHOLDER_ROW_ID_PREFIX + originalRow.index : String(f(originalRow, index, parent)) : void 0;
+		};
+		this.rowSelectionOption = () => {
+			if (this.selectionMode === "none") return false;
+			return this.lazyRowsActive() ? (row) => !this.rowIsLazyPlaceholder(row) : true;
+		};
 		this.reFeed = () => {
 			if (!this.table) return;
 			this.table.setOptions((prev) => ({
 				...prev,
-				data: this.currentData(),
+				data: this.feedData(),
 				columns: this.tableColumns(),
 				state: this.currentState(),
-				enableRowSelection: this.selectionMode !== "none",
+				enableRowSelection: this.rowSelectionOption(),
 				enableMultiRowSelection: this.selectionMode === "multiple",
 				rowCount: this.rowCount ?? void 0,
 				pageCount: this.pageCount ?? void 0,
 				getExpandedRowModel: getExpandedRowModel(),
 				getSubRows: this.getSubRows || void 0,
-				getRowCanExpand: this.expandable === true && this.getSubRows == null ? () => true : void 0,
+				getRowId: this.rowIdOption(),
+				getRowCanExpand: this.expandable === true && this.getSubRows == null ? (row) => !this.rowIsLazyPlaceholder(row) : void 0,
 				onExpandedChange: this.onExpandedChangeCb,
 				autoResetExpanded: false,
 				getGroupedRowModel: getGroupedRowModel(),
@@ -1424,9 +1606,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (side === "right") return "position:sticky;right:" + (col.getAfter ? col.getAfter("right") : 0) + "px;z-index:" + zIndex + ";";
 			return "";
 		};
-		this.thStyle = (header) => {
+		this.thStyle = (header, widthPx = null) => {
 			let s = "";
-			const w = this.headerWidth(header);
+			const w = widthPx != null && widthPx > 0 ? widthPx + "px" : this.headerWidth(header);
 			if (w) s += "width:" + w + ";";
 			s += this.pinStyle(header && header.column ? header.column.id : null, 2);
 			return s;
@@ -1638,6 +1820,16 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.rowIndexOf = (row) => this.tick() >= 0 ? (this._rows.value || []).indexOf(row) : -1;
 		this.colIndexOf = (row, cellCtx) => this.tick() >= 0 ? this.visibleCellsFor(row).indexOf(cellCtx) : -1;
 		this.headerColIndexOf = (hg, header) => (hg && hg.headers ? hg.headers : []).indexOf(header);
+		this.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;
+		};
 		this.pageRowOffset = () => {
 			if (!this.isGrid() || this.rowsWindowed()) return 0;
 			return this.pageIndex() * this.pageSize();
@@ -1681,14 +1873,15 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const header = nextIsHeader == null ? this._activeIsHeader.value : nextIsHeader;
 			const rowOut = this.rowsWindowed() && this.virtualizer && this.rowIsOutsideWindow(r);
 			const colOut = this.colsWindowed() && this.colVirtualizer && this.colIsOutsideWindow(c);
-			if (!header && (rowOut || colOut)) {
-				if (rowOut) this.virtualizer.scrollToIndex(r, { align: "center" });
+			const rowScroll = !header && rowOut;
+			if (rowScroll || colOut) {
+				if (rowScroll) this.virtualizer.scrollToIndex(r, { align: "center" });
 				if (colOut) this.colVirtualizer.scrollToIndex(c, { align: "center" });
 				let focusAttempts = 0;
 				const myEpoch = this.focusIntentEpoch;
 				const focusWhenReady = () => {
 					if (this.focusIntentEpoch !== myEpoch) return;
-					const el = this.resolveCellEl(String(r), c);
+					const el = this.resolveCellEl(header ? "__header" : String(r), c, header ? lvl : null);
 					if (el) {
 						el.focus();
 						return;
@@ -1708,6 +1901,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.totalRowCount = () => {
 			if (!this.table) return (this._rows.value || []).length;
+			if (this.manual === true) {
+				if (this.rowCount != null) return this.rowCount;
+				if (this.pageCount != null) return this.pageCount * this.pageSize();
+			}
 			const fm = this.table.getFilteredRowModel();
 			return fm && fm.rows ? fm.rows.length : (this._rows.value || []).length;
 		};
@@ -1715,6 +1912,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.gridAriaRowCount = () => this.headerRowCount() + this.totalRowCount();
 		this.ariaPageOffset = () => this.table ? this.pageIndex() * this.pageSize() : 0;
 		this.bodyAriaRowIndex = (row) => this.headerRowCount() + this.rowIndexOf(row) + this.ariaPageOffset() + 1;
+		this.gridAriaColCount = () => this.visibleColCount();
 		this.visibleColCount = () => {
 			const rowList = this._rows.value || [];
 			if (rowList.length) return rowList[0].getVisibleCells().length;
@@ -1885,6 +2083,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const rowKey = this._activeIsHeader.value ? "__header" : String(this._activeRow.value);
 			return this.resolveCellEl(rowKey, this._activeColIndex.value, this._activeIsHeader.value ? this._activeHeaderLevel.value : null);
 		};
+		this.activeCellHasControls = () => focusables(this.currentCellEl()).length > 0;
 		this.enterControl = () => {
 			const list = focusables(this.currentCellEl());
 			if (!list.length) return;
@@ -1929,10 +2128,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			let nextLevel = prevLevel;
 			if ((e.ctrlKey || e.metaKey) && e.shiftKey && !this._activeIsHeader.value && (key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight")) {
 				e.preventDefault();
-				if (key === "ArrowUp") this.extendRange(-this._activeRow.value, 0);
-				else if (key === "ArrowDown") this.extendRange(this.bodyRowCount() - 1 - this._activeRow.value, 0);
-				else if (key === "ArrowLeft") this.extendRange(0, -this._activeColIndex.value);
-				else this.extendRange(0, this.visibleColCount() - 1 - this._activeColIndex.value);
+				if (key === "ArrowUp") this.extendRange(-this.rangeFocusRow(), 0);
+				else if (key === "ArrowDown") this.extendRange(this.bodyRowCount() - 1 - this.rangeFocusRow(), 0);
+				else if (key === "ArrowLeft") this.extendRange(0, -this.rangeFocusCol());
+				else this.extendRange(0, this.visibleColCount() - 1 - this.rangeFocusCol());
 				return;
 			} else if ((e.ctrlKey || e.metaKey) && !this._activeIsHeader.value && (key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight")) {
 				e.preventDefault();
@@ -2015,15 +2214,15 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					nextCol = en.col;
 					nextIsHeader = false;
 				} else nextCol = this.gotoColEdge(true);
-			} else if ((key === "c" || key === "C") && (e.ctrlKey || e.metaKey) && this.clipboardActiveAllowed()) {
+			} else if ((key === "c" || key === "C") && (e.ctrlKey || e.metaKey) && this.clipboardActiveAllowed() && this.clipboardWriteAvailable()) {
 				e.preventDefault();
 				this.copyRange();
 				return;
-			} else if ((key === "v" || key === "V") && (e.ctrlKey || e.metaKey) && this.clipboardActiveAllowed()) {
+			} else if ((key === "v" || key === "V") && (e.ctrlKey || e.metaKey) && this.clipboardActiveAllowed() && this.clipboardReadAvailable()) {
 				e.preventDefault();
 				this.pasteRange();
 				return;
-			} else if ((key === "x" || key === "X") && (e.ctrlKey || e.metaKey) && this.clipboardActiveAllowed()) {
+			} else if ((key === "x" || key === "X") && (e.ctrlKey || e.metaKey) && this.clipboardActiveAllowed() && this.clipboardWriteAvailable()) {
 				e.preventDefault();
 				this.cutRange();
 				return;
@@ -2053,6 +2252,23 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				e.preventDefault();
 				if (!this._activeIsHeader.value) this.selectAllBody();
 				return;
+			} else if (key === " " && e.shiftKey && !e.ctrlKey && !e.metaKey && !this._activeIsHeader.value) {
+				e.preventDefault();
+				if (this.selectionMode !== "none") {
+					const selRow = (this._rows.value || [])[this._activeRow.value];
+					if (selRow && selRow.toggleSelected) selRow.toggleSelected(!this.rowIsSelected(selRow));
+				}
+				return;
+			} else if (key === " " && (e.ctrlKey || e.metaKey) && !e.shiftKey && !this._activeIsHeader.value) {
+				e.preventDefault();
+				this.selectActiveColumn();
+				return;
+			} else if (key === "Escape") {
+				if (this.rangeActive || this._rangeAnchor.value != null) {
+					e.preventDefault();
+					this.clearRange();
+				}
+				return;
 			} else if (key === "F2" && e.shiftKey && this.isActiveCellEditable()) {
 				e.preventDefault();
 				this.beginRowEdit((this._rows.value || [])[this._activeRow.value]);
@@ -2078,6 +2294,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.onToggleExpand((this._rows.value || [])[this._activeRow.value], e);
 				this.recoverGridFocus(String(grpRow), grpCol, null, true);
 				return;
+			} else if (key === "Enter" && !this._activeIsHeader.value && !this.activeCellHasControls()) {
+				e.preventDefault();
+				this.activateRowAt(this._activeRow.value, "keyboard");
+				return;
 			} else if (key === "Enter" || key === "F2") {
 				e.preventDefault();
 				this.enterControl();
@@ -2132,8 +2352,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._activeColIndex.value = col;
 			if (isHeader !== prevIsHeader || col !== prevCol || (isHeader ? movedLevel !== prevLevel : movedRow !== prevRow)) this.focusIntentEpoch = this.focusIntentEpoch + 1;
 			if (this.rangeTransition) this.rangeTransition = false;
-			else if (this.rangeClickPending) this.rangeClickPending = false;
-			else this.clearRange();
+			else if (this.rangeClickPending && this.rangeClickPending.isHeader === isHeader && this.rangeClickPending.r === movedRow && this.rangeClickPending.c === col) this.rangeClickPending = null;
+			else {
+				this.rangeClickPending = null;
+				this.clearRange();
+			}
 			if (tgt === cellEl) this._activeInControl.value = false;
 		};
 		this.onGridMouseDown = (e) => {
@@ -2154,9 +2377,14 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this._activeIsHeader.value = false;
 				this._activeRow.value = row;
 				this._activeColIndex.value = col;
-				this.rangeClickPending = true;
+				this.rangeClickPending = {
+					isHeader: false,
+					r: row,
+					c: col
+				};
 				return;
 			}
+			if (this.isEditing(row, col)) return;
 			this.beginRangeDrag(row, col);
 		};
 		this.onGridDblClick = (e) => {
@@ -2184,7 +2412,43 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.beginEdit(row, col, null);
 			}
 		};
+		this.activateRowAt = (index, trigger) => {
+			const row = (this._rows.value || [])[index];
+			if (!row || this.rowIsGrouped(row) || this.rowIsLazyPlaceholder(row)) return;
+			this.dispatchEvent(new CustomEvent("row-activate", {
+				detail: {
+					row: row.original,
+					index,
+					trigger
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.ROW_ACTIVATE_CONTROLS = "input, button, a[href], select, textarea, label, summary, [contenteditable=\"\"], [contenteditable=\"true\"], [role=\"button\"], [role=\"checkbox\"], [role=\"link\"], [data-editing-cell]";
+		this.maybeActivateRowFromClick = (e) => {
+			if (!e || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return;
+			if (this.rangeDragMoved) return;
+			const tgt = e.target;
+			if (!tgt || !tgt.closest) return;
+			const cellEl = tgt.closest("[data-row]");
+			if (!cellEl) return;
+			const control = tgt.closest(this.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 (this.isGrid() && this.singleClickEdit) {
+				const colAttr = cellEl.getAttribute("data-col-index");
+				const col = colAttr == null ? NaN : parseInt(colAttr, 10);
+				const colId = Number.isFinite(col) ? this.columnIdAt(index, col) : null;
+				if (colId != null && this.columnEditable(colId)) return;
+			}
+			this.activateRowAt(index, "click");
+		};
 		this.onGridClick = (e) => {
+			this.maybeActivateRowFromClick(e);
 			if (!this.isGrid() || !e) return;
 			if (!this.singleClickEdit) return;
 			if (e.shiftKey) return;
@@ -2295,7 +2559,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const headers = hg && hg.headers || [];
 			if (!this.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 = this.windowedColIndices();
 			const idxSet = {};
@@ -2309,23 +2574,39 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				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 + this.columnSize(c);
+				}
 				if (span > 0) out.push({
 					header: h,
-					span
+					span,
+					width
 				});
 			}
 			return out;
 		};
 		this.windowedColSpan = () => this.colsWindowed() ? this.windowedColIndices().length + 2 : this.visibleColCount();
+		this.lastColSizeSig = 0;
+		this.remeasureColumnSizes = () => {
+			if (!this.colsWindowed() || !this.colVirtualizer || !this.colVirtualizer.measure) return;
+			const n = this.columnCount();
+			let sig = n;
+			for (let i = 0; i < n; i++) sig = Math.imul(sig, 31) + this.columnSize(i) | 0;
+			if (sig === this.lastColSizeSig) return;
+			this.lastColSizeSig = sig;
+			this.colVirtualizer.measure();
+		};
 		this.remeasureColumnWindow = () => {
 			if (!this.colsWindowed() || !this.colVirtualizer) return;
 			this.colVirtualizer.setOptions(this.columnVirtualizerOptions());
+			this.remeasureColumnSizes();
 			this.colVirtualizer._willUpdate();
 		};
 		this.gridEmptyFallback = false;
 		this.rangeTransition = false;
-		this.rangeClickPending = false;
+		this.rangeClickPending = null;
 		this.rangeActive = false;
 		this.inRange = (rIdx, cIdx) => {
 			const a = this._rangeAnchor.value;
@@ -2367,7 +2648,17 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const c1 = a.colIndex > f.colIndex ? a.colIndex : f.colIndex;
 			return rIdx === r1 && cIdx === c1;
 		};
+		this.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";
+		};
 		this.emitRangeChange = (anchor, focus) => {
+			this._rangeAnnounce.value = this.rangeSummary(anchor, focus);
 			this.dispatchEvent(new CustomEvent("range-change", {
 				detail: {
 					anchor,
@@ -2410,11 +2701,15 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.focusActiveCell(nextRow, nextCol, false);
 			if (!hadRange || nextRow !== focus.rowIndex || nextCol !== focus.colIndex) this.emitRangeChange(anchor, nextFocus);
 		};
-		this.setRangeFocus = (rIdx, cIdx) => {
+		this.setRangeFocus = (rIdx, cIdx, anchorR = null, anchorC = null) => {
 			const maxRow = this.bodyRowCount() - 1;
 			const maxCol = this.visibleColCount() - 1;
 			if (maxRow < 0 || maxCol < 0) return;
 			let anchor = this._rangeAnchor.value;
+			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: this._activeRow.value,
 				colIndex: this._activeColIndex.value
@@ -2445,6 +2740,32 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.rangeActive = true;
 			this.emitRangeChange(anchor, focus);
 		};
+		this.rangeFocusRow = () => {
+			const f = this._rangeFocus.value;
+			return f && f.rowIndex != null ? f.rowIndex : this._activeRow.value;
+		};
+		this.rangeFocusCol = () => {
+			const f = this._rangeFocus.value;
+			return f && f.colIndex != null ? f.colIndex : this._activeColIndex.value;
+		};
+		this.selectActiveColumn = () => {
+			const maxRow = this.bodyRowCount() - 1;
+			const maxCol = this.visibleColCount() - 1;
+			if (maxRow < 0 || maxCol < 0) return;
+			const c = clamp(Math.trunc(Number(this._activeColIndex.value)) || 0, 0, maxCol);
+			const anchor = {
+				rowIndex: 0,
+				colIndex: c
+			};
+			const focus = {
+				rowIndex: maxRow,
+				colIndex: c
+			};
+			this._rangeAnchor.value = anchor;
+			this._rangeFocus.value = focus;
+			this.rangeActive = true;
+			this.emitRangeChange(anchor, focus);
+		};
 		this.clearRange = () => {
 			if (!this.rangeActive) return;
 			this.rangeActive = false;
@@ -2524,6 +2845,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 			return lines.join("\n");
 		};
+		this.clipboardWriteAvailable = () => typeof navigator !== "undefined" && !!navigator.clipboard && typeof navigator.clipboard.writeText === "function";
+		this.clipboardReadAvailable = () => typeof navigator !== "undefined" && !!navigator.clipboard && typeof navigator.clipboard.readText === "function";
 		this.copyRange = () => {
 			if (!this.clipboardActiveAllowed()) return;
 			if (typeof navigator === "undefined" || !navigator.clipboard || !navigator.clipboard.writeText) return;
@@ -2532,27 +2855,30 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				if (p && p.catch) p.catch(() => {});
 			} catch (err) {}
 		};
-		this.applyGridToRange = (grid, originRow, originCol) => {
+		this.applyGridToRange = (grid, originRow, originCol, verb) => {
+			const opVerb = typeof verb === "string" && verb !== "" ? verb : "pasted";
 			const maxRow = this.bodyRowCount() - 1;
 			const maxCol = this.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 = this.currentData();
 			for (let gr = 0; gr < grid.length; gr++) {
 				const r = originRow + gr;
 				if (r > maxRow) break;
 				const rowGrouped = this.rowIndexIsGrouped(r);
+				const rowPlaceholder = this.rowIsLazyPlaceholder((this._rows.value || [])[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 = this.columnIdAt(r, c);
 					if (colId == null || !this.columnEditable(colId)) continue;
 					const rowObj = this.rowOriginalAt(r);
@@ -2561,6 +2887,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					const field = this.fieldOfColId(colId);
 					const srcIndex = this.sourceIndexOfRow(r);
 					const oldValue = rowObj ? rowObj[field] : null;
+					applied = applied + 1;
+					if (oldValue === value) continue;
 					next = replaceRowValue(next, srcIndex, field, value);
 					committed.push({
 						rowId: this.rowIdAt(r),
@@ -2568,23 +2896,27 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 						oldValue,
 						newValue: value
 					});
-					wrote = wrote + 1;
 				}
 			}
-			if (wrote > 0) {
+			if (committed.length > 0) {
 				this.editTransition = true;
 				this.writeData(next);
 				this.editTransition = false;
-				for (let i = 0; i < committed.length; i++) this.dispatchEvent(new CustomEvent("cell-edit-commit", {
-					detail: committed[i],
-					bubbles: true,
-					composed: true
-				}));
+				for (let i = 0; i < committed.length; i++) try {
+					this.dispatchEvent(new CustomEvent("cell-edit-commit", {
+						detail: committed[i],
+						bubbles: true,
+						composed: true
+					}));
+				} 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) this.announce(wrote + " of " + total + " cells pasted");
-			else if (total > 0) this.announce("No cells pasted — " + total + " cells were invalid or read-only");
+			if (applied > 0) this.announce(applied + " of " + total + " cells " + opVerb);
+			else if (total > 0) this.announce("No cells " + opVerb + " — " + total + " cells were invalid or read-only");
 			return {
-				wrote,
+				wrote: applied,
+				changed: committed.length,
 				total
 			};
 		};
@@ -2616,11 +2948,15 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 			if (!p || !p.then) return;
 			p.then((text) => {
-				const grid = parseTsv(text);
-				if (!grid.length) return;
-				const tiled = tileGridToBox(grid, destBox);
-				this.applyGridToRange(tiled, anchorRow, anchorCol);
-			}).catch(() => {});
+				try {
+					const grid = parseTsv(text);
+					if (!grid.length) return;
+					const tiled = tileGridToBox(grid, destBox);
+					this.applyGridToRange(tiled, 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);
+				}
+			}, () => {});
 		};
 		this.cutRange = () => {
 			if (!this.clipboardActiveAllowed()) return;
@@ -2639,7 +2975,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				for (let c = c0; c <= c1; c++) cols.push("");
 				grid.push(cols);
 			}
-			this.applyGridToRange(grid, r0, c0);
+			this.applyGridToRange(grid, r0, c0, "cut");
 		};
 		this.clearActiveRange = () => {
 			if (!this.clipboardActiveAllowed()) return;
@@ -2654,7 +2990,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				for (let c = c0; c <= c1; c++) cols.push("");
 				grid.push(cols);
 			}
-			this.applyGridToRange(grid, r0, c0);
+			this.applyGridToRange(grid, r0, c0, "cleared");
 		};
 		this.fillRange = (sourceBox, endCell) => {
 			let box;
@@ -2692,7 +3028,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				}
 				grid.push(cols);
 			}
-			this.applyGridToRange(grid, box.r0, box.c0);
+			this.applyGridToRange(grid, box.r0, box.c0, "filled");
 		};
 		this.fillDragging = false;
 		this.fillDragMove = null;
@@ -2854,7 +3190,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				if (cell && (cell.r !== lastCell.r || cell.c !== lastCell.c)) {
 					lastCell = cell;
 					this.rangeDragMoved = true;
-					this.setRangeFocus(cell.r, cell.c);
+					this.setRangeFocus(cell.r, cell.c, anchorR, anchorC);
 				}
 			};
 			const up = () => {
@@ -2876,6 +3212,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.isActiveCellEditable = () => {
 			if (this.rowIndexIsGrouped(this._activeRow.value)) return false;
+			if (this.rowIsLazyPlaceholder((this._rows.value || [])[this._activeRow.value])) return false;
 			const colId = this.activeCellColumnId();
 			return colId != null && this.columnEditable(colId);
 		};
@@ -2987,12 +3324,14 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.beginEdit = (rowIndex, colIndex, seed) => {
 			if (this.rowIndexIsGrouped(rowIndex)) return;
+			if (this.rowIsLazyPlaceholder((this._rows.value || [])[rowIndex])) return;
 			const colId = this.columnIdAt(rowIndex, colIndex);
 			if (colId == null || !this.columnEditable(colId)) return;
 			this.committedThisSession = false;
 			this.setInvalid("");
 			this._editingRowIndex.value = null;
 			this._rowDraft.value = {};
+			this.rowDraftSync = {};
 			this._editingRow.value = rowIndex;
 			this._editingCol.value = colIndex;
 			this._draftValue.value = seed != null ? seed : this.cellValueAt(rowIndex, colIndex);
@@ -3035,6 +3374,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.endRowEdit = () => {
 			this._editingRowIndex.value = null;
 			this._rowDraft.value = {};
+			this.rowDraftSync = {};
 			this._invalidMsg.value = "";
 			this._activeInControl.value = false;
 			this._editVer.value = this._editVer.value + 1;
@@ -3048,7 +3388,14 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return this._editFocusColId.value != null && this._editFocusColId.value === colId;
 		};
 		this.coerceCellValue = (colId, raw) => {
-			if (this.editorTypeOf(colId) !== "number") return raw;
+			const kind = this.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();
@@ -3110,10 +3457,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.toggleActiveBooleanCell = () => {
 			if (this.rowIndexIsGrouped(this._activeRow.value)) return;
-			const colId = this.columnIdAt(this._activeRow.value, this._activeColIndex.value);
-			if (colId == null || !this.columnEditable(colId)) return;
 			const row = (this._rows.value || [])[this._activeRow.value];
 			if (!row) return;
+			if (this.rowIsLazyPlaceholder(row)) return;
+			const colId = this.columnIdAt(this._activeRow.value, this._activeColIndex.value);
+			if (colId == null || !this.columnEditable(colId)) return;
 			const rowOriginal = row.original;
 			const rowId = row.id;
 			const oldValue = this.cellValueAt(this._activeRow.value, this._activeColIndex.value);
@@ -3199,6 +3547,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const rowIndex = this.rowIndexOf(row);
 			if (rowIndex < 0) return;
 			if (this.rowIndexIsGrouped(rowIndex)) return;
+			if (this.rowIsLazyPlaceholder((this._rows.value || [])[rowIndex])) return;
 			const editable = this.editableColumnsForRow(rowIndex);
 			if (editable.length === 0) return;
 			this.committedThisSession = false;
@@ -3214,6 +3563,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				draft[ec.colId] = orig ? orig[ec.field] : null;
 			}
 			this._rowDraft.value = draft;
+			this.rowDraftSync = draft;
 			this._editingRowIndex.value = rowIndex;
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
@@ -3231,7 +3581,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const r = (this._rows.value || [])[rowIndex];
 			const rowOriginal = r ? r.original : null;
 			const rowId = r ? r.id : null;
-			const draft = this._rowDraft.value || {};
+			const draft = this.rowDraftSync || {};
 			for (let i = 0; i < editable.length; i++) {
 				const ec = editable[i];
 				const err = this.runValidator(ec.colId, this.coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
@@ -3344,6 +3694,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.editTransition = false;
 		this.pendingEditFollow = null;
 		this.committedThisSession = false;
+		this.rowDraftSync = {};
+		this.dropinTabFlush = null;
 		this.inRowEdit = () => this._editingRowIndex.value != null;
 		this.editorValueFor = (colId) => this.inRowEdit() ? this._rowDraft.value ? this._rowDraft.value[colId] : null : this._draftValue.value;
 		this.editorCheckedFor = (colId) => !!(this.inRowEdit() ? this._rowDraft.value ? this._rowDraft.value[colId] : null : this._draftValue.value);
@@ -3352,6 +3704,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.setRowDraft(colId, value);
 				return;
 			}
+			if (this.dropinTabFlush) {
+				this.dropinTabFlush.called = true;
+				if (this.commitEdit(value, true)) this.dropinTabFlush.committed = true;
+				return;
+			}
 			this.commitEdit(value);
 		};
 		this.editorCancelFor = () => () => {
@@ -3378,10 +3735,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._draftValue.value = v;
 		};
 		this.setRowDraft = (colId, value) => {
-			const src = this._rowDraft.value || {};
+			const src = this.rowDraftSync || {};
 			const next = {};
 			for (const k in src) next[k] = src[k];
 			next[colId] = value;
+			this.rowDraftSync = next;
 			this._rowDraft.value = next;
 		};
 		this.rowEditTab = (target, backward) => {
@@ -3436,6 +3794,56 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.cancelEdit();
 			}
 		};
+		this.onEditorDropinKeyDown = (e) => {
+			if (!e) return;
+			const key = e.key;
+			if (this.inRowEdit()) {
+				if (key === "Enter") {
+					e.preventDefault();
+					this.commitRow();
+					return;
+				}
+				if (key === "Escape") {
+					e.preventDefault();
+					this.cancelRow();
+					return;
+				}
+				if (key === "Tab") {
+					e.preventDefault();
+					this.rowEditTab(e.target, e.shiftKey);
+					return;
+				}
+				return;
+			}
+			if (key !== "Tab" || e.defaultPrevented) return;
+			e.preventDefault();
+			const fromRow = this._editingRow.value;
+			const fromCol = this._editingCol.value;
+			const target = e.shiftKey ? this.prevEditableCell(fromRow, fromCol) : this.nextEditableCell(fromRow, fromCol);
+			const el = e.target;
+			const ownCell = el && el.closest ? el.closest("[data-grid-cell]") : null;
+			const flush = {
+				called: false,
+				committed: false
+			};
+			this.dropinTabFlush = flush;
+			if (ownCell && ownCell.focus) ownCell.focus();
+			else if (el && el.blur) el.blur();
+			this.dropinTabFlush = null;
+			if (!flush.called) {
+				this.onEditorKeyDown(e);
+				return;
+			}
+			if (!flush.committed) {
+				if (el && el.focus) el.focus();
+				return;
+			}
+			if (target) {
+				this._activeRow.value = target.row;
+				this._activeColIndex.value = target.col;
+				this.beginEdit(target.row, target.col, null);
+			} else this.focusCellWhenReady(fromRow, fromCol);
+		};
 		this.onEditorBlur = (e) => {
 			if (this.inRowEdit()) {
 				if (this.editTransition) return;
@@ -3448,13 +3856,20 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 			if (this._editingRow.value < 0 || this.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 (!this.outsidePointerDown) return;
+				this.outsidePointerDown = false;
+				if (!fromCell) return;
+				if (fromCell.getAttribute("data-row") !== String(this._editingRow.value) || fromCell.getAttribute("data-col-index") !== String(this._editingCol.value)) return;
+				this.commitEdit(void 0, true);
+				return;
+			}
 			if (!(this.gridRoot && this.gridRoot.contains && this.gridRoot.contains(next))) {
 				this.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");
@@ -3633,32 +4048,30 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.styles = css`
 :host{display:contents}
 :host {
-  --rdt-font: var(--rozie-data-table-font);
-  --rdt-color: var(--rozie-data-table-fg);
-  --rdt-cell-padding: var(--rozie-data-table-cell-padding);
-  --rdt-border: 1px solid var(--rozie-data-table-border-color);
-  --rdt-header-bg: var(--rozie-data-table-header-bg);
-  --rdt-header-weight: var(--rozie-data-table-header-weight);
-  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
-  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-filter-radius: var(--rozie-data-table-radius);
-  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-page-btn-radius: var(--rozie-data-table-radius);
-  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
-  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-page-size-radius: var(--rozie-data-table-radius);
-  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
-  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
-  --rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-pin-btn-radius: var(--rozie-data-table-radius);
-  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
-  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
-  --rdt-colvis-summary-radius: var(--rozie-data-table-radius);
-  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
-  --rdt-colvis-menu-radius: var(--rozie-data-table-radius);
-  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
-  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
-  --rdt-select-accent: var(--rozie-data-table-select-accent);
+  --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;
@@ -3794,6 +4207,16 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
   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);
@@ -3832,6 +4255,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 .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));
@@ -3951,6 +4377,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 .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);
@@ -3989,6 +4418,51 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
   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;
@@ -4052,6 +4526,17 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				update();
 			}
 		}
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot[name=\"placeholder\"]");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotPlaceholder = this._slotPlaceholderElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
 		{
 			const slotEl = this.shadowRoot?.querySelector("slot[name=\"selectCell\"]");
 			if (slotEl !== null && slotEl !== void 0) {
@@ -4147,6 +4632,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this._hasSlotSelectAll = Array.from(this.children).some((el) => el.getAttribute("slot") === "selectAll");
 		this._hasSlotDynamicColHeader = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
 		this._hasSlotDynamicFilter = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
+		this._hasSlotPlaceholder = Array.from(this.children).some((el) => el.getAttribute("slot") === "placeholder");
 		this._hasSlotSelectCell = Array.from(this.children).some((el) => el.getAttribute("slot") === "selectCell");
 		this._hasSlotDynamicCell = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
 		this._hasSlotDynamicEditor = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
@@ -4164,12 +4650,22 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 	firstUpdated() {
 		this._armListeners();
 		this._disconnectCleanups.push(effect(() => {
-			this.sorting, this.globalFilter, this.columnFilters, this.pagination, this.rowCount, this.pageCount, this.rowSelection, this.expanded, this.expandable, this.grouping, this.groupable, this.columnVisibility, this.columnSizing, this.columnOrder, this.columnPinning, this.selectionMode, (this.data || []).length, this.data, this._dataDefault.value, this.columns, this._colReg.value;
+			this._windowVer.value;
 			untracked(() => {
 				if (this.__rozieWatchInitial_0) {
 					this.__rozieWatchInitial_0 = false;
 					return;
 				}
+				this.emitVisibleRangeIfChanged();
+			});
+		}));
+		this._disconnectCleanups.push(effect(() => {
+			this.sorting, this.globalFilter, this.columnFilters, this.pagination, this.rowCount, this.pageCount, this.rowSelection, this.expanded, this.expandable, this.grouping, this.groupable, this.columnVisibility, this.columnSizing, this.columnOrder, this.columnPinning, this.selectionMode, (this.data || []).length, this.data, this._dataDefault.value, this.columns, this._colReg.value;
+			untracked(() => {
+				if (this.__rozieWatchInitial_1) {
+					this.__rozieWatchInitial_1 = false;
+					return;
+				}
 				(() => {
 					this.seedColumnPinning();
 					this.reFeed();
@@ -4180,8 +4676,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this._disconnectCleanups.push(effect(() => {
 			this.sorting, this.columnFilters, this.globalFilter, this._sortingDefault.value, this._columnFiltersDefault.value, this._globalFilterDefault.value;
 			untracked(() => {
-				if (this.__rozieWatchInitial_1) {
-					this.__rozieWatchInitial_1 = false;
+				if (this.__rozieWatchInitial_2) {
+					this.__rozieWatchInitial_2 = false;
 					return;
 				}
 				(() => {
@@ -4197,6 +4693,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					if (id == null) return;
 					const key = String(id);
 					if (key === "__proto__" || key === "constructor" || key === "prototype") return;
+					const prev = __rozieCtxHost._colReg.value ? __rozieCtxHost._colReg.value[key] : void 0;
+					if (prev !== void 0 && columnSpecsEquivalent(prev, spec)) return;
 					__rozieCtxHost._colReg.value = {
 						...__rozieCtxHost._colReg.value,
 						[key]: spec
@@ -4213,7 +4711,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this._dataDefault.value = this.data || [];
 		this.seedColumnPinning();
 		this.table = createTable({
-			data: this.currentData(),
+			data: this.feedData(),
 			columns: this.tableColumns(),
 			state: this.currentState(),
 			getCoreRowModel: getCoreRowModel(),
@@ -4222,7 +4720,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			getPaginationRowModel: getPaginationRowModel(),
 			getExpandedRowModel: getExpandedRowModel(),
 			getSubRows: this.getSubRows || void 0,
-			getRowCanExpand: this.expandable === true && this.getSubRows == null ? () => true : void 0,
+			getRowId: this.rowIdOption(),
+			getRowCanExpand: this.expandable === true && this.getSubRows == null ? (row) => !this.rowIsLazyPlaceholder(row) : void 0,
 			onExpandedChange: this.onExpandedChangeCb,
 			autoResetExpanded: false,
 			getGroupedRowModel: getGroupedRowModel(),
@@ -4235,7 +4734,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			manualSorting: this.manual === true,
 			rowCount: this.rowCount ?? void 0,
 			pageCount: this.pageCount ?? void 0,
-			enableRowSelection: this.selectionMode !== "none",
+			enableRowSelection: this.rowSelectionOption(),
 			enableMultiRowSelection: this.selectionMode === "multiple",
 			onSortingChange: this.onSortingChangeCb,
 			onGlobalFilterChange: this.onGlobalFilterChangeCb,
@@ -4260,6 +4759,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._headerGroups.value = nextGroups;
 			this._rowModelVer.value = this._rowModelVer.value + 1;
 			if (this.rowsWindowed() && this.virtualizer) {
+				this.migratePlaceholderSizeCache();
 				this.virtualizer.setOptions(this.virtualizerOptions());
 				this.virtualizer._willUpdate();
 			}
@@ -4285,6 +4785,18 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.refreshRowModel();
 		this.gridRoot = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector(".rozie-data-table") : null;
+		if (typeof document !== "undefined") {
+			this.docPointerDown = (ev) => {
+				if (!this.gridRoot) {
+					this.outsidePointerDown = false;
+					return;
+				}
+				const path = ev && typeof ev.composedPath === "function" ? ev.composedPath() : null;
+				const inside = path ? path.indexOf(this.gridRoot) !== -1 : !!(ev && ev.target && this.gridRoot.contains && this.gridRoot.contains(ev.target));
+				this.outsidePointerDown = !inside;
+			};
+			document.addEventListener("pointerdown", this.docPointerDown, true);
+		}
 		if (this.isWindowed()) this.gridScrollEl = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector(".rdt-scroll") : null;
 		if (this.rowsWindowed()) {
 			this.virtualizer = new Virtualizer(this.virtualizerOptions());
@@ -4318,6 +4830,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 	}
 	updated(changedProperties) {
 		this.maybeClearHistoryOnExternalSwap();
+		this.emitVisibleRangeIfChanged();
+		this.remeasureColumnSizes();
 		if (!this.table) return;
 		const d = this.currentData() || [];
 		if (d === this.lastData && d.length === this.lastDataLen) return;
@@ -4356,7 +4870,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 
 <div class="rdt-column-defs" style="display:none" aria-hidden="true" data-rozie-s-d5dcab4c><slot></slot></div>
 
-${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._invalidMsg.value}</div>` : nothing}${!!this._pasteAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-paste" data-testid="paste-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._pasteAnnounce.value}</div>` : nothing}${!!this._liveAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-sortfilter" data-testid="sortfilter-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._liveAnnounce.value}</div>` : nothing}<div class="rdt-toolbar" data-rozie-s-d5dcab4c>
+${!!this._invalidMsg.value ? html`<div class="rdt-sr-live" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._invalidMsg.value}</div>` : nothing}${!!this._pasteAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-paste" data-testid="paste-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._pasteAnnounce.value}</div>` : nothing}${!!this._rangeAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-range" data-testid="range-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._rangeAnnounce.value}</div>` : nothing}${!!this._liveAnnounce.value ? html`<div class="rdt-sr-live rdt-sr-sortfilter" data-testid="sortfilter-announce" role="status" aria-live="polite" aria-atomic="true" data-rozie-s-d5dcab4c>${this._liveAnnounce.value}</div>` : nothing}<div class="rdt-toolbar" data-rozie-s-d5dcab4c>
   <input class="rdt-global-filter" type="text" role="searchbox" aria-label="Search table" .value=${this.globalFilterValue()} @input=${($event) => {
 			this.onGlobalFilterInput($event);
 		}} data-rozie-s-d5dcab4c />
@@ -4397,7 +4911,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rozie-data-table": true,
 			"rdt-sticky": this.stickyHeader,
 			"rdt-col-windowed": this.colsWindowed()
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event) => {
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} aria-colcount=${rozieAttr(this.gridAriaColCount())} @keydown=${($event) => {
 			this.onGridKeyDown($event);
 		}} @focusin=${($event) => {
 			this.syncActiveFromEvent($event);
@@ -4417,9 +4931,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rdt-th": true,
 			"rdt-select-th": this.isSelectColumn(wh.header.column.id),
 			"rdt-expander-th": this.isExpanderColumn(wh.header.column.id),
+			"rdt-pinned": this.columnPinSide(wh.header.column.id) !== "",
 			"rdt-th-resizing": this.columnIsResizing(wh.header.column.id),
 			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, wh.header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" 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(this.headerColIndexOf(hg, wh.header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, wh.header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(wh.header.column.id))} style=${rozieStyle(this.thStyle(wh.header))} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" 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(this.headerColIndexOf(hg, wh.header))} aria-colindex=${rozieAttr(this.headerLeafStart(hg, wh.header) + 1)} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, wh.header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(wh.header.column.id))} style=${rozieStyle(this.thStyle(wh.header, wh.width))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectAll !== void 0 ? this.selectAll({
 			checked: this.isAllRowsSelected(),
@@ -4535,7 +5050,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
       ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}</tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}${repeat(this.windowedHeadersFor(this._headerGroups.value[this._headerGroups.value.length - 1], this._headerGroups.value.length - 1), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="rdt-filter-cell" role="presentation" data-col=${rozieAttr(wh.header.column.id)} style=${rozieStyle(this.pinStyle(wh.header.column.id))} data-rozie-s-d5dcab4c>
+      ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}${repeat(this.windowedHeadersFor(this._headerGroups.value[this._headerGroups.value.length - 1], this._headerGroups.value.length - 1), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="${Object.entries({
+			"rdt-filter-cell": true,
+			"rdt-pinned": this.columnPinSide(wh.header.column.id) !== ""
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="presentation" data-col=${rozieAttr(wh.header.column.id)} style=${rozieStyle(this.pinStyle(wh.header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
             ${this.rozieSlots?.[`filter-${wh.header.column.id}`] !== void 0 ? this.rozieSlots?.[`filter-${wh.header.column.id}`]({
@@ -4543,6 +5061,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			value: this.columnFilterValue(wh.header.column.id),
 			uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
 			minMax: this.getFacetedMinMaxValues(wh.header.column.id),
+			columnLabel: this.headerLabel(wh.header.column.id),
 			setFilter: this.setColumnFilter
 		}) : html`<slot name="${`filter-${wh.header.column.id}`}" data-rozie-params=${(() => {
 			try {
@@ -4550,7 +5069,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					columnId: wh.header.column.id,
 					value: this.columnFilterValue(wh.header.column.id),
 					uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
-					minMax: this.getFacetedMinMaxValues(wh.header.column.id)
+					minMax: this.getFacetedMinMaxValues(wh.header.column.id),
+					columnLabel: this.headerLabel(wh.header.column.id)
 				});
 			} catch {
 				return "{}";
@@ -4561,6 +5081,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			value: this.columnFilterValue(wh.header.column.id),
 			uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
 			minMax: this.getFacetedMinMaxValues(wh.header.column.id),
+			columnLabel: this.headerLabel(wh.header.column.id),
 			setFilter: this.setColumnFilter
 		}) : html`<slot name="filter" data-rozie-params=${(() => {
 			try {
@@ -4568,7 +5089,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					columnId: wh.header.column.id,
 					value: this.columnFilterValue(wh.header.column.id),
 					uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
-					minMax: this.getFacetedMinMaxValues(wh.header.column.id)
+					minMax: this.getFacetedMinMaxValues(wh.header.column.id),
+					columnLabel: this.headerLabel(wh.header.column.id)
 				});
 			} catch {
 				return "{}";
@@ -4594,18 +5116,40 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     <tr class="${Object.entries({
 			"rdt-tr": true,
 			"rdt-group-header": this.rowIsGrouped(wr.row),
-			"rdt-row-pinned": wr.pinned
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="row" data-row=${rozieAttr(wr.vi.index)} aria-rowindex=${rozieAttr(this.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(this.rowIsGrouped(wr.row) ? wr.row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(wr.row) ? wr.row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(wr.row) ? !!this.rowIsExpanded(wr.row) : null)} aria-selected=${rozieAttr(this.selectionMode !== "none" ? !!this.rowIsSelected(wr.row) : null)} aria-level=${rozieAttr(this.groupingActive() ? wr.row.depth + 1 : null)} data-rozie-s-d5dcab4c>
+			"rdt-row-pinned": wr.pinned,
+			"rdt-placeholder-row": this.rowIsLazyPlaceholder(wr.row)
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="row" data-row=${rozieAttr(wr.vi.index)} aria-rowindex=${rozieAttr(this.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(this.rowIsGrouped(wr.row) ? wr.row.id : null)} data-group-leaf=${rozieAttr(this.groupingActive() && !this.rowIsGrouped(wr.row) ? wr.row.id : null)} aria-expanded=${rozieAttr(this.rowIsGrouped(wr.row) ? !!this.rowIsExpanded(wr.row) : null)} aria-selected=${rozieAttr(this.selectionMode !== "none" ? !!this.rowIsSelected(wr.row) : null)} aria-level=${rozieAttr(this.groupingActive() ? wr.row.depth + 1 : null)} aria-busy=${rozieAttr(this.rowIsLazyPlaceholder(wr.row) ? "true" : null)} data-rozie-s-d5dcab4c>
       
       ${this.colsWindowed() ? html`<td class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></td>` : nothing}${repeat(this.windowedCells(wr.row), (cell, _idx) => cell.id, (cell, _idx) => html`<td class="${Object.entries({
 			"rdt-td": true,
 			"rdt-select-td": this.isSelectColumn(cell.column.id),
 			"rdt-expander-td": this.isExpanderColumn(cell.column.id),
+			"rdt-pinned": this.columnPinSide(cell.column.id) !== "",
 			"rdt-in-range": this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)),
 			"rdt-cell-active": this.isActiveCell(String(wr.vi.index), this.colIndexOf(wr.row, cell))
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(wr.vi.index)} data-col-index=${rozieAttr(this.colIndexOf(wr.row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(wr.vi.index), this.colIndexOf(wr.row, cell)))} style=${rozieStyle(this.bodyCellStyle(wr.row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(wr.vi.index, this.colIndexOf(wr.row, cell)))} aria-colindex=${rozieAttr(this.colIndexOf(wr.row, cell) + 1)} aria-selected=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-in-range=${rozieAttr(this.inRange(wr.vi.index, this.colIndexOf(wr.row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
-        ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+        
+        ${this.rowIsLazyPlaceholder(wr.row) && this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+          
+          <input class="rdt-select-placeholder" type="checkbox" disabled="" tabindex="-1" aria-hidden="true" style="visibility:hidden" data-rozie-s-d5dcab4c />
+        </span>` : this.rowIsLazyPlaceholder(wr.row) && this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.rowIsLazyPlaceholder(wr.row) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+          ${this.placeholder !== void 0 ? this.placeholder({
+			index: wr.vi.index,
+			columnId: cell.column.id
+		}) : html`<slot name="placeholder" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					index: wr.vi.index,
+					columnId: cell.column.id
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+            <span class="rdt-skeleton" aria-hidden="true" data-rozie-s-d5dcab4c>&#8203;</span>
+          </slot>`}
+        </span>` : this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(wr.row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? "Collapse row" : "Expand row")} @click=${($event) => {
 			this.onToggleExpand(wr.row, $event);
 		}} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(wr.row) ? "▾" : "▸")}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -4670,27 +5214,29 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           </span>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay("(" + this.groupSubRowCount(wr.row) + ")")}</span>
         </span>` : this.isEditing(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.editorTypeOf(cell.column.id) === "number" ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+          ${this.editorTypeOf(cell.column.id) === "number" ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @change=${($event) => {
+		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} .value=${this.editorValueFor(cell.column.id)} @change=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
 		}} data-rozie-s-d5dcab4c>
-            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
-          </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
+            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} ?selected=${opt.value === this.editorValueFor(cell.column.id)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+          </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
 			this.onCellEditorCheckbox(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "custom" ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "custom" ? html`<span style="display:contents" @keydown=${($event) => {
+			this.onEditorDropinKeyDown($event);
+		}} data-rozie-s-d5dcab4c>
             ${this.rozieSlots?.[`editor-${cell.column.id}`] !== void 0 ? this.rozieSlots?.[`editor-${cell.column.id}`]({
 			columnId: cell.column.id,
 			column: cell.column,
@@ -4698,6 +5244,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
+			columnLabel: this.headerLabel(cell.column.id),
 			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 		}) : html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => {
 			try {
@@ -4708,6 +5255,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
+					columnLabel: this.headerLabel(cell.column.id),
 					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 				});
 			} catch {
@@ -4721,6 +5269,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
+			columnLabel: this.headerLabel(cell.column.id),
 			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 		}) : html`<slot name="editor" data-rozie-params=${(() => {
 			try {
@@ -4731,13 +5280,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
+					columnLabel: this.headerLabel(cell.column.id),
 					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
 				});
 			} catch {
 				return "{}";
 			}
 		})()}>
-                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
@@ -4746,7 +5296,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 		}} data-rozie-s-d5dcab4c />
               </slot>`}
             </slot>`}
-          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
@@ -4814,7 +5364,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 </div>` : html`<table class="${Object.entries({
 			"rozie-data-table": true,
 			"rdt-sticky": this.stickyHeader
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} @keydown=${($event) => {
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} aria-colcount=${rozieAttr(this.gridAriaColCount())} @keydown=${($event) => {
 			this.onGridKeyDown($event);
 		}} @focusin=${($event) => {
 			this.syncActiveFromEvent($event);
@@ -4833,9 +5383,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rdt-th": true,
 			"rdt-select-th": this.isSelectColumn(header.column.id),
 			"rdt-expander-th": this.isExpanderColumn(header.column.id),
+			"rdt-pinned": this.columnPinSide(header.column.id) !== "",
 			"rdt-th-resizing": this.columnIsResizing(header.column.id),
 			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" 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(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header))} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" 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(this.headerColIndexOf(hg, header))} aria-colindex=${rozieAttr(this.headerLeafStart(hg, header) + 1)} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header))} data-rozie-s-d5dcab4c>
         
         
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -4956,7 +5507,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     </tr>`)}
     
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
-      ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
+      ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="${Object.entries({
+			"rdt-filter-cell": true,
+			"rdt-pinned": this.columnPinSide(header.column.id) !== ""
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
             ${this.rozieSlots?.[`filter-${header.column.id}`] !== void 0 ? this.rozieSlots?.[`filter-${header.column.id}`]({
@@ -4964,6 +5518,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			value: this.columnFilterValue(header.column.id),
 			uniqueValues: this.getFacetedUniqueValues(header.column.id),
 			minMax: this.getFacetedMinMaxValues(header.column.id),
+			columnLabel: this.headerLabel(header.column.id),
 			setFilter: this.setColumnFilter
 		}) : html`<slot name="${`filter-${header.column.id}`}" data-rozie-params=${(() => {
 			try {
@@ -4971,7 +5526,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					columnId: header.column.id,
 					value: this.columnFilterValue(header.column.id),
 					uniqueValues: this.getFacetedUniqueValues(header.column.id),
-					minMax: this.getFacetedMinMaxValues(header.column.id)
+					minMax: this.getFacetedMinMaxValues(header.column.id),
+					columnLabel: this.headerLabel(header.column.id)
 				});
 			} catch {
 				return "{}";
@@ -4982,6 +5538,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			value: this.columnFilterValue(header.column.id),
 			uniqueValues: this.getFacetedUniqueValues(header.column.id),
 			minMax: this.getFacetedMinMaxValues(header.column.id),
+			columnLabel: this.headerLabel(header.column.id),
 			setFilter: this.setColumnFilter
 		}) : html`<slot name="filter" data-rozie-params=${(() => {
 			try {
@@ -4989,7 +5546,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					columnId: header.column.id,
 					value: this.columnFilterValue(header.column.id),
 					uniqueValues: this.getFacetedUniqueValues(header.column.id),
-					minMax: this.getFacetedMinMaxValues(header.column.id)
+					minMax: this.getFacetedMinMaxValues(header.column.id),
+					columnLabel: this.headerLabel(header.column.id)
 				});
 			} catch {
 				return "{}";
@@ -5016,9 +5574,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rdt-td": true,
 			"rdt-select-td": this.isSelectColumn(cell.column.id),
 			"rdt-expander-td": this.isExpanderColumn(cell.column.id),
+			"rdt-pinned": this.columnPinSide(cell.column.id) !== "",
 			"rdt-in-range": this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)),
 			"rdt-cell-active": this.isActiveCell(String(this.rowIndexOf(row)), this.colIndexOf(row, cell))
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.cellRole())} data-col=${rozieAttr(cell.column.id)} data-grid-cell="" data-row=${rozieAttr(this.rowIndexOf(row))} data-col-index=${rozieAttr(this.colIndexOf(row, cell))} tabindex=${rozieAttr(this.cellTabindex(String(this.rowIndexOf(row)), this.colIndexOf(row, cell)))} style=${rozieStyle(this.bodyCellStyle(row, cell.column.id))} aria-invalid=${rozieAttr(this.cellAriaInvalid(this.rowIndexOf(row), this.colIndexOf(row, cell)))} aria-colindex=${rozieAttr(this.colIndexOf(row, cell) + 1)} aria-selected=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-in-range=${rozieAttr(this.inRange(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? "true" : null)} data-agg-cell=${rozieAttr(this.cellIsAggregated(cell) ? cell.column.id : null)} data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? "Collapse row" : "Expand row")} @click=${($event) => {
@@ -5085,27 +5644,29 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           </span>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay("(" + this.groupSubRowCount(row) + ")")}</span>
         </span>` : this.isEditing(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.editorTypeOf(cell.column.id) === "number" ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+          ${this.editorTypeOf(cell.column.id) === "number" ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @change=${($event) => {
+		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} .value=${this.editorValueFor(cell.column.id)} @change=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
 		}} data-rozie-s-d5dcab4c>
-            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
-          </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
+            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} ?selected=${opt.value === this.editorValueFor(cell.column.id)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+          </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
 			this.onCellEditorCheckbox(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "custom" ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "custom" ? html`<span style="display:contents" @keydown=${($event) => {
+			this.onEditorDropinKeyDown($event);
+		}} data-rozie-s-d5dcab4c>
             ${this.rozieSlots?.[`editor-${cell.column.id}`] !== void 0 ? this.rozieSlots?.[`editor-${cell.column.id}`]({
 			columnId: cell.column.id,
 			column: cell.column,
@@ -5113,6 +5674,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
+			columnLabel: this.headerLabel(cell.column.id),
 			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 		}) : html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => {
 			try {
@@ -5123,6 +5685,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
+					columnLabel: this.headerLabel(cell.column.id),
 					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 				});
 			} catch {
@@ -5136,6 +5699,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
+			columnLabel: this.headerLabel(cell.column.id),
 			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 		}) : html`<slot name="editor" data-rozie-params=${(() => {
 			try {
@@ -5146,13 +5710,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
+					columnLabel: this.headerLabel(cell.column.id),
 					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
 				});
 			} catch {
 				return "{}";
 			}
 		})()}>
-                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
@@ -5161,7 +5726,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 		}} data-rozie-s-d5dcab4c />
               </slot>`}
             </slot>`}
-          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" aria-invalid=${rozieAttr(this._invalidMsg.value ? "true" : null)} .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
@@ -5233,10 +5798,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   <select class="rdt-page-size" aria-label="Rows per page" .value=${this.pageSize()} @change=${($event) => {
 			this.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>
+    <option value=${10} ?selected=${10 === this.pageSize()} data-rozie-s-d5dcab4c>10</option>
+    <option value=${25} ?selected=${25 === this.pageSize()} data-rozie-s-d5dcab4c>25</option>
+    <option value=${50} ?selected=${50 === this.pageSize()} data-rozie-s-d5dcab4c>50</option>
+    <option value=${100} ?selected=${100 === this.pageSize()} data-rozie-s-d5dcab4c>100</option>
   </select>
 </div>` : nothing}</div>
 `;
@@ -5359,6 +5924,7 @@ __decorate([property({
 	type: Object,
 	attribute: "expanded"
 })], DataTable.prototype, "_expanded_attr", void 0);
+__decorate([property({ type: Function })], DataTable.prototype, "getRowId", void 0);
 __decorate([property({ type: Function })], DataTable.prototype, "getSubRows", void 0);
 __decorate([property({
 	type: Boolean,
@@ -5440,6 +6006,12 @@ __decorate([state()], DataTable.prototype, "_hasSlotDynamicColHeader", void 0);
 __decorate([queryAssignedElements({ flatten: true })], DataTable.prototype, "_slotDynamicColHeaderElements", void 0);
 __decorate([state()], DataTable.prototype, "_hasSlotDynamicFilter", void 0);
 __decorate([queryAssignedElements({ flatten: true })], DataTable.prototype, "_slotDynamicFilterElements", void 0);
+__decorate([state()], DataTable.prototype, "_hasSlotPlaceholder", void 0);
+__decorate([queryAssignedElements({
+	slot: "placeholder",
+	flatten: true
+})], DataTable.prototype, "_slotPlaceholderElements", void 0);
+__decorate([property({ attribute: false })], DataTable.prototype, "placeholder", void 0);
 __decorate([state()], DataTable.prototype, "_hasSlotSelectCell", void 0);
 __decorate([queryAssignedElements({
 	slot: "selectCell",
@@ -5637,15 +6209,19 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 		this.commit = null;
 		this.cancel = null;
 		this.autofocus = false;
+		this.columnLabel = "";
 		this._draft = signal("");
+		this._touched = signal(false);
 		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
+		this.draftValue = () => this._touched.value ? this._draft.value : this.value != null ? String(this.value) : "";
 		this.onInput = (e) => {
 			this._draft.value = e && e.target ? e.target.value : "";
+			this._touched.value = true;
 		};
 		this.doCommit = () => {
-			this.commit && this.commit(this._draft.value);
+			this.commit && this.commit(this.draftValue());
 		};
 		this.doCancel = () => {
 			this.cancel && this.cancel();
@@ -5662,6 +6238,10 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 		this.onBlur = () => {
 			this.doCommit();
 		};
+		this.a11yLabel = () => {
+			if (typeof this.columnLabel === "string" && this.columnLabel !== "") return this.columnLabel;
+			return this.columnId;
+		};
 	}
 	static {
 		this.styles = css`
@@ -5669,7 +6249,6 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 `;
 	}
 	firstUpdated() {
-		this._draft.value = this.value != null ? String(this.value) : "";
 		if (this.autofocus) this._refInputEl?.focus();
 	}
 	updated(changedProperties) {
@@ -5689,7 +6268,7 @@ let EditorText = class EditorText extends SignalWatcher(LitElement) {
 	}
 	render() {
 		return html`
-<input class="rdt-cell-editor" type="text" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event) => {
+<input class="rdt-cell-editor" type="text" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @input=${($event) => {
 			this.onInput($event);
 		}} @keydown=${($event) => {
 			this.onKeydown($event);
@@ -5712,6 +6291,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], EditorText.prototype, "autofocus", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], EditorText.prototype, "columnLabel", void 0);
 __decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorText.prototype, "_refInputEl", void 0);
 EditorText = __decorate([customElement("rozie-editor-text")], EditorText);
 var EditorText_default = EditorText;
@@ -5726,15 +6309,21 @@ let EditorNumber = class EditorNumber extends SignalWatcher(LitElement) {
 		this.value = null;
 		this.commit = null;
 		this.cancel = null;
+		this.autofocus = false;
+		this.columnLabel = "";
 		this._draft = signal("");
+		this._touched = signal(false);
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
+		this.draftValue = () => this._touched.value ? this._draft.value : this.value != null ? String(this.value) : "";
 		this.onInput = (e) => {
 			this._draft.value = e && e.target ? e.target.value : "";
+			this._touched.value = true;
 		};
 		this.doCommit = () => {
 			if (!this.commit) return;
-			const raw = this._draft.value;
+			const raw = this.draftValue();
 			if (raw == null || String(raw).trim() === "") {
 				this.commit(null);
 				return;
@@ -5757,6 +6346,10 @@ let EditorNumber = class EditorNumber extends SignalWatcher(LitElement) {
 		this.onBlur = () => {
 			this.doCommit();
 		};
+		this.a11yLabel = () => {
+			if (typeof this.columnLabel === "string" && this.columnLabel !== "") return this.columnLabel;
+			return this.columnId;
+		};
 	}
 	static {
 		this.styles = css`
@@ -5764,7 +6357,13 @@ let EditorNumber = class EditorNumber extends SignalWatcher(LitElement) {
 `;
 	}
 	firstUpdated() {
-		this._draft.value = this.value != null ? String(this.value) : "";
+		if (this.autofocus) this._refInputEl?.focus();
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("autofocus")) ((v) => {
+			if (v) this._refInputEl?.focus();
+		})(this.autofocus);
+		this.__rozieFirstUpdateDone = true;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -5777,13 +6376,13 @@ let EditorNumber = class EditorNumber extends SignalWatcher(LitElement) {
 	}
 	render() {
 		return html`
-<input class="rdt-cell-editor" type="number" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event) => {
+<input class="rdt-cell-editor" type="number" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @input=${($event) => {
 			this.onInput($event);
 		}} @keydown=${($event) => {
 			this.onKeydown($event);
 		}} @blur=${($event) => {
 			this.onBlur();
-		}} data-rozie-s-b2792b32 />
+		}} data-rozie-ref="inputEl" data-rozie-s-b2792b32 />
 `;
 	}
 };
@@ -5796,6 +6395,15 @@ __decorate([property({ type: Object })], EditorNumber.prototype, "row", void 0);
 __decorate([property({ type: Object })], EditorNumber.prototype, "value", void 0);
 __decorate([property({ type: Function })], EditorNumber.prototype, "commit", void 0);
 __decorate([property({ type: Function })], EditorNumber.prototype, "cancel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], EditorNumber.prototype, "autofocus", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], EditorNumber.prototype, "columnLabel", void 0);
+__decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorNumber.prototype, "_refInputEl", void 0);
 EditorNumber = __decorate([customElement("rozie-editor-number")], EditorNumber);
 var EditorNumber_default = EditorNumber;
 //#endregion
@@ -5810,14 +6418,20 @@ let EditorSelect = class EditorSelect extends SignalWatcher(LitElement) {
 		this.commit = null;
 		this.cancel = null;
 		this.options = [];
+		this.autofocus = false;
+		this.columnLabel = "";
 		this._draft = signal("");
+		this._touched = signal(false);
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
+		this.draftValue = () => this._touched.value ? this._draft.value : this.value != null ? String(this.value) : "";
 		this.onChange = (e) => {
 			this._draft.value = e && e.target ? e.target.value : "";
+			this._touched.value = true;
 		};
 		this.doCommit = () => {
-			this.commit && this.commit(this._draft.value);
+			this.commit && this.commit(this.draftValue());
 		};
 		this.doCancel = () => {
 			this.cancel && this.cancel();
@@ -5834,6 +6448,10 @@ let EditorSelect = class EditorSelect extends SignalWatcher(LitElement) {
 		this.onBlur = () => {
 			this.doCommit();
 		};
+		this.a11yLabel = () => {
+			if (typeof this.columnLabel === "string" && this.columnLabel !== "") return this.columnLabel;
+			return this.columnId;
+		};
 	}
 	static {
 		this.styles = css`
@@ -5841,7 +6459,13 @@ let EditorSelect = class EditorSelect extends SignalWatcher(LitElement) {
 `;
 	}
 	firstUpdated() {
-		this._draft.value = this.value != null ? String(this.value) : "";
+		if (this.autofocus) this._refSelectEl?.focus();
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("autofocus")) ((v) => {
+			if (v) this._refSelectEl?.focus();
+		})(this.autofocus);
+		this.__rozieFirstUpdateDone = true;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -5854,14 +6478,14 @@ let EditorSelect = class EditorSelect extends SignalWatcher(LitElement) {
 	}
 	render() {
 		return html`
-<select class="rdt-cell-editor" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @change=${($event) => {
+<select class="rdt-cell-editor" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @change=${($event) => {
 			this.onChange($event);
 		}} @keydown=${($event) => {
 			this.onKeydown($event);
 		}} @blur=${($event) => {
 			this.onBlur();
-		}} data-rozie-s-117f1a16>
-  ${repeat(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
+		}} data-rozie-ref="selectEl" data-rozie-s-117f1a16>
+  ${repeat(this.options, (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} ?selected=${opt.value === this.draftValue()} data-rozie-s-117f1a16>${rozieDisplay(opt.label)}</option>`)}
 </select>
 `;
 	}
@@ -5876,6 +6500,15 @@ __decorate([property({ type: Object })], EditorSelect.prototype, "value", void 0
 __decorate([property({ type: Function })], EditorSelect.prototype, "commit", void 0);
 __decorate([property({ type: Function })], EditorSelect.prototype, "cancel", void 0);
 __decorate([property({ type: Array })], EditorSelect.prototype, "options", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], EditorSelect.prototype, "autofocus", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], EditorSelect.prototype, "columnLabel", void 0);
+__decorate([query("[data-rozie-ref=\"selectEl\"]")], EditorSelect.prototype, "_refSelectEl", void 0);
 EditorSelect = __decorate([customElement("rozie-editor-select")], EditorSelect);
 var EditorSelect_default = EditorSelect;
 //#endregion
@@ -5889,6 +6522,9 @@ let EditorCheckbox = class EditorCheckbox extends SignalWatcher(LitElement) {
 		this.value = null;
 		this.commit = null;
 		this.cancel = null;
+		this.autofocus = false;
+		this.columnLabel = "";
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.onChange = (e) => {
@@ -5900,12 +6536,25 @@ let EditorCheckbox = class EditorCheckbox extends SignalWatcher(LitElement) {
 				this.cancel && this.cancel();
 			}
 		};
+		this.a11yLabel = () => {
+			if (typeof this.columnLabel === "string" && this.columnLabel !== "") return this.columnLabel;
+			return this.columnId;
+		};
 	}
 	static {
 		this.styles = css`
 :host{display:contents}
 `;
 	}
+	firstUpdated() {
+		if (this.autofocus) this._refInputEl?.focus();
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("autofocus")) ((v) => {
+			if (v) this._refInputEl?.focus();
+		})(this.autofocus);
+		this.__rozieFirstUpdateDone = true;
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		queueMicrotask(() => {
@@ -5917,11 +6566,11 @@ let EditorCheckbox = class EditorCheckbox extends SignalWatcher(LitElement) {
 	}
 	render() {
 		return html`
-<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" aria-label=${this.columnId} ?checked=${!!this.value} @change=${($event) => {
+<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} ?checked=${!!this.value} @change=${($event) => {
 			this.onChange($event);
 		}} @keydown=${($event) => {
 			this.onKeydown($event);
-		}} data-rozie-s-3d792482 />
+		}} data-rozie-ref="inputEl" data-rozie-s-3d792482 />
 `;
 	}
 };
@@ -5934,9 +6583,51 @@ __decorate([property({ type: Object })], EditorCheckbox.prototype, "row", void 0
 __decorate([property({ type: Object })], EditorCheckbox.prototype, "value", void 0);
 __decorate([property({ type: Function })], EditorCheckbox.prototype, "commit", void 0);
 __decorate([property({ type: Function })], EditorCheckbox.prototype, "cancel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], EditorCheckbox.prototype, "autofocus", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], EditorCheckbox.prototype, "columnLabel", void 0);
+__decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorCheckbox.prototype, "_refInputEl", void 0);
 EditorCheckbox = __decorate([customElement("rozie-editor-checkbox")], EditorCheckbox);
 var EditorCheckbox_default = EditorCheckbox;
 //#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.ts
 let EditorDate = class EditorDate extends SignalWatcher(LitElement) {
 	constructor(..._args) {
@@ -5947,20 +6638,27 @@ let EditorDate = class EditorDate extends SignalWatcher(LitElement) {
 		this.value = null;
 		this.commit = null;
 		this.cancel = null;
+		this.autofocus = false;
+		this.columnLabel = "";
 		this._draft = signal("");
+		this._touched = signal(false);
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
+		this.draftValue = () => this._touched.value ? this._draft.value : toIsoDateString(this.value);
 		this.onInput = (e) => {
 			this._draft.value = e && e.target ? e.target.value : "";
+			this._touched.value = true;
 		};
 		this.doCommit = () => {
-			this.commit && this.commit(this._draft.value);
+			this.commit && this.commit(this.draftValue());
 		};
 		this.doCancel = () => {
 			this.cancel && this.cancel();
 		};
 		this.onChange = (e) => {
 			this._draft.value = e && e.target ? e.target.value : "";
+			this._touched.value = true;
 		};
 		this.onKeydown = (e) => {
 			if (e && e.key === "Enter") {
@@ -5974,6 +6672,10 @@ let EditorDate = class EditorDate extends SignalWatcher(LitElement) {
 		this.onBlur = () => {
 			this.doCommit();
 		};
+		this.a11yLabel = () => {
+			if (typeof this.columnLabel === "string" && this.columnLabel !== "") return this.columnLabel;
+			return this.columnId;
+		};
 	}
 	static {
 		this.styles = css`
@@ -5981,7 +6683,13 @@ let EditorDate = class EditorDate extends SignalWatcher(LitElement) {
 `;
 	}
 	firstUpdated() {
-		this._draft.value = this.value != null ? String(this.value) : "";
+		if (this.autofocus) this._refInputEl?.focus();
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("autofocus")) ((v) => {
+			if (v) this._refInputEl?.focus();
+		})(this.autofocus);
+		this.__rozieFirstUpdateDone = true;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -5994,7 +6702,7 @@ let EditorDate = class EditorDate extends SignalWatcher(LitElement) {
 	}
 	render() {
 		return html`
-<input class="rdt-cell-editor" type="date" data-editing-cell="" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event) => {
+<input class="rdt-cell-editor" type="date" data-editing-cell="" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @input=${($event) => {
 			this.onInput($event);
 		}} @change=${($event) => {
 			this.onChange($event);
@@ -6002,7 +6710,7 @@ let EditorDate = class EditorDate extends SignalWatcher(LitElement) {
 			this.onKeydown($event);
 		}} @blur=${($event) => {
 			this.onBlur();
-		}} data-rozie-s-7abe1a56 />
+		}} data-rozie-ref="inputEl" data-rozie-s-7abe1a56 />
 `;
 	}
 };
@@ -6015,6 +6723,15 @@ __decorate([property({ type: Object })], EditorDate.prototype, "row", void 0);
 __decorate([property({ type: Object })], EditorDate.prototype, "value", void 0);
 __decorate([property({ type: Function })], EditorDate.prototype, "commit", void 0);
 __decorate([property({ type: Function })], EditorDate.prototype, "cancel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], EditorDate.prototype, "autofocus", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], EditorDate.prototype, "columnLabel", void 0);
+__decorate([query("[data-rozie-ref=\"inputEl\"]")], EditorDate.prototype, "_refInputEl", void 0);
 EditorDate = __decorate([customElement("rozie-editor-date")], EditorDate);
 var EditorDate_default = EditorDate;
 //#endregion
@@ -6026,17 +6743,23 @@ let FilterText = class FilterText extends SignalWatcher(LitElement) {
 		this.column = null;
 		this.value = null;
 		this.setFilter = null;
+		this.columnLabel = "";
 		this._draft = signal("");
+		this._touched = signal(false);
+		this.__rozieFirstUpdateDone = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
+		this.draftValue = () => this._touched.value ? this._draft.value : this.value != null ? String(this.value) : "";
 		this.onInput = (e) => {
 			this._draft.value = e && e.target ? e.target.value : "";
+			this._touched.value = true;
 		};
 		this.applyFilter = () => {
-			this.setFilter && this.setFilter(this.columnId, this._draft.value);
+			this.setFilter && this.setFilter(this.columnId, this.draftValue());
 		};
 		this.clearFilter = () => {
 			this._draft.value = "";
+			this._touched.value = false;
 			this.setFilter && this.setFilter(this.columnId, "");
 		};
 		this.onKeydown = (e) => {
@@ -6051,14 +6774,22 @@ let FilterText = class FilterText extends SignalWatcher(LitElement) {
 		this.onBlur = () => {
 			this.applyFilter();
 		};
+		this.a11yLabel = () => {
+			if (typeof this.columnLabel === "string" && this.columnLabel !== "") return this.columnLabel;
+			return this.columnId;
+		};
 	}
 	static {
 		this.styles = css`
 :host{display:contents}
 `;
 	}
-	firstUpdated() {
-		this._draft.value = this.value != null ? String(this.value) : "";
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("value")) {
+			this.value;
+			this._touched.value = false;
+		}
+		this.__rozieFirstUpdateDone = true;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -6071,7 +6802,7 @@ let FilterText = class FilterText extends SignalWatcher(LitElement) {
 	}
 	render() {
 		return html`
-<input class="rdt-col-filter" part="col-filter" type="text" aria-label=${this.columnId} .value=${this._draft.value} @input=${($event) => {
+<input class="rdt-col-filter" part="col-filter" type="text" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.draftValue()} @input=${($event) => {
 			this.onInput($event);
 		}} @keydown=${($event) => {
 			this.onKeydown($event);
@@ -6088,6 +6819,10 @@ __decorate([property({
 __decorate([property({ type: Object })], FilterText.prototype, "column", void 0);
 __decorate([property({ type: Object })], FilterText.prototype, "value", void 0);
 __decorate([property({ type: Function })], FilterText.prototype, "setFilter", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], FilterText.prototype, "columnLabel", void 0);
 FilterText = __decorate([customElement("rozie-filter-text")], FilterText);
 var FilterText_default = FilterText;
 //#endregion
@@ -6100,24 +6835,41 @@ let FilterNumberRange = class FilterNumberRange extends SignalWatcher(LitElement
 		this.value = null;
 		this.setFilter = null;
 		this.minMax = null;
+		this.columnLabel = "";
 		this._minDraft = signal("");
 		this._maxDraft = signal("");
+		this._touched = signal(false);
+		this.__rozieWatchInitial_0 = true;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
+		this.minDraftValue = () => this._touched.value ? this._minDraft.value : Array.isArray(this.value) && this.value[0] != null ? String(this.value[0]) : "";
+		this.maxDraftValue = () => this._touched.value ? this._maxDraft.value : Array.isArray(this.value) && this.value[1] != null ? String(this.value[1]) : "";
 		this.onMinInput = (e) => {
 			this._minDraft.value = e && e.target ? e.target.value : "";
+			this._touched.value = true;
 		};
 		this.onMaxInput = (e) => {
 			this._maxDraft.value = e && e.target ? e.target.value : "";
+			this._touched.value = true;
+		};
+		this.onKeydown = (e) => {
+			if (e && e.key === "Enter") this.applyRange(this.minDraftValue(), this.maxDraftValue());
+		};
+		this.onBlur = () => {
+			this.applyRange(this.minDraftValue(), this.maxDraftValue());
 		};
 		this.minPlaceholder = () => Array.isArray(this.minMax) && this.minMax[0] != null ? String(this.minMax[0]) : "";
 		this.maxPlaceholder = () => Array.isArray(this.minMax) && this.minMax[1] != null ? String(this.minMax[1]) : "";
-		this.applyRange = () => {
-			const minNum = this._minDraft.value === "" ? void 0 : Number(this._minDraft.value);
-			const maxNum = this._maxDraft.value === "" ? void 0 : Number(this._maxDraft.value);
+		this.applyRange = (minDraft, maxDraft) => {
+			const minNum = minDraft === "" ? void 0 : Number(minDraft);
+			const maxNum = maxDraft === "" ? void 0 : Number(maxDraft);
 			if (minNum === void 0 && maxNum === void 0) this.setFilter && this.setFilter(this.columnId, "");
 			else this.setFilter && this.setFilter(this.columnId, [minNum, maxNum]);
 		};
+		this.a11yLabel = () => {
+			if (typeof this.columnLabel === "string" && this.columnLabel !== "") return this.columnLabel;
+			return this.columnId;
+		};
 	}
 	static {
 		this.styles = css`
@@ -6125,8 +6877,16 @@ let FilterNumberRange = class FilterNumberRange extends SignalWatcher(LitElement
 `;
 	}
 	firstUpdated() {
-		this._minDraft.value = Array.isArray(this.value) && this.value[0] != null ? String(this.value[0]) : "";
-		this._maxDraft.value = Array.isArray(this.value) && this.value[1] != null ? String(this.value[1]) : "";
+		this._disconnectCleanups.push(effect(() => {
+			Array.isArray(this.value) && String(this.value[0]) + "" + String(this.value[1]);
+			untracked(() => {
+				if (this.__rozieWatchInitial_0) {
+					this.__rozieWatchInitial_0 = false;
+					return;
+				}
+				this._touched.value = false;
+			});
+		}));
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -6140,16 +6900,20 @@ let FilterNumberRange = class FilterNumberRange extends SignalWatcher(LitElement
 	render() {
 		return html`
 <span style="display:flex; align-items: center" data-rozie-s-97b2c090>
-  <input class="rdt-col-filter" part="col-filter" type="number" aria-label=${rozieAttr(this.columnId + " min")} placeholder=${rozieAttr(this.minPlaceholder())} .value=${this._minDraft.value} @input=${($event) => {
+  <input class="rdt-col-filter" part="col-filter" type="number" aria-label=${rozieAttr(this.a11yLabel() + " min")} placeholder=${rozieAttr(this.minPlaceholder())} .value=${this.minDraftValue()} @input=${($event) => {
 			this.onMinInput($event);
-		}} @change=${($event) => {
-			this.applyRange();
+		}} @keydown=${($event) => {
+			this.onKeydown($event);
+		}} @blur=${($event) => {
+			this.onBlur();
 		}} data-rozie-s-97b2c090 />
   <span data-rozie-s-97b2c090> - </span>
-  <input class="rdt-col-filter" part="col-filter" type="number" aria-label=${rozieAttr(this.columnId + " max")} placeholder=${rozieAttr(this.maxPlaceholder())} .value=${this._maxDraft.value} @input=${($event) => {
+  <input class="rdt-col-filter" part="col-filter" type="number" aria-label=${rozieAttr(this.a11yLabel() + " max")} placeholder=${rozieAttr(this.maxPlaceholder())} .value=${this.maxDraftValue()} @input=${($event) => {
 			this.onMaxInput($event);
-		}} @change=${($event) => {
-			this.applyRange();
+		}} @keydown=${($event) => {
+			this.onKeydown($event);
+		}} @blur=${($event) => {
+			this.onBlur();
 		}} data-rozie-s-97b2c090 />
 </span>
 `;
@@ -6163,6 +6927,10 @@ __decorate([property({ type: Object })], FilterNumberRange.prototype, "column",
 __decorate([property({ type: Object })], FilterNumberRange.prototype, "value", void 0);
 __decorate([property({ type: Function })], FilterNumberRange.prototype, "setFilter", void 0);
 __decorate([property({ type: Object })], FilterNumberRange.prototype, "minMax", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], FilterNumberRange.prototype, "columnLabel", void 0);
 FilterNumberRange = __decorate([customElement("rozie-filter-number-range")], FilterNumberRange);
 var FilterNumberRange_default = FilterNumberRange;
 //#endregion
@@ -6175,6 +6943,7 @@ let FilterSelect = class FilterSelect extends SignalWatcher(LitElement) {
 		this.value = null;
 		this.setFilter = null;
 		this.uniqueValues = [];
+		this.columnLabel = "";
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.selectValue = () => this.value != null ? String(this.value) : "";
@@ -6183,6 +6952,10 @@ let FilterSelect = class FilterSelect extends SignalWatcher(LitElement) {
 			if (v === "") this.setFilter && this.setFilter(this.columnId, "");
 			else this.setFilter && this.setFilter(this.columnId, v);
 		};
+		this.a11yLabel = () => {
+			if (typeof this.columnLabel === "string" && this.columnLabel !== "") return this.columnLabel;
+			return this.columnId;
+		};
 	}
 	static {
 		this.styles = css`
@@ -6200,11 +6973,11 @@ let FilterSelect = class FilterSelect extends SignalWatcher(LitElement) {
 	}
 	render() {
 		return html`
-<select class="rdt-col-filter" part="col-filter" aria-label=${this.columnId} .value=${this.selectValue()} @change=${($event) => {
+<select class="rdt-col-filter" part="col-filter" aria-label=${rozieAttr(this.a11yLabel())} .value=${this.selectValue()} @change=${($event) => {
 			this.onChange($event);
 		}} data-rozie-s-d75b42b2>
   <option value="" data-rozie-s-d75b42b2>All</option>
-  ${repeat(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option value=${rozieAttr(opt)} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
+  ${repeat(this.uniqueValues, (opt, _idx) => opt, (opt, _idx) => html`<option value=${rozieAttr(opt)} ?selected=${opt === this.selectValue()} data-rozie-s-d75b42b2>${rozieDisplay(opt)}</option>`)}
 </select>
 `;
 	}
@@ -6217,6 +6990,10 @@ __decorate([property({ type: Object })], FilterSelect.prototype, "column", void
 __decorate([property({ type: Object })], FilterSelect.prototype, "value", void 0);
 __decorate([property({ type: Function })], FilterSelect.prototype, "setFilter", void 0);
 __decorate([property({ type: Array })], FilterSelect.prototype, "uniqueValues", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], FilterSelect.prototype, "columnLabel", void 0);
 FilterSelect = __decorate([customElement("rozie-filter-select")], FilterSelect);
 var FilterSelect_default = FilterSelect;
 //#endregion
@@ -6292,6 +7069,42 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
 		this.removeKey = (key) => {
 			this.applyGrouping && this.applyGrouping(this.grouping.filter((k) => k !== key));
 		};
+		this.toggleKey = (id) => {
+			if (!id) return;
+			if (this.grouping.indexOf(id) !== -1) {
+				this.removeKey(id);
+				return;
+			}
+			this.applyGrouping && this.applyGrouping(this.grouping.concat([id]));
+		};
+		this.moveKey = (key, delta) => {
+			const cur = this.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);
+			this.applyGrouping && this.applyGrouping(next);
+		};
+		this.onTokenKeydown = (e, gk) => {
+			if (!e) return;
+			const key = e.key;
+			if (key === "Delete" || key === "Backspace") {
+				e.preventDefault();
+				this.removeKey(gk);
+				return;
+			}
+			if (!e.altKey) return;
+			if (key === "ArrowLeft") {
+				e.preventDefault();
+				this.moveKey(gk, -1);
+			} else if (key === "ArrowRight") {
+				e.preventDefault();
+				this.moveKey(gk, 1);
+			}
+		};
 		this.clearAll = () => {
 			this.clearGrouping && this.clearGrouping();
 		};
@@ -6320,6 +7133,18 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
   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;
@@ -6375,17 +7200,19 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
 		return html`
 <div class="rdt-group-bar" data-rozie-s-546c469a>
   
-  ${repeat(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<span class="rdt-group-token" part="group-token" draggable="true" @dragstart=${($event) => {
+  ${repeat(this.groupableColumns, (col, _idx) => col.id, (col, _idx) => html`<button class="rdt-group-token rdt-group-token-add" type="button" part="group-token" draggable="true" aria-pressed=${rozieAttr(this.grouping.indexOf(col.id) !== -1 ? "true" : "false")} aria-label=${rozieAttr("Group by " + col.label)} @dragstart=${($event) => {
 			this.onChipDragStart($event, col.id);
 		}} @dragend=${($event) => {
 			this.onDragEnd();
-		}} data-rozie-s-546c469a>${rozieDisplay(col.label)}</span>`)}
+		}} @click=${($event) => {
+			this.toggleKey(col.id);
+		}} data-rozie-s-546c469a>${rozieDisplay(col.label)}</button>`)}
 
   
   <span class="${Object.entries({
 			"rdt-group-drop-zone": true,
 			"is-over": this._isOver.value
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" data-group-drop-zone="" @dragover=${($event) => {
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" data-group-drop-zone="" role="list" aria-label="Active grouping" @dragover=${($event) => {
 			this.onDragOver($event);
 		}} @dragleave=${($event) => {
 			this.onDragLeave($event);
@@ -6396,12 +7223,14 @@ let GroupBar = class GroupBar extends SignalWatcher(LitElement) {
     ${!this.grouping.length ? html`<span class="rdt-group-drop-hint" data-rozie-s-546c469a>Drag columns here to group</span>` : nothing}${repeat(this.grouping, (gk, _idx) => gk, (gk, _idx) => html`<span class="${Object.entries({
 			"rdt-group-token": true,
 			"is-drop-target": this._dragKind.value === "token" && this._dropKey.value === gk && this._draggingId.value !== gk
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" draggable="true" @dragstart=${($event) => {
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" part="group-token" data-group-token="" draggable="true" role="listitem" tabindex="0" aria-label=${rozieAttr(this.labelFor(gk) + " grouping, position " + (this.grouping.indexOf(gk) + 1) + " of " + this.grouping.length + ". Alt+Arrow to reorder, Delete to remove.")} @dragstart=${($event) => {
 			this.onTokenDragStart($event, gk);
 		}} @dragover=${($event) => {
 			this.onTokenDragOver($event, gk);
 		}} @dragend=${($event) => {
 			this.onDragEnd();
+		}} @keydown=${($event) => {
+			this.onTokenKeydown($event, gk);
 		}} data-rozie-s-546c469a>
       ${rozieDisplay(this.labelFor(gk))}
       <button class="rdt-group-token-remove" type="button" aria-label=${rozieAttr("Remove " + this.labelFor(gk) + " grouping")} @click=${($event) => {