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

package/dist/index.cjs

@@ -222,7 +222,35 @@ const indexOfRowIn = (rows, rowOriginal, rowId) => {
 };
 //#endregion
 //#region src/DataTable.tsx
-(0, _rozie_runtime_solid.__rozieInjectStyle)("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4c] {
+(0, _rozie_runtime_solid.__rozieInjectStyle)("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
+  --rdt-font: var(--rozie-data-table-font);
+  --rdt-color: var(--rozie-data-table-fg);
+  --rdt-cell-padding: var(--rozie-data-table-cell-padding);
+  --rdt-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-header-bg: var(--rozie-data-table-header-bg);
+  --rdt-header-weight: var(--rozie-data-table-header-weight);
+  --rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
+  --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-filter-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-btn-radius: var(--rozie-data-table-radius);
+  --rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
+  --rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-page-size-radius: var(--rozie-data-table-radius);
+  --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
+  --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
+  --rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-pin-btn-radius: var(--rozie-data-table-radius);
+  --rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
+  --rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
+  --rdt-colvis-summary-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
+  --rdt-colvis-menu-radius: var(--rozie-data-table-radius);
+  --rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
+  --rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
+  --rdt-select-accent: var(--rozie-data-table-select-accent);
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] {
   border-collapse: collapse;
   width: 100%;
   font: var(--rdt-font, 14px system-ui, sans-serif);
@@ -710,6 +738,7 @@ function DataTable(_props) {
 	const [liveAnnounce, setLiveAnnounce] = (0, Solid_js.createSignal)("");
 	(0, Solid_js.onMount)(() => {
 		setDataDefault(data() || []);
+		seedColumnPinning();
 		table = (0, _tanstack_table_core.createTable)({
 			data: currentData(),
 			columns: tableColumns(),
@@ -803,6 +832,7 @@ function DataTable(_props) {
 				}
 				if (colsWindowed()) {
 					if (!(gridScrollEl ? gridScrollEl.clientWidth : 0)) console.warn("[rozie-data-table] virtual is on for columns but the scroll container has no bounded width; set a CSS width on an ancestor so the column window can be measured");
+					bumpWindowVer();
 				}
 			};
 			if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));
@@ -852,6 +882,7 @@ function DataTable(_props) {
 		local.columns,
 		colReg()
 	], (v) => (0, Solid_js.untrack)(() => (() => {
+		seedColumnPinning();
 		reFeed();
 		maybeClearHistoryOnExternalSwap();
 	})()), { defer: true }));
@@ -900,6 +931,34 @@ function DataTable(_props) {
 			left: rail.concat(deduped)
 		};
 	}
+	let pinSeedApplied = false;
+	function seedColumnPinning() {
+		if (pinSeedApplied) return;
+		const live = columnPinning() != null ? columnPinning() : columnPinningDefault();
+		const isRealPin = (id) => id !== SELECT_COL_ID && id !== EXPANDER_COL_ID;
+		if ((live && live.left ? live.left : []).filter(isRealPin).length > 0 || (live && live.right ? live.right : []).filter(isRealPin).length > 0) {
+			pinSeedApplied = true;
+			return;
+		}
+		const defs = columnDefs();
+		if (!defs.length) return;
+		const left = [];
+		const right = [];
+		for (let i = 0; i < defs.length; i++) {
+			const def = defs[i];
+			if (!def) continue;
+			if (def.pinned === "left") left.push(def.id);
+			else if (def.pinned === "right") right.push(def.id);
+		}
+		if (!left.length && !right.length) return;
+		pinSeedApplied = true;
+		const seeded = {
+			left,
+			right
+		};
+		setColumnPinningDefault(seeded);
+		setColumnPinning(seeded);
+	}
 	function currentState() {
 		return {
 			sorting: sorting() != null ? sorting() : sortingDefault(),
@@ -1258,9 +1317,12 @@ function DataTable(_props) {
 	function onColumnPinningChangeCb(updater) {
 		writeColumnPinning(applyUpdater(updater, currentState().columnPinning));
 	}
+	let columnSizingInfoSync = null;
 	function onColumnSizingInfoChangeCb(updater) {
-		const next = applyUpdater(updater, columnSizingInfo());
-		setColumnSizingInfo(next != null ? next : columnSizingInfo());
+		const next = applyUpdater(updater, columnSizingInfoSync != null ? columnSizingInfoSync : columnSizingInfo());
+		if (next == null) return;
+		columnSizingInfoSync = next;
+		setColumnSizingInfo(next);
 	}
 	function resolveVirtual() {
 		const v = local.virtual;
@@ -3466,6 +3528,11 @@ function DataTable(_props) {
 		const tryFocus = () => {
 			const el = resolveCellEl(String(row), col);
 			if (el) {
+				const ae = gridRoot && gridRoot.getRootNode ? gridRoot.getRootNode().activeElement : null;
+				if (ae && ae !== el && gridRoot.contains && gridRoot.contains(ae) && ae.closest) {
+					const aeCell = ae.closest("[data-grid-cell]");
+					if (aeCell && aeCell !== el) return;
+				}
 				el.focus();
 				return;
 			}
@@ -4114,8 +4181,12 @@ function DataTable(_props) {
 
     {<Solid_js.Show when={local.groupable}><div class={"rdt-group-bar-host"} data-rozie-s-d5dcab4c="">
       {(_props.groupBarSlot ?? _props.slots?.["groupBar"])?.({
-		grouping: groupingKeys(),
-		groupableColumns: groupableColumns(),
+		get grouping() {
+			return groupingKeys();
+		},
+		get groupableColumns() {
+			return groupableColumns();
+		},
 		applyGrouping,
 		clearGrouping
 	}) ?? <_solid_primitives_keyed.Key each={groupingKeys()} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(gk())}</span>}</_solid_primitives_keyed.Key>}
@@ -4147,13 +4218,25 @@ function DataTable(_props) {
               {<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.slots?.[`colHeader-${header().column.id}`]?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
+		get columnId() {
+			return header().column.id;
+		},
+		get column() {
+			return header().column;
+		},
+		get label() {
+			return headerLabel(header().column.id);
+		}
 	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
+		get columnId() {
+			return header().column.id;
+		},
+		get column() {
+			return header().column;
+		},
+		get label() {
+			return headerLabel(header().column.id);
+		}
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(header().column.id))}
                 </span>
               </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
@@ -4162,13 +4245,25 @@ function DataTable(_props) {
                 
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
                   {_props.slots?.[`colHeader-${header().column.id}`]?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
+		get columnId() {
+			return header().column.id;
+		},
+		get column() {
+			return header().column;
+		},
+		get label() {
+			return headerLabel(header().column.id);
+		}
 	}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
-		columnId: header().column.id,
-		column: header().column,
-		label: headerLabel(header().column.id)
+		get columnId() {
+			return header().column.id;
+		},
+		get column() {
+			return header().column;
+		},
+		get label() {
+			return headerLabel(header().column.id);
+		}
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(header().column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(sortIndicator(header().column.id))}</span>
@@ -4197,9 +4292,15 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
-		checked: isAllRowsSelected(),
-		indeterminate: isSomeRowsSelected(),
-		toggle: onToggleAllRows
+		get checked() {
+			return isAllRowsSelected();
+		},
+		get indeterminate() {
+			return isSomeRowsSelected();
+		},
+		get toggle() {
+			return onToggleAllRows;
+		}
 	}) ?? <Solid_js.Show when={local.selectionMode === "multiple"}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event) => {
 		onToggleAllRows($event);
 	}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}
@@ -4211,17 +4312,37 @@ function DataTable(_props) {
             {<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)}><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
+		get columnId() {
+			return header().column.id;
+		},
+		get value() {
+			return columnFilterValue(header().column.id);
+		},
+		get uniqueValues() {
+			return getFacetedUniqueValues(header().column.id);
+		},
+		get minMax() {
+			return getFacetedMinMaxValues(header().column.id);
+		},
+		get setFilter() {
+			return 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
+		get columnId() {
+			return header().column.id;
+		},
+		get value() {
+			return columnFilterValue(header().column.id);
+		},
+		get uniqueValues() {
+			return getFacetedUniqueValues(header().column.id);
+		},
+		get minMax() {
+			return getFacetedMinMaxValues(header().column.id);
+		},
+		get setFilter() {
+			return 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) => {
@@ -4243,15 +4364,31 @@ function DataTable(_props) {
             
             {<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.slots?.[`cell-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: cell().getValue()
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(row());
+		},
+		get value() {
+			return cell().getValue();
+		}
 	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: cell().getValue()
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(row());
+		},
+		get value() {
+			return 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={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) => {
@@ -4262,21 +4399,49 @@ function DataTable(_props) {
 		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()))
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(row());
+		},
+		get value() {
+			return editorValueFor(cell().column.id);
+		},
+		get commit() {
+			return editorCommitFor(cell().column.id);
+		},
+		get cancel() {
+			return editorCancelFor();
+		},
+		get autofocus() {
+			return 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()))
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(row());
+		},
+		get value() {
+			return editorValueFor(cell().column.id);
+		},
+		get commit() {
+			return editorCommitFor(cell().column.id);
+		},
+		get cancel() {
+			return editorCancelFor();
+		},
+		get autofocus() {
+			return 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) => {
@@ -4310,22 +4475,42 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(rowIsExpanded(row()) ? "▾" : "▸")}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
                 {_props.slots?.[`cell-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: cell().getValue()
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(row());
+		},
+		get value() {
+			return cell().getValue();
+		}
 	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(row()),
-		value: cell().getValue()
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(row());
+		},
+		get value() {
+			return cell().getValue();
+		}
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)("(" + groupSubRowCount(row()) + ")")}</span>
             </span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: cellSlotRow(row()),
-		checked: rowIsSelected(row()),
+		get row() {
+			return cellSlotRow(row());
+		},
+		get checked() {
+			return rowIsSelected(row());
+		},
 		toggle: (e) => onToggleRow(row(), e)
 	}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event) => {
 		onToggleRow(row(), $event);
@@ -4340,7 +4525,9 @@ function DataTable(_props) {
         
         {<Solid_js.Show when={rowShowsDetail(row())}><tr class={"rdt-detail-row"} role="row" data-detail-row={(0, _rozie_runtime_solid.rozieAttr)(row().id)} data-rozie-s-d5dcab4c="">
           <td class={"rdt-detail-cell"} colSpan={(0, _rozie_runtime_solid.rozieAttr)(visibleColCount())} data-rozie-s-d5dcab4c="">
-            {(_props.detailSlot ?? _props.slots?.["detail"])?.({ row: row().original })}
+            {(_props.detailSlot ?? _props.slots?.["detail"])?.({ get row() {
+		return row().original;
+	} })}
           </td>
         </tr></Solid_js.Show>}</>}</_solid_primitives_keyed.Key>
       </tbody>
@@ -4374,13 +4561,25 @@ function DataTable(_props) {
               {<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.slots?.[`colHeader-${wh().header.column.id}`]?.({
-		columnId: wh().header.column.id,
-		column: wh().header.column,
-		label: headerLabel(wh().header.column.id)
+		get columnId() {
+			return wh().header.column.id;
+		},
+		get column() {
+			return wh().header.column;
+		},
+		get label() {
+			return 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)
+		get columnId() {
+			return wh().header.column.id;
+		},
+		get column() {
+			return wh().header.column;
+		},
+		get label() {
+			return headerLabel(wh().header.column.id);
+		}
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(wh().header.column.id))}
                 </span>
               </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
@@ -4388,13 +4587,25 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
                   {_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
-		columnId: wh().header.column.id,
-		column: wh().header.column,
-		label: headerLabel(wh().header.column.id)
+		get columnId() {
+			return wh().header.column.id;
+		},
+		get column() {
+			return wh().header.column;
+		},
+		get label() {
+			return 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)
+		get columnId() {
+			return wh().header.column.id;
+		},
+		get column() {
+			return wh().header.column;
+		},
+		get label() {
+			return headerLabel(wh().header.column.id);
+		}
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(wh().header.column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(sortIndicator(wh().header.column.id))}</span>
@@ -4422,9 +4633,15 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
-		checked: isAllRowsSelected(),
-		indeterminate: isSomeRowsSelected(),
-		toggle: onToggleAllRows
+		get checked() {
+			return isAllRowsSelected();
+		},
+		get indeterminate() {
+			return isSomeRowsSelected();
+		},
+		get toggle() {
+			return onToggleAllRows;
+		}
 	}) ?? <Solid_js.Show when={local.selectionMode === "multiple"}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event) => {
 		onToggleAllRows($event);
 	}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}
@@ -4437,17 +4654,37 @@ function DataTable(_props) {
             {<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)}><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
+		get columnId() {
+			return wh().header.column.id;
+		},
+		get value() {
+			return columnFilterValue(wh().header.column.id);
+		},
+		get uniqueValues() {
+			return getFacetedUniqueValues(wh().header.column.id);
+		},
+		get minMax() {
+			return getFacetedMinMaxValues(wh().header.column.id);
+		},
+		get setFilter() {
+			return 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
+		get columnId() {
+			return wh().header.column.id;
+		},
+		get value() {
+			return columnFilterValue(wh().header.column.id);
+		},
+		get uniqueValues() {
+			return getFacetedUniqueValues(wh().header.column.id);
+		},
+		get minMax() {
+			return getFacetedMinMaxValues(wh().header.column.id);
+		},
+		get setFilter() {
+			return 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) => {
@@ -4477,15 +4714,31 @@ function DataTable(_props) {
             
             {<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.slots?.[`cell-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: cell().getValue()
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(wr().row);
+		},
+		get value() {
+			return cell().getValue();
+		}
 	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: cell().getValue()
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(wr().row);
+		},
+		get value() {
+			return 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={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) => {
@@ -4496,21 +4749,49 @@ function DataTable(_props) {
 		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)
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(wr().row);
+		},
+		get value() {
+			return editorValueFor(cell().column.id);
+		},
+		get commit() {
+			return editorCommitFor(cell().column.id);
+		},
+		get cancel() {
+			return editorCancelFor();
+		},
+		get autofocus() {
+			return 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)
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(wr().row);
+		},
+		get value() {
+			return editorValueFor(cell().column.id);
+		},
+		get commit() {
+			return editorCommitFor(cell().column.id);
+		},
+		get cancel() {
+			return editorCancelFor();
+		},
+		get autofocus() {
+			return 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) => {
@@ -4544,22 +4825,42 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(rowIsExpanded(wr().row) ? "▾" : "▸")}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
                 {_props.slots?.[`cell-${cell().column.id}`]?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: cell().getValue()
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(wr().row);
+		},
+		get value() {
+			return cell().getValue();
+		}
 	}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
-		columnId: cell().column.id,
-		column: cell().column,
-		row: cellSlotRow(wr().row),
-		value: cell().getValue()
+		get columnId() {
+			return cell().column.id;
+		},
+		get column() {
+			return cell().column;
+		},
+		get row() {
+			return cellSlotRow(wr().row);
+		},
+		get value() {
+			return cell().getValue();
+		}
 	}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)("(" + groupSubRowCount(wr().row) + ")")}</span>
             </span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: cellSlotRow(wr().row),
-		checked: rowIsSelected(wr().row),
+		get row() {
+			return cellSlotRow(wr().row);
+		},
+		get checked() {
+			return 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) => {
 		onToggleRow(wr().row, $event);
@@ -4575,7 +4876,9 @@ function DataTable(_props) {
         
         {<Solid_js.Show when={rowShowsDetail(wr().row)}><tr class={"rdt-detail-row"} role="row" data-detail-row={(0, _rozie_runtime_solid.rozieAttr)(wr().row.id)} data-rozie-s-d5dcab4c="">
           <td class={"rdt-detail-cell"} colSpan={(0, _rozie_runtime_solid.rozieAttr)(windowedColSpan())} data-rozie-s-d5dcab4c="">
-            {(_props.detailSlot ?? _props.slots?.["detail"])?.({ row: wr().row.original })}
+            {(_props.detailSlot ?? _props.slots?.["detail"])?.({ get row() {
+		return wr().row.original;
+	} })}
           </td>
         </tr></Solid_js.Show>}</>}</_solid_primitives_keyed.Key>