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

package/dist/index.mjs

@@ -17,6 +17,39 @@ const wrapAggregationFn = (fn) => {
 		}
 	};
 };
+const collectNestedDefs = (list, out) => {
+	if (!Array.isArray(list)) return;
+	for (const d of list) {
+		if (!d || d.id == null) continue;
+		const id = String(d.id);
+		if (!(id in out)) out[id] = d;
+		if (Array.isArray(d.columns)) collectNestedDefs(d.columns, out);
+	}
+};
+const indexDefsById = (defs) => {
+	const out = Object.create(null);
+	if (!Array.isArray(defs)) return out;
+	for (const d of defs) {
+		if (!d || d.id == null) continue;
+		out[String(d.id)] = d;
+	}
+	for (const d of defs) if (d && Array.isArray(d.columns)) collectNestedDefs(d.columns, out);
+	return out;
+};
+const collectGroupableLeafDefs = (defs) => {
+	const out = [];
+	if (!Array.isArray(defs)) return out;
+	for (const d of defs) {
+		if (!d) continue;
+		if (Array.isArray(d.columns)) {
+			out.push(...collectGroupableLeafDefs(d.columns));
+			continue;
+		}
+		if (d.groupable === false) continue;
+		out.push(d);
+	}
+	return out;
+};
 //#endregion
 //#region src/helpers/indexMath.ts
 const clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
@@ -906,6 +939,7 @@ function DataTable(_props) {
 	let columnDefsCache = null;
 	let columnDefsCacheColumnsRef = void 0;
 	let columnDefsCacheColRegRef = void 0;
+	let columnDefsIndexCache = null;
 	function columnDefs() {
 		const cfg = local.columns || [];
 		const reg = colReg() || {};
@@ -949,8 +983,13 @@ function DataTable(_props) {
 		columnDefsCache = out;
 		columnDefsCacheColumnsRef = local.columns;
 		columnDefsCacheColRegRef = colReg();
+		columnDefsIndexCache = indexDefsById(out);
 		return out;
 	}
+	function defIndex() {
+		columnDefs();
+		return columnDefsIndexCache || Object.create(null);
+	}
 	const SELECT_COL_ID = "__rdt_select";
 	const EXPANDER_COL_ID = "__rdt_expander";
 	function selectionEnabled() {
@@ -1668,9 +1707,9 @@ function DataTable(_props) {
 		return "";
 	}
 	function defFor(colId) {
-		const defs = columnDefs();
-		for (const d of defs) if (d.id === colId) return d;
-		return null;
+		if (colId == null) return null;
+		const d = defIndex()[String(colId)];
+		return d != null ? d : null;
 	}
 	function visibleCellsFor(row) {
 		return rowModelVer() >= 0 ? row.getVisibleCells() : [];
@@ -1691,12 +1730,6 @@ function DataTable(_props) {
 		const m = editMetaOf(colId);
 		return m && m.editorOptions != null ? m.editorOptions : [];
 	}
-	function hasEditorSlot(colId) {
-		return editorTypeOf(colId) === "custom" && !!(_props.editorSlot ?? _props.slots?.["editor"]);
-	}
-	function hasFilterSlot() {
-		return !!(_props.filterSlot ?? _props.slots?.["filter"]);
-	}
 	function columnIsFilterable(colId) {
 		const d = defFor(colId);
 		return !!(d && d.filterable);
@@ -1705,11 +1738,9 @@ function DataTable(_props) {
 		const d = defFor(colId);
 		return d ? d.header : colId;
 	}
-	function headerWidth(colId) {
-		if (tick() < 0 || !table) return null;
-		const col = table.getColumn(colId);
-		if (!col) return null;
-		const w = col.getSize();
+	function headerWidth(header) {
+		if (tick() < 0 || !header || typeof header.getSize !== "function") return null;
+		const w = header.getSize();
 		return w != null && w > 0 ? w + "px" : null;
 	}
 	function onResizeStart(colId, evt) {
@@ -1773,11 +1804,11 @@ function DataTable(_props) {
 		if (side === "right") return "position:sticky;right:" + (col.getAfter ? col.getAfter("right") : 0) + "px;z-index:" + zIndex + ";";
 		return "";
 	}
-	function thStyle(colId) {
+	function thStyle(header) {
 		let s = "";
-		const w = headerWidth(colId);
+		const w = headerWidth(header);
 		if (w) s += "width:" + w + ";";
-		s += pinStyle(colId, 2);
+		s += pinStyle(header && header.column ? header.column.id : null, 2);
 		return s;
 	}
 	function onGlobalFilterInput(evt) {
@@ -1863,6 +1894,9 @@ function DataTable(_props) {
 	function rowIsGrouped(row) {
 		return !!(tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
 	}
+	function rowIndexIsGrouped(rowIndex) {
+		return rowIsGrouped((rows() || [])[rowIndex]);
+	}
 	function groupingActive() {
 		return tick() >= 0 && (currentState().grouping || []).length > 0;
 	}
@@ -1876,21 +1910,54 @@ function DataTable(_props) {
 		return !!(tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
 	}
 	function groupSubRowCount(row) {
-		return row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+		if (row && row.getLeafRows) {
+			const leaves = row.getLeafRows();
+			let n = 0;
+			for (let i = 0; i < leaves.length; i++) {
+				const r = leaves[i];
+				if (!(r && r.getIsGrouped && r.getIsGrouped())) n = n + 1;
+			}
+			return n;
+		}
+		return row && row.subRows ? row.subRows.length : 0;
+	}
+	let groupRowDescriptorCache = null;
+	let groupRowDescriptorCacheVer = void 0;
+	function groupRowDescriptor(row) {
+		const ver = rowModelVer();
+		if (!groupRowDescriptorCache || groupRowDescriptorCacheVer !== ver) {
+			groupRowDescriptorCache = Object.create(null);
+			groupRowDescriptorCacheVer = ver;
+		}
+		const key = String(row.id);
+		let d = groupRowDescriptorCache[key];
+		if (!d) {
+			const groupingColumnId = row.groupingColumnId != null ? row.groupingColumnId : "";
+			const groupingValue = row.getGroupingValue ? row.getGroupingValue(groupingColumnId) : row.groupingValue;
+			d = {
+				isGroupRow: true,
+				groupId: row.id,
+				groupingColumnId,
+				groupingValue,
+				leafCount: groupSubRowCount(row)
+			};
+			groupRowDescriptorCache[key] = d;
+		}
+		return d;
+	}
+	function cellSlotRow(row) {
+		return rowIsGrouped(row) ? groupRowDescriptor(row) : row ? row.original : null;
 	}
 	function groupingKeys() {
 		return currentState().grouping || [];
 	}
 	function groupableColumns() {
 		const out = [];
-		const defs = columnDefs();
-		for (const d of defs) {
-			if (!d || d.groupable === false) continue;
-			out.push({
-				id: d.id,
-				label: d.header != null ? d.header : d.id
-			});
-		}
+		const defs = collectGroupableLeafDefs(columnDefs());
+		for (const d of defs) out.push({
+			id: d.id,
+			label: d.header != null ? d.header : d.id
+		});
 		return out;
 	}
 	function stopEvent(evt) {
@@ -2916,11 +2983,13 @@ function DataTable(_props) {
 		for (let gr = 0; gr < grid.length; gr++) {
 			const r = originRow + gr;
 			if (r > maxRow) break;
+			const rowGrouped = rowIndexIsGrouped(r);
 			const cols = grid[gr] || [];
 			for (let gc = 0; gc < cols.length; gc++) {
 				const c = originCol + gc;
 				if (c > maxCol) break;
 				total = total + 1;
+				if (rowGrouped) continue;
 				const colId = columnIdAt(r, c);
 				if (colId == null || !columnEditable(colId)) continue;
 				const rowObj = rowOriginalAt(r);
@@ -3095,8 +3164,9 @@ function DataTable(_props) {
 			fillEdgeScrollRaf = null;
 		}
 	}
-	function cellIndexFromPoint(clientX, clientY) {
-		if (typeof document === "undefined" || !document.elementFromPoint) return null;
+	const FILL_HITTEST_PROBE_RADIUS_PX = 8;
+	const FILL_HITTEST_PROBE_STEP_PX = 2;
+	function resolveCellAt(clientX, clientY) {
 		let el = document.elementFromPoint(clientX, clientY);
 		while (el && el.shadowRoot && el.shadowRoot.elementFromPoint) {
 			const inner = el.shadowRoot.elementFromPoint(clientX, clientY);
@@ -3117,6 +3187,18 @@ function DataTable(_props) {
 			c
 		};
 	}
+	function cellIndexFromPoint(clientX, clientY) {
+		if (typeof document === "undefined" || !document.elementFromPoint) return null;
+		const direct = resolveCellAt(clientX, clientY);
+		if (direct) return direct;
+		for (let d = FILL_HITTEST_PROBE_STEP_PX; d <= FILL_HITTEST_PROBE_RADIUS_PX; d += FILL_HITTEST_PROBE_STEP_PX) {
+			const right = resolveCellAt(clientX + d, clientY);
+			if (right) return right;
+			const left = resolveCellAt(clientX - d, clientY);
+			if (left) return left;
+		}
+		return null;
+	}
 	function onFillHandlePointerDown(e) {
 		if (!e) return;
 		if (e.preventDefault) e.preventDefault();
@@ -3223,11 +3305,13 @@ function DataTable(_props) {
 		return cell && cell.column ? cell.column.id : null;
 	}
 	function isActiveCellEditable() {
+		if (rowIndexIsGrouped(activeRow())) return false;
 		const colId = activeCellColumnId();
 		return colId != null && columnEditable(colId);
 	}
 	function isEditing(rowIndex, colIndex) {
 		if (editVer() < 0) return false;
+		if (rowIndexIsGrouped(rowIndex)) return false;
 		if (editingRowIndex() != null && editingRowIndex() === rowIndex) {
 			const colId = columnIdAt(rowIndex, colIndex);
 			return colId != null && columnEditable(colId);
@@ -3287,12 +3371,24 @@ function DataTable(_props) {
 		const row = (rows() || [])[editingRow()];
 		return row ? row.id : null;
 	}
-	function focusEditorWhenReady(selectAll = true) {
+	function resolveEditFocusCellEl(rowIndex, colIndex) {
+		if (rowIndex == null || colIndex == null || rowIndex < 0 || colIndex < 0) return null;
+		return resolveCellEl(String(rowIndex), colIndex);
+	}
+	function focusEditorWhenReady(rowIndex, colIndex, selectAll = true) {
 		if (!gridRoot) return;
-		if (editFocusColId() != null && hasEditorSlot(editFocusColId())) return;
 		let attempts = 0;
 		const tryFocus = () => {
-			const el = gridRoot ? gridRoot.querySelector("[data-editing-cell]") : null;
+			const cellEl = 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 = gridRoot && gridRoot.getRootNode ? gridRoot.getRootNode().activeElement : null;
 			if (ae && el && ae !== el && ae.closest && gridRoot.contains(ae) && ae.hasAttribute && ae.hasAttribute("data-editing-cell")) {
 				const aeCell = ae.closest("[data-grid-cell]");
@@ -3301,17 +3397,10 @@ function DataTable(_props) {
 				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);
@@ -3329,6 +3418,7 @@ function DataTable(_props) {
 		return cell ? cell.getValue() : null;
 	}
 	function beginEdit(rowIndex, colIndex, seed) {
+		if (rowIndexIsGrouped(rowIndex)) return;
 		const colId = columnIdAt(rowIndex, colIndex);
 		if (colId == null || !columnEditable(colId)) return;
 		committedThisSession = false;
@@ -3341,7 +3431,7 @@ function DataTable(_props) {
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
 		setEditFocusColId(colId);
-		focusEditorWhenReady(seed == null);
+		focusEditorWhenReady(rowIndex, colIndex, seed == null);
 	}
 	function focusCellWhenReady(row, col) {
 		if (!gridRoot) return;
@@ -3409,7 +3499,7 @@ function DataTable(_props) {
 		const err = runValidator(colId, newValue, rowOriginal);
 		if (err !== true) {
 			setInvalid(err);
-			focusEditorWhenReady();
+			focusEditorWhenReady(editingRow(), editingCol());
 			return false;
 		}
 		setInvalid("");
@@ -3440,6 +3530,7 @@ function DataTable(_props) {
 		return true;
 	}
 	function toggleActiveBooleanCell() {
+		if (rowIndexIsGrouped(activeRow())) return;
 		const colId = columnIdAt(activeRow(), activeColIndex());
 		if (colId == null || !columnEditable(colId)) return;
 		const row = (rows() || [])[activeRow()];
@@ -3501,12 +3592,10 @@ function DataTable(_props) {
 	}
 	function focusRowEditorAt(rowIndex, colIndex) {
 		if (!gridRoot) return;
-		const colId = columnIdAt(rowIndex, colIndex);
-		if (colId != null && hasEditorSlot(colId)) return;
 		let attempts = 0;
 		const tryFocus = () => {
 			const cellEl = 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 {
@@ -3514,6 +3603,7 @@ function DataTable(_props) {
 				} 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);
@@ -3525,6 +3615,7 @@ function DataTable(_props) {
 	function beginRowEdit(row) {
 		const rowIndex = rowIndexOf(row);
 		if (rowIndex < 0) return;
+		if (rowIndexIsGrouped(rowIndex)) return;
 		const editable = editableColumnsForRow(rowIndex);
 		if (editable.length === 0) return;
 		committedThisSession = false;
@@ -3544,7 +3635,7 @@ function DataTable(_props) {
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
 		setEditFocusColId(editable[0].colId);
-		focusEditorWhenReady();
+		focusEditorWhenReady(rowIndex, editable[0].colIndex);
 	}
 	function commitRow() {
 		if (editingRowIndex() == null) return false;
@@ -4021,14 +4112,18 @@ function DataTable(_props) {
 		"rdt-expander-th": isExpanderColumn(header().column.id),
 		"rdt-th-resizing": columnIsResizing(header().column.id),
 		"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), header()), hgLevel())
-	})} 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(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header().column.id))} data-rozie-s-d5dcab4c="">
+	})} 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(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header()))} data-rozie-s-d5dcab4c="">
             
             
             {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               
               {<Show when={header().column.getCanSort && header().column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {(_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
+                  {_props.slots?.[`colHeader-${header().column.id}`]?.({
+		columnId: header().column.id,
+		column: header().column,
+		label: headerLabel(header().column.id)
+	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
 		columnId: header().column.id,
 		column: header().column,
 		label: headerLabel(header().column.id)
@@ -4039,7 +4134,11 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c="">
                 
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {(_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
+                  {_props.slots?.[`colHeader-${header().column.id}`]?.({
+		columnId: header().column.id,
+		column: header().column,
+		label: headerLabel(header().column.id)
+	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
 		columnId: header().column.id,
 		column: header().column,
 		label: headerLabel(header().column.id)
@@ -4083,18 +4182,24 @@ function DataTable(_props) {
         {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
           <Key each={headerGroups()[headerGroups().length - 1].headers} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell"} role="presentation" style={parseInlineStyle(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
             {<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={columnIsFilterable(header().column.id) && !hasFilterSlot()}><input type="text" aria-label={rozieAttr("Filter " + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event) => {
-		onColumnFilterInput(header().column.id, $event);
-	}} onClick={($event) => {
-		stopEvent($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}{<Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.filterSlot ?? _props.slots?.["filter"])?.({
+              {<Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+                {_props.slots?.[`filter-${header().column.id}`]?.({
 		columnId: header().column.id,
 		value: columnFilterValue(header().column.id),
 		uniqueValues: getFacetedUniqueValues$1(header().column.id),
 		minMax: getFacetedMinMaxValues$1(header().column.id),
 		setFilter: setColumnFilter
-	})}
+	}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
+		columnId: header().column.id,
+		value: columnFilterValue(header().column.id),
+		uniqueValues: getFacetedUniqueValues$1(header().column.id),
+		minMax: getFacetedMinMaxValues$1(header().column.id),
+		setFilter: setColumnFilter
+	}) ?? <input type="text" aria-label={rozieAttr("Filter " + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event) => {
+		onColumnFilterInput(header().column.id, $event);
+	}} onClick={($event) => {
+		stopEvent($event);
+	}} data-rozie-s-d5dcab4c="" />}
               </span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
         </tr></Show>}</thead>
 
@@ -4110,26 +4215,55 @@ function DataTable(_props) {
 	})} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row()))} data-col-index={rozieAttr(colIndexOf(row(), cell()))} tabIndex={rozieAttr(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={parseInlineStyle(bodyCellStyle(row(), cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} data-in-range={rozieAttr(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? "true" : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(rowIndexOf(row()), colIndexOf(row(), cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
-              {(_props.cellSlot ?? _props.slots?.["cell"])?.({
+              {_props.slots?.[`cell-${cell().column.id}`]?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: row().original,
+		row: cellSlotRow(row()),
+		value: cell().getValue()
+	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
+		columnId: cell().column.id,
+		column: cell().column,
+		row: cellSlotRow(row()),
 		value: cell().getValue()
 	}) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<input type="text" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
+              {<Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Show when={editorTypeOf(cell().column.id) === "custom"} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
+		onCellEditorInput(cell().column.id, $event);
+	}} onKeyDown={($event) => {
+		onEditorKeyDown($event);
+	}} onBlur={($event) => {
+		onEditorBlur($event);
+	}} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+                {_props.slots?.[`editor-${cell().column.id}`]?.({
+		columnId: cell().column.id,
+		column: cell().column,
+		row: cellSlotRow(row()),
+		value: editorValueFor(cell().column.id),
+		commit: editorCommitFor(cell().column.id),
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
+	}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
+		columnId: cell().column.id,
+		column: cell().column,
+		row: cellSlotRow(row()),
+		value: editorValueFor(cell().column.id),
+		commit: editorCommitFor(cell().column.id),
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
+	}) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" />}
+              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
 		onCellEditorCheckbox(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
@@ -4137,38 +4271,33 @@ function DataTable(_props) {
 		onEditorBlur($event);
 	}} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
-              </select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
+              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.["editor"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: row().original,
-		value: editorValueFor(cell().column.id),
-		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor(),
-		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
-	})}
-              </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+	}} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
 		onToggleExpand(row(), $event);
 	}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? "▾" : "▸")}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
-                {(_props.cellSlot ?? _props.slots?.["cell"])?.({
+                {_props.slots?.[`cell-${cell().column.id}`]?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: row().original,
+		row: cellSlotRow(row()),
+		value: cell().getValue()
+	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
+		columnId: cell().column.id,
+		column: cell().column,
+		row: cellSlotRow(row()),
 		value: cell().getValue()
 	}) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(row()) + ")")}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: row().original,
+		row: cellSlotRow(row()),
 		checked: rowIsSelected(row()),
 		toggle: (e) => onToggleRow(row(), e)
 	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event) => {
@@ -4213,11 +4342,15 @@ function DataTable(_props) {
 		"rdt-expander-th": isExpanderColumn(wh().header.column.id),
 		"rdt-th-resizing": columnIsResizing(wh().header.column.id),
 		"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), wh().header), hgLevel())
-	})} 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(headerColIndexOf(hg(), wh().header))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
+	})} 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(headerColIndexOf(hg(), wh().header))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header))} data-rozie-s-d5dcab4c="">
             {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={wh().header.column.getCanSort && wh().header.column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {(_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
+                  {_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
+		columnId: wh().header.column.id,
+		column: wh().header.column,
+		label: headerLabel(wh().header.column.id)
+	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
 		columnId: wh().header.column.id,
 		column: wh().header.column,
 		label: headerLabel(wh().header.column.id)
@@ -4227,7 +4360,11 @@ function DataTable(_props) {
 		onHeaderSort(wh().header.column.id, $event);
 	}} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {(_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
+                  {_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
+		columnId: wh().header.column.id,
+		column: wh().header.column,
+		label: headerLabel(wh().header.column.id)
+	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
 		columnId: wh().header.column.id,
 		column: wh().header.column,
 		label: headerLabel(wh().header.column.id)
@@ -4271,18 +4408,24 @@ function DataTable(_props) {
         {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
           {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(headerGroups()[headerGroups().length - 1], headerGroups().length - 1)} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-filter-cell"} role="presentation" data-col={rozieAttr(wh().header.column.id)} style={parseInlineStyle(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
             {<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={columnIsFilterable(wh().header.column.id) && !hasFilterSlot()}><input type="text" aria-label={rozieAttr("Filter " + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event) => {
-		onColumnFilterInput(wh().header.column.id, $event);
-	}} onClick={($event) => {
-		stopEvent($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}{<Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.filterSlot ?? _props.slots?.["filter"])?.({
+              {<Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+                {_props.slots?.[`filter-${wh().header.column.id}`]?.({
+		columnId: wh().header.column.id,
+		value: columnFilterValue(wh().header.column.id),
+		uniqueValues: getFacetedUniqueValues$1(wh().header.column.id),
+		minMax: getFacetedMinMaxValues$1(wh().header.column.id),
+		setFilter: setColumnFilter
+	}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
 		columnId: wh().header.column.id,
 		value: columnFilterValue(wh().header.column.id),
 		uniqueValues: getFacetedUniqueValues$1(wh().header.column.id),
 		minMax: getFacetedMinMaxValues$1(wh().header.column.id),
 		setFilter: setColumnFilter
-	})}
+	}) ?? <input type="text" aria-label={rozieAttr("Filter " + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event) => {
+		onColumnFilterInput(wh().header.column.id, $event);
+	}} onClick={($event) => {
+		stopEvent($event);
+	}} data-rozie-s-d5dcab4c="" />}
               </span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
           {<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}</tr></Show>}</thead>
 
@@ -4306,26 +4449,55 @@ function DataTable(_props) {
 	})} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(wr().vi.index)} data-col-index={rozieAttr(colIndexOf(wr().row, cell()))} tabIndex={rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={parseInlineStyle(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? "true" : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
-              {(_props.cellSlot ?? _props.slots?.["cell"])?.({
+              {_props.slots?.[`cell-${cell().column.id}`]?.({
+		columnId: cell().column.id,
+		column: cell().column,
+		row: cellSlotRow(wr().row),
+		value: cell().getValue()
+	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		value: cell().getValue()
 	}) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<input type="text" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
+              {<Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Show when={editorTypeOf(cell().column.id) === "custom"} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
+		onCellEditorInput(cell().column.id, $event);
+	}} onKeyDown={($event) => {
+		onEditorKeyDown($event);
+	}} onBlur={($event) => {
+		onEditorBlur($event);
+	}} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+                {_props.slots?.[`editor-${cell().column.id}`]?.({
+		columnId: cell().column.id,
+		column: cell().column,
+		row: cellSlotRow(wr().row),
+		value: editorValueFor(cell().column.id),
+		commit: editorCommitFor(cell().column.id),
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
+	}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
+		columnId: cell().column.id,
+		column: cell().column,
+		row: cellSlotRow(wr().row),
+		value: editorValueFor(cell().column.id),
+		commit: editorCommitFor(cell().column.id),
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
+	}) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" />}
+              </span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
 		onCellEditorCheckbox(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
@@ -4333,38 +4505,33 @@ function DataTable(_props) {
 		onEditorBlur($event);
 	}} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
-              </select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
+              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
 		onCellEditorInput(cell().column.id, $event);
 	}} onKeyDown={($event) => {
 		onEditorKeyDown($event);
 	}} onBlur={($event) => {
 		onEditorBlur($event);
-	}} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.["editor"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: wr().row.original,
-		value: editorValueFor(cell().column.id),
-		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor(),
-		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
-	})}
-              </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+	}} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
 		onToggleExpand(wr().row, $event);
 	}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? "▾" : "▸")}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
-                {(_props.cellSlot ?? _props.slots?.["cell"])?.({
+                {_props.slots?.[`cell-${cell().column.id}`]?.({
+		columnId: cell().column.id,
+		column: cell().column,
+		row: cellSlotRow(wr().row),
+		value: cell().getValue()
+	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		value: cell().getValue()
 	}) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(wr().row) + ")")}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: wr().row.original,
+		row: cellSlotRow(wr().row),
 		checked: rowIsSelected(wr().row),
 		toggle: (e) => onToggleRow(wr().row, e)
 	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event) => {