@rozie-ui/data-table-solid 0.3.1 → 0.3.2

package/dist/index.cjs

@@ -44,6 +44,39 @@ const wrapAggregationFn = (fn) => {
 		}
 	};
 };
+const collectNestedDefs = (list, out) => {
+	if (!Array.isArray(list)) return;
+	for (const d of list) {
+		if (!d || d.id == null) continue;
+		const id = String(d.id);
+		if (!(id in out)) out[id] = d;
+		if (Array.isArray(d.columns)) collectNestedDefs(d.columns, out);
+	}
+};
+const indexDefsById = (defs) => {
+	const out = Object.create(null);
+	if (!Array.isArray(defs)) return out;
+	for (const d of defs) {
+		if (!d || d.id == null) continue;
+		out[String(d.id)] = d;
+	}
+	for (const d of defs) if (d && Array.isArray(d.columns)) collectNestedDefs(d.columns, out);
+	return out;
+};
+const collectGroupableLeafDefs = (defs) => {
+	const out = [];
+	if (!Array.isArray(defs)) return out;
+	for (const d of defs) {
+		if (!d) continue;
+		if (Array.isArray(d.columns)) {
+			out.push(...collectGroupableLeafDefs(d.columns));
+			continue;
+		}
+		if (d.groupable === false) continue;
+		out.push(d);
+	}
+	return out;
+};
 //#endregion
 //#region src/helpers/indexMath.ts
 const clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
@@ -933,6 +966,7 @@ function DataTable(_props) {
 	let columnDefsCache = null;
 	let columnDefsCacheColumnsRef = void 0;
 	let columnDefsCacheColRegRef = void 0;
+	let columnDefsIndexCache = null;
 	function columnDefs() {
 		const cfg = local.columns || [];
 		const reg = colReg() || {};
@@ -976,8 +1010,13 @@ function DataTable(_props) {
 		columnDefsCache = out;
 		columnDefsCacheColumnsRef = local.columns;
 		columnDefsCacheColRegRef = colReg();
+		columnDefsIndexCache = indexDefsById(out);
 		return out;
 	}
+	function defIndex() {
+		columnDefs();
+		return columnDefsIndexCache || Object.create(null);
+	}
 	const SELECT_COL_ID = "__rdt_select";
 	const EXPANDER_COL_ID = "__rdt_expander";
 	function selectionEnabled() {
@@ -1695,9 +1734,9 @@ function DataTable(_props) {
 		return "";
 	}
 	function defFor(colId) {
-		const defs = columnDefs();
-		for (const d of defs) if (d.id === colId) return d;
-		return null;
+		if (colId == null) return null;
+		const d = defIndex()[String(colId)];
+		return d != null ? d : null;
 	}
 	function visibleCellsFor(row) {
 		return rowModelVer() >= 0 ? row.getVisibleCells() : [];
@@ -1890,6 +1929,9 @@ function DataTable(_props) {
 	function rowIsGrouped(row) {
 		return !!(tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
 	}
+	function rowIndexIsGrouped(rowIndex) {
+		return rowIsGrouped((rows() || [])[rowIndex]);
+	}
 	function groupingActive() {
 		return tick() >= 0 && (currentState().grouping || []).length > 0;
 	}
@@ -1903,21 +1945,54 @@ function DataTable(_props) {
 		return !!(tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
 	}
 	function groupSubRowCount(row) {
-		return row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+		if (row && row.getLeafRows) {
+			const leaves = row.getLeafRows();
+			let n = 0;
+			for (let i = 0; i < leaves.length; i++) {
+				const r = leaves[i];
+				if (!(r && r.getIsGrouped && r.getIsGrouped())) n = n + 1;
+			}
+			return n;
+		}
+		return row && row.subRows ? row.subRows.length : 0;
+	}
+	let groupRowDescriptorCache = null;
+	let groupRowDescriptorCacheVer = void 0;
+	function groupRowDescriptor(row) {
+		const ver = rowModelVer();
+		if (!groupRowDescriptorCache || groupRowDescriptorCacheVer !== ver) {
+			groupRowDescriptorCache = Object.create(null);
+			groupRowDescriptorCacheVer = ver;
+		}
+		const key = String(row.id);
+		let d = groupRowDescriptorCache[key];
+		if (!d) {
+			const groupingColumnId = row.groupingColumnId != null ? row.groupingColumnId : "";
+			const groupingValue = row.getGroupingValue ? row.getGroupingValue(groupingColumnId) : row.groupingValue;
+			d = {
+				isGroupRow: true,
+				groupId: row.id,
+				groupingColumnId,
+				groupingValue,
+				leafCount: groupSubRowCount(row)
+			};
+			groupRowDescriptorCache[key] = d;
+		}
+		return d;
+	}
+	function cellSlotRow(row) {
+		return rowIsGrouped(row) ? groupRowDescriptor(row) : row ? row.original : null;
 	}
 	function groupingKeys() {
 		return currentState().grouping || [];
 	}
 	function groupableColumns() {
 		const out = [];
-		const defs = columnDefs();
-		for (const d of defs) {
-			if (!d || d.groupable === false) continue;
-			out.push({
-				id: d.id,
-				label: d.header != null ? d.header : d.id
-			});
-		}
+		const defs = collectGroupableLeafDefs(columnDefs());
+		for (const d of defs) out.push({
+			id: d.id,
+			label: d.header != null ? d.header : d.id
+		});
 		return out;
 	}
 	function stopEvent(evt) {
@@ -2943,11 +3018,13 @@ function DataTable(_props) {
 		for (let gr = 0; gr < grid.length; gr++) {
 			const r = originRow + gr;
 			if (r > maxRow) break;
+			const rowGrouped = rowIndexIsGrouped(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;
 				const colId = columnIdAt(r, c);
 				if (colId == null || !columnEditable(colId)) continue;
 				const rowObj = rowOriginalAt(r);
@@ -3250,11 +3327,13 @@ function DataTable(_props) {
 		return cell && cell.column ? cell.column.id : null;
 	}
 	function isActiveCellEditable() {
+		if (rowIndexIsGrouped(activeRow())) return false;
 		const colId = activeCellColumnId();
 		return colId != null && columnEditable(colId);
 	}
 	function isEditing(rowIndex, colIndex) {
 		if (editVer() < 0) return false;
+		if (rowIndexIsGrouped(rowIndex)) return false;
 		if (editingRowIndex() != null && editingRowIndex() === rowIndex) {
 			const colId = columnIdAt(rowIndex, colIndex);
 			return colId != null && columnEditable(colId);
@@ -3356,6 +3435,7 @@ function DataTable(_props) {
 		return cell ? cell.getValue() : null;
 	}
 	function beginEdit(rowIndex, colIndex, seed) {
+		if (rowIndexIsGrouped(rowIndex)) return;
 		const colId = columnIdAt(rowIndex, colIndex);
 		if (colId == null || !columnEditable(colId)) return;
 		committedThisSession = false;
@@ -3467,6 +3547,7 @@ function DataTable(_props) {
 		return true;
 	}
 	function toggleActiveBooleanCell() {
+		if (rowIndexIsGrouped(activeRow())) return;
 		const colId = columnIdAt(activeRow(), activeColIndex());
 		if (colId == null || !columnEditable(colId)) return;
 		const row = (rows() || [])[activeRow()];
@@ -3552,6 +3633,7 @@ function DataTable(_props) {
 	function beginRowEdit(row) {
 		const rowIndex = rowIndexOf(row);
 		if (rowIndex < 0) return;
+		if (rowIndexIsGrouped(rowIndex)) return;
 		const editable = editableColumnsForRow(rowIndex);
 		if (editable.length === 0) return;
 		committedThisSession = false;
@@ -4140,7 +4222,7 @@ function DataTable(_props) {
               {(_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: row().original,
+		row: cellSlotRow(row()),
 		value: cell().getValue()
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -4174,7 +4256,7 @@ function DataTable(_props) {
                 {(_props.editorSlot ?? _props.slots?.["editor"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: row().original,
+		row: cellSlotRow(row()),
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
 		cancel: editorCancelFor(),
@@ -4188,14 +4270,14 @@ function DataTable(_props) {
                 {(_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: row().original,
+		row: cellSlotRow(row()),
 		value: cell().getValue()
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)("(" + groupSubRowCount(row()) + ")")}</span>
             </span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: row().original,
+		row: cellSlotRow(row()),
 		checked: rowIsSelected(row()),
 		toggle: (e) => onToggleRow(row(), e)
 	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event) => {
@@ -4336,7 +4418,7 @@ function DataTable(_props) {
               {(_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		value: cell().getValue()
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -4370,7 +4452,7 @@ function DataTable(_props) {
                 {(_props.editorSlot ?? _props.slots?.["editor"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
 		cancel: editorCancelFor(),
@@ -4384,14 +4466,14 @@ function DataTable(_props) {
                 {(_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		value: cell().getValue()
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)("(" + groupSubRowCount(wr().row) + ")")}</span>
             </span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		checked: rowIsSelected(wr().row),
 		toggle: (e) => onToggleRow(wr().row, e)
 	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event) => {

package/dist/index.mjs

@@ -17,6 +17,39 @@ const wrapAggregationFn = (fn) => {
 		}
 	};
 };
+const collectNestedDefs = (list, out) => {
+	if (!Array.isArray(list)) return;
+	for (const d of list) {
+		if (!d || d.id == null) continue;
+		const id = String(d.id);
+		if (!(id in out)) out[id] = d;
+		if (Array.isArray(d.columns)) collectNestedDefs(d.columns, out);
+	}
+};
+const indexDefsById = (defs) => {
+	const out = Object.create(null);
+	if (!Array.isArray(defs)) return out;
+	for (const d of defs) {
+		if (!d || d.id == null) continue;
+		out[String(d.id)] = d;
+	}
+	for (const d of defs) if (d && Array.isArray(d.columns)) collectNestedDefs(d.columns, out);
+	return out;
+};
+const collectGroupableLeafDefs = (defs) => {
+	const out = [];
+	if (!Array.isArray(defs)) return out;
+	for (const d of defs) {
+		if (!d) continue;
+		if (Array.isArray(d.columns)) {
+			out.push(...collectGroupableLeafDefs(d.columns));
+			continue;
+		}
+		if (d.groupable === false) continue;
+		out.push(d);
+	}
+	return out;
+};
 //#endregion
 //#region src/helpers/indexMath.ts
 const clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
@@ -906,6 +939,7 @@ function DataTable(_props) {
 	let columnDefsCache = null;
 	let columnDefsCacheColumnsRef = void 0;
 	let columnDefsCacheColRegRef = void 0;
+	let columnDefsIndexCache = null;
 	function columnDefs() {
 		const cfg = local.columns || [];
 		const reg = colReg() || {};
@@ -949,8 +983,13 @@ function DataTable(_props) {
 		columnDefsCache = out;
 		columnDefsCacheColumnsRef = local.columns;
 		columnDefsCacheColRegRef = colReg();
+		columnDefsIndexCache = indexDefsById(out);
 		return out;
 	}
+	function defIndex() {
+		columnDefs();
+		return columnDefsIndexCache || Object.create(null);
+	}
 	const SELECT_COL_ID = "__rdt_select";
 	const EXPANDER_COL_ID = "__rdt_expander";
 	function selectionEnabled() {
@@ -1668,9 +1707,9 @@ function DataTable(_props) {
 		return "";
 	}
 	function defFor(colId) {
-		const defs = columnDefs();
-		for (const d of defs) if (d.id === colId) return d;
-		return null;
+		if (colId == null) return null;
+		const d = defIndex()[String(colId)];
+		return d != null ? d : null;
 	}
 	function visibleCellsFor(row) {
 		return rowModelVer() >= 0 ? row.getVisibleCells() : [];
@@ -1863,6 +1902,9 @@ function DataTable(_props) {
 	function rowIsGrouped(row) {
 		return !!(tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
 	}
+	function rowIndexIsGrouped(rowIndex) {
+		return rowIsGrouped((rows() || [])[rowIndex]);
+	}
 	function groupingActive() {
 		return tick() >= 0 && (currentState().grouping || []).length > 0;
 	}
@@ -1876,21 +1918,54 @@ function DataTable(_props) {
 		return !!(tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
 	}
 	function groupSubRowCount(row) {
-		return row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+		if (row && row.getLeafRows) {
+			const leaves = row.getLeafRows();
+			let n = 0;
+			for (let i = 0; i < leaves.length; i++) {
+				const r = leaves[i];
+				if (!(r && r.getIsGrouped && r.getIsGrouped())) n = n + 1;
+			}
+			return n;
+		}
+		return row && row.subRows ? row.subRows.length : 0;
+	}
+	let groupRowDescriptorCache = null;
+	let groupRowDescriptorCacheVer = void 0;
+	function groupRowDescriptor(row) {
+		const ver = rowModelVer();
+		if (!groupRowDescriptorCache || groupRowDescriptorCacheVer !== ver) {
+			groupRowDescriptorCache = Object.create(null);
+			groupRowDescriptorCacheVer = ver;
+		}
+		const key = String(row.id);
+		let d = groupRowDescriptorCache[key];
+		if (!d) {
+			const groupingColumnId = row.groupingColumnId != null ? row.groupingColumnId : "";
+			const groupingValue = row.getGroupingValue ? row.getGroupingValue(groupingColumnId) : row.groupingValue;
+			d = {
+				isGroupRow: true,
+				groupId: row.id,
+				groupingColumnId,
+				groupingValue,
+				leafCount: groupSubRowCount(row)
+			};
+			groupRowDescriptorCache[key] = d;
+		}
+		return d;
+	}
+	function cellSlotRow(row) {
+		return rowIsGrouped(row) ? groupRowDescriptor(row) : row ? row.original : null;
 	}
 	function groupingKeys() {
 		return currentState().grouping || [];
 	}
 	function groupableColumns() {
 		const out = [];
-		const defs = columnDefs();
-		for (const d of defs) {
-			if (!d || d.groupable === false) continue;
-			out.push({
-				id: d.id,
-				label: d.header != null ? d.header : d.id
-			});
-		}
+		const defs = collectGroupableLeafDefs(columnDefs());
+		for (const d of defs) out.push({
+			id: d.id,
+			label: d.header != null ? d.header : d.id
+		});
 		return out;
 	}
 	function stopEvent(evt) {
@@ -2916,11 +2991,13 @@ function DataTable(_props) {
 		for (let gr = 0; gr < grid.length; gr++) {
 			const r = originRow + gr;
 			if (r > maxRow) break;
+			const rowGrouped = rowIndexIsGrouped(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;
 				const colId = columnIdAt(r, c);
 				if (colId == null || !columnEditable(colId)) continue;
 				const rowObj = rowOriginalAt(r);
@@ -3223,11 +3300,13 @@ function DataTable(_props) {
 		return cell && cell.column ? cell.column.id : null;
 	}
 	function isActiveCellEditable() {
+		if (rowIndexIsGrouped(activeRow())) return false;
 		const colId = activeCellColumnId();
 		return colId != null && columnEditable(colId);
 	}
 	function isEditing(rowIndex, colIndex) {
 		if (editVer() < 0) return false;
+		if (rowIndexIsGrouped(rowIndex)) return false;
 		if (editingRowIndex() != null && editingRowIndex() === rowIndex) {
 			const colId = columnIdAt(rowIndex, colIndex);
 			return colId != null && columnEditable(colId);
@@ -3329,6 +3408,7 @@ function DataTable(_props) {
 		return cell ? cell.getValue() : null;
 	}
 	function beginEdit(rowIndex, colIndex, seed) {
+		if (rowIndexIsGrouped(rowIndex)) return;
 		const colId = columnIdAt(rowIndex, colIndex);
 		if (colId == null || !columnEditable(colId)) return;
 		committedThisSession = false;
@@ -3440,6 +3520,7 @@ function DataTable(_props) {
 		return true;
 	}
 	function toggleActiveBooleanCell() {
+		if (rowIndexIsGrouped(activeRow())) return;
 		const colId = columnIdAt(activeRow(), activeColIndex());
 		if (colId == null || !columnEditable(colId)) return;
 		const row = (rows() || [])[activeRow()];
@@ -3525,6 +3606,7 @@ function DataTable(_props) {
 	function beginRowEdit(row) {
 		const rowIndex = rowIndexOf(row);
 		if (rowIndex < 0) return;
+		if (rowIndexIsGrouped(rowIndex)) return;
 		const editable = editableColumnsForRow(rowIndex);
 		if (editable.length === 0) return;
 		committedThisSession = false;
@@ -4113,7 +4195,7 @@ function DataTable(_props) {
               {(_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: row().original,
+		row: cellSlotRow(row()),
 		value: cell().getValue()
 	}) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -4147,7 +4229,7 @@ function DataTable(_props) {
                 {(_props.editorSlot ?? _props.slots?.["editor"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: row().original,
+		row: cellSlotRow(row()),
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
 		cancel: editorCancelFor(),
@@ -4161,14 +4243,14 @@ function DataTable(_props) {
                 {(_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: row().original,
+		row: cellSlotRow(row()),
 		value: cell().getValue()
 	}) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(row()) + ")")}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: row().original,
+		row: cellSlotRow(row()),
 		checked: rowIsSelected(row()),
 		toggle: (e) => onToggleRow(row(), e)
 	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event) => {
@@ -4309,7 +4391,7 @@ function DataTable(_props) {
               {(_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		value: cell().getValue()
 	}) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
@@ -4343,7 +4425,7 @@ function DataTable(_props) {
                 {(_props.editorSlot ?? _props.slots?.["editor"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
 		cancel: editorCancelFor(),
@@ -4357,14 +4439,14 @@ function DataTable(_props) {
                 {(_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		value: cell().getValue()
 	}) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(wr().row) + ")")}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		checked: rowIsSelected(wr().row),
 		toggle: (e) => onToggleRow(wr().row, e)
 	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-solid",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "private": false,
   "license": "MIT",

package/src/DataTable.tsx

@@ -3,7 +3,7 @@ import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, s
 import { Key } from '@solid-primitives/keyed';
 import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from '@rozie/runtime-solid';
 import Popover from '@rozie-ui/popover-solid';
-import { isSafeKey, wrapAggregationFn } from './helpers/columnDefUtils';
+import { isSafeKey, wrapAggregationFn, indexDefsById, collectGroupableLeafDefs } from './helpers/columnDefUtils';
 import { applyUpdater, clamp, focusables } from './helpers/indexMath';
 import { escapeTsvField, parseTsv, tileGridToBox, tileIndex } from './helpers/tsvGrid';
 import { replaceRowValue, indexOfRowIn, replaceRowValues } from './helpers/rowValueUtils';
@@ -1304,6 +1304,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   let columnDefsCache: any[] | null = null;
   let columnDefsCacheColumnsRef: any = undefined;
   let columnDefsCacheColRegRef: any = undefined;
+  // B1 (quick 260906-afh) — the def-lookup index, populated INSIDE this SAME memo block on
+  // a cache MISS only (never rebuilt per call — a per-call recursive scan would restore the
+  // O(N^2 x M) blowup D-23 removed, T-AFH-03). A top-level `let` lowers to a per-instance
+  // `useRef` on React (verified in the emitted leaf), so this is instance-scoped like
+  // columnDefsCache above.
+  let columnDefsIndexCache: any = null;
   function columnDefs() {
     const cfg = local.columns || [];
     const reg = colReg() || {};
@@ -1352,9 +1358,20 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     columnDefsCache = out;
     columnDefsCacheColumnsRef = local.columns;
     columnDefsCacheColRegRef = colReg();
+    columnDefsIndexCache = indexDefsById(out);
     return out;
   }
 
+  // defIndex: the def-lookup map for the CURRENT columnDefs() array. Calling columnDefs()
+  // first is deliberate — either an O(1) reference-equality cache hit (columnDefsIndexCache
+  // is already fresh) or a miss that repopulates BOTH slots together, so the index can never
+  // go stale relative to the array. Falls back to an empty null-prototype map (never null/
+  // undefined) so a caller can read it unconditionally.
+  function defIndex() {
+    columnDefs();
+    return columnDefsIndexCache || Object.create(null);
+  }
+
   // The constant id of the auto-injected leading checkbox column (D-04). Distinct from
   // any consumer column id (the registry/config guard never produces a leading "__").
   const SELECT_COL_ID = '__rdt_select';
@@ -3034,10 +3051,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
   // Template helpers reading the resolved column-def metadata by id (plain fns — used
   // in template predicates + interpolation; uniform on all 6, no $computed alias trap).
+  // B1 (quick 260906-afh): reads the O(1) def-lookup index (defIndex(), columnBuilders.rzts)
+  // instead of linearly scanning columnDefs() — which only ever held TOP-LEVEL entries, so a
+  // NESTED group leaf (a `columns:` group child) was invisible to every caller (headerLabel,
+  // columnIsFilterable, editMetaOf/columnEditable/editorTypeOf/editorOptionsOf) and silently
+  // took the "no def" fallback. defIndex() resolves both top-level AND nested leaf ids. This
+  // also removes the per-cell O(N) scan D-23 left in place — defIndex() is memoized in the
+  // SAME cache-invalidation block as columnDefs() itself, never rebuilt per call.
   function defFor(colId: any) {
-    const defs = columnDefs();
-    for (const d of defs as any) if (d.id === colId) return d;
-    return null;
+    if (colId == null) return null;
+    const idx = defIndex();
+    const d = idx[String(colId)];
+    return d != null ? d : null;
   }
   // Per-row visible cells for the body loop. table-core memoizes row objects by id,
   // so a re-pull after a column change (visibility/reorder/pin, or the late <Column>
@@ -3390,6 +3415,16 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function rowIsGrouped(row: any) {
     return !!(tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
   }
+  // rowIndexIsGrouped (quick 260906-cvo, C1/C2): THE single row-level editability/writability
+  // predicate — a group-header row is a SYNTHETIC row whose `original` is table-core's
+  // `leafRows[0].original` (the same fact cellSlotRow's header comment documents), so any
+  // edit or bulk write resolved through it silently lands on an UNRELATED record. Every edit/
+  // write guard in this component calls THIS predicate — never a re-implemented inline
+  // `getIsGrouped()` check — so the invariant has one definition. Indexes into the SAME
+  // `$data.rows` flattened row list rowIsGrouped reads.
+  function rowIndexIsGrouped(rowIndex: any) {
+    return rowIsGrouped((rows() || [])[rowIndex]);
+  }
   // groupingActive: grouping is currently engaged (a non-empty ordered key list). Drives the
   // data-group-leaf marker so it is ABSENT when ungrouped (byte-identical-off, req-10).
   function groupingActive() {
@@ -3405,22 +3440,100 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function cellIsAggregated(cellCtx: any) {
     return !!(tick() >= 0 && cellCtx && cellCtx.getIsAggregated && cellCtx.getIsAggregated());
   }
-  // cellIsPlaceholder: a PLACEHOLDER cell on a group-header row — a non-grouped, non-aggregated
-  // cell that table-core fills with the FIRST leaf row's value (cell.getValue() leaks e.g.
-  // "Services"/"Edsger Dijkstra" onto the group line). Renders BLANK via a dedicated empty
-  // template branch so the leaked leaf value never paints. Tick-gated exactly like cellIsGrouped
-  // so the group chrome re-derives on a re-pull on the fine-grained targets (Solid/Lit).
+  // cellIsPlaceholder: VERIFIED against @tanstack/table-core@8.21.3 (ColumnGrouping.js:120-121,
+  // quick 260906-afh premise correction). A placeholder cell is a cell IN A GROUPING COLUMN
+  // that is NOT the row's OWN grouping column — `!cell.getIsGrouped() && column.getIsGrouped()`.
+  // That is true both on a group-header row (for every OTHER grouping column) and on every leaf
+  // row (for every grouping column) — it is NOT "never true on a group-header row" and it is NOT
+  // "any non-grouped, non-aggregated cell". The operative consequence for this component: a
+  // placeholder can only EVER be a grouping-column cell, so this branch can never reach a
+  // non-grouping column — it does NOT and CANNOT guard the AGGREGATED-cell `row` leak
+  // (cellSlotRow, below) fixes. Where it DOES apply (e.g. under multi-level grouping, the
+  // OTHER grouping column on a group-header row), table-core still fills cell.getValue() with
+  // the FIRST leaf row's value (cell.getValue() leaks e.g. "Oslo" onto a region-level group
+  // line whose grouping is 'region', not 'city'); this branch renders BLANK via a dedicated
+  // empty template so that leaked value never paints. Tick-gated exactly like cellIsGrouped so
+  // the group chrome re-derives on a re-pull on the fine-grained targets (Solid/Lit).
   function cellIsPlaceholder(cellCtx: any) {
     return !!(tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
   }
-  // groupSubRowCount: the number of underlying LEAF RECORDS under a group-header row (the count
-  // shown in the header, e.g. "North (40)"). row.subRows is the IMMEDIATE members — for MULTI-LEVEL
-  // grouping those are sub-GROUPS, not records, so "North" with 2 categories / 40 records would show
-  // "North (2)". getLeafRows() returns all leaf descendants (the actual record count); keep the
-  // subRows fallback for safety. Single-level grouping is unchanged (getLeafRows == subRows when the
-  // children are already leaves).
+  // groupSubRowCount: the number of underlying TRUE LEAF RECORDS under a group-header row (the
+  // count shown in the header, e.g. "North (40)"). row.subRows is the IMMEDIATE members — for
+  // MULTI-LEVEL grouping those are sub-GROUPS, not records, so "North" with 2 categories / 40
+  // records would show "North (2)" off subRows alone. row.getLeafRows() is table-core's
+  // `flattenBy(row.subRows, d => d.subRows)` (ColumnGrouping.js / utils.js, verified against
+  // @tanstack/table-core@8.21.3) — it pushes EVERY node it walks, INCLUDING intermediate group
+  // nodes, so under multi-level grouping it over-counts by exactly the number of sub-group
+  // nodes between the row and its true leaves (C4, quick 260906-cvo: North with 2 city
+  // sub-groups + 3 records reported 5, not 3). `row.getIsGrouped()` is `!!row.groupingColumnId`
+  // — precisely the predicate that separates a group node from a real record — so filter the
+  // flattened list on it rather than hand-rolling a recursive `subRows` walk (getLeafRows()
+  // already flattens; the defect is purely that it does not filter). Single-level grouping is
+  // numerically UNCHANGED: a leaf row has no `subRows`, so no node was ever miscounted there.
   function groupSubRowCount(row: any) {
-    return row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+    if (row && row.getLeafRows) {
+      const leaves = row.getLeafRows();
+      let n = 0;
+      for (let i = 0; i < leaves.length; i++) {
+        const r = leaves[i];
+        if (!(r && r.getIsGrouped && r.getIsGrouped())) n = n + 1;
+      }
+      return n;
+    }
+    return row && row.subRows ? row.subRows.length : 0;
+  }
+
+  // ── B2 (quick 260906-afh) — group-header row #cell slot descriptor ─────────────────────
+  // PROBLEM: table-core builds a flattened group-header row via
+  // `createRow(table, id, leafRows[0].original, …)` (getGroupedRowModel.js), so `row.original`
+  // on a group row IS the FIRST LEAF's record. The #cell scoped slot's existing 4 call sites
+  // all bound `:row="row.original"` (or `wr.row.original`), so an AGGREGATED cell (a
+  // non-grouping column on a group row — cellIsGrouped()===false, cellIsPlaceholder()===false,
+  // so it takes the #cell r-else branch, same as any ordinary leaf cell) silently handed a
+  // consumer template the WRONG record's fields (T-AFH-05). The grouped cell itself (the
+  // group's own column, .rdt-group-value) has the same #cell binding and the same leak.
+  //
+  // FIX: `cellSlotRow(row)` returns a STABLE GROUP DESCRIPTOR — never `row.original` — for a
+  // group-header row, and `row.original` unchanged for every other row. The descriptor is an
+  // OBJECT, never `null` (T-AFH-06 — a consumer already reading `row.foo` would throw on
+  // Vue/Angular if handed null).
+  //
+  // Descriptor cache (T-AFH-02/T-AFH-04): a null-prototype map keyed on `String(row.id)`,
+  // invalidated wholesale whenever `$data.rowModelVer` (bumped by every refreshRowModel, the
+  // SAME reactive re-derivation discipline visibleCellsFor/rowIsGrouped use) differs from the
+  // generation the map was built for — so the descriptor's REFERENCE IDENTITY is stable
+  // across every cell of one group row within a row-model generation (an unstable reference
+  // would thrash the fine-grained targets, Solid/Lit) and refreshed the moment the grouping
+  // changes. Group row ids are built from consumer grouping VALUES, so the map MUST be
+  // null-prototype — a `__proto__` grouping value must not reach Object.prototype.
+  let groupRowDescriptorCache: any = null;
+  let groupRowDescriptorCacheVer: any = undefined;
+  function groupRowDescriptor(row: any) {
+    const ver = rowModelVer();
+    if (!groupRowDescriptorCache || groupRowDescriptorCacheVer !== ver) {
+      groupRowDescriptorCache = Object.create(null);
+      groupRowDescriptorCacheVer = ver;
+    }
+    const key = String(row.id);
+    let d = groupRowDescriptorCache[key];
+    if (!d) {
+      const groupingColumnId = row.groupingColumnId != null ? row.groupingColumnId : '';
+      const groupingValue = row.getGroupingValue ? row.getGroupingValue(groupingColumnId) : row.groupingValue;
+      d = {
+        isGroupRow: true,
+        groupId: row.id,
+        groupingColumnId,
+        groupingValue,
+        leafCount: groupSubRowCount(row)
+      };
+      groupRowDescriptorCache[key] = d;
+    }
+    return d;
+  }
+  // cellSlotRow: the #cell slot's `:row=` value. A group-header row gets the stable
+  // descriptor above (never the leaked first-leaf record); every other row is unchanged.
+  function cellSlotRow(row: any) {
+    return rowIsGrouped(row) ? groupRowDescriptor(row) : row ? row.original : null;
   }
   // groupingKeys: the live ordered grouping array — slot prop for the headless #groupBar + the
   // default styled-token reflection. Reads currentState() ($props.grouping ?? $data.groupingDefault),
@@ -3428,14 +3541,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function groupingKeys() {
     return currentState().grouping || [];
   }
-  // groupableColumns: the data columns OFFERED to the headless #groupBar (those whose Column/config
-  // `groupable` is not false) — `[{ id, label }]`. Excludes the chrome columns (select/expander are
-  // not in columnDefs()). The consumer builds any bar/drag UI from this; the component ships none.
+  // groupableColumns: the data columns OFFERED to the headless #groupBar — `[{ id, label }]`.
+  // Excludes the chrome columns (select/expander are not in columnDefs()). C5+C6 (quick
+  // 260906-cvo): delegates the actual walk to collectGroupableLeafDefs (columnDefUtils.ts) —
+  // a GROUP column (a `columns:` group's own entry) is NEVER offered (it has no accessor and
+  // cannot produce a grouping value, regardless of any `groupable` flag on it), and every
+  // groupable NESTED leaf (a `columns:` group child, opted out via `groupable: false` like any
+  // top-level leaf) IS offered, in declaration order. The consumer builds any bar/drag UI from
+  // this; the component ships none.
   function groupableColumns() {
     const out = [];
-    const defs = columnDefs();
+    const defs = collectGroupableLeafDefs(columnDefs());
     for (const d of defs as any) {
-      if (!d || d.groupable === false) continue;
       out.push({
         id: d.id,
         label: d.header != null ? d.header : d.id
@@ -4450,11 +4567,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       return;
     }
     // ── C2 (phase 63 wave-8): Enter on a GROUP-HEADER cell toggles that group's collapse/
-    // expand (APG treegrid). A group cell is NON-editable (isActiveCellEditable=false, the
-    // verified invariant) so it never hits the edit branches above and would otherwise fall to
-    // enterControl() — which merely FOCUSES the group-toggle button (requiring a second key).
-    // Route it to the SAME onToggleExpand path the chevron uses (group rows ride the expand
-    // model) so one Enter toggles the group. Body cells only (a header-active Enter is unchanged);
+    // expand (APG treegrid). C1 (quick 260906-cvo) CORRECTION: the comment here used to claim
+    // "a group cell is non-editable" as "the verified invariant" — that was FALSE AS WRITTEN.
+    // It held only for the grouping column's OWN cell (cellIsGrouped's branch renders before
+    // the editor branch); a non-grouping EDITABLE column's cell on a group row fell straight
+    // through the branch chain to isEditing(...) and opened an editor (the C1 defect this
+    // quick task closed). What is now TRUE, and WHY: isActiveCellEditable() carries an
+    // explicit rowIndexIsGrouped(...) row guard (filterPaginationRowChrome.rzts), so EVERY
+    // editable column's cell on a group row is non-editable — that is what makes the four
+    // edit-entry branches above fall through to this one, not an incidental property of the
+    // grouping column alone. Route it to the SAME onToggleExpand path the chevron uses (group
+    // rows ride the expand model) so one Enter toggles the group. Body cells only (a
+    // header-active Enter is unchanged);
     // ($data.rows || [])[$data.activeRow] is the active flattened row (page-relative non-virtual /
     // full-model virtual — both index $data.rows). Placed BEFORE the reserved enterControl branch.
     else if (key === 'Enter' && !activeIsHeader() && rowIsGrouped((rows() || [])[activeRow()])) {
@@ -5243,6 +5367,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // rangeToTsv(): serialize the current range to TSV — rows joined by '\n', cells by '\t',
   // reading each cell's value off the visible model by index (cellValueAt). A single active
   // cell (no range) serializes that one cell. Each field is B10-escaped. Pure read — never writes.
+  // C2 (quick 260906-cvo) — DELIBERATE NON-CHANGE: this is a READ, unlike applyGridToRange's
+  // write funnel, and stays UNGUARDED for a group-header row on purpose. cellValueAt reads the
+  // column's DISPLAYED aggregate value on a group row (table-core's cell.getValue()), which is
+  // exactly what the user sees — serializing it is correct behavior, not a leak. Do not "fix"
+  // this asymmetry; it is intentional.
   function rangeToTsv() {
     const box = normalizedRange();
     const r0 = box ? box.r0 : activeRow();
@@ -5296,11 +5425,22 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     for (let gr = 0; gr < grid.length; gr++) {
       const r = originRow + gr;
       if (r > maxRow) break;
+      // C2 (quick 260906-cvo) — hoisted ONCE per ROW (never per cell): a group-header row's
+      // `original` is table-core's `leafRows[0].original` (a synthetic row), so a write
+      // resolved through it silently lands on an unrelated record. This ONE placement closes
+      // pasteRange, cutRange, clearActiveRange AND fillRange — all four build a grid and hand
+      // it to this single funnel, so guarding the four callers individually would be four
+      // chances to miss one.
+      const rowGrouped = rowIndexIsGrouped(r);
       const cols = grid[gr] || [];
       for (let gc = 0; gc < cols.length; gc++) {
         const c = originCol + gc;
         if (c > maxCol) break;
+        // A group-row cell still counts toward `total` — it is a skipped TARGET, exactly like
+        // a non-editable or validator-rejected cell — so the "N of M cells pasted" / "no cells
+        // pasted" announce keeps its existing semantics (never silently under-reports M).
         total = total + 1;
+        if (rowGrouped) continue;
         const colId = columnIdAt(r, c);
         if (colId == null || !columnEditable(colId)) continue;
         const rowObj = rowOriginalAt(r);
@@ -5806,7 +5946,13 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // isActiveCellEditable: the active cell sits in an editable column AND is a body cell
   // (req-1). Gates the F2/Enter/printable edit-entry branches in onGridKeyDown; a
   // non-editable active cell falls through to the reserved enterControl path.
+  // C1 (quick 260906-cvo) — Layer 1: a group-header row is NEVER editable, regardless of
+  // column. This is the single highest-value guard in the cluster: it closes Shift+F2, the
+  // checkbox toggle, and the F2/Enter/printable edit-entry branches in ONE edit (they are all
+  // `else if` branches gated on this predicate), AND restores fallthrough so Enter on a group
+  // row reaches the group-toggle branch below them instead of opening an editor.
   function isActiveCellEditable() {
+    if (rowIndexIsGrouped(activeRow())) return false;
     const colId = activeCellColumnId();
     return colId != null && columnEditable(colId);
   }
@@ -5824,6 +5970,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // non-virtual, wr.vi.index virtual).
   function isEditing(rowIndex: any, colIndex: any) {
     if (editVer() < 0) return false;
+    // C1 (quick 260906-cvo) — Layer 6: the ONLY layer whose reachability does not depend on a
+    // keystroke. Editing state is INDEX-based over the visible model, and nothing clears it
+    // when the row model re-derives — a consumer that changes the grouping model WHILE a cell
+    // editor is open can move a group-header row under the index $data.editingRow/
+    // editingRowIndex still holds, rendering the editor on a group row with no beginEdit
+    // involved. Placed AFTER the editVer read (preserves the Svelte/Solid re-derivation
+    // discipline the header comment above documents).
+    if (rowIndexIsGrouped(rowIndex)) return false;
     if (editingRowIndex() != null && editingRowIndex() === rowIndex) {
       const colId = columnIdAt(rowIndex, colIndex);
       return colId != null && columnEditable(colId);
@@ -5998,6 +6152,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // $data) so a Tab-advance that just setState'd activeRow/Col works on React. Clears any
   // prior invalid state. Focus moves into the editor.
   function beginEdit(rowIndex: any, colIndex: any, seed: any) {
+    // C1 (quick 260906-cvo) — Layer 2: closes the `onGridClick` (singleClickEdit) path, which
+    // calls beginEdit directly gated ONLY on columnEditable — isActiveCellEditable (Layer 1)
+    // does not run on that path at all.
+    if (rowIndexIsGrouped(rowIndex)) return;
     const colId = columnIdAt(rowIndex, colIndex);
     if (colId == null || !columnEditable(colId)) return;
     // A new edit session starts — reset the sync idempotency latch so THIS session's eventual
@@ -6204,6 +6362,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // editor:'checkbox' columns only (Space/Enter/F2), full-row edit mode is unaffected (the
   // editingRowIndex early return in onGridKeyDown already excludes it).
   function toggleActiveBooleanCell() {
+    // C1 (quick 260906-cvo) — Layer 4: the only write funnel bypassing both beginEdit/
+    // commitEdit and applyGridToRange. Reachable today only through the Layer-1-gated
+    // checkbox branch, so this line is redundant AT HEAD — it earns its place by making "no
+    // write ever targets a group row" a property of the write funnels themselves.
+    if (rowIndexIsGrouped(activeRow())) return;
     const colId = columnIdAt(activeRow(), activeColIndex());
     if (colId == null || !columnEditable(colId)) return;
     const rowList = rows() || [];
@@ -6331,6 +6494,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function beginRowEdit(row: any) {
     const rowIndex = rowIndexOf(row);
     if (rowIndex < 0) return;
+    // C1 (quick 260906-cvo) — Layer 5: a second, independent editing-state funnel that takes a
+    // row OBJECT from its caller. Reachable today only via Shift+F2 (Layer 1), so also
+    // redundant at HEAD; kept for the same reason as Layer 4 — it is a mutation entry point,
+    // and the natural call site for a future #rowActions "Edit" drop-in button.
+    if (rowIndexIsGrouped(rowIndex)) return;
     const editable = editableColumnsForRow(rowIndex);
     if (editable.length === 0) return;
     // A new edit session starts — reset the sync idempotency latch (see editCellLifecycle.rzts).
@@ -7199,20 +7367,20 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
           <Key each={visibleCellsFor(row()) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(rowIndexOf(row()), colIndexOf(row(), cell())), 'rdt-cell-active': isActiveCell(String(rowIndexOf(row())), colIndexOf(row(), cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row()))} data-col-index={rozieAttr(colIndexOf(row(), cell()))} tabIndex={rozieAttr(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={parseInlineStyle(bodyCellStyle(row(), cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} data-in-range={rozieAttr(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(rowIndexOf(row()), colIndexOf(row(), cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
-              {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+              {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(row()), value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<input type="text" data-editing-cell="" 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="" />}><input type="checkbox" data-editing-cell="" 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="" 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="">
                 <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="" 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 style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row())) })}
+                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(row()), value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row())) })}
               </span></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>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
-                {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+                {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(row()), value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay('(' + groupSubRowCount(row()) + ')')}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: row().original, checked: rowIsSelected(row()), toggle: e => onToggleRow(row(), e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(row(), $event); }} data-rozie-s-d5dcab4c="" />}
+              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: cellSlotRow(row()), checked: rowIsSelected(row()), toggle: e => onToggleRow(row(), e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(row(), $event); }} data-rozie-s-d5dcab4c="" />}
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={rowCanExpand(row())}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? 'Collapse row' : 'Expand row')} class={"rdt-expander"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(row(), $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? '▾' : '▸')}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(rowIndexOf(row()), colIndexOf(row(), cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
         </tr>
@@ -7275,20 +7443,20 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
           {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedCells(wr().row) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(wr().vi.index, colIndexOf(wr().row, cell())), 'rdt-cell-active': isActiveCell(String(wr().vi.index), colIndexOf(wr().row, cell())) })} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(wr().vi.index)} data-col-index={rozieAttr(colIndexOf(wr().row, cell()))} tabIndex={rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={parseInlineStyle(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? 'true' : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
-              {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+              {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(wr().row), value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<input type="text" data-editing-cell="" 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="" />}><input type="checkbox" data-editing-cell="" 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="" 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="">
                 <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="" 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 style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, wr().vi.index) })}
+                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(wr().row), value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, wr().vi.index) })}
               </span></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>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
-                {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+                {(_props.cellSlot ?? _props.slots?.['cell'])?.({ columnId: cell().column.id, column: cell().column, row: cellSlotRow(wr().row), value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay('(' + groupSubRowCount(wr().row) + ')')}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: wr().row.original, checked: rowIsSelected(wr().row), toggle: e => onToggleRow(wr().row, e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(wr().row, $event); }} data-rozie-s-d5dcab4c="" />}
+              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: cellSlotRow(wr().row), checked: rowIsSelected(wr().row), toggle: e => onToggleRow(wr().row, e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(wr().row, $event); }} data-rozie-s-d5dcab4c="" />}
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={rowCanExpand(wr().row)}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse row' : 'Expand row')} class={"rdt-expander"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(wr().vi.index, colIndexOf(wr().row, cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
           

package/src/helpers/columnDefUtils.ts

@@ -32,4 +32,80 @@ const wrapAggregationFn = (fn: any) => {
   }
 }
 
-export { isSafeKey, wrapAggregationFn }
+// ── B1 (quick 260906-afh) — nested group leaf def index ─────────────────────────────
+// LOOKUP-ONLY. This map is never fed to table-core (it does not replace/reshape the
+// columnDefs() array table-core consumes for createTable/setOptions — that stays
+// byte-identical); it exists purely so `defFor(colId)` (columnChrome.rzts) can resolve
+// a NESTED leaf's def (a `columns:` group child) in O(1), the same as a top-level leaf.
+//
+// collectNestedDefs: depth-first walk of a `columns` array (each entry may itself carry
+// a nested `columns` array — 3+ levels deep is supported). Writes `out[String(d.id)] = d`
+// ONLY when the id is ABSENT from `out` — first-write-wins so a caller can pre-seed `out`
+// with the higher-precedence top-level defs and this pass only ever fills GAPS.
+const collectNestedDefs = (list: any, out: any) => {
+  if (!Array.isArray(list)) return
+  for (const d of list) {
+    if (!d || d.id == null) continue
+    const id = String(d.id)
+    if (!(id in out)) out[id] = d
+    if (Array.isArray(d.columns)) collectNestedDefs(d.columns, out)
+  }
+}
+
+// indexDefsById: builds a null-prototype `{ id: def }` map from a `columnDefs()`-shaped
+// array in TWO passes. Pass 1 registers every TOP-LEVEL def unconditionally — so any id
+// that already resolves at HEAD (a top-level leaf OR a top-level group's OWN id) keeps
+// resolving to the EXACT SAME def, the byte-identical-lookup guarantee for every
+// pre-existing caller. Pass 2 walks each top-level entry's `columns` (if any) via
+// collectNestedDefs, so a nested leaf only fills a GAP — it can never shadow a
+// same-named top-level id (top-level wins regardless of array order). Object.create(null)
+// (T-AFH-01): a consumer column id of "__proto__"/"constructor" cannot pollute
+// Object.prototype through this map — mirrors the existing `byId` T-48-PP guard in
+// columnBuilders.rzts.
+const indexDefsById = (defs: any): any => {
+  const out = Object.create(null)
+  if (!Array.isArray(defs)) return out
+  for (const d of defs) {
+    if (!d || d.id == null) continue
+    out[String(d.id)] = d
+  }
+  for (const d of defs) {
+    if (d && Array.isArray(d.columns)) collectNestedDefs(d.columns, out)
+  }
+  return out
+}
+
+// ── C5+C6 (quick 260906-cvo) — groupable-leaf collection for the #groupBar ──────────────
+// C5: buildConfigDef's GROUP branch (columnBuilders.rzts) returns `{ id, header, columns }`
+// with NO `groupable` key and no accessor, so the OLD `groupableColumns()` loop's
+// `d.groupable === false` skip never fired for a group column — it was wrongly OFFERED to
+// the bar even though a group column can never produce a grouping value.
+// C6: that same loop walked TOP-LEVEL `columnDefs()` entries only, so a genuinely groupable
+// NESTED leaf (a `columns:` group child) was never offered at all.
+//
+// collectGroupableLeafDefs: a DEDICATED depth-first walk, NOT a reuse of `indexDefsById`.
+// `indexDefsById` is a LOOKUP index — it deliberately registers group columns too (a group
+// id must keep resolving for `defFor`), and its insertion order is all-top-level-first-then-
+// nested, which would both offer group columns AND hand the group bar an order that does not
+// match the rendered header order. This walk instead: recurses into a `columns:` array
+// WITHOUT ever pushing the group entry itself (closes C5 — a group column has no accessor
+// and cannot be a grouping target, so an explicit `groupable: true` on a group entry is
+// meaningless and is likewise never pushed); pushes every other (leaf) entry unless it opts
+// out via `groupable === false` (closes C6 — nested leaves are now reachable); walks in
+// DECLARATION order, depth-first, matching the rendered header order.
+const collectGroupableLeafDefs = (defs: any): any[] => {
+  const out: any[] = []
+  if (!Array.isArray(defs)) return out
+  for (const d of defs) {
+    if (!d) continue
+    if (Array.isArray(d.columns)) {
+      out.push(...collectGroupableLeafDefs(d.columns))
+      continue
+    }
+    if (d.groupable === false) continue
+    out.push(d)
+  }
+  return out
+}
+
+export { isSafeKey, wrapAggregationFn, collectNestedDefs, indexDefsById, collectGroupableLeafDefs }