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

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;
@@ -363,12 +396,16 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this._hasSlotDefault = false;
 		this._hasSlotGroupBar = false;
 		this._hasSlotSelectAll = false;
+		this._hasSlotDynamicColHeader = false;
+		this._hasSlotDynamicFilter = false;
+		this._hasSlotSelectCell = false;
+		this._hasSlotDynamicCell = false;
+		this._hasSlotDynamicEditor = false;
+		this._hasSlotDetail = false;
 		this._hasSlotColHeader = false;
 		this._hasSlotFilter = false;
-		this._hasSlotSelectCell = false;
 		this._hasSlotCell = false;
 		this._hasSlotEditor = false;
-		this._hasSlotDetail = false;
 		this._disconnectCleanups = [];
 		this._rozieTornDown = false;
 		this.table = null;
@@ -464,6 +501,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 +545,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 +1293,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) => {
@@ -1271,8 +1314,6 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const m = this.editMetaOf(colId);
 			return m && m.editorOptions != null ? m.editorOptions : [];
 		};
-		this.hasEditorSlot = (colId) => this.editorTypeOf(colId) === "custom" && !!(this._hasSlotEditor || this.editor !== void 0);
-		this.hasFilterSlot = () => !!(this._hasSlotFilter || this.filter !== void 0);
 		this.columnIsFilterable = (colId) => {
 			const d = this.defFor(colId);
 			return !!(d && d.filterable);
@@ -1281,11 +1322,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const d = this.defFor(colId);
 			return d ? d.header : colId;
 		};
-		this.headerWidth = (colId) => {
-			if (this.tick() < 0 || !this.table) return null;
-			const col = this.table.getColumn(colId);
-			if (!col) return null;
-			const w = col.getSize();
+		this.headerWidth = (header) => {
+			if (this.tick() < 0 || !header || typeof header.getSize !== "function") return null;
+			const w = header.getSize();
 			return w != null && w > 0 ? w + "px" : null;
 		};
 		this.onResizeStart = (colId, evt) => {
@@ -1354,11 +1393,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			if (side === "right") return "position:sticky;right:" + (col.getAfter ? col.getAfter("right") : 0) + "px;z-index:" + zIndex + ";";
 			return "";
 		};
-		this.thStyle = (colId) => {
+		this.thStyle = (header) => {
 			let s = "";
-			const w = this.headerWidth(colId);
+			const w = this.headerWidth(header);
 			if (w) s += "width:" + w + ";";
-			s += this.pinStyle(colId, 2);
+			s += this.pinStyle(header && header.column ? header.column.id : null, 2);
 			return s;
 		};
 		this.onGlobalFilterInput = (evt) => {
@@ -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);
@@ -2628,8 +2703,9 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.fillEdgeScrollRaf = null;
 			}
 		};
-		this.cellIndexFromPoint = (clientX, clientY) => {
-			if (typeof document === "undefined" || !document.elementFromPoint) return null;
+		this.FILL_HITTEST_PROBE_RADIUS_PX = 8;
+		this.FILL_HITTEST_PROBE_STEP_PX = 2;
+		this.resolveCellAt = (clientX, clientY) => {
 			let el = document.elementFromPoint(clientX, clientY);
 			while (el && el.shadowRoot && el.shadowRoot.elementFromPoint) {
 				const inner = el.shadowRoot.elementFromPoint(clientX, clientY);
@@ -2650,6 +2726,18 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				c
 			};
 		};
+		this.cellIndexFromPoint = (clientX, clientY) => {
+			if (typeof document === "undefined" || !document.elementFromPoint) return null;
+			const direct = this.resolveCellAt(clientX, clientY);
+			if (direct) return direct;
+			for (let d = this.FILL_HITTEST_PROBE_STEP_PX; d <= this.FILL_HITTEST_PROBE_RADIUS_PX; d += this.FILL_HITTEST_PROBE_STEP_PX) {
+				const right = this.resolveCellAt(clientX + d, clientY);
+				if (right) return right;
+				const left = this.resolveCellAt(clientX - d, clientY);
+				if (left) return left;
+			}
+			return null;
+		};
 		this.onFillHandlePointerDown = (e) => {
 			if (!e) return;
 			if (e.preventDefault) e.preventDefault();
@@ -2756,11 +2844,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);
@@ -2818,12 +2908,24 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const row = (this._rows.value || [])[this._editingRow.value];
 			return row ? row.id : null;
 		};
-		this.focusEditorWhenReady = (selectAll = true) => {
+		this.resolveEditFocusCellEl = (rowIndex, colIndex) => {
+			if (rowIndex == null || colIndex == null || rowIndex < 0 || colIndex < 0) return null;
+			return this.resolveCellEl(String(rowIndex), colIndex);
+		};
+		this.focusEditorWhenReady = (rowIndex, colIndex, selectAll = true) => {
 			if (!this.gridRoot) return;
-			if (this._editFocusColId.value != null && this.hasEditorSlot(this._editFocusColId.value)) return;
 			let attempts = 0;
 			const tryFocus = () => {
-				const el = this.gridRoot ? this.gridRoot.querySelector("[data-editing-cell]") : null;
+				const cellEl = this.resolveEditFocusCellEl(rowIndex, colIndex);
+				const el = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell][data-builtin-editor]") : null;
+				if (!el) {
+					if (cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null) return;
+					attempts = attempts + 1;
+					if (attempts >= 30) return;
+					if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
+					else setTimeout(tryFocus, 16);
+					return;
+				}
 				const ae = this.gridRoot && this.gridRoot.getRootNode ? this.gridRoot.getRootNode().activeElement : null;
 				if (ae && el && ae !== el && ae.closest && this.gridRoot.contains(ae) && ae.hasAttribute && ae.hasAttribute("data-editing-cell")) {
 					const aeCell = ae.closest("[data-grid-cell]");
@@ -2832,17 +2934,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					const elCol = elCell ? elCell.getAttribute("data-col-index") : null;
 					if (aeCol != null && aeCol !== elCol) return;
 				}
-				if (el) {
-					el.focus();
-					if (selectAll && el.select) try {
-						el.select();
-					} catch (e) {}
-					return;
-				}
-				attempts = attempts + 1;
-				if (attempts >= 30) return;
-				if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
-				else setTimeout(tryFocus, 16);
+				el.focus();
+				if (selectAll && el.select) try {
+					el.select();
+				} catch (e) {}
 			};
 			if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
 			else setTimeout(tryFocus, 0);
@@ -2860,6 +2955,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;
@@ -2872,7 +2968,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
 			this._editFocusColId.value = colId;
-			this.focusEditorWhenReady(seed == null);
+			this.focusEditorWhenReady(rowIndex, colIndex, seed == null);
 		};
 		this.focusCellWhenReady = (row, col) => {
 			if (!this.gridRoot) return;
@@ -2941,7 +3037,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const err = this.runValidator(colId, newValue, rowOriginal);
 			if (err !== true) {
 				this.setInvalid(err);
-				this.focusEditorWhenReady();
+				this.focusEditorWhenReady(this._editingRow.value, this._editingCol.value);
 				return false;
 			}
 			this.setInvalid("");
@@ -2977,6 +3073,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];
@@ -3042,12 +3139,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		};
 		this.focusRowEditorAt = (rowIndex, colIndex) => {
 			if (!this.gridRoot) return;
-			const colId = this.columnIdAt(rowIndex, colIndex);
-			if (colId != null && this.hasEditorSlot(colId)) return;
 			let attempts = 0;
 			const tryFocus = () => {
 				const cellEl = this.resolveCellEl(String(rowIndex), colIndex);
-				const ed = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null;
+				const ed = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell][data-builtin-editor]") : null;
 				if (ed) {
 					ed.focus();
 					if (ed.select) try {
@@ -3055,6 +3150,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					} catch (e) {}
 					return;
 				}
+				if (cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null) return;
 				attempts = attempts + 1;
 				if (attempts >= 30) return;
 				if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
@@ -3066,6 +3162,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;
@@ -3085,7 +3182,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._activeInControl.value = true;
 			this._editVer.value = this._editVer.value + 1;
 			this._editFocusColId.value = editable[0].colId;
-			this.focusEditorWhenReady();
+			this.focusEditorWhenReady(rowIndex, editable[0].colIndex);
 		};
 		this.commitRow = () => {
 			if (this._editingRowIndex.value == null) return false;
@@ -3870,10 +3967,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 		}
 		{
-			const slotEl = this.shadowRoot?.querySelector("slot[name=\"colHeader\"]");
+			const slotEl = this.shadowRoot?.querySelector("slot:not([name])");
 			if (slotEl !== null && slotEl !== void 0) {
 				const update = () => {
-					this._hasSlotColHeader = this._slotColHeaderElements.length > 0;
+					this._hasSlotDynamicColHeader = this._slotDynamicColHeaderElements.length > 0;
 				};
 				slotEl.addEventListener("slotchange", update);
 				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
@@ -3881,10 +3978,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 		}
 		{
-			const slotEl = this.shadowRoot?.querySelector("slot[name=\"filter\"]");
+			const slotEl = this.shadowRoot?.querySelector("slot:not([name])");
 			if (slotEl !== null && slotEl !== void 0) {
 				const update = () => {
-					this._hasSlotFilter = this._slotFilterElements.length > 0;
+					this._hasSlotDynamicFilter = this._slotDynamicFilterElements.length > 0;
 				};
 				slotEl.addEventListener("slotchange", update);
 				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
@@ -3903,10 +4000,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 		}
 		{
-			const slotEl = this.shadowRoot?.querySelector("slot[name=\"cell\"]");
+			const slotEl = this.shadowRoot?.querySelector("slot:not([name])");
 			if (slotEl !== null && slotEl !== void 0) {
 				const update = () => {
-					this._hasSlotCell = this._slotCellElements.length > 0;
+					this._hasSlotDynamicCell = this._slotDynamicCellElements.length > 0;
 				};
 				slotEl.addEventListener("slotchange", update);
 				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
@@ -3914,10 +4011,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 		}
 		{
-			const slotEl = this.shadowRoot?.querySelector("slot[name=\"editor\"]");
+			const slotEl = this.shadowRoot?.querySelector("slot:not([name])");
 			if (slotEl !== null && slotEl !== void 0) {
 				const update = () => {
-					this._hasSlotEditor = this._slotEditorElements.length > 0;
+					this._hasSlotDynamicEditor = this._slotDynamicEditorElements.length > 0;
 				};
 				slotEl.addEventListener("slotchange", update);
 				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
@@ -3935,17 +4032,65 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				update();
 			}
 		}
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot[name=\"colHeader\"]");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotColHeader = this._slotColHeaderElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot[name=\"filter\"]");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotFilter = this._slotFilterElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot[name=\"cell\"]");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotCell = this._slotCellElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot[name=\"editor\"]");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotEditor = this._slotEditorElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
 	}
 	connectedCallback() {
 		this._hasSlotDefault = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
 		this._hasSlotGroupBar = Array.from(this.children).some((el) => el.getAttribute("slot") === "groupBar");
 		this._hasSlotSelectAll = Array.from(this.children).some((el) => el.getAttribute("slot") === "selectAll");
+		this._hasSlotDynamicColHeader = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
+		this._hasSlotDynamicFilter = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
+		this._hasSlotSelectCell = Array.from(this.children).some((el) => el.getAttribute("slot") === "selectCell");
+		this._hasSlotDynamicCell = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
+		this._hasSlotDynamicEditor = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
+		this._hasSlotDetail = Array.from(this.children).some((el) => el.getAttribute("slot") === "detail");
 		this._hasSlotColHeader = Array.from(this.children).some((el) => el.getAttribute("slot") === "colHeader");
 		this._hasSlotFilter = Array.from(this.children).some((el) => el.getAttribute("slot") === "filter");
-		this._hasSlotSelectCell = Array.from(this.children).some((el) => el.getAttribute("slot") === "selectCell");
 		this._hasSlotCell = Array.from(this.children).some((el) => el.getAttribute("slot") === "cell");
 		this._hasSlotEditor = Array.from(this.children).some((el) => el.getAttribute("slot") === "editor");
-		this._hasSlotDetail = Array.from(this.children).some((el) => el.getAttribute("slot") === "detail");
 		super.connectedCallback();
 		if (this.hasUpdated && this._rozieTornDown) {
 			this._rozieTornDown = false;
@@ -4207,7 +4352,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rdt-expander-th": this.isExpanderColumn(wh.header.column.id),
 			"rdt-th-resizing": this.columnIsResizing(wh.header.column.id),
 			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, wh.header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(wh.header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(wh.span > 1 ? wh.span : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, wh.header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, wh.header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(wh.header.column.id))} style=${rozieStyle(this.thStyle(wh.header.column.id))} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(wh.header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(wh.span > 1 ? wh.span : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, wh.header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, wh.header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(wh.header.column.id))} style=${rozieStyle(this.thStyle(wh.header))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
           ${this.selectAll !== void 0 ? this.selectAll({
 			checked: this.isAllRowsSelected(),
@@ -4231,7 +4376,22 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			this.onHeaderSort(wh.header.column.id, $event);
 		}} data-rozie-s-d5dcab4c>
             <span class="rdt-header-label" data-rozie-s-d5dcab4c>
-              ${this.colHeader !== void 0 ? this.colHeader({
+              ${this.rozieSlots?.[`colHeader-${wh.header.column.id}`] !== void 0 ? this.rozieSlots?.[`colHeader-${wh.header.column.id}`]({
+			columnId: wh.header.column.id,
+			column: wh.header.column,
+			label: this.headerLabel(wh.header.column.id)
+		}) : html`<slot name="${`colHeader-${wh.header.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: wh.header.column.id,
+					column: wh.header.column,
+					label: this.headerLabel(wh.header.column.id)
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+                ${this.colHeader !== void 0 ? this.colHeader({
 			columnId: wh.header.column.id,
 			column: wh.header.column,
 			label: this.headerLabel(wh.header.column.id)
@@ -4246,11 +4406,27 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				return "{}";
 			}
 		})()}>${rozieDisplay(this.headerLabel(wh.header.column.id))}</slot>`}
+              </slot>`}
             </span>
             <span class="rdt-sort-ind" aria-hidden="true" data-rozie-s-d5dcab4c>${rozieDisplay(this.sortIndicator(wh.header.column.id))}</span>
           </button>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
             <span class="rdt-header-label" data-rozie-s-d5dcab4c>
-              ${this.colHeader !== void 0 ? this.colHeader({
+              ${this.rozieSlots?.[`colHeader-${wh.header.column.id}`] !== void 0 ? this.rozieSlots?.[`colHeader-${wh.header.column.id}`]({
+			columnId: wh.header.column.id,
+			column: wh.header.column,
+			label: this.headerLabel(wh.header.column.id)
+		}) : html`<slot name="${`colHeader-${wh.header.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: wh.header.column.id,
+					column: wh.header.column,
+					label: this.headerLabel(wh.header.column.id)
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+                ${this.colHeader !== void 0 ? this.colHeader({
 			columnId: wh.header.column.id,
 			column: wh.header.column,
 			label: this.headerLabel(wh.header.column.id)
@@ -4265,6 +4441,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				return "{}";
 			}
 		})()}>${rozieDisplay(this.headerLabel(wh.header.column.id))}</slot>`}
+              </slot>`}
             </span>
           </span>`}<rozie-popover trigger="click" placement="bottom-end" strategy="fixed" .offset=${4} data-rozie-s-d5dcab4c><button class="rdt-col-menu-trigger" type="button" aria-label=${rozieAttr("Column options for " + this.headerLabel(wh.header.column.id))} data-rozie-s-d5dcab4c slot="anchor">⋯</button><div class="rdt-col-menu" role="menu" data-rozie-s-d5dcab4c>
               <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(wh.header.column.id) === "left"} @click=${($event) => {
@@ -4293,12 +4470,26 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
       ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}${repeat(this.windowedHeadersFor(this._headerGroups.value[this._headerGroups.value.length - 1], this._headerGroups.value.length - 1), (wh, _idx) => wh.header.id, (wh, _idx) => html`<th class="rdt-filter-cell" role="presentation" data-col=${rozieAttr(wh.header.column.id)} style=${rozieStyle(this.pinStyle(wh.header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.columnIsFilterable(wh.header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(wh.header.column.id))} .value=${this.columnFilterValue(wh.header.column.id)} @input=${($event) => {
-			this.onColumnFilterInput(wh.header.column.id, $event);
-		}} @click=${($event) => {
-			this.stopEvent($event);
-		}} data-rozie-s-d5dcab4c />` : nothing}${this.columnIsFilterable(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.filter !== void 0 ? this.filter({
+          ${this.columnIsFilterable(wh.header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+            ${this.rozieSlots?.[`filter-${wh.header.column.id}`] !== void 0 ? this.rozieSlots?.[`filter-${wh.header.column.id}`]({
+			columnId: wh.header.column.id,
+			value: this.columnFilterValue(wh.header.column.id),
+			uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
+			minMax: this.getFacetedMinMaxValues(wh.header.column.id),
+			setFilter: this.setColumnFilter
+		}) : html`<slot name="${`filter-${wh.header.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: wh.header.column.id,
+					value: this.columnFilterValue(wh.header.column.id),
+					uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
+					minMax: this.getFacetedMinMaxValues(wh.header.column.id)
+				});
+			} catch {
+				return "{}";
+			}
+		})()} @rozie-default-set-filter=${($event) => this.setColumnFilter($event.detail)}>
+              ${this.filter !== void 0 ? this.filter({
 			columnId: wh.header.column.id,
 			value: this.columnFilterValue(wh.header.column.id),
 			uniqueValues: this.getFacetedUniqueValues(wh.header.column.id),
@@ -4315,7 +4506,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			} catch {
 				return "{}";
 			}
-		})()} @rozie-filter-set-filter=${($event) => this.setColumnFilter($event.detail)}></slot>`}
+		})()} @rozie-filter-set-filter=${($event) => this.setColumnFilter($event.detail)}>
+                <input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(wh.header.column.id))} .value=${this.columnFilterValue(wh.header.column.id)} @input=${($event) => {
+			this.onColumnFilterInput(wh.header.column.id, $event);
+		}} @click=${($event) => {
+			this.stopEvent($event);
+		}} data-rozie-s-d5dcab4c />
+              </slot>`}
+            </slot>`}
           </span>` : nothing}</span>`}</th>`)}
       ${this.colsWindowed() ? html`<th class="rdt-col-spacer" aria-hidden="true" style=${rozieStyle("width:" + this.colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c></th>` : nothing}</tr>` : nothing}</thead>
 
@@ -4345,13 +4543,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 {
@@ -4367,31 +4565,92 @@ ${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>
           <span class="rdt-group-value" data-rozie-s-d5dcab4c>
-            ${this.cell !== void 0 ? this.cell({
+            ${this.rozieSlots?.[`cell-${cell.column.id}`] !== void 0 ? this.rozieSlots?.[`cell-${cell.column.id}`]({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
+			value: cell.getValue()
+		}) : html`<slot name="${`cell-${cell.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: cell.column.id,
+					column: cell.column,
+					row: this.cellSlotRow(wr.row),
+					value: cell.getValue()
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+              ${this.cell !== void 0 ? 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: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					value: cell.getValue()
 				});
 			} catch {
 				return "{}";
 			}
 		})()}>${rozieDisplay(cell.getValue())}</slot>`}
+            </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 !== void 0 ? this.editor({
+          ${this.editorTypeOf(cell.column.id) === "number" ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+			this.onCellEditorInput(cell.column.id, $event);
+		}} @keydown=${($event) => {
+			this.onEditorKeyDown($event);
+		}} @blur=${($event) => {
+			this.onEditorBlur($event);
+		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @change=${($event) => {
+			this.onCellEditorInput(cell.column.id, $event);
+		}} @keydown=${($event) => {
+			this.onEditorKeyDown($event);
+		}} @blur=${($event) => {
+			this.onEditorBlur($event);
+		}} data-rozie-s-d5dcab4c>
+            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+          </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
+			this.onCellEditorCheckbox(cell.column.id, $event);
+		}} @keydown=${($event) => {
+			this.onEditorKeyDown($event);
+		}} @blur=${($event) => {
+			this.onEditorBlur($event);
+		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "custom" ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+            ${this.rozieSlots?.[`editor-${cell.column.id}`] !== void 0 ? this.rozieSlots?.[`editor-${cell.column.id}`]({
+			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-${cell.column.id}`}" 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 "{}";
+			}
+		})()}>
+              ${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 +4660,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(),
@@ -4410,51 +4669,58 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			} 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) => {
-			this.onCellEditorInput(cell.column.id, $event);
-		}} @keydown=${($event) => {
-			this.onEditorKeyDown($event);
-		}} @blur=${($event) => {
-			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event) => {
+		})()}>
+                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c>
-            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
-          </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
-			this.onCellEditorCheckbox(cell.column.id, $event);
-		}} @keydown=${($event) => {
-			this.onEditorKeyDown($event);
-		}} @blur=${($event) => {
-			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+		}} data-rozie-s-d5dcab4c />
+              </slot>`}
+            </slot>`}
+          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			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 !== void 0 ? this.cell({
+          ${this.rozieSlots?.[`cell-${cell.column.id}`] !== void 0 ? this.rozieSlots?.[`cell-${cell.column.id}`]({
 			columnId: cell.column.id,
 			column: cell.column,
-			row: wr.row.original,
+			row: this.cellSlotRow(wr.row),
+			value: cell.getValue()
+		}) : html`<slot name="${`cell-${cell.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: cell.column.id,
+					column: cell.column,
+					row: this.cellSlotRow(wr.row),
+					value: cell.getValue()
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+            ${this.cell !== void 0 ? 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: wr.row.original,
+					row: this.cellSlotRow(wr.row),
 					value: cell.getValue()
 				});
 			} catch {
 				return "{}";
 			}
 		})()}>${rozieDisplay(cell.getValue())}</slot>`}
+          </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) => {
 			this.onFillHandlePointerDown($event);
 		}} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
@@ -4502,7 +4768,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			"rdt-expander-th": this.isExpanderColumn(header.column.id),
 			"rdt-th-resizing": this.columnIsResizing(header.column.id),
 			"rdt-cell-active": this.isActiveCell("__header", this.headerColIndexOf(hg, header), hgLevel)
-		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header.column.id))} data-rozie-s-d5dcab4c>
+		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role="columnheader" data-col=${rozieAttr(header.column.id)} data-grid-cell="" data-row="__header" data-header-level=${rozieAttr(hgLevel)} colspan=${rozieAttr(header.colSpan > 1 ? header.colSpan : null)} data-col-index=${rozieAttr(this.headerColIndexOf(hg, header))} tabindex=${rozieAttr(this.cellTabindex("__header", this.headerColIndexOf(hg, header), hgLevel))} aria-sort=${rozieAttr(this.ariaSortFor(header.column.id))} style=${rozieStyle(this.thStyle(header))} data-rozie-s-d5dcab4c>
         
         
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
@@ -4531,7 +4797,22 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 		}} data-rozie-s-d5dcab4c>
             
             <span class="rdt-header-label" data-rozie-s-d5dcab4c>
-              ${this.colHeader !== void 0 ? this.colHeader({
+              ${this.rozieSlots?.[`colHeader-${header.column.id}`] !== void 0 ? this.rozieSlots?.[`colHeader-${header.column.id}`]({
+			columnId: header.column.id,
+			column: header.column,
+			label: this.headerLabel(header.column.id)
+		}) : html`<slot name="${`colHeader-${header.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: header.column.id,
+					column: header.column,
+					label: this.headerLabel(header.column.id)
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+                ${this.colHeader !== void 0 ? this.colHeader({
 			columnId: header.column.id,
 			column: header.column,
 			label: this.headerLabel(header.column.id)
@@ -4546,11 +4827,27 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				return "{}";
 			}
 		})()}>${rozieDisplay(this.headerLabel(header.column.id))}</slot>`}
+              </slot>`}
             </span>
             <span class="rdt-sort-ind" aria-hidden="true" data-rozie-s-d5dcab4c>${rozieDisplay(this.sortIndicator(header.column.id))}</span>
           </button>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
             <span class="rdt-header-label" data-rozie-s-d5dcab4c>
-              ${this.colHeader !== void 0 ? this.colHeader({
+              ${this.rozieSlots?.[`colHeader-${header.column.id}`] !== void 0 ? this.rozieSlots?.[`colHeader-${header.column.id}`]({
+			columnId: header.column.id,
+			column: header.column,
+			label: this.headerLabel(header.column.id)
+		}) : html`<slot name="${`colHeader-${header.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: header.column.id,
+					column: header.column,
+					label: this.headerLabel(header.column.id)
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+                ${this.colHeader !== void 0 ? this.colHeader({
 			columnId: header.column.id,
 			column: header.column,
 			label: this.headerLabel(header.column.id)
@@ -4565,6 +4862,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				return "{}";
 			}
 		})()}>${rozieDisplay(this.headerLabel(header.column.id))}</slot>`}
+              </slot>`}
             </span>
           </span>`}<rozie-popover trigger="click" placement="bottom-end" strategy="fixed" .offset=${4} data-rozie-s-d5dcab4c><button class="rdt-col-menu-trigger" type="button" aria-label=${rozieAttr("Column options for " + this.headerLabel(header.column.id))} data-rozie-s-d5dcab4c slot="anchor">⋯</button><div class="rdt-col-menu" role="menu" data-rozie-s-d5dcab4c>
               <button class="rdt-col-menu-item" type="button" role="menuitem" aria-pressed=${this.columnPinSide(header.column.id) === "left"} @click=${($event) => {
@@ -4593,12 +4891,26 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
     ${this.hasAnyFilterableColumn() ? html`<tr class="rdt-filter-row" data-rozie-s-d5dcab4c>
       ${repeat(this._headerGroups.value[this._headerGroups.value.length - 1].headers, (header, _idx) => header.id, (header, _idx) => html`<th class="rdt-filter-cell" role="presentation" style=${rozieStyle(this.pinStyle(header.column.id))} data-rozie-s-d5dcab4c>
         ${this.isSelectColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : this.isExpanderColumn(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c></span>` : html`<span style="display:contents" data-rozie-s-d5dcab4c>
-          ${this.columnIsFilterable(header.column.id) && !this.hasFilterSlot() ? html`<input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
-			this.onColumnFilterInput(header.column.id, $event);
-		}} @click=${($event) => {
-			this.stopEvent($event);
-		}} data-rozie-s-d5dcab4c />` : nothing}${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
-            ${this.filter !== void 0 ? this.filter({
+          ${this.columnIsFilterable(header.column.id) ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+            ${this.rozieSlots?.[`filter-${header.column.id}`] !== void 0 ? this.rozieSlots?.[`filter-${header.column.id}`]({
+			columnId: header.column.id,
+			value: this.columnFilterValue(header.column.id),
+			uniqueValues: this.getFacetedUniqueValues(header.column.id),
+			minMax: this.getFacetedMinMaxValues(header.column.id),
+			setFilter: this.setColumnFilter
+		}) : html`<slot name="${`filter-${header.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: header.column.id,
+					value: this.columnFilterValue(header.column.id),
+					uniqueValues: this.getFacetedUniqueValues(header.column.id),
+					minMax: this.getFacetedMinMaxValues(header.column.id)
+				});
+			} catch {
+				return "{}";
+			}
+		})()} @rozie-default-set-filter=${($event) => this.setColumnFilter($event.detail)}>
+              ${this.filter !== void 0 ? this.filter({
 			columnId: header.column.id,
 			value: this.columnFilterValue(header.column.id),
 			uniqueValues: this.getFacetedUniqueValues(header.column.id),
@@ -4615,7 +4927,14 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			} catch {
 				return "{}";
 			}
-		})()} @rozie-filter-set-filter=${($event) => this.setColumnFilter($event.detail)}></slot>`}
+		})()} @rozie-filter-set-filter=${($event) => this.setColumnFilter($event.detail)}>
+                <input class="rdt-col-filter" type="text" aria-label=${rozieAttr("Filter " + this.headerLabel(header.column.id))} .value=${this.columnFilterValue(header.column.id)} @input=${($event) => {
+			this.onColumnFilterInput(header.column.id, $event);
+		}} @click=${($event) => {
+			this.stopEvent($event);
+		}} data-rozie-s-d5dcab4c />
+              </slot>`}
+            </slot>`}
           </span>` : nothing}</span>`}</th>`)}
     </tr>` : nothing}</thead>
 
@@ -4639,13 +4958,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 {
@@ -4661,31 +4980,92 @@ ${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>
           <span class="rdt-group-value" data-rozie-s-d5dcab4c>
-            ${this.cell !== void 0 ? this.cell({
+            ${this.rozieSlots?.[`cell-${cell.column.id}`] !== void 0 ? this.rozieSlots?.[`cell-${cell.column.id}`]({
+			columnId: cell.column.id,
+			column: cell.column,
+			row: this.cellSlotRow(row),
+			value: cell.getValue()
+		}) : html`<slot name="${`cell-${cell.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: cell.column.id,
+					column: cell.column,
+					row: this.cellSlotRow(row),
+					value: cell.getValue()
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+              ${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 {
 				return "{}";
 			}
 		})()}>${rozieDisplay(cell.getValue())}</slot>`}
+            </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 !== void 0 ? this.editor({
+          ${this.editorTypeOf(cell.column.id) === "number" ? html`<input class="rdt-cell-editor" type="number" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+			this.onCellEditorInput(cell.column.id, $event);
+		}} @keydown=${($event) => {
+			this.onEditorKeyDown($event);
+		}} @blur=${($event) => {
+			this.onEditorBlur($event);
+		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @change=${($event) => {
+			this.onCellEditorInput(cell.column.id, $event);
+		}} @keydown=${($event) => {
+			this.onEditorKeyDown($event);
+		}} @blur=${($event) => {
+			this.onEditorBlur($event);
+		}} data-rozie-s-d5dcab4c>
+            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
+          </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" data-builtin-editor="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
+			this.onCellEditorCheckbox(cell.column.id, $event);
+		}} @keydown=${($event) => {
+			this.onEditorKeyDown($event);
+		}} @blur=${($event) => {
+			this.onEditorBlur($event);
+		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "custom" ? html`<span style="display:contents" data-rozie-s-d5dcab4c>
+            ${this.rozieSlots?.[`editor-${cell.column.id}`] !== void 0 ? this.rozieSlots?.[`editor-${cell.column.id}`]({
 			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(),
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+		}) : html`<slot name="${`editor-${cell.column.id}`}" 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 "{}";
+			}
+		})()}>
+              ${this.editor !== void 0 ? 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(),
@@ -4695,7 +5075,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(),
@@ -4704,51 +5084,58 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			} 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) => {
-			this.onCellEditorInput(cell.column.id, $event);
-		}} @keydown=${($event) => {
-			this.onEditorKeyDown($event);
-		}} @blur=${($event) => {
-			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @change=${($event) => {
+		})()}>
+                <input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c>
-            ${repeat(this.editorOptionsOf(cell.column.id), (opt, _idx) => opt.value, (opt, _idx) => html`<option value=${rozieAttr(opt.value)} data-rozie-s-d5dcab4c>${rozieDisplay(opt.label)}</option>`)}
-          </select>` : this.editorTypeOf(cell.column.id) === "checkbox" ? html`<input class="rdt-cell-editor" type="checkbox" data-editing-cell="" ?checked=${this.editorCheckedFor(cell.column.id)} @change=${($event) => {
-			this.onCellEditorCheckbox(cell.column.id, $event);
-		}} @keydown=${($event) => {
-			this.onEditorKeyDown($event);
-		}} @blur=${($event) => {
-			this.onEditorBlur($event);
-		}} data-rozie-s-d5dcab4c />` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
+		}} data-rozie-s-d5dcab4c />
+              </slot>`}
+            </slot>`}
+          </span>` : html`<input class="rdt-cell-editor" type="text" data-editing-cell="" data-builtin-editor="" .value=${this.editorValueFor(cell.column.id)} @input=${($event) => {
 			this.onCellEditorInput(cell.column.id, $event);
 		}} @keydown=${($event) => {
 			this.onEditorKeyDown($event);
 		}} @blur=${($event) => {
 			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 !== void 0 ? this.cell({
+          ${this.rozieSlots?.[`cell-${cell.column.id}`] !== void 0 ? this.rozieSlots?.[`cell-${cell.column.id}`]({
+			columnId: cell.column.id,
+			column: cell.column,
+			row: this.cellSlotRow(row),
+			value: cell.getValue()
+		}) : html`<slot name="${`cell-${cell.column.id}`}" data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					columnId: cell.column.id,
+					column: cell.column,
+					row: this.cellSlotRow(row),
+					value: cell.getValue()
+				});
+			} catch {
+				return "{}";
+			}
+		})()}>
+            ${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 {
 				return "{}";
 			}
 		})()}>${rozieDisplay(cell.getValue())}</slot>`}
+          </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) => {
 			this.onFillHandlePointerDown($event);
 		}} data-rozie-s-d5dcab4c></span>` : nothing}</td>`)}
@@ -4982,6 +5369,26 @@ __decorate([queryAssignedElements({
 	flatten: true
 })], DataTable.prototype, "_slotSelectAllElements", void 0);
 __decorate([property({ attribute: false })], DataTable.prototype, "selectAll", void 0);
+__decorate([state()], DataTable.prototype, "_hasSlotDynamicColHeader", void 0);
+__decorate([queryAssignedElements({ flatten: true })], DataTable.prototype, "_slotDynamicColHeaderElements", void 0);
+__decorate([state()], DataTable.prototype, "_hasSlotDynamicFilter", void 0);
+__decorate([queryAssignedElements({ flatten: true })], DataTable.prototype, "_slotDynamicFilterElements", void 0);
+__decorate([state()], DataTable.prototype, "_hasSlotSelectCell", void 0);
+__decorate([queryAssignedElements({
+	slot: "selectCell",
+	flatten: true
+})], DataTable.prototype, "_slotSelectCellElements", void 0);
+__decorate([property({ attribute: false })], DataTable.prototype, "selectCell", void 0);
+__decorate([state()], DataTable.prototype, "_hasSlotDynamicCell", void 0);
+__decorate([queryAssignedElements({ flatten: true })], DataTable.prototype, "_slotDynamicCellElements", void 0);
+__decorate([state()], DataTable.prototype, "_hasSlotDynamicEditor", void 0);
+__decorate([queryAssignedElements({ flatten: true })], DataTable.prototype, "_slotDynamicEditorElements", void 0);
+__decorate([state()], DataTable.prototype, "_hasSlotDetail", void 0);
+__decorate([queryAssignedElements({
+	slot: "detail",
+	flatten: true
+})], DataTable.prototype, "_slotDetailElements", void 0);
+__decorate([property({ attribute: false })], DataTable.prototype, "detail", void 0);
 __decorate([state()], DataTable.prototype, "_hasSlotColHeader", void 0);
 __decorate([queryAssignedElements({
 	slot: "colHeader",
@@ -4994,12 +5401,6 @@ __decorate([queryAssignedElements({
 	flatten: true
 })], DataTable.prototype, "_slotFilterElements", void 0);
 __decorate([property({ attribute: false })], DataTable.prototype, "filter", void 0);
-__decorate([state()], DataTable.prototype, "_hasSlotSelectCell", void 0);
-__decorate([queryAssignedElements({
-	slot: "selectCell",
-	flatten: true
-})], DataTable.prototype, "_slotSelectCellElements", void 0);
-__decorate([property({ attribute: false })], DataTable.prototype, "selectCell", void 0);
 __decorate([state()], DataTable.prototype, "_hasSlotCell", void 0);
 __decorate([queryAssignedElements({
 	slot: "cell",
@@ -5012,12 +5413,6 @@ __decorate([queryAssignedElements({
 	flatten: true
 })], DataTable.prototype, "_slotEditorElements", void 0);
 __decorate([property({ attribute: false })], DataTable.prototype, "editor", void 0);
-__decorate([state()], DataTable.prototype, "_hasSlotDetail", void 0);
-__decorate([queryAssignedElements({
-	slot: "detail",
-	flatten: true
-})], DataTable.prototype, "_slotDetailElements", void 0);
-__decorate([property({ attribute: false })], DataTable.prototype, "detail", void 0);
 __decorate([property({ attribute: false })], DataTable.prototype, "rozieSlots", void 0);
 DataTable = __decorate([customElement("rozie-data-table")], DataTable);
 var DataTable_default = DataTable;