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

package/dist/index.mjs

@@ -195,7 +195,35 @@ const indexOfRowIn = (rows, rowOriginal, rowId) => {
 };
 //#endregion
 //#region src/DataTable.tsx
-__rozieInjectStyle("DataTable-d5dcab4c", `.rozie-data-table[data-rozie-s-d5dcab4c] {
+__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);
@@ -683,6 +711,7 @@ function DataTable(_props) {
 	const [liveAnnounce, setLiveAnnounce] = createSignal("");
 	onMount(() => {
 		setDataDefault(data() || []);
+		seedColumnPinning();
 		table = createTable({
 			data: currentData(),
 			columns: tableColumns(),
@@ -776,6 +805,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));
@@ -825,6 +855,7 @@ function DataTable(_props) {
 		local.columns,
 		colReg()
 	], (v) => untrack(() => (() => {
+		seedColumnPinning();
 		reFeed();
 		maybeClearHistoryOnExternalSwap();
 	})()), { defer: true }));
@@ -873,6 +904,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(),
@@ -1231,9 +1290,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;
@@ -3439,6 +3501,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;
 			}
@@ -4087,8 +4154,12 @@ function DataTable(_props) {
 
     {<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
 	}) ?? <Key each={groupingKeys()} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{rozieDisplay(gk())}</span>}</Key>}
@@ -4120,13 +4191,25 @@ function DataTable(_props) {
               {<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);
+		}
 	}) ?? rozieDisplay(headerLabel(header().column.id))}
                 </span>
               </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
@@ -4135,13 +4218,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);
+		}
 	}) ?? rozieDisplay(headerLabel(header().column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(header().column.id))}</span>
@@ -4170,9 +4265,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="" /></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;
+		}
 	}) ?? <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="" /></Show>}
@@ -4184,17 +4285,37 @@ function DataTable(_props) {
             {<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)}><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
+		get columnId() {
+			return header().column.id;
+		},
+		get value() {
+			return columnFilterValue(header().column.id);
+		},
+		get uniqueValues() {
+			return getFacetedUniqueValues$1(header().column.id);
+		},
+		get minMax() {
+			return getFacetedMinMaxValues$1(header().column.id);
+		},
+		get setFilter() {
+			return 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
+		get columnId() {
+			return header().column.id;
+		},
+		get value() {
+			return columnFilterValue(header().column.id);
+		},
+		get uniqueValues() {
+			return getFacetedUniqueValues$1(header().column.id);
+		},
+		get minMax() {
+			return getFacetedMinMaxValues$1(header().column.id);
+		},
+		get setFilter() {
+			return 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) => {
@@ -4216,15 +4337,31 @@ function DataTable(_props) {
             
             {<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.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();
+		}
 	}) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<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) => {
@@ -4235,21 +4372,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) => {
@@ -4283,22 +4448,42 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c="">{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();
+		}
 	}) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(row()) + ")")}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: 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);
@@ -4313,7 +4498,9 @@ function DataTable(_props) {
         
         {<Show when={rowShowsDetail(row())}><tr class={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(row().id)} data-rozie-s-d5dcab4c="">
           <td class={"rdt-detail-cell"} colSpan={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></Show>}</>}</Key>
       </tbody>
@@ -4347,13 +4534,25 @@ function DataTable(_props) {
               {<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);
+		}
 	}) ?? rozieDisplay(headerLabel(wh().header.column.id))}
                 </span>
               </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
@@ -4361,13 +4560,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);
+		}
 	}) ?? rozieDisplay(headerLabel(wh().header.column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(wh().header.column.id))}</span>
@@ -4395,9 +4606,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="" /></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;
+		}
 	}) ?? <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="" /></Show>}
@@ -4410,17 +4627,37 @@ function DataTable(_props) {
             {<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)}><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
+		get columnId() {
+			return wh().header.column.id;
+		},
+		get value() {
+			return columnFilterValue(wh().header.column.id);
+		},
+		get uniqueValues() {
+			return getFacetedUniqueValues$1(wh().header.column.id);
+		},
+		get minMax() {
+			return getFacetedMinMaxValues$1(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$1(wh().header.column.id),
-		minMax: getFacetedMinMaxValues$1(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$1(wh().header.column.id);
+		},
+		get minMax() {
+			return getFacetedMinMaxValues$1(wh().header.column.id);
+		},
+		get setFilter() {
+			return 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) => {
@@ -4450,15 +4687,31 @@ function DataTable(_props) {
             
             {<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.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();
+		}
 	}) ?? rozieDisplay(cell().getValue())}
             </span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<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) => {
@@ -4469,21 +4722,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) => {
@@ -4517,22 +4798,42 @@ function DataTable(_props) {
 	}} data-rozie-s-d5dcab4c="">{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();
+		}
 	}) ?? rozieDisplay(cell().getValue())}
               </span>
               <span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(wr().row) + ")")}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
-		row: 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);
@@ -4548,7 +4849,9 @@ function DataTable(_props) {
         
         {<Show when={rowShowsDetail(wr().row)}><tr class={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(wr().row.id)} data-rozie-s-d5dcab4c="">
           <td class={"rdt-detail-cell"} colSpan={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></Show>}</>}</Key>