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

package/dist/index.mjs

@@ -1730,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);
@@ -1744,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) {
@@ -1812,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) {
@@ -3172,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);
@@ -3194,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();
@@ -3366,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]");
@@ -3380,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);
@@ -3421,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;
@@ -3489,7 +3499,7 @@ function DataTable(_props) {
 		const err = runValidator(colId, newValue, rowOriginal);
 		if (err !== true) {
 			setInvalid(err);
-			focusEditorWhenReady();
+			focusEditorWhenReady(editingRow(), editingCol());
 			return false;
 		}
 		setInvalid("");
@@ -3582,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 {
@@ -3595,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);
@@ -3626,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;
@@ -4103,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)
@@ -4121,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)
@@ -4165,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>
 
@@ -4192,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: 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);
@@ -4219,28 +4271,23 @@ 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: cellSlotRow(row()),
-		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: cellSlotRow(row()),
+		value: cell().getValue()
+	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
 		columnId: cell().column.id,
 		column: cell().column,
 		row: cellSlotRow(row()),
@@ -4295,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)
@@ -4309,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)
@@ -4353,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>
 
@@ -4388,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: 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);
@@ -4415,28 +4505,23 @@ 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: cellSlotRow(wr().row),
-		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: cellSlotRow(wr().row),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-solid",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -46,7 +46,7 @@
   ],
   "dependencies": {
     "@solid-primitives/keyed": "^1.5.3",
-    "@rozie/runtime-solid": "0.7.2"
+    "@rozie/runtime-solid": "0.7.3"
   },
   "peerDependencies": {
     "solid-js": "^1.8",