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

package/dist/index.mjs

@@ -396,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;
@@ -435,6 +439,34 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				left: rail.concat(deduped)
 			};
 		};
+		this.pinSeedApplied = false;
+		this.seedColumnPinning = () => {
+			if (this.pinSeedApplied) return;
+			const live = this.columnPinning != null ? this.columnPinning : this._columnPinningDefault.value;
+			const isRealPin = (id) => id !== this.SELECT_COL_ID && id !== this.EXPANDER_COL_ID;
+			if ((live && live.left ? live.left : []).filter(isRealPin).length > 0 || (live && live.right ? live.right : []).filter(isRealPin).length > 0) {
+				this.pinSeedApplied = true;
+				return;
+			}
+			const defs = this.columnDefs();
+			if (!defs.length) return;
+			const left = [];
+			const right = [];
+			for (let i = 0; i < defs.length; i++) {
+				const def = defs[i];
+				if (!def) continue;
+				if (def.pinned === "left") left.push(def.id);
+				else if (def.pinned === "right") right.push(def.id);
+			}
+			if (!left.length && !right.length) return;
+			this.pinSeedApplied = true;
+			const seeded = {
+				left,
+				right
+			};
+			this._columnPinningDefault.value = seeded;
+			this._columnPinningControllable.write(seeded);
+		};
 		this.currentState = () => ({
 			sorting: this.sorting != null ? this.sorting : this._sortingDefault.value,
 			globalFilter: this.globalFilter != null ? this.globalFilter : this._globalFilterDefault.value,
@@ -831,9 +863,12 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.onColumnPinningChangeCb = (updater) => {
 			this.writeColumnPinning(applyUpdater(updater, this.currentState().columnPinning));
 		};
+		this.columnSizingInfoSync = null;
 		this.onColumnSizingInfoChangeCb = (updater) => {
-			const next = applyUpdater(updater, this._columnSizingInfo.value);
-			this._columnSizingInfo.value = next != null ? next : this._columnSizingInfo.value;
+			const next = applyUpdater(updater, this.columnSizingInfoSync != null ? this.columnSizingInfoSync : this._columnSizingInfo.value);
+			if (next == null) return;
+			this.columnSizingInfoSync = next;
+			this._columnSizingInfo.value = next;
 		};
 		this.resolveVirtual = () => {
 			const v = this.virtual;
@@ -1310,8 +1345,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);
@@ -1320,11 +1353,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) => {
@@ -1393,11 +1424,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) => {
@@ -2703,8 +2734,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);
@@ -2725,6 +2757,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();
@@ -2895,12 +2939,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]");
@@ -2909,17 +2965,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);
@@ -2950,7 +2999,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;
@@ -2958,6 +3007,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const tryFocus = () => {
 				const el = this.resolveCellEl(String(row), col);
 				if (el) {
+					const ae = this.gridRoot && this.gridRoot.getRootNode ? this.gridRoot.getRootNode().activeElement : null;
+					if (ae && ae !== el && this.gridRoot.contains && this.gridRoot.contains(ae) && ae.closest) {
+						const aeCell = ae.closest("[data-grid-cell]");
+						if (aeCell && aeCell !== el) return;
+					}
 					el.focus();
 					return;
 				}
@@ -3019,7 +3073,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("");
@@ -3121,12 +3175,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 {
@@ -3134,6 +3186,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);
@@ -3165,7 +3218,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;
@@ -3579,6 +3632,34 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 	static {
 		this.styles = css`
 :host{display:contents}
+:host {
+  --rdt-font: var(--rozie-data-table-font);
+  --rdt-color: var(--rozie-data-table-fg);
+  --rdt-cell-padding: var(--rozie-data-table-cell-padding);
+  --rdt-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-header-bg: var(--rozie-data-table-header-bg);
+  --rdt-header-weight: var(--rozie-data-table-header-weight);
+  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
+  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-filter-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-btn-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
+  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-size-radius: var(--rozie-data-table-radius);
+  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
+  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
+  --rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-pin-btn-radius: var(--rozie-data-table-radius);
+  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
+  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-colvis-summary-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-colvis-menu-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
+  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
+  --rdt-select-accent: var(--rozie-data-table-select-accent);
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
   width: 100%;
@@ -3950,10 +4031,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));
@@ -3961,10 +4042,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));
@@ -3983,10 +4064,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));
@@ -3994,10 +4075,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));
@@ -4015,17 +4096,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;
@@ -4042,6 +4171,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					return;
 				}
 				(() => {
+					this.seedColumnPinning();
 					this.reFeed();
 					this.maybeClearHistoryOnExternalSwap();
 				})();
@@ -4081,6 +4211,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}))(this));
 		}));
 		this._dataDefault.value = this.data || [];
+		this.seedColumnPinning();
 		this.table = createTable({
 			data: this.currentData(),
 			columns: this.tableColumns(),
@@ -4175,6 +4306,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				}
 				if (this.colsWindowed()) {
 					if (!(this.gridScrollEl ? this.gridScrollEl.clientWidth : 0)) console.warn("[rozie-data-table] virtual is on for columns but the scroll container has no bounded width; set a CSS width on an ancestor so the column window can be measured");
+					this.bumpWindowVer();
 				}
 			};
 			if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));
@@ -4287,7 +4419,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(),
@@ -4311,7 +4443,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)
@@ -4326,11 +4473,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)
@@ -4345,6 +4508,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) => {
@@ -4373,12 +4537,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),
@@ -4395,7 +4573,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>
 
@@ -4447,7 +4632,24 @@ ${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: 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),
@@ -4464,11 +4666,55 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				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: this.cellSlotRow(wr.row),
@@ -4490,35 +4736,41 @@ ${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) => {
+		})()}>
+                <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 />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" .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="" ?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(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),
@@ -4535,6 +4787,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				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>`)}
@@ -4582,7 +4835,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>
@@ -4611,7 +4864,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)
@@ -4626,11 +4894,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)
@@ -4645,6 +4929,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) => {
@@ -4673,12 +4958,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),
@@ -4695,7 +4994,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>
 
@@ -4741,7 +5047,24 @@ ${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: this.cellSlotRow(row),
@@ -4758,11 +5081,55 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				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: 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),
@@ -4784,35 +5151,41 @@ ${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) => {
+		})()}>
+                <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 />` : this.editorTypeOf(cell.column.id) === "select" ? html`<select class="rdt-cell-editor" data-editing-cell="" .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="" ?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: this.cellSlotRow(row),
@@ -4829,6 +5202,7 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 				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>`)}
@@ -5062,6 +5436,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",
@@ -5074,12 +5468,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",
@@ -5092,12 +5480,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;