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

package/README.md

@@ -399,6 +399,47 @@ export function Demo() {
 }
 ```
 
+### Per-column slot families (`cell-<id>` / `colHeader-<id>` / `filter-<id>` / `editor-<id>`)
+
+```tsx
+import { DataTable, Column } from '@rozie-ui/data-table-solid';
+
+export function Demo() {
+  // A family fill is a STATIC per-column override — the additive `slots` record prop,
+  // NOT an extension of cellSlot/colHeaderSlot/filterSlot/editorSlot. Precedence per
+  // seam: slots['<seam>-<id>'] → the generic <seam>Slot prop → the built-in render.
+  // editor-<id> only reaches a column declared editor="custom"; filter-<id> only reaches
+  // a column declared filterable (shown on `category` below); cell-<id> / colHeader-<id>
+  // have no gate. A misspelled key silently no-ops — it typechecks (a trailing catch-all
+  // index signature) but is never invoked.
+  const rows = [
+    { id: 1, name: 'Alpha',   category: 'Hardware', price: 30 },
+    { id: 2, name: 'Beta',    category: 'Software', price: 90 },
+    { id: 3, name: 'Gamma',   category: 'Hardware', price: 10 },
+    { id: 4, name: 'Delta',   category: 'Service',  price: 50 },
+  ];
+  return (
+    <DataTable
+      data={rows}
+      slots={{
+        'cell-price': ({ value }) => <>💲 {value}</>,
+        'colHeader-price': ({ label }) => <>🏷️ {label}</>,
+        'filter-category': ({ columnId, uniqueValues, setFilter }) => (
+          <select onChange={(e) => setFilter(columnId, e.currentTarget.value || null)}>
+            <option value="">All</option>
+            {uniqueValues.map((v) => <option value={String(v)}>{String(v)}</option>)}
+          </select>
+        ),
+      }}
+    >
+      <Column field="name" header="Name" />
+      <Column field="category" header="Category" filterable />
+      <Column field="price" header="Price" />
+    </DataTable>
+  );
+}
+```
+
 ## Theming
 
 Every visual value is a `--rozie-data-table-*` CSS custom property — override any of them at any ancestor scope. Ready-made design-system bridges ship in the package (import `base.css` first, then a bridge):
@@ -523,14 +564,22 @@ All rendering slots live on the parent `<DataTable>` (a `<Column>` carries metad
 
 The `detail` (expandable rows), `groupBar` (grouping) and `filter` (faceted filtering) scoped slots follow the SAME render-prop convention: on React they are `renderDetail` / `renderGroupBar` / `renderFilter`; on Solid they are `detailSlot` / `groupBarSlot` / `filterSlot`; on Lit they are the `.detail` / `.groupBar` / `.filter` properties — the documented React render-prop edge (per the cross-framework compatibility bar). On Vue / Svelte / Angular they are ordinary named scoped slots (`#detail` / `#groupBar` / `#filter`). The `groupBar` and `filter` slots are HEADLESS — the component ships NO built-in group-bar / facet control, so the consumer builds the UI purely from the exposed slot props.
 
+`cell`, `colHeader`, `filter` and `editor` each also have a **per-column slot family** — a statically-named fill per `columnId` (`cell-price`, `colHeader-price`, `filter-category`, `editor-score`, …) that takes precedence OVER the matching generic slot above it: `<seam>-<id>` → the generic `<seam>` slot → the built-in render. `editor-<id>` (and `editor`) only render on a column declared `editor="custom"`; `filter-<id>` (and `filter`) only render on a column declared `filterable`; `cell-<id>` / `colHeader-<id>` have no gate. The auto-injected row-select / row-expander chrome columns never reach any family — they are excluded structurally. On Solid the family is the additive **`slots`** record prop — `slots={{ 'cell-price': (ctx) => … }}` — keyed by the exact `<seam>-<id>` string.
+
+A misspelled family key does not fail to compile — the emitted type carries a trailing catch-all index signature alongside the templated key, so it typechecks but is simply never invoked. See the "Per-column slot families" example in Usage above for the full per-target syntax.
+
 | Slot | Params |
 | --- | --- |
 | (default) |  |
 | groupBar | grouping, groupableColumns, applyGrouping, clearGrouping |
 | selectAll | checked, indeterminate, toggle |
+| colHeader-<id> | columnId, column, label |
+| filter-<id> | columnId, value, uniqueValues, minMax, setFilter |
+| selectCell | row, checked, toggle |
+| cell-<id> | columnId, column, row, value |
+| editor-<id> | columnId, column, row, value, commit, cancel, autofocus |
+| detail | row |
 | colHeader | columnId, column, label |
 | filter | columnId, value, uniqueValues, minMax, setFilter |
-| selectCell | row, checked, toggle |
 | cell | columnId, column, row, value |
 | editor | columnId, column, row, value, commit, cancel, autofocus |
-| detail | row |

package/dist/index.cjs

@@ -1757,12 +1757,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);
@@ -1771,11 +1765,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) {
@@ -1839,11 +1831,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) {
@@ -3199,8 +3191,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);
@@ -3221,6 +3214,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();
@@ -3393,12 +3398,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]");
@@ -3407,17 +3424,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);
@@ -3448,7 +3458,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;
@@ -3516,7 +3526,7 @@ function DataTable(_props) {
 		const err = runValidator(colId, newValue, rowOriginal);
 		if (err !== true) {
 			setInvalid(err);
-			focusEditorWhenReady();
+			focusEditorWhenReady(editingRow(), editingCol());
 			return false;
 		}
 		setInvalid("");
@@ -3609,12 +3619,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 {
@@ -3622,6 +3630,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);
@@ -3653,7 +3662,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;
@@ -4130,14 +4139,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={(0, _rozie_runtime_solid.rozieAttr)(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={(0, _rozie_runtime_solid.rozieAttr)(hgLevel())} colSpan={(0, _rozie_runtime_solid.rozieAttr)(header().colSpan > 1 ? header().colSpan : null)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(headerColIndexOf(hg(), header()))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={(0, _rozie_runtime_solid.rozieAttr)(ariaSortFor(header().column.id))} style={(0, _rozie_runtime_solid.parseInlineStyle)(thStyle(header().column.id))} data-rozie-s-d5dcab4c="">
+	})} role="columnheader" data-col={(0, _rozie_runtime_solid.rozieAttr)(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={(0, _rozie_runtime_solid.rozieAttr)(hgLevel())} colSpan={(0, _rozie_runtime_solid.rozieAttr)(header().colSpan > 1 ? header().colSpan : null)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(headerColIndexOf(hg(), header()))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={(0, _rozie_runtime_solid.rozieAttr)(ariaSortFor(header().column.id))} style={(0, _rozie_runtime_solid.parseInlineStyle)(thStyle(header()))} data-rozie-s-d5dcab4c="">
             
             
             {<Solid_js.Show when={isSelectColumn(header().column.id)} fallback={<Solid_js.Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               
               {<Solid_js.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)
@@ -4148,7 +4161,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)
@@ -4192,18 +4209,24 @@ function DataTable(_props) {
         {<Solid_js.Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
           <_solid_primitives_keyed.Key each={headerGroups()[headerGroups().length - 1].headers} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell"} role="presentation" style={(0, _rozie_runtime_solid.parseInlineStyle)(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
             {<Solid_js.Show when={isSelectColumn(header().column.id)} fallback={<Solid_js.Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Solid_js.Show when={columnIsFilterable(header().column.id) && !hasFilterSlot()}><input type="text" aria-label={(0, _rozie_runtime_solid.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="" /></Solid_js.Show>}{<Solid_js.Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.filterSlot ?? _props.slots?.["filter"])?.({
+              {<Solid_js.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(header().column.id),
 		minMax: getFacetedMinMaxValues(header().column.id),
 		setFilter: setColumnFilter
-	})}
+	}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
+		columnId: header().column.id,
+		value: columnFilterValue(header().column.id),
+		uniqueValues: getFacetedUniqueValues(header().column.id),
+		minMax: getFacetedMinMaxValues(header().column.id),
+		setFilter: setColumnFilter
+	}) ?? <input type="text" aria-label={(0, _rozie_runtime_solid.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></Solid_js.Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</th>}</_solid_primitives_keyed.Key>
         </tr></Solid_js.Show>}</thead>
 
@@ -4219,26 +4242,55 @@ function DataTable(_props) {
 	})} role={(0, _rozie_runtime_solid.rozieAttr)(cellRole())} data-col={(0, _rozie_runtime_solid.rozieAttr)(cell().column.id)} data-grid-cell="" data-row={(0, _rozie_runtime_solid.rozieAttr)(rowIndexOf(row()))} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(colIndexOf(row(), cell()))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={(0, _rozie_runtime_solid.parseInlineStyle)(bodyCellStyle(row(), cell().column.id))} aria-invalid={(0, _rozie_runtime_solid.rozieAttr)(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} data-in-range={(0, _rozie_runtime_solid.rozieAttr)(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? "true" : null)} data-agg-cell={(0, _rozie_runtime_solid.rozieAttr)(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Solid_js.Show when={isExpanderColumn(cell().column.id)} fallback={<Solid_js.Show when={isSelectColumn(cell().column.id)} fallback={<Solid_js.Show when={cellIsGrouped(cell())} fallback={<Solid_js.Show when={isEditing(rowIndexOf(row()), colIndexOf(row(), cell()))} fallback={<Solid_js.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(row()),
+		value: cell().getValue()
+	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
 		row: cellSlotRow(row()),
 		value: cell().getValue()
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Solid_js.Show when={hasEditorSlot(cell().column.id)} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Solid_js.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) => {
+              {<Solid_js.Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Solid_js.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></Solid_js.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="" /></Solid_js.Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" /></Solid_js.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);
@@ -4246,28 +4298,23 @@ function DataTable(_props) {
 		onEditorBlur($event);
 	}} data-rozie-s-d5dcab4c="">
                 <_solid_primitives_keyed.Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={(0, _rozie_runtime_solid.rozieAttr)(opt().value)} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(opt().label)}</option>}</_solid_primitives_keyed.Key>
-              </select></Solid_js.Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
+              </select></Solid_js.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="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.["editor"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: editorValueFor(cell().column.id),
-		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor(),
-		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
-	})}
-              </span></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+	}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={(0, _rozie_runtime_solid.rozieAttr)(rowIsExpanded(row()) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
 		onToggleExpand(row(), $event);
 	}} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.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: cellSlotRow(row()),
+		value: cell().getValue()
+	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
 		row: cellSlotRow(row()),
@@ -4322,11 +4369,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={(0, _rozie_runtime_solid.rozieAttr)(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={(0, _rozie_runtime_solid.rozieAttr)(hgLevel())} colSpan={(0, _rozie_runtime_solid.rozieAttr)(wh().span > 1 ? wh().span : null)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(headerColIndexOf(hg(), wh().header))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={(0, _rozie_runtime_solid.rozieAttr)(ariaSortFor(wh().header.column.id))} style={(0, _rozie_runtime_solid.parseInlineStyle)(thStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
+	})} role="columnheader" data-col={(0, _rozie_runtime_solid.rozieAttr)(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={(0, _rozie_runtime_solid.rozieAttr)(hgLevel())} colSpan={(0, _rozie_runtime_solid.rozieAttr)(wh().span > 1 ? wh().span : null)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(headerColIndexOf(hg(), wh().header))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={(0, _rozie_runtime_solid.rozieAttr)(ariaSortFor(wh().header.column.id))} style={(0, _rozie_runtime_solid.parseInlineStyle)(thStyle(wh().header))} data-rozie-s-d5dcab4c="">
             {<Solid_js.Show when={isSelectColumn(wh().header.column.id)} fallback={<Solid_js.Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Solid_js.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)
@@ -4336,7 +4387,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)
@@ -4380,18 +4435,24 @@ function DataTable(_props) {
         {<Solid_js.Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
           {<Solid_js.Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={(0, _rozie_runtime_solid.parseInlineStyle)("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}<_solid_primitives_keyed.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={(0, _rozie_runtime_solid.rozieAttr)(wh().header.column.id)} style={(0, _rozie_runtime_solid.parseInlineStyle)(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
             {<Solid_js.Show when={isSelectColumn(wh().header.column.id)} fallback={<Solid_js.Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Solid_js.Show when={columnIsFilterable(wh().header.column.id) && !hasFilterSlot()}><input type="text" aria-label={(0, _rozie_runtime_solid.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="" /></Solid_js.Show>}{<Solid_js.Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.filterSlot ?? _props.slots?.["filter"])?.({
+              {<Solid_js.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(wh().header.column.id),
+		minMax: getFacetedMinMaxValues(wh().header.column.id),
+		setFilter: setColumnFilter
+	}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
 		columnId: wh().header.column.id,
 		value: columnFilterValue(wh().header.column.id),
 		uniqueValues: getFacetedUniqueValues(wh().header.column.id),
 		minMax: getFacetedMinMaxValues(wh().header.column.id),
 		setFilter: setColumnFilter
-	})}
+	}) ?? <input type="text" aria-label={(0, _rozie_runtime_solid.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></Solid_js.Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</th>}</_solid_primitives_keyed.Key>
           {<Solid_js.Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={(0, _rozie_runtime_solid.parseInlineStyle)("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</tr></Solid_js.Show>}</thead>
 
@@ -4415,26 +4476,55 @@ function DataTable(_props) {
 	})} role={(0, _rozie_runtime_solid.rozieAttr)(cellRole())} data-col={(0, _rozie_runtime_solid.rozieAttr)(cell().column.id)} data-grid-cell="" data-row={(0, _rozie_runtime_solid.rozieAttr)(wr().vi.index)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(colIndexOf(wr().row, cell()))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={(0, _rozie_runtime_solid.parseInlineStyle)(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={(0, _rozie_runtime_solid.rozieAttr)(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={(0, _rozie_runtime_solid.rozieAttr)(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? "true" : null)} data-agg-cell={(0, _rozie_runtime_solid.rozieAttr)(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
             
             {<Solid_js.Show when={isExpanderColumn(cell().column.id)} fallback={<Solid_js.Show when={isSelectColumn(cell().column.id)} fallback={<Solid_js.Show when={cellIsGrouped(cell())} fallback={<Solid_js.Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Solid_js.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: cellSlotRow(wr().row),
 		value: cell().getValue()
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {<Solid_js.Show when={hasEditorSlot(cell().column.id)} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Solid_js.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) => {
+              {<Solid_js.Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Solid_js.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></Solid_js.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="" /></Solid_js.Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
+	}} data-rozie-s-d5dcab4c="" /></Solid_js.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);
@@ -4442,28 +4532,23 @@ function DataTable(_props) {
 		onEditorBlur($event);
 	}} data-rozie-s-d5dcab4c="">
                 <_solid_primitives_keyed.Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={(0, _rozie_runtime_solid.rozieAttr)(opt().value)} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(opt().label)}</option>}</_solid_primitives_keyed.Key>
-              </select></Solid_js.Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
+              </select></Solid_js.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="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.["editor"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: editorValueFor(cell().column.id),
-		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor(),
-		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
-	})}
-              </span></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+	}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={(0, _rozie_runtime_solid.rozieAttr)(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
 		onToggleExpand(wr().row, $event);
 	}} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.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: cellSlotRow(wr().row),