@rozie-ui/data-table-solid 0.7.2 → 0.7.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @rozie-ui/data-table-solid
 
+## 0.7.4
+
+### Patch Changes
+
+- cf49212: Regenerated with the compiler fixes found while building `@rozie-ui/select`. Depending on the target and the component:
+  - Angular: a two-way (`model: true`) prop is now controlled while the consumer binds a value — a write by the component only emits `<name>Change`, so a consumer that refuses the change keeps the control on its value. The prop keeps its `ModelSignal` type. `$onUpdate` hooks now run (after every render); they never ran before. An output named like a native bubbling event (`change`, `submit`, `reset`, `select`) no longer also delivers the native event to a consumer's binding.
+  - Vue: a two-way prop bound one-way (`:value` without `v-model`) is now controlled too: the component's write emits `update:value` and the control keeps the consumer's value.
+  - React: an `$expose` verb now runs in `flushSync`, so calls made in one tick each see what the call before left; primitive script constants are plain `const`s; a body statement no longer reads a binding declared after it on the first render.
+  - Svelte, Solid: a `$watch` now sees a `$data` write made in `$onMount`.
+  - Lit: a `$watch` whose getter reads both props and `$data` re-runs when only the prop changes; duplicated comments in lifecycle bodies are gone.
+  - @rozie/runtime-solid@0.10.0
+
+## 0.7.3
+
+### Patch Changes
+
+- 67902f8: React and Solid: slot props passed to the component are no longer part of the attribute pass-through spread onto its root element. On Solid a slot render function passed as `<name>Slot` (or a `slots` record) was written to the DOM as an attribute holding the function source; on React the slot members (`render<Name>`, `children`, `slots`) were left in the rest bucket. Regenerated with the compiler fix; no API change.
+  - @rozie/runtime-solid@0.9.1
+
 ## 0.7.2
 
 ### Patch Changes

package/dist/index.cjs

@@ -735,7 +735,17 @@ function DataTable(_props) {
 		"onSelectionChange",
 		"onSortChange",
 		"onVisibilityChange",
-		"onVisibleRangeChange"
+		"onVisibleRangeChange",
+		"groupBarSlot",
+		"selectAllSlot",
+		"placeholderSlot",
+		"selectCellSlot",
+		"detailSlot",
+		"colHeaderSlot",
+		"filterSlot",
+		"cellSlot",
+		"editorSlot",
+		"slots"
 	]);
 	const resolved = () => local.children;
 	(0, solid_js.onMount)(() => {
@@ -846,6 +856,45 @@ function DataTable(_props) {
 	const [pasteAnnounce, setPasteAnnounce] = (0, solid_js.createSignal)("");
 	const [rangeAnnounce, setRangeAnnounce] = (0, solid_js.createSignal)("");
 	const [liveAnnounce, setLiveAnnounce] = (0, solid_js.createSignal)("");
+	(0, solid_js.createEffect)((0, solid_js.on)(() => windowVer(), (v) => (0, solid_js.untrack)(() => emitVisibleRangeIfChanged()), { defer: true }));
+	(0, solid_js.createEffect)((0, solid_js.on)(() => [
+		sorting(),
+		globalFilter(),
+		columnFilters(),
+		pagination(),
+		local.rowCount,
+		local.pageCount,
+		rowSelection(),
+		expanded(),
+		local.expandable,
+		grouping(),
+		local.groupable,
+		columnVisibility(),
+		columnSizing(),
+		columnOrder(),
+		columnPinning(),
+		local.selectionMode,
+		(data() || []).length,
+		data(),
+		dataDefault(),
+		local.columns,
+		colReg()
+	], (v) => (0, solid_js.untrack)(() => (() => {
+		seedColumnPinning();
+		reFeed();
+		maybeClearHistoryOnExternalSwap();
+	})()), { defer: true }));
+	(0, solid_js.createEffect)((0, solid_js.on)(() => [
+		sorting(),
+		columnFilters(),
+		globalFilter(),
+		sortingDefault(),
+		columnFiltersDefault(),
+		globalFilterDefault()
+	], (v) => (0, solid_js.untrack)(() => (() => {
+		const msg = buildSortFilterAnnounce();
+		if (msg) setLiveAnnounce(msg);
+	})()), { defer: true }));
 	(0, solid_js.onMount)(() => {
 		setDataDefault(data() || []);
 		seedColumnPinning();
@@ -988,45 +1037,6 @@ function DataTable(_props) {
 		lastDataLen = d.length;
 		reFeed();
 	});
-	(0, solid_js.createEffect)((0, solid_js.on)(() => windowVer(), (v) => (0, solid_js.untrack)(() => emitVisibleRangeIfChanged()), { defer: true }));
-	(0, solid_js.createEffect)((0, solid_js.on)(() => [
-		sorting(),
-		globalFilter(),
-		columnFilters(),
-		pagination(),
-		local.rowCount,
-		local.pageCount,
-		rowSelection(),
-		expanded(),
-		local.expandable,
-		grouping(),
-		local.groupable,
-		columnVisibility(),
-		columnSizing(),
-		columnOrder(),
-		columnPinning(),
-		local.selectionMode,
-		(data() || []).length,
-		data(),
-		dataDefault(),
-		local.columns,
-		colReg()
-	], (v) => (0, solid_js.untrack)(() => (() => {
-		seedColumnPinning();
-		reFeed();
-		maybeClearHistoryOnExternalSwap();
-	})()), { defer: true }));
-	(0, solid_js.createEffect)((0, solid_js.on)(() => [
-		sorting(),
-		columnFilters(),
-		globalFilter(),
-		sortingDefault(),
-		columnFiltersDefault(),
-		globalFilterDefault()
-	], (v) => (0, solid_js.untrack)(() => (() => {
-		const msg = buildSortFilterAnnounce();
-		if (msg) setLiveAnnounce(msg);
-	})()), { defer: true }));
 	let __rozieRootRef = null;
 	let table = null;
 	let virtualizer = null;
@@ -5351,6 +5361,9 @@ function DataTable(_props) {
 																						_el$64.addEventListener("change", ($event) => {
 																							onCellEditorInput(cell().column.id, $event);
 																						});
+																						(0, solid_js_web.use)((el) => {
+																							(0, _rozie_runtime_solid.rozieSelectValue)(el, () => editorValueFor(cell().column.id));
+																						}, _el$64);
 																						(0, solid_js_web.insert)(_el$64, (0, solid_js_web.createComponent)(_solid_primitives_keyed.Key, {
 																							get each() {
 																								return editorOptionsOf(cell().column.id);
@@ -5364,7 +5377,6 @@ function DataTable(_props) {
 																							})()
 																						}));
 																						(0, solid_js_web.effect)(() => (0, solid_js_web.setAttribute)(_el$64, "aria-invalid", (0, _rozie_runtime_solid.rozieAttr)(invalidMsg() ? "true" : null)));
-																						(0, solid_js_web.effect)(() => _el$64.value = editorValueFor(cell().column.id));
 																						return _el$64;
 																					}
 																				});
@@ -6232,6 +6244,9 @@ function DataTable(_props) {
 																											_el$122.addEventListener("change", ($event) => {
 																												onCellEditorInput(cell().column.id, $event);
 																											});
+																											(0, solid_js_web.use)((el) => {
+																												(0, _rozie_runtime_solid.rozieSelectValue)(el, () => editorValueFor(cell().column.id));
+																											}, _el$122);
 																											(0, solid_js_web.insert)(_el$122, (0, solid_js_web.createComponent)(_solid_primitives_keyed.Key, {
 																												get each() {
 																													return editorOptionsOf(cell().column.id);
@@ -6245,7 +6260,6 @@ function DataTable(_props) {
 																												})()
 																											}));
 																											(0, solid_js_web.effect)(() => (0, solid_js_web.setAttribute)(_el$122, "aria-invalid", (0, _rozie_runtime_solid.rozieAttr)(invalidMsg() ? "true" : null)));
-																											(0, solid_js_web.effect)(() => _el$122.value = editorValueFor(cell().column.id));
 																											return _el$122;
 																										}
 																									});
@@ -6561,6 +6575,9 @@ function DataTable(_props) {
 					_el$139.addEventListener("change", ($event) => {
 						onPageSizeChange($event);
 					});
+					(0, solid_js_web.use)((el) => {
+						(0, _rozie_runtime_solid.rozieSelectValue)(el, () => pageSize());
+					}, _el$139);
 					(0, solid_js_web.effect)((_p$) => {
 						var _v$97 = !canPrevPage(), _v$98 = !canNextPage();
 						_v$97 !== _p$.e && (_el$136.disabled = _p$.e = _v$97);
@@ -6570,7 +6587,6 @@ function DataTable(_props) {
 						e: void 0,
 						t: void 0
 					});
-					(0, solid_js_web.effect)(() => _el$139.value = pageSize());
 					return _el$135;
 				}
 			}), null);
@@ -6626,6 +6642,24 @@ function Column(_props) {
 		"validate"
 	]);
 	const registry = (0, solid_js.useContext)((0, _rozie_runtime_solid.rozieContext)("data-table:columns"));
+	(0, solid_js.createEffect)((0, solid_js.on)(() => [
+		local.id,
+		local.field,
+		local.header,
+		local.sortable,
+		local.filterable,
+		local.pinned,
+		local.width,
+		local.expandable,
+		local.groupable,
+		local.aggregationFn,
+		local.editable,
+		local.editor,
+		local.editorOptions,
+		local.validate
+	], (v) => (0, solid_js.untrack)(() => (() => {
+		if (reg) reg.registerColumn(colId(), buildSpec());
+	})()), { defer: true }));
 	(0, solid_js.onMount)(() => {
 		const _cleanup = (() => {
 			if (reg && !registered) {
@@ -6646,24 +6680,6 @@ function Column(_props) {
 		registered = true;
 		reg.registerColumn(colId(), buildSpec());
 	});
-	(0, solid_js.createEffect)((0, solid_js.on)(() => [
-		local.id,
-		local.field,
-		local.header,
-		local.sortable,
-		local.filterable,
-		local.pinned,
-		local.width,
-		local.expandable,
-		local.groupable,
-		local.aggregationFn,
-		local.editable,
-		local.editor,
-		local.editorOptions,
-		local.validate
-	], (v) => (0, solid_js.untrack)(() => (() => {
-		if (reg) reg.registerColumn(colId(), buildSpec());
-	})()), { defer: true }));
 	let reg = null;
 	reg = registry;
 	let registered = false;
@@ -6719,12 +6735,12 @@ function EditorText(_props) {
 	]);
 	const [draft, setDraft] = (0, solid_js.createSignal)("");
 	const [touched, setTouched] = (0, solid_js.createSignal)(false);
-	(0, solid_js.onMount)(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	(0, solid_js.createEffect)((0, solid_js.on)(() => local.autofocus, (v) => (0, solid_js.untrack)(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	(0, solid_js.onMount)(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -6800,12 +6816,12 @@ function EditorNumber(_props) {
 	]);
 	const [draft, setDraft] = (0, solid_js.createSignal)("");
 	const [touched, setTouched] = (0, solid_js.createSignal)(false);
-	(0, solid_js.onMount)(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	(0, solid_js.createEffect)((0, solid_js.on)(() => local.autofocus, (v) => (0, solid_js.untrack)(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	(0, solid_js.onMount)(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -6890,12 +6906,12 @@ function EditorSelect(_props) {
 	]);
 	const [draft, setDraft] = (0, solid_js.createSignal)("");
 	const [touched, setTouched] = (0, solid_js.createSignal)(false);
-	(0, solid_js.onMount)(() => {
-		if (local.autofocus) selectElRef?.focus();
-	});
 	(0, solid_js.createEffect)((0, solid_js.on)(() => local.autofocus, (v) => (0, solid_js.untrack)(() => ((v) => {
 		if (v) selectElRef?.focus();
 	})(v)), { defer: true }));
+	(0, solid_js.onMount)(() => {
+		if (local.autofocus) selectElRef?.focus();
+	});
 	let selectElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -6938,6 +6954,7 @@ function EditorSelect(_props) {
 			onChange($event);
 		});
 		(0, solid_js_web.use)((el) => {
+			(0, _rozie_runtime_solid.rozieSelectValue)(el, () => draftValue());
 			selectElRef = el;
 		}, _el$);
 		(0, solid_js_web.insert)(_el$, (0, solid_js_web.createComponent)(_solid_primitives_keyed.Key, {
@@ -6953,7 +6970,6 @@ function EditorSelect(_props) {
 			})()
 		}));
 		(0, solid_js_web.effect)(() => (0, solid_js_web.setAttribute)(_el$, "aria-label", (0, _rozie_runtime_solid.rozieAttr)(a11yLabel())));
-		(0, solid_js_web.effect)(() => _el$.value = draftValue());
 		return _el$;
 	})();
 }
@@ -6981,12 +6997,12 @@ function EditorCheckbox(_props) {
 		"autofocus",
 		"columnLabel"
 	]);
-	(0, solid_js.onMount)(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	(0, solid_js.createEffect)((0, solid_js.on)(() => local.autofocus, (v) => (0, solid_js.untrack)(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	(0, solid_js.onMount)(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function onChange(e) {
 		local.commit && local.commit(!!(e && e.target ? e.target.checked : false));
@@ -7076,12 +7092,12 @@ function EditorDate(_props) {
 	]);
 	const [draft, setDraft] = (0, solid_js.createSignal)("");
 	const [touched, setTouched] = (0, solid_js.createSignal)(false);
-	(0, solid_js.onMount)(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	(0, solid_js.createEffect)((0, solid_js.on)(() => local.autofocus, (v) => (0, solid_js.untrack)(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	(0, solid_js.onMount)(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : toIsoDateString(local.value);
@@ -7344,6 +7360,9 @@ function FilterSelect(_props) {
 		_el$.addEventListener("change", ($event) => {
 			onChange($event);
 		});
+		(0, solid_js_web.use)((el) => {
+			(0, _rozie_runtime_solid.rozieSelectValue)(el, () => selectValue());
+		}, _el$);
 		(0, solid_js_web.insert)(_el$, (0, solid_js_web.createComponent)(_solid_primitives_keyed.Key, {
 			get each() {
 				return local.uniqueValues;
@@ -7357,7 +7376,6 @@ function FilterSelect(_props) {
 			})()
 		}), null);
 		(0, solid_js_web.effect)(() => (0, solid_js_web.setAttribute)(_el$, "aria-label", (0, _rozie_runtime_solid.rozieAttr)(a11yLabel())));
-		(0, solid_js_web.effect)(() => _el$.value = selectValue());
 		return _el$;
 	})();
 }

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, style, template, use } from "solid-js/web";
 import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
 import { Key } from "@solid-primitives/keyed";
-import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from "@rozie/runtime-solid";
+import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay, rozieSelectValue } from "@rozie/runtime-solid";
 import Popover from "@rozie-ui/popover-solid";
 import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/table-core";
 import { Virtualizer, elementScroll, measureElement, observeElementOffset, observeElementRect } from "@tanstack/virtual-core";
@@ -708,7 +708,17 @@ function DataTable(_props) {
 		"onSelectionChange",
 		"onSortChange",
 		"onVisibilityChange",
-		"onVisibleRangeChange"
+		"onVisibleRangeChange",
+		"groupBarSlot",
+		"selectAllSlot",
+		"placeholderSlot",
+		"selectCellSlot",
+		"detailSlot",
+		"colHeaderSlot",
+		"filterSlot",
+		"cellSlot",
+		"editorSlot",
+		"slots"
 	]);
 	const resolved = () => local.children;
 	onMount(() => {
@@ -819,6 +829,45 @@ function DataTable(_props) {
 	const [pasteAnnounce, setPasteAnnounce] = createSignal("");
 	const [rangeAnnounce, setRangeAnnounce] = createSignal("");
 	const [liveAnnounce, setLiveAnnounce] = createSignal("");
+	createEffect(on(() => windowVer(), (v) => untrack(() => emitVisibleRangeIfChanged()), { defer: true }));
+	createEffect(on(() => [
+		sorting(),
+		globalFilter(),
+		columnFilters(),
+		pagination(),
+		local.rowCount,
+		local.pageCount,
+		rowSelection(),
+		expanded(),
+		local.expandable,
+		grouping(),
+		local.groupable,
+		columnVisibility(),
+		columnSizing(),
+		columnOrder(),
+		columnPinning(),
+		local.selectionMode,
+		(data() || []).length,
+		data(),
+		dataDefault(),
+		local.columns,
+		colReg()
+	], (v) => untrack(() => (() => {
+		seedColumnPinning();
+		reFeed();
+		maybeClearHistoryOnExternalSwap();
+	})()), { defer: true }));
+	createEffect(on(() => [
+		sorting(),
+		columnFilters(),
+		globalFilter(),
+		sortingDefault(),
+		columnFiltersDefault(),
+		globalFilterDefault()
+	], (v) => untrack(() => (() => {
+		const msg = buildSortFilterAnnounce();
+		if (msg) setLiveAnnounce(msg);
+	})()), { defer: true }));
 	onMount(() => {
 		setDataDefault(data() || []);
 		seedColumnPinning();
@@ -961,45 +1010,6 @@ function DataTable(_props) {
 		lastDataLen = d.length;
 		reFeed();
 	});
-	createEffect(on(() => windowVer(), (v) => untrack(() => emitVisibleRangeIfChanged()), { defer: true }));
-	createEffect(on(() => [
-		sorting(),
-		globalFilter(),
-		columnFilters(),
-		pagination(),
-		local.rowCount,
-		local.pageCount,
-		rowSelection(),
-		expanded(),
-		local.expandable,
-		grouping(),
-		local.groupable,
-		columnVisibility(),
-		columnSizing(),
-		columnOrder(),
-		columnPinning(),
-		local.selectionMode,
-		(data() || []).length,
-		data(),
-		dataDefault(),
-		local.columns,
-		colReg()
-	], (v) => untrack(() => (() => {
-		seedColumnPinning();
-		reFeed();
-		maybeClearHistoryOnExternalSwap();
-	})()), { defer: true }));
-	createEffect(on(() => [
-		sorting(),
-		columnFilters(),
-		globalFilter(),
-		sortingDefault(),
-		columnFiltersDefault(),
-		globalFilterDefault()
-	], (v) => untrack(() => (() => {
-		const msg = buildSortFilterAnnounce();
-		if (msg) setLiveAnnounce(msg);
-	})()), { defer: true }));
 	let __rozieRootRef = null;
 	let table = null;
 	let virtualizer = null;
@@ -5324,6 +5334,9 @@ function DataTable(_props) {
 																						_el$64.addEventListener("change", ($event) => {
 																							onCellEditorInput(cell().column.id, $event);
 																						});
+																						use((el) => {
+																							rozieSelectValue(el, () => editorValueFor(cell().column.id));
+																						}, _el$64);
 																						insert(_el$64, createComponent(Key, {
 																							get each() {
 																								return editorOptionsOf(cell().column.id);
@@ -5337,7 +5350,6 @@ function DataTable(_props) {
 																							})()
 																						}));
 																						effect(() => setAttribute(_el$64, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
-																						effect(() => _el$64.value = editorValueFor(cell().column.id));
 																						return _el$64;
 																					}
 																				});
@@ -6205,6 +6217,9 @@ function DataTable(_props) {
 																											_el$122.addEventListener("change", ($event) => {
 																												onCellEditorInput(cell().column.id, $event);
 																											});
+																											use((el) => {
+																												rozieSelectValue(el, () => editorValueFor(cell().column.id));
+																											}, _el$122);
 																											insert(_el$122, createComponent(Key, {
 																												get each() {
 																													return editorOptionsOf(cell().column.id);
@@ -6218,7 +6233,6 @@ function DataTable(_props) {
 																												})()
 																											}));
 																											effect(() => setAttribute(_el$122, "aria-invalid", rozieAttr(invalidMsg() ? "true" : null)));
-																											effect(() => _el$122.value = editorValueFor(cell().column.id));
 																											return _el$122;
 																										}
 																									});
@@ -6534,6 +6548,9 @@ function DataTable(_props) {
 					_el$139.addEventListener("change", ($event) => {
 						onPageSizeChange($event);
 					});
+					use((el) => {
+						rozieSelectValue(el, () => pageSize());
+					}, _el$139);
 					effect((_p$) => {
 						var _v$97 = !canPrevPage(), _v$98 = !canNextPage();
 						_v$97 !== _p$.e && (_el$136.disabled = _p$.e = _v$97);
@@ -6543,7 +6560,6 @@ function DataTable(_props) {
 						e: void 0,
 						t: void 0
 					});
-					effect(() => _el$139.value = pageSize());
 					return _el$135;
 				}
 			}), null);
@@ -6599,6 +6615,24 @@ function Column(_props) {
 		"validate"
 	]);
 	const registry = useContext(rozieContext("data-table:columns"));
+	createEffect(on(() => [
+		local.id,
+		local.field,
+		local.header,
+		local.sortable,
+		local.filterable,
+		local.pinned,
+		local.width,
+		local.expandable,
+		local.groupable,
+		local.aggregationFn,
+		local.editable,
+		local.editor,
+		local.editorOptions,
+		local.validate
+	], (v) => untrack(() => (() => {
+		if (reg) reg.registerColumn(colId(), buildSpec());
+	})()), { defer: true }));
 	onMount(() => {
 		const _cleanup = (() => {
 			if (reg && !registered) {
@@ -6619,24 +6653,6 @@ function Column(_props) {
 		registered = true;
 		reg.registerColumn(colId(), buildSpec());
 	});
-	createEffect(on(() => [
-		local.id,
-		local.field,
-		local.header,
-		local.sortable,
-		local.filterable,
-		local.pinned,
-		local.width,
-		local.expandable,
-		local.groupable,
-		local.aggregationFn,
-		local.editable,
-		local.editor,
-		local.editorOptions,
-		local.validate
-	], (v) => untrack(() => (() => {
-		if (reg) reg.registerColumn(colId(), buildSpec());
-	})()), { defer: true }));
 	let reg = null;
 	reg = registry;
 	let registered = false;
@@ -6692,12 +6708,12 @@ function EditorText(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -6773,12 +6789,12 @@ function EditorNumber(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -6863,12 +6879,12 @@ function EditorSelect(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) selectElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) selectElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) selectElRef?.focus();
+	});
 	let selectElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -6911,6 +6927,7 @@ function EditorSelect(_props) {
 			onChange($event);
 		});
 		use((el) => {
+			rozieSelectValue(el, () => draftValue());
 			selectElRef = el;
 		}, _el$);
 		insert(_el$, createComponent(Key, {
@@ -6926,7 +6943,6 @@ function EditorSelect(_props) {
 			})()
 		}));
 		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
-		effect(() => _el$.value = draftValue());
 		return _el$;
 	})();
 }
@@ -6954,12 +6970,12 @@ function EditorCheckbox(_props) {
 		"autofocus",
 		"columnLabel"
 	]);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function onChange(e) {
 		local.commit && local.commit(!!(e && e.target ? e.target.checked : false));
@@ -7049,12 +7065,12 @@ function EditorDate(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : toIsoDateString(local.value);
@@ -7317,6 +7333,9 @@ function FilterSelect(_props) {
 		_el$.addEventListener("change", ($event) => {
 			onChange($event);
 		});
+		use((el) => {
+			rozieSelectValue(el, () => selectValue());
+		}, _el$);
 		insert(_el$, createComponent(Key, {
 			get each() {
 				return local.uniqueValues;
@@ -7330,7 +7349,6 @@ function FilterSelect(_props) {
 			})()
 		}), null);
 		effect(() => setAttribute(_el$, "aria-label", rozieAttr(a11yLabel())));
-		effect(() => _el$.value = selectValue());
 		return _el$;
 	})();
 }

package/dist/source/index.jsx

@@ -1,6 +1,6 @@
 import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack, useContext } from "solid-js";
 import { Key } from "@solid-primitives/keyed";
-import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from "@rozie/runtime-solid";
+import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay, rozieSelectValue } from "@rozie/runtime-solid";
 import Popover from "@rozie-ui/popover-solid";
 import { createTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/table-core";
 import { Virtualizer, elementScroll, measureElement, observeElementOffset, observeElementRect } from "@tanstack/virtual-core";
@@ -706,7 +706,17 @@ function DataTable(_props) {
 		"onSelectionChange",
 		"onSortChange",
 		"onVisibilityChange",
-		"onVisibleRangeChange"
+		"onVisibleRangeChange",
+		"groupBarSlot",
+		"selectAllSlot",
+		"placeholderSlot",
+		"selectCellSlot",
+		"detailSlot",
+		"colHeaderSlot",
+		"filterSlot",
+		"cellSlot",
+		"editorSlot",
+		"slots"
 	]);
 	const resolved = () => local.children;
 	onMount(() => {
@@ -817,6 +827,45 @@ function DataTable(_props) {
 	const [pasteAnnounce, setPasteAnnounce] = createSignal("");
 	const [rangeAnnounce, setRangeAnnounce] = createSignal("");
 	const [liveAnnounce, setLiveAnnounce] = createSignal("");
+	createEffect(on(() => windowVer(), (v) => untrack(() => emitVisibleRangeIfChanged()), { defer: true }));
+	createEffect(on(() => [
+		sorting(),
+		globalFilter(),
+		columnFilters(),
+		pagination(),
+		local.rowCount,
+		local.pageCount,
+		rowSelection(),
+		expanded(),
+		local.expandable,
+		grouping(),
+		local.groupable,
+		columnVisibility(),
+		columnSizing(),
+		columnOrder(),
+		columnPinning(),
+		local.selectionMode,
+		(data() || []).length,
+		data(),
+		dataDefault(),
+		local.columns,
+		colReg()
+	], (v) => untrack(() => (() => {
+		seedColumnPinning();
+		reFeed();
+		maybeClearHistoryOnExternalSwap();
+	})()), { defer: true }));
+	createEffect(on(() => [
+		sorting(),
+		columnFilters(),
+		globalFilter(),
+		sortingDefault(),
+		columnFiltersDefault(),
+		globalFilterDefault()
+	], (v) => untrack(() => (() => {
+		const msg = buildSortFilterAnnounce();
+		if (msg) setLiveAnnounce(msg);
+	})()), { defer: true }));
 	onMount(() => {
 		setDataDefault(data() || []);
 		seedColumnPinning();
@@ -959,45 +1008,6 @@ function DataTable(_props) {
 		lastDataLen = d.length;
 		reFeed();
 	});
-	createEffect(on(() => windowVer(), (v) => untrack(() => emitVisibleRangeIfChanged()), { defer: true }));
-	createEffect(on(() => [
-		sorting(),
-		globalFilter(),
-		columnFilters(),
-		pagination(),
-		local.rowCount,
-		local.pageCount,
-		rowSelection(),
-		expanded(),
-		local.expandable,
-		grouping(),
-		local.groupable,
-		columnVisibility(),
-		columnSizing(),
-		columnOrder(),
-		columnPinning(),
-		local.selectionMode,
-		(data() || []).length,
-		data(),
-		dataDefault(),
-		local.columns,
-		colReg()
-	], (v) => untrack(() => (() => {
-		seedColumnPinning();
-		reFeed();
-		maybeClearHistoryOnExternalSwap();
-	})()), { defer: true }));
-	createEffect(on(() => [
-		sorting(),
-		columnFilters(),
-		globalFilter(),
-		sortingDefault(),
-		columnFiltersDefault(),
-		globalFilterDefault()
-	], (v) => untrack(() => (() => {
-		const msg = buildSortFilterAnnounce();
-		if (msg) setLiveAnnounce(msg);
-	})()), { defer: true }));
 	let __rozieRootRef = null;
 	let table = null;
 	let virtualizer = null;
@@ -4965,7 +4975,9 @@ function DataTable(_props) {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? "true" : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? "true" : null)} class={"rdt-cell-editor"} ref={(el) => {
+		rozieSelectValue(el, () => editorValueFor(cell().column.id));
+	}} onChange={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
@@ -5333,7 +5345,9 @@ function DataTable(_props) {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? "true" : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? "true" : null)} class={"rdt-cell-editor"} ref={(el) => {
+		rozieSelectValue(el, () => editorValueFor(cell().column.id));
+	}} onChange={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
@@ -5437,7 +5451,9 @@ function DataTable(_props) {
       <button type="button" class={"rdt-page-btn rdt-page-next"} disabled={!canNextPage()} onClick={($event) => {
 		onNextPage();
 	}} data-rozie-s-d5dcab4c="">Next</button>
-      <select aria-label="Rows per page" class={"rdt-page-size"} value={pageSize()} onChange={($event) => {
+      <select aria-label="Rows per page" class={"rdt-page-size"} ref={(el) => {
+		rozieSelectValue(el, () => pageSize());
+	}} onChange={($event) => {
 		onPageSizeChange($event);
 	}} data-rozie-s-d5dcab4c="">
         <option value={10} data-rozie-s-d5dcab4c="">10</option>
@@ -5484,6 +5500,24 @@ function Column(_props) {
 		"validate"
 	]);
 	const registry = useContext(rozieContext("data-table:columns"));
+	createEffect(on(() => [
+		local.id,
+		local.field,
+		local.header,
+		local.sortable,
+		local.filterable,
+		local.pinned,
+		local.width,
+		local.expandable,
+		local.groupable,
+		local.aggregationFn,
+		local.editable,
+		local.editor,
+		local.editorOptions,
+		local.validate
+	], (v) => untrack(() => (() => {
+		if (reg) reg.registerColumn(colId(), buildSpec());
+	})()), { defer: true }));
 	onMount(() => {
 		const _cleanup = (() => {
 			if (reg && !registered) {
@@ -5504,24 +5538,6 @@ function Column(_props) {
 		registered = true;
 		reg.registerColumn(colId(), buildSpec());
 	});
-	createEffect(on(() => [
-		local.id,
-		local.field,
-		local.header,
-		local.sortable,
-		local.filterable,
-		local.pinned,
-		local.width,
-		local.expandable,
-		local.groupable,
-		local.aggregationFn,
-		local.editable,
-		local.editor,
-		local.editorOptions,
-		local.validate
-	], (v) => untrack(() => (() => {
-		if (reg) reg.registerColumn(colId(), buildSpec());
-	})()), { defer: true }));
 	let reg = null;
 	reg = registry;
 	let registered = false;
@@ -5575,12 +5591,12 @@ function EditorText(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -5647,12 +5663,12 @@ function EditorNumber(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -5728,12 +5744,12 @@ function EditorSelect(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) selectElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) selectElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) selectElRef?.focus();
+	});
 	let selectElRef = null;
 	function draftValue() {
 		return touched() ? draft() : local.value != null ? String(local.value) : "";
@@ -5766,8 +5782,9 @@ function EditorSelect(_props) {
 	}
 	return <>
     <select data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => {
+		rozieSelectValue(el, () => draftValue());
 		selectElRef = el;
-	}} class={"rdt-cell-editor"} value={draftValue()} onChange={($event) => {
+	}} class={"rdt-cell-editor"} onChange={($event) => {
 		onChange($event);
 	}} onKeyDown={($event) => {
 		onKeydown($event);
@@ -5800,12 +5817,12 @@ function EditorCheckbox(_props) {
 		"autofocus",
 		"columnLabel"
 	]);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function onChange(e) {
 		local.commit && local.commit(!!(e && e.target ? e.target.checked : false));
@@ -5887,12 +5904,12 @@ function EditorDate(_props) {
 	]);
 	const [draft, setDraft] = createSignal("");
 	const [touched, setTouched] = createSignal(false);
-	onMount(() => {
-		if (local.autofocus) inputElRef?.focus();
-	});
 	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
 		if (v) inputElRef?.focus();
 	})(v)), { defer: true }));
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
 	let inputElRef = null;
 	function draftValue() {
 		return touched() ? draft() : toIsoDateString(local.value);
@@ -6113,7 +6130,9 @@ function FilterSelect(_props) {
 		return local.columnId;
 	}
 	return <>
-    <select part="col-filter" aria-label={rozieAttr(a11yLabel())} class={"rdt-col-filter"} value={selectValue()} onChange={($event) => {
+    <select part="col-filter" aria-label={rozieAttr(a11yLabel())} class={"rdt-col-filter"} ref={(el) => {
+		rozieSelectValue(el, () => selectValue());
+	}} onChange={($event) => {
 		onChange($event);
 	}} data-rozie-s-d75b42b2="">
       <option value="" data-rozie-s-d75b42b2="">All</option>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-solid",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -48,7 +48,7 @@
   ],
   "dependencies": {
     "@solid-primitives/keyed": "^1.5.3",
-    "@rozie/runtime-solid": "^0.9.0"
+    "@rozie/runtime-solid": "^0.10.0"
   },
   "peerDependencies": {
     "solid-js": "^1.8",

package/src/Column.tsx

@@ -68,6 +68,9 @@ export default function Column(_props: ColumnProps): JSX.Element {
   const [local, attrs] = splitProps(_merged, ['id', 'field', 'header', 'sortable', 'filterable', 'pinned', 'width', 'expandable', 'groupable', 'aggregationFn', 'editable', 'editor', 'editorOptions', 'validate']);
 
   const registry = useContext(rozieContext("data-table:columns"));
+  createEffect(on(() => (() => [local.id, local.field, local.header, local.sortable, local.filterable, local.pinned, local.width, local.expandable, local.groupable, local.aggregationFn, local.editable, local.editor, local.editorOptions, local.validate])(), (v) => untrack(() => (() => {
+    if (reg) reg.registerColumn(colId(), buildSpec());
+  })()), { defer: true }));
   onMount(() => {
     const _cleanup = (() => {
     // register this column's spec. On Lit the injected registry may still be undefined
@@ -91,9 +94,6 @@ export default function Column(_props: ColumnProps): JSX.Element {
     registered = true;
     reg.registerColumn(colId(), buildSpec());
   });
-  createEffect(on(() => (() => [local.id, local.field, local.header, local.sortable, local.filterable, local.pinned, local.width, local.expandable, local.groupable, local.aggregationFn, local.editable, local.editor, local.editorOptions, local.validate])(), (v) => untrack(() => (() => {
-    if (reg) reg.registerColumn(colId(), buildSpec());
-  })()), { defer: true }));
 
   // $inject is typed `unknown` (Phase 36 D-4: no rich type synthesis yet), which the
   // STRICT BUNDLED-LEAF tsc rejects on `.registerColumn(...)` (TS2339). The .rozie-native

package/src/DataTable.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'solid-js';
 import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps, untrack } from 'solid-js';
 import { Key } from '@solid-primitives/keyed';
-import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from '@rozie/runtime-solid';
+import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay, rozieSelectValue } from '@rozie/runtime-solid';
 import Popover from '@rozie-ui/popover-solid';
 import { isSafeKey, wrapAggregationFn, indexDefsById, editorKindWarning, collectGroupableLeafDefs } from './helpers/columnDefUtils';
 import { applyUpdater, clamp, focusables } from './helpers/indexMath';
@@ -755,7 +755,7 @@ export interface DataTableHandle {
 
 export default function DataTable(_props: DataTableProps): JSX.Element {
   const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getRowId: null, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, virtual: false, estimateRowHeight: 40, autoMeasure: false, maxHeight: '' }, _props);
-  const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getRowId', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'autoMeasure', 'maxHeight', 'children', 'ref', 'onActivecellChange', 'onCellEditCommit', 'onExpandChange', 'onFilterChange', 'onGroupChange', 'onHistoryChange', 'onPageChange', 'onPinChange', 'onRangeChange', 'onReorderChange', 'onResizeChange', 'onRowActivate', 'onRowEditCommit', 'onSelectionChange', 'onSortChange', 'onVisibilityChange', 'onVisibleRangeChange']);
+  const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getRowId', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'virtual', 'estimateRowHeight', 'autoMeasure', 'maxHeight', 'children', 'ref', 'onActivecellChange', 'onCellEditCommit', 'onExpandChange', 'onFilterChange', 'onGroupChange', 'onHistoryChange', 'onPageChange', 'onPinChange', 'onRangeChange', 'onReorderChange', 'onResizeChange', 'onRowActivate', 'onRowEditCommit', 'onSelectionChange', 'onSortChange', 'onVisibilityChange', 'onVisibleRangeChange', 'groupBarSlot', 'selectAllSlot', 'placeholderSlot', 'selectCellSlot', 'detailSlot', 'colHeaderSlot', 'filterSlot', 'cellSlot', 'editorSlot', 'slots']);
   const resolved = () => local.children;
   onMount(() => { local.ref?.({ sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, scrollToRow, getScrollElement, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory }); });
 
@@ -827,6 +827,36 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   const [pasteAnnounce, setPasteAnnounce] = createSignal('');
   const [rangeAnnounce, setRangeAnnounce] = createSignal('');
   const [liveAnnounce, setLiveAnnounce] = createSignal('');
+  createEffect(on(() => (() => windowVer())(), (v) => untrack(() => (() => emitVisibleRangeIfChanged())()), { defer: true }));
+  createEffect(on(() => (() => [sorting(), globalFilter(), columnFilters(), pagination(),
+  // Server-side page-count sources (#2): re-feed when the consumer's rowCount/pageCount
+  // changes at runtime (e.g. a server response updates the total) so getPageCount() and the
+  // Next button availability track the new total.
+  local.rowCount, local.pageCount, rowSelection(), expanded(), local.expandable, grouping(), local.groupable, columnVisibility(), columnSizing(), columnOrder(), columnPinning(), local.selectionMode, (data() || []).length, // Phase 51 req-4: key on the data REFERENCE (both sinks) so a committed edit re-feeds
+  // even when the fresh array is the SAME length (a single-cell edit replaces one row
+  // object → new array ref, identical length → the .length key alone would miss it). The
+  // controlled path observes $props.data; the uncontrolled path observes $data.dataDefault.
+  // writeData is echo-guarded (programmatic) and reFeed writes neither sink, so no loop.
+  data(), dataDefault(),
+  // Column CONFIG prop (the `:columns` array form) — the sibling column source to
+  // $data.colReg (the `<Column>` children). Watch it so a runtime `:columns` swap re-feeds:
+  // columnDefs()/tableColumns() build the UNION of both, and reFeed re-passes columns.
+  // (Consumers memoize the array as with $props.data/$props.sorting; the uncontrolled
+  // <Column>-children path leaves $props.columns undefined — a stable no-op getter.)
+  local.columns, colReg()])(), (v) => untrack(() => (() => {
+    // Seed BEFORE the re-feed so the pinning this call may write is part of the state object
+    // table-core receives on this same tick (rather than landing a frame late and re-ordering
+    // getVisibleCells() a render after the columns appear). One-shot and self-latching — see
+    // seedColumnPinning() in stateAssembly.rzts. This is the `<Column>`-children entry point:
+    // those register during mount, so the $onMount call below can find zero columns.
+    seedColumnPinning();
+    reFeed();
+    maybeClearHistoryOnExternalSwap();
+  })()), { defer: true }));
+  createEffect(on(() => (() => [sorting(), columnFilters(), globalFilter(), sortingDefault(), columnFiltersDefault(), globalFilterDefault()])(), (v) => untrack(() => (() => {
+    const msg = buildSortFilterAnnounce();
+    if (msg) setLiveAnnounce(msg);
+  })()), { defer: true }));
   onMount(() => {
     // Seed the uncontrolled `data` fallback (Phase 51 req-4) from the initial prop so an
     // edit committed BEFORE the consumer ever pushes new rows (or when the consumer passes
@@ -1222,36 +1252,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     lastDataLen = d.length;
     reFeed();
   });
-  createEffect(on(() => (() => windowVer())(), (v) => untrack(() => (() => emitVisibleRangeIfChanged())()), { defer: true }));
-  createEffect(on(() => (() => [sorting(), globalFilter(), columnFilters(), pagination(),
-  // Server-side page-count sources (#2): re-feed when the consumer's rowCount/pageCount
-  // changes at runtime (e.g. a server response updates the total) so getPageCount() and the
-  // Next button availability track the new total.
-  local.rowCount, local.pageCount, rowSelection(), expanded(), local.expandable, grouping(), local.groupable, columnVisibility(), columnSizing(), columnOrder(), columnPinning(), local.selectionMode, (data() || []).length, // Phase 51 req-4: key on the data REFERENCE (both sinks) so a committed edit re-feeds
-  // even when the fresh array is the SAME length (a single-cell edit replaces one row
-  // object → new array ref, identical length → the .length key alone would miss it). The
-  // controlled path observes $props.data; the uncontrolled path observes $data.dataDefault.
-  // writeData is echo-guarded (programmatic) and reFeed writes neither sink, so no loop.
-  data(), dataDefault(),
-  // Column CONFIG prop (the `:columns` array form) — the sibling column source to
-  // $data.colReg (the `<Column>` children). Watch it so a runtime `:columns` swap re-feeds:
-  // columnDefs()/tableColumns() build the UNION of both, and reFeed re-passes columns.
-  // (Consumers memoize the array as with $props.data/$props.sorting; the uncontrolled
-  // <Column>-children path leaves $props.columns undefined — a stable no-op getter.)
-  local.columns, colReg()])(), (v) => untrack(() => (() => {
-    // Seed BEFORE the re-feed so the pinning this call may write is part of the state object
-    // table-core receives on this same tick (rather than landing a frame late and re-ordering
-    // getVisibleCells() a render after the columns appear). One-shot and self-latching — see
-    // seedColumnPinning() in stateAssembly.rzts. This is the `<Column>`-children entry point:
-    // those register during mount, so the $onMount call below can find zero columns.
-    seedColumnPinning();
-    reFeed();
-    maybeClearHistoryOnExternalSwap();
-  })()), { defer: true }));
-  createEffect(on(() => (() => [sorting(), columnFilters(), globalFilter(), sortingDefault(), columnFiltersDefault(), globalFilterDefault()])(), (v) => untrack(() => (() => {
-    const msg = buildSortFilterAnnounce();
-    if (msg) setLiveAnnounce(msg);
-  })()), { defer: true }));
   let __rozieRootRef: HTMLElement | null = null;
 
   // table-core instance — top-level `let` referenced from hooks → React hoists to
@@ -4518,9 +4518,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function toAbsRow(localRow: any) {
     return localRow + pageRowOffset();
   }
-  // A body row's ABSOLUTE display-order index = its page-relative index + the page offset. Drives
-  // aria-rowindex on the non-virtual paginated body (B27); the virtual path uses wr.vi.index
-  // directly (already absolute). Reactive via rowIndexOf's tick().
 
   // Total filtered+sorted PRE-pagination row count — the clamp bound for an absolute focusCell.
   // In virtual mode $data.rows IS the full pre-pagination model (bodyRowCount suffices); in the
@@ -8813,7 +8810,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<Show when={editorTypeOf(cell().column.id) === 'custom'} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onEditorDropinKeyDown($event); }} data-rozie-s-d5dcab4c="">
                 {_props.slots?.[`editor-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(row()); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}
-              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
+              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} ref={(el) => { rozieSelectValue(el as HTMLSelectElement, () => (editorValueFor(cell().column.id))); }} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
               </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(row(), $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? '▾' : '▸')}</button>
@@ -8890,7 +8887,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<Show when={editorTypeOf(cell().column.id) === 'custom'} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onEditorDropinKeyDown($event); }} data-rozie-s-d5dcab4c="">
                 {_props.slots?.[`editor-${cell().column.id}`]?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ get columnId() { return cell().column.id; }, get column() { return cell().column; }, get row() { return cellSlotRow(wr().row); }, get value() { return editorValueFor(cell().column.id); }, get commit() { return editorCommitFor(cell().column.id); }, get cancel() { return editorCancelFor(); }, get columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}
-              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
+              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} ref={(el) => { rozieSelectValue(el as HTMLSelectElement, () => (editorValueFor(cell().column.id))); }} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
               </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button>
@@ -8927,7 +8924,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         {rozieDisplay('Page ' + (pageIndex() + 1) + ' of ' + displayPageCount())}
       </span>
       <button type="button" class={"rdt-page-btn rdt-page-next"} disabled={!canNextPage()} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onNextPage(); }} data-rozie-s-d5dcab4c="">Next</button>
-      <select aria-label="Rows per page" class={"rdt-page-size"} value={pageSize()} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onPageSizeChange($event); }} data-rozie-s-d5dcab4c="">
+      <select aria-label="Rows per page" class={"rdt-page-size"} ref={(el) => { rozieSelectValue(el as HTMLSelectElement, () => (pageSize())); }} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { 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>

package/src/EditorCheckbox.tsx

@@ -41,12 +41,12 @@ export default function EditorCheckbox(_props: EditorCheckboxProps): JSX.Element
   const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, autofocus: false, columnLabel: '' }, _props);
   const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'autofocus', 'columnLabel']);
 
-  onMount(() => {
-    if (local.autofocus) inputElRef?.focus();
-  });
   createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
     if (v) inputElRef?.focus();
   })(v)), { defer: true }));
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
   let inputElRef: HTMLElement | null = null;
 
   // Immediate-commit-on-change: read .checked the global-filter way, coerce to a

package/src/EditorDate.tsx

@@ -64,12 +64,12 @@ export default function EditorDate(_props: EditorDateProps): JSX.Element {
 
   const [draft, setDraft] = createSignal('');
   const [touched, setTouched] = createSignal(false);
-  onMount(() => {
-    if (local.autofocus) inputElRef?.focus();
-  });
   createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
     if (v) inputElRef?.focus();
   })(v)), { defer: true }));
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
   let inputElRef: HTMLElement | null = null;
 
   // ── N-04: the draft is DERIVED, not seeded setup-once ───────────────────────────────────

package/src/EditorNumber.tsx

@@ -43,12 +43,12 @@ export default function EditorNumber(_props: EditorNumberProps): JSX.Element {
 
   const [draft, setDraft] = createSignal('');
   const [touched, setTouched] = createSignal(false);
-  onMount(() => {
-    if (local.autofocus) inputElRef?.focus();
-  });
   createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
     if (v) inputElRef?.focus();
   })(v)), { defer: true }));
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
   let inputElRef: HTMLElement | null = null;
 
   // Seed the draft string once from the incoming value (setup-once).

package/src/EditorSelect.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'solid-js';
 import { createEffect, createSignal, mergeProps, on, onMount, splitProps, untrack } from 'solid-js';
 import { Key } from '@solid-primitives/keyed';
-import { rozieAttr, rozieDisplay } from '@rozie/runtime-solid';
+import { rozieAttr, rozieDisplay, rozieSelectValue } from '@rozie/runtime-solid';
 
 interface EditorSelectProps {
   /**
@@ -48,12 +48,12 @@ export default function EditorSelect(_props: EditorSelectProps): JSX.Element {
 
   const [draft, setDraft] = createSignal('');
   const [touched, setTouched] = createSignal(false);
-  onMount(() => {
-    if (local.autofocus) selectElRef?.focus();
-  });
   createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
     if (v) selectElRef?.focus();
   })(v)), { defer: true }));
+  onMount(() => {
+    if (local.autofocus) selectElRef?.focus();
+  });
   let selectElRef: HTMLElement | null = null;
 
   // Seed the draft once from the incoming value (setup-once). Normalize null/undefined
@@ -116,7 +116,7 @@ export default function EditorSelect(_props: EditorSelectProps): JSX.Element {
 
   return (
     <>
-    <select data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => { selectElRef = el as HTMLElement; }} class={"rdt-cell-editor"} value={draftValue()} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onBlur(); }} data-rozie-s-117f1a16="">
+    <select data-editing-cell="" aria-label={rozieAttr(a11yLabel())} ref={(el) => { rozieSelectValue(el as HTMLSelectElement, () => (draftValue())); selectElRef = el as HTMLElement; }} class={"rdt-cell-editor"} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onBlur(); }} data-rozie-s-117f1a16="">
       <Key each={local.options as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-117f1a16="">{rozieDisplay(opt().label)}</option>}</Key>
     </select>
     </>

package/src/EditorText.tsx

@@ -43,12 +43,12 @@ export default function EditorText(_props: EditorTextProps): JSX.Element {
 
   const [draft, setDraft] = createSignal('');
   const [touched, setTouched] = createSignal(false);
-  onMount(() => {
-    if (local.autofocus) inputElRef?.focus();
-  });
   createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
     if (v) inputElRef?.focus();
   })(v)), { defer: true }));
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
   let inputElRef: HTMLElement | null = null;
 
   // Seed the draft once at setup from the incoming value (setup-once, NOT in the

package/src/FilterSelect.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'solid-js';
 import { mergeProps, splitProps } from 'solid-js';
 import { Key } from '@solid-primitives/keyed';
-import { rozieAttr, rozieDisplay } from '@rozie/runtime-solid';
+import { rozieAttr, rozieDisplay, rozieSelectValue } from '@rozie/runtime-solid';
 
 interface FilterSelectProps {
   /**
@@ -66,7 +66,7 @@ export default function FilterSelect(_props: FilterSelectProps): JSX.Element {
 
   return (
     <>
-    <select part="col-filter" aria-label={rozieAttr(a11yLabel())} class={"rdt-col-filter"} value={selectValue()} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onChange($event); }} data-rozie-s-d75b42b2="">
+    <select part="col-filter" aria-label={rozieAttr(a11yLabel())} class={"rdt-col-filter"} ref={(el) => { rozieSelectValue(el as HTMLSelectElement, () => (selectValue())); }} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onChange($event); }} data-rozie-s-d75b42b2="">
       <option value="" data-rozie-s-d75b42b2="">All</option>
       <Key each={local.uniqueValues as readonly any[]} by={(opt) => opt}>{(opt) => <option value={rozieAttr(opt())} data-rozie-s-d75b42b2="">{rozieDisplay(opt())}</option>}</Key>
     </select>