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

package/dist/index.cjs

@@ -24,6 +24,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;
@@ -468,6 +501,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this.columnDefsCache = null;
 		this.columnDefsCacheColumnsRef = void 0;
 		this.columnDefsCacheColRegRef = void 0;
+		this.columnDefsIndexCache = null;
 		this.columnDefs = () => {
 			const cfg = this.columns || [];
 			const reg = this._colReg.value || {};
@@ -511,8 +545,13 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this.columnDefsCache = out;
 			this.columnDefsCacheColumnsRef = this.columns;
 			this.columnDefsCacheColRegRef = this._colReg.value;
+			this.columnDefsIndexCache = indexDefsById(out);
 			return out;
 		};
+		this.defIndex = () => {
+			this.columnDefs();
+			return this.columnDefsIndexCache || Object.create(null);
+		};
 		this.SELECT_COL_ID = "__rdt_select";
 		this.EXPANDER_COL_ID = "__rdt_expander";
 		this.selectionEnabled = () => this.selectionMode === "single" || this.selectionMode === "multiple";
@@ -1254,9 +1293,9 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			return "";
 		};
 		this.defFor = (colId) => {
-			const defs = this.columnDefs();
-			for (const d of defs) if (d.id === colId) return d;
-			return null;
+			if (colId == null) return null;
+			const d = this.defIndex()[String(colId)];
+			return d != null ? d : null;
 		};
 		this.visibleCellsFor = (row) => this._rowModelVer.value >= 0 ? row.getVisibleCells() : [];
 		this.editMetaOf = (colId) => {
@@ -1433,22 +1472,56 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			return base;
 		};
 		this.rowIsGrouped = (row) => !!(this.tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
+		this.rowIndexIsGrouped = (rowIndex) => this.rowIsGrouped((this._rows.value || [])[rowIndex]);
 		this.groupingActive = () => this.tick() >= 0 && (this.currentState().grouping || []).length > 0;
 		this.cellIsGrouped = (cellCtx) => !!(this.tick() >= 0 && cellCtx && cellCtx.getIsGrouped && cellCtx.getIsGrouped());
 		this.cellIsAggregated = (cellCtx) => !!(this.tick() >= 0 && cellCtx && cellCtx.getIsAggregated && cellCtx.getIsAggregated());
 		this.cellIsPlaceholder = (cellCtx) => !!(this.tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
-		this.groupSubRowCount = (row) => row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+		this.groupSubRowCount = (row) => {
+			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;
+		};
+		this.groupRowDescriptorCache = null;
+		this.groupRowDescriptorCacheVer = void 0;
+		this.groupRowDescriptor = (row) => {
+			const ver = this._rowModelVer.value;
+			if (!this.groupRowDescriptorCache || this.groupRowDescriptorCacheVer !== ver) {
+				this.groupRowDescriptorCache = Object.create(null);
+				this.groupRowDescriptorCacheVer = ver;
+			}
+			const key = String(row.id);
+			let d = this.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: this.groupSubRowCount(row)
+				};
+				this.groupRowDescriptorCache[key] = d;
+			}
+			return d;
+		};
+		this.cellSlotRow = (row) => this.rowIsGrouped(row) ? this.groupRowDescriptor(row) : row ? row.original : null;
 		this.groupingKeys = () => this.currentState().grouping || [];
 		this.groupableColumns = () => {
 			const out = [];
-			const defs = this.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(this.columnDefs());
+			for (const d of defs) out.push({
+				id: d.id,
+				label: d.header != null ? d.header : d.id
+			});
 			return out;
 		};
 		this.stopEvent = (evt) => {
@@ -2446,11 +2519,13 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			for (let gr = 0; gr < grid.length; gr++) {
 				const r = originRow + gr;
 				if (r > maxRow) break;
+				const rowGrouped = this.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 = this.columnIdAt(r, c);
 					if (colId == null || !this.columnEditable(colId)) continue;
 					const rowObj = this.rowOriginalAt(r);
@@ -2760,11 +2835,13 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			return cell && cell.column ? cell.column.id : null;
 		};
 		this.isActiveCellEditable = () => {
+			if (this.rowIndexIsGrouped(this._activeRow.value)) return false;
 			const colId = this.activeCellColumnId();
 			return colId != null && this.columnEditable(colId);
 		};
 		this.isEditing = (rowIndex, colIndex) => {
 			if (this._editVer.value < 0) return false;
+			if (this.rowIndexIsGrouped(rowIndex)) return false;
 			if (this._editingRowIndex.value != null && this._editingRowIndex.value === rowIndex) {
 				const colId = this.columnIdAt(rowIndex, colIndex);
 				return colId != null && this.columnEditable(colId);
@@ -2864,6 +2941,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			return cell ? cell.getValue() : null;
 		};
 		this.beginEdit = (rowIndex, colIndex, seed) => {
+			if (this.rowIndexIsGrouped(rowIndex)) return;
 			const colId = this.columnIdAt(rowIndex, colIndex);
 			if (colId == null || !this.columnEditable(colId)) return;
 			this.committedThisSession = false;
@@ -2981,6 +3059,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			return true;
 		};
 		this.toggleActiveBooleanCell = () => {
+			if (this.rowIndexIsGrouped(this._activeRow.value)) return;
 			const colId = this.columnIdAt(this._activeRow.value, this._activeColIndex.value);
 			if (colId == null || !this.columnEditable(colId)) return;
 			const row = (this._rows.value || [])[this._activeRow.value];
@@ -3070,6 +3149,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this.beginRowEdit = (row) => {
 			const rowIndex = this.rowIndexOf(row);
 			if (rowIndex < 0) return;
+			if (this.rowIndexIsGrouped(rowIndex)) return;
 			const editable = this.editableColumnsForRow(rowIndex);
 			if (editable.length === 0) return;
 			this.committedThisSession = false;
@@ -4349,13 +4429,13 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			this.onToggleExpand(wr.row, $event);
 		}} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(this.rowIsExpanded(wr.row) ? "▾" : "▸")}</button>` : lit.nothing}</span>` : this.isSelectColumn(cell.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectCell !== void 0 ? this.selectCell({
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
 			checked: this.rowIsSelected(wr.row),
 			toggle: (e) => this.onToggleRow(wr.row, e)
 		}) : lit.html`<slot name="selectCell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
-					row: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					checked: this.rowIsSelected(wr.row)
 				});
 			} catch {
@@ -4374,14 +4454,14 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
             ${this.cell !== void 0 ? this.cell({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
 			value: cell.getValue()
 		}) : lit.html`<slot name="cell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					value: cell.getValue()
 				});
 			} catch {
@@ -4395,7 +4475,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
             ${this.editor !== void 0 ? this.editor({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
@@ -4405,7 +4485,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
@@ -4445,14 +4525,14 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
           ${this.cell !== void 0 ? this.cell({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
 			value: cell.getValue()
 		}) : lit.html`<slot name="cell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					value: cell.getValue()
 				});
 			} catch {
@@ -4643,13 +4723,13 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			this.onToggleExpand(row, $event);
 		}} data-rozie-s-d5dcab4c>${(0, _rozie_runtime_lit.rozieDisplay)(this.rowIsExpanded(row) ? "▾" : "▸")}</button>` : lit.nothing}</span>` : this.isSelectColumn(cell.column.id) ? lit.html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectCell !== void 0 ? this.selectCell({
-			row: row.original,
+			row: this.cellSlotRow(row),
 			checked: this.rowIsSelected(row),
 			toggle: (e) => this.onToggleRow(row, e)
 		}) : lit.html`<slot name="selectCell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
-					row: row.original,
+					row: this.cellSlotRow(row),
 					checked: this.rowIsSelected(row)
 				});
 			} catch {
@@ -4668,14 +4748,14 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
             ${this.cell !== void 0 ? this.cell({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: row.original,
+			row: this.cellSlotRow(row),
 			value: cell.getValue()
 		}) : lit.html`<slot name="cell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: row.original,
+					row: this.cellSlotRow(row),
 					value: cell.getValue()
 				});
 			} catch {
@@ -4689,7 +4769,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
             ${this.editor !== void 0 ? this.editor({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: row.original,
+			row: this.cellSlotRow(row),
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
@@ -4699,7 +4779,7 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: row.original,
+					row: this.cellSlotRow(row),
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
@@ -4739,14 +4819,14 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
           ${this.cell !== void 0 ? this.cell({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: row.original,
+			row: this.cellSlotRow(row),
 			value: cell.getValue()
 		}) : lit.html`<slot name="cell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: row.original,
+					row: this.cellSlotRow(row),
 					value: cell.getValue()
 				});
 			} catch {

package/dist/index.d.cts

@@ -308,7 +308,9 @@ declare class DataTable extends DataTable_base {
   columnDefsCache: any[] | null;
   columnDefsCacheColumnsRef: any;
   columnDefsCacheColRegRef: any;
+  columnDefsIndexCache: any;
   columnDefs: () => any[];
+  defIndex: () => any;
   SELECT_COL_ID: string;
   EXPANDER_COL_ID: string;
   selectionEnabled: () => boolean;
@@ -456,11 +458,16 @@ declare class DataTable extends DataTable_base {
   onToggleExpand: (row: any, evt: any) => void;
   bodyCellStyle: (row: any, colId: any) => string;
   rowIsGrouped: (row: any) => boolean;
+  rowIndexIsGrouped: (rowIndex: any) => boolean;
   groupingActive: () => boolean;
   cellIsGrouped: (cellCtx: any) => boolean;
   cellIsAggregated: (cellCtx: any) => boolean;
   cellIsPlaceholder: (cellCtx: any) => boolean;
   groupSubRowCount: (row: any) => any;
+  groupRowDescriptorCache: any;
+  groupRowDescriptorCacheVer: any;
+  groupRowDescriptor: (row: any) => any;
+  cellSlotRow: (row: any) => any;
   groupingKeys: () => any;
   groupableColumns: () => any[];
   stopEvent: (evt: any) => void;

package/dist/index.d.mts

@@ -308,7 +308,9 @@ declare class DataTable extends DataTable_base {
   columnDefsCache: any[] | null;
   columnDefsCacheColumnsRef: any;
   columnDefsCacheColRegRef: any;
+  columnDefsIndexCache: any;
   columnDefs: () => any[];
+  defIndex: () => any;
   SELECT_COL_ID: string;
   EXPANDER_COL_ID: string;
   selectionEnabled: () => boolean;
@@ -456,11 +458,16 @@ declare class DataTable extends DataTable_base {
   onToggleExpand: (row: any, evt: any) => void;
   bodyCellStyle: (row: any, colId: any) => string;
   rowIsGrouped: (row: any) => boolean;
+  rowIndexIsGrouped: (rowIndex: any) => boolean;
   groupingActive: () => boolean;
   cellIsGrouped: (cellCtx: any) => boolean;
   cellIsAggregated: (cellCtx: any) => boolean;
   cellIsPlaceholder: (cellCtx: any) => boolean;
   groupSubRowCount: (row: any) => any;
+  groupRowDescriptorCache: any;
+  groupRowDescriptorCacheVer: any;
+  groupRowDescriptor: (row: any) => any;
+  cellSlotRow: (row: any) => any;
   groupingKeys: () => any;
   groupableColumns: () => any[];
   stopEvent: (evt: any) => void;

package/dist/index.mjs

@@ -20,6 +20,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;
@@ -464,6 +497,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.columnDefsCache = null;
 		this.columnDefsCacheColumnsRef = void 0;
 		this.columnDefsCacheColRegRef = void 0;
+		this.columnDefsIndexCache = null;
 		this.columnDefs = () => {
 			const cfg = this.columns || [];
 			const reg = this._colReg.value || {};
@@ -507,8 +541,13 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this.columnDefsCache = out;
 			this.columnDefsCacheColumnsRef = this.columns;
 			this.columnDefsCacheColRegRef = this._colReg.value;
+			this.columnDefsIndexCache = indexDefsById(out);
 			return out;
 		};
+		this.defIndex = () => {
+			this.columnDefs();
+			return this.columnDefsIndexCache || Object.create(null);
+		};
 		this.SELECT_COL_ID = "__rdt_select";
 		this.EXPANDER_COL_ID = "__rdt_expander";
 		this.selectionEnabled = () => this.selectionMode === "single" || this.selectionMode === "multiple";
@@ -1250,9 +1289,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return "";
 		};
 		this.defFor = (colId) => {
-			const defs = this.columnDefs();
-			for (const d of defs) if (d.id === colId) return d;
-			return null;
+			if (colId == null) return null;
+			const d = this.defIndex()[String(colId)];
+			return d != null ? d : null;
 		};
 		this.visibleCellsFor = (row) => this._rowModelVer.value >= 0 ? row.getVisibleCells() : [];
 		this.editMetaOf = (colId) => {
@@ -1429,22 +1468,56 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return base;
 		};
 		this.rowIsGrouped = (row) => !!(this.tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
+		this.rowIndexIsGrouped = (rowIndex) => this.rowIsGrouped((this._rows.value || [])[rowIndex]);
 		this.groupingActive = () => this.tick() >= 0 && (this.currentState().grouping || []).length > 0;
 		this.cellIsGrouped = (cellCtx) => !!(this.tick() >= 0 && cellCtx && cellCtx.getIsGrouped && cellCtx.getIsGrouped());
 		this.cellIsAggregated = (cellCtx) => !!(this.tick() >= 0 && cellCtx && cellCtx.getIsAggregated && cellCtx.getIsAggregated());
 		this.cellIsPlaceholder = (cellCtx) => !!(this.tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
-		this.groupSubRowCount = (row) => row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+		this.groupSubRowCount = (row) => {
+			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;
+		};
+		this.groupRowDescriptorCache = null;
+		this.groupRowDescriptorCacheVer = void 0;
+		this.groupRowDescriptor = (row) => {
+			const ver = this._rowModelVer.value;
+			if (!this.groupRowDescriptorCache || this.groupRowDescriptorCacheVer !== ver) {
+				this.groupRowDescriptorCache = Object.create(null);
+				this.groupRowDescriptorCacheVer = ver;
+			}
+			const key = String(row.id);
+			let d = this.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: this.groupSubRowCount(row)
+				};
+				this.groupRowDescriptorCache[key] = d;
+			}
+			return d;
+		};
+		this.cellSlotRow = (row) => this.rowIsGrouped(row) ? this.groupRowDescriptor(row) : row ? row.original : null;
 		this.groupingKeys = () => this.currentState().grouping || [];
 		this.groupableColumns = () => {
 			const out = [];
-			const defs = this.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(this.columnDefs());
+			for (const d of defs) out.push({
+				id: d.id,
+				label: d.header != null ? d.header : d.id
+			});
 			return out;
 		};
 		this.stopEvent = (evt) => {
@@ -2442,11 +2515,13 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			for (let gr = 0; gr < grid.length; gr++) {
 				const r = originRow + gr;
 				if (r > maxRow) break;
+				const rowGrouped = this.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 = this.columnIdAt(r, c);
 					if (colId == null || !this.columnEditable(colId)) continue;
 					const rowObj = this.rowOriginalAt(r);
@@ -2756,11 +2831,13 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return cell && cell.column ? cell.column.id : null;
 		};
 		this.isActiveCellEditable = () => {
+			if (this.rowIndexIsGrouped(this._activeRow.value)) return false;
 			const colId = this.activeCellColumnId();
 			return colId != null && this.columnEditable(colId);
 		};
 		this.isEditing = (rowIndex, colIndex) => {
 			if (this._editVer.value < 0) return false;
+			if (this.rowIndexIsGrouped(rowIndex)) return false;
 			if (this._editingRowIndex.value != null && this._editingRowIndex.value === rowIndex) {
 				const colId = this.columnIdAt(rowIndex, colIndex);
 				return colId != null && this.columnEditable(colId);
@@ -2860,6 +2937,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return cell ? cell.getValue() : null;
 		};
 		this.beginEdit = (rowIndex, colIndex, seed) => {
+			if (this.rowIndexIsGrouped(rowIndex)) return;
 			const colId = this.columnIdAt(rowIndex, colIndex);
 			if (colId == null || !this.columnEditable(colId)) return;
 			this.committedThisSession = false;
@@ -2977,6 +3055,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			return true;
 		};
 		this.toggleActiveBooleanCell = () => {
+			if (this.rowIndexIsGrouped(this._activeRow.value)) return;
 			const colId = this.columnIdAt(this._activeRow.value, this._activeColIndex.value);
 			if (colId == null || !this.columnEditable(colId)) return;
 			const row = (this._rows.value || [])[this._activeRow.value];
@@ -3066,6 +3145,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.beginRowEdit = (row) => {
 			const rowIndex = this.rowIndexOf(row);
 			if (rowIndex < 0) return;
+			if (this.rowIndexIsGrouped(rowIndex)) return;
 			const editable = this.editableColumnsForRow(rowIndex);
 			if (editable.length === 0) return;
 			this.committedThisSession = false;
@@ -4345,13 +4425,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			this.onToggleExpand(wr.row, $event);
 		}} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(wr.row) ? "▾" : "▸")}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectCell !== void 0 ? this.selectCell({
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
 			checked: this.rowIsSelected(wr.row),
 			toggle: (e) => this.onToggleRow(wr.row, e)
 		}) : html`<slot name="selectCell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
-					row: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					checked: this.rowIsSelected(wr.row)
 				});
 			} catch {
@@ -4370,14 +4450,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
             ${this.cell !== void 0 ? this.cell({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
 			value: cell.getValue()
 		}) : html`<slot name="cell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					value: cell.getValue()
 				});
 			} catch {
@@ -4391,7 +4471,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
             ${this.editor !== void 0 ? this.editor({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
@@ -4401,7 +4481,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
@@ -4441,14 +4521,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           ${this.cell !== void 0 ? this.cell({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
 			value: cell.getValue()
 		}) : html`<slot name="cell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					value: cell.getValue()
 				});
 			} catch {
@@ -4639,13 +4719,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			this.onToggleExpand(row, $event);
 		}} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(row) ? "▾" : "▸")}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectCell !== void 0 ? this.selectCell({
-			row: row.original,
+			row: this.cellSlotRow(row),
 			checked: this.rowIsSelected(row),
 			toggle: (e) => this.onToggleRow(row, e)
 		}) : html`<slot name="selectCell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
-					row: row.original,
+					row: this.cellSlotRow(row),
 					checked: this.rowIsSelected(row)
 				});
 			} catch {
@@ -4664,14 +4744,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
             ${this.cell !== void 0 ? this.cell({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: row.original,
+			row: this.cellSlotRow(row),
 			value: cell.getValue()
 		}) : html`<slot name="cell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: row.original,
+					row: this.cellSlotRow(row),
 					value: cell.getValue()
 				});
 			} catch {
@@ -4685,7 +4765,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
             ${this.editor !== void 0 ? this.editor({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: row.original,
+			row: this.cellSlotRow(row),
 			value: this.editorValueFor(cell.column.id),
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
@@ -4695,7 +4775,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: row.original,
+					row: this.cellSlotRow(row),
 					value: this.editorValueFor(cell.column.id),
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
@@ -4735,14 +4815,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
           ${this.cell !== void 0 ? this.cell({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: row.original,
+			row: this.cellSlotRow(row),
 			value: cell.getValue()
 		}) : html`<slot name="cell" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
 					columnId: cell.column.id,
 					column: cell.column,
-					row: row.original,
+					row: this.cellSlotRow(row),
 					value: cell.getValue()
 				});
 			} catch {

package/package.json

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

package/src/DataTable.ts

@@ -5,7 +5,7 @@ import { RozieSlotDistributor, createLitControllableProperty, rozieAttr, rozieDi
 import { ContextProvider, createContext } from '@lit/context';
 import { repeat } from 'lit/directives/repeat.js';
 import '@rozie-ui/popover-lit';
-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';
@@ -1335,22 +1335,22 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(wr.row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? 'Collapse row' : 'Expand row')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(wr.row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(wr.row) ? '▾' : '▸')}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.selectCell !== undefined ? this.selectCell({row: wr.row.original, checked: this.rowIsSelected(wr.row), toggle: e => this.onToggleRow(wr.row, e)}) : html`<slot name="selectCell" data-rozie-params=${(() => { try { return JSON.stringify({row: wr.row.original, checked: this.rowIsSelected(wr.row)}); } catch { return '{}'; } })()} @rozie-select-cell-toggle=${($event: CustomEvent) => ((e => this.onToggleRow(wr.row, e)) as (...args: any[]) => any)($event.detail)}>
+          ${this.selectCell !== undefined ? this.selectCell({row: this.cellSlotRow(wr.row), checked: this.rowIsSelected(wr.row), toggle: e => this.onToggleRow(wr.row, e)}) : html`<slot name="selectCell" data-rozie-params=${(() => { try { return JSON.stringify({row: this.cellSlotRow(wr.row), checked: this.rowIsSelected(wr.row)}); } catch { return '{}'; } })()} @rozie-select-cell-toggle=${($event: CustomEvent) => ((e => this.onToggleRow(wr.row, e)) as (...args: any[]) => any)($event.detail)}>
             <input class="rdt-select-row" type="checkbox" aria-label="Select row" ?checked=${this.rowIsSelected(wr.row)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleRow(wr.row, $event); }} data-rozie-s-d5dcab4c />
           </slot>`}
         </span>` : this.cellIsGrouped(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           <button class="rdt-expander rdt-group-toggle" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(wr.row)} aria-label=${rozieAttr(this.rowIsExpanded(wr.row) ? 'Collapse group' : 'Expand group')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(wr.row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(wr.row) ? '▾' : '▸')}</button>
           <span class="rdt-group-value" data-rozie-s-d5dcab4c>
-            ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
+            ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
           </span>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay('(' + this.groupSubRowCount(wr.row) + ')')}</span>
         </span>` : this.isEditing(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}></slot>`}
+            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)}); } catch { return '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
             ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
-          ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: wr.row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
+          ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(wr.row), value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
         </span>`}${this.isFillHandleCell(wr.vi.index, this.colIndexOf(wr.row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event: PointerEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
       
       ${this.colsWindowed() ? html`<td class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle('width:' + this.colPadRight() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c></td>` : nothing}</tr>
@@ -1416,22 +1416,22 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
         
         ${this.isExpanderColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.rowCanExpand(row) ? html`<button class="rdt-expander" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? 'Collapse row' : 'Expand row')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(row) ? '▾' : '▸')}</button>` : nothing}</span>` : this.isSelectColumn(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.selectCell !== undefined ? this.selectCell({row: row.original, checked: this.rowIsSelected(row), toggle: e => this.onToggleRow(row, e)}) : html`<slot name="selectCell" data-rozie-params=${(() => { try { return JSON.stringify({row: row.original, checked: this.rowIsSelected(row)}); } catch { return '{}'; } })()} @rozie-select-cell-toggle=${($event: CustomEvent) => ((e => this.onToggleRow(row, e)) as (...args: any[]) => any)($event.detail)}>
+          ${this.selectCell !== undefined ? this.selectCell({row: this.cellSlotRow(row), checked: this.rowIsSelected(row), toggle: e => this.onToggleRow(row, e)}) : html`<slot name="selectCell" data-rozie-params=${(() => { try { return JSON.stringify({row: this.cellSlotRow(row), checked: this.rowIsSelected(row)}); } catch { return '{}'; } })()} @rozie-select-cell-toggle=${($event: CustomEvent) => ((e => this.onToggleRow(row, e)) as (...args: any[]) => any)($event.detail)}>
             <input class="rdt-select-row" type="checkbox" aria-label="Select row" ?checked=${this.rowIsSelected(row)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onToggleRow(row, $event); }} data-rozie-s-d5dcab4c />
           </slot>`}
         </span>` : this.cellIsGrouped(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           <button class="rdt-expander rdt-group-toggle" type="button" data-expander="" aria-expanded=${!!this.rowIsExpanded(row)} aria-label=${rozieAttr(this.rowIsExpanded(row) ? 'Collapse group' : 'Expand group')} @click=${($event: MouseEvent & { currentTarget: HTMLButtonElement; target: HTMLButtonElement }) => { this.onToggleExpand(row, $event); }} data-rozie-s-d5dcab4c>${rozieDisplay(this.rowIsExpanded(row) ? '▾' : '▸')}</button>
           <span class="rdt-group-value" data-rozie-s-d5dcab4c>
-            ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
+            ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
           </span>
           <span class="rdt-group-count" data-rozie-s-d5dcab4c>${rozieDisplay('(' + this.groupSubRowCount(row) + ')')}</span>
         </span>` : this.isEditing(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.hasEditorSlot(cell.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}></slot>`}
+            ${this.editor !== undefined ? this.editor({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}) : html`<slot name="editor" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: this.editorValueFor(cell.column.id), commit: this.editorCommitFor(cell.column.id), cancel: this.editorCancelFor(), autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))}); } catch { return '{}'; } })()}></slot>`}
           </span>` : this.editorTypeOf(cell.column.id) === 'number' ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === 'select' ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLSelectElement; target: HTMLSelectElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c>
             ${repeat<any>(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
           </select>` : this.editorTypeOf(cell.column.id) === 'checkbox' ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event: Event & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorCheckbox(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onCellEditorInput(cell.column.id, $event); }} @keydown=${($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorKeyDown($event); }} @blur=${($event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }) => { this.onEditorBlur($event); }} data-rozie-s-d5dcab4c />`}</span>` : this.cellIsPlaceholder(cell) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span class="rdt-cell-value" data-rozie-s-d5dcab4c>
-          ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: row.original, value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
+          ${this.cell !== undefined ? this.cell({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: cell.getValue()}) : html`<slot name="cell" data-rozie-params=${(() => { try { return JSON.stringify({columnId: cell.column.id, column: cell.column, row: this.cellSlotRow(row), value: cell.getValue()}); } catch { return '{}'; } })()}>${rozieDisplay(cell.getValue())}</slot>`}
         </span>`}${this.isFillHandleCell(this.rowIndexOf(row), this.colIndexOf(row, cell)) ? html`<span class="rdt-fill-handle" data-fill-handle="" data-testid="fill-handle" aria-hidden="true" @pointerdown=${($event: PointerEvent & { currentTarget: HTMLSpanElement; target: HTMLSpanElement }) => { this.onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
     </tr>
     
@@ -1770,6 +1770,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   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.
+  columnDefsIndexCache: any = null;
+
   columnDefs = () => {
   const cfg = this.columns || [];
   const reg = this._colReg.value || {};
@@ -1818,9 +1825,20 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   this.columnDefsCache = out;
   this.columnDefsCacheColumnsRef = this.columns;
   this.columnDefsCacheColRegRef = this._colReg.value;
+  this.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.
+  defIndex = () => {
+  this.columnDefs();
+  return this.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 "__").
   SELECT_COL_ID = '__rdt_select';
@@ -3560,10 +3578,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   // 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.
   defFor = (colId: any) => {
-  const defs = this.columnDefs();
-  for (const d of defs as any) if (d.id === colId) return d;
-  return null;
+  if (colId == null) return null;
+  const idx = this.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,
@@ -3925,6 +3951,15 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // rowIsGrouped: this flattened row is a group-header row.
   rowIsGrouped = (row: any) => !!(this.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.
+  rowIndexIsGrouped = (rowIndex: any) => this.rowIsGrouped((this._rows.value || [])[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).
   groupingActive = () => this.tick() >= 0 && (this.currentState().grouping || []).length > 0;
@@ -3937,34 +3972,119 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 
   cellIsAggregated = (cellCtx: any) => !!(this.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).
   cellIsPlaceholder = (cellCtx: any) => !!(this.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 = (row: any) => row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+  // 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.
+  groupSubRowCount = (row: any) => {
+  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.
+  groupRowDescriptorCache: any = null;
+
+  groupRowDescriptorCacheVer: any = undefined;
+
+  groupRowDescriptor = (row: any) => {
+  const ver = this._rowModelVer.value;
+  if (!this.groupRowDescriptorCache || this.groupRowDescriptorCacheVer !== ver) {
+    this.groupRowDescriptorCache = Object.create(null);
+    this.groupRowDescriptorCacheVer = ver;
+  }
+  const key = String(row.id);
+  let d = this.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: this.groupSubRowCount(row)
+    };
+    this.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.
+  cellSlotRow = (row: any) => this.rowIsGrouped(row) ? this.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),
   // both reactive sources, so the bar re-renders on a grouping change across all six targets.
   groupingKeys = () => this.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.
   groupableColumns = () => {
   const out = [];
-  const defs = this.columnDefs();
+  const defs = collectGroupableLeafDefs(this.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
@@ -4976,11 +5096,18 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     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' && !this._activeIsHeader.value && this.rowIsGrouped((this._rows.value || [])[this._activeRow.value])) {
@@ -5777,6 +5904,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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.
   rangeToTsv = () => {
   const box = this.normalizedRange();
   const r0 = box ? box.r0 : this._activeRow.value;
@@ -5830,11 +5962,22 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   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 = this.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 = this.columnIdAt(r, c);
       if (colId == null || !this.columnEditable(colId)) continue;
       const rowObj = this.rowOriginalAt(r);
@@ -6356,7 +6499,13 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // 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.
   isActiveCellEditable = () => {
+  if (this.rowIndexIsGrouped(this._activeRow.value)) return false;
   const colId = this.activeCellColumnId();
   return colId != null && this.columnEditable(colId);
 };
@@ -6374,6 +6523,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // non-virtual, wr.vi.index virtual).
   isEditing = (rowIndex: any, colIndex: any) => {
   if (this._editVer.value < 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 (this.rowIndexIsGrouped(rowIndex)) return false;
   if (this._editingRowIndex.value != null && this._editingRowIndex.value === rowIndex) {
     const colId = this.columnIdAt(rowIndex, colIndex);
     return colId != null && this.columnEditable(colId);
@@ -6551,6 +6708,10 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // $data) so a Tab-advance that just setState'd activeRow/Col works on React. Clears any
   // prior invalid state. Focus moves into the editor.
   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 (this.rowIndexIsGrouped(rowIndex)) return;
   const colId = this.columnIdAt(rowIndex, colIndex);
   if (colId == null || !this.columnEditable(colId)) return;
   // A new edit session starts — reset the sync idempotency latch so THIS session's eventual
@@ -6761,6 +6922,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   // editor:'checkbox' columns only (Space/Enter/F2), full-row edit mode is unaffected (the
   // editingRowIndex early return in onGridKeyDown already excludes it).
   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 (this.rowIndexIsGrouped(this._activeRow.value)) return;
   const colId = this.columnIdAt(this._activeRow.value, this._activeColIndex.value);
   if (colId == null || !this.columnEditable(colId)) return;
   const rowList = this._rows.value || [];
@@ -6892,6 +7058,11 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
   beginRowEdit = (row: any) => {
   const rowIndex = this.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 (this.rowIndexIsGrouped(rowIndex)) return;
   const editable = this.editableColumnsForRow(rowIndex);
   if (editable.length === 0) return;
   // A new edit session starts — reset the sync idempotency latch (see editCellLifecycle.rzts).

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 }