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

package/src/DataTable.tsx

@@ -3,7 +3,7 @@ import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, s
 import { Key } from '@solid-primitives/keyed';
 import { __rozieInjectStyle, createControllableSignal, parseInlineStyle, rozieAttr, rozieClass, rozieContext, rozieDisplay } from '@rozie/runtime-solid';
 import Popover from '@rozie-ui/popover-solid';
-import { isSafeKey, wrapAggregationFn } from './helpers/columnDefUtils';
+import { isSafeKey, wrapAggregationFn, indexDefsById, collectGroupableLeafDefs } from './helpers/columnDefUtils';
 import { applyUpdater, clamp, focusables } from './helpers/indexMath';
 import { escapeTsvField, parseTsv, tileGridToBox, tileIndex } from './helpers/tsvGrid';
 import { replaceRowValue, indexOfRowIn, replaceRowValues } from './helpers/rowValueUtils';
@@ -353,18 +353,18 @@ interface GroupBarSlotCtx { grouping: any; groupableColumns: any; applyGrouping:
 
 interface SelectAllSlotCtx { checked: any; indeterminate: any; toggle: any; }
 
+interface SelectCellSlotCtx { row: any; checked: any; toggle: any; }
+
+interface DetailSlotCtx { row: any; }
+
 interface ColHeaderSlotCtx { columnId: any; column: any; label: any; }
 
 interface FilterSlotCtx { columnId: any; value: any; uniqueValues: any; minMax: any; setFilter: any; }
 
-interface SelectCellSlotCtx { row: any; checked: any; toggle: any; }
-
 interface CellSlotCtx { columnId: any; column: any; row: any; value: any; }
 
 interface EditorSlotCtx { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any; }
 
-interface DetailSlotCtx { row: any; }
-
 interface DataTableProps {
   /**
    * The row data — `model: true`, so a committed cell/row edit writes a **fresh** array back through `r-model:data` (uncontrolled fallback `dataDefault`). A stable reference per Rozie's setup-once model — fed directly into table-core (never map/cloned in the watcher).
@@ -527,13 +527,13 @@ interface DataTableProps {
   children?: JSX.Element;
   groupBarSlot?: (ctx: GroupBarSlotCtx) => JSX.Element;
   selectAllSlot?: (ctx: SelectAllSlotCtx) => JSX.Element;
+  selectCellSlot?: (ctx: SelectCellSlotCtx) => JSX.Element;
+  detailSlot?: (ctx: DetailSlotCtx) => JSX.Element;
   colHeaderSlot?: (ctx: ColHeaderSlotCtx) => JSX.Element;
   filterSlot?: (ctx: FilterSlotCtx) => JSX.Element;
-  selectCellSlot?: (ctx: SelectCellSlotCtx) => JSX.Element;
   cellSlot?: (ctx: CellSlotCtx) => JSX.Element;
   editorSlot?: (ctx: EditorSlotCtx) => JSX.Element;
-  detailSlot?: (ctx: DetailSlotCtx) => JSX.Element;
-  slots?: Record<string, (ctx: any) => JSX.Element>;
+  slots?: { [key: `colHeader-${string}`]: ((ctx: { columnId: any; column: any; label: any }) => JSX.Element) | undefined; [key: `filter-${string}`]: ((ctx: { columnId: any; value: any; uniqueValues: any; minMax: any; setFilter: any }) => JSX.Element) | undefined; [key: `cell-${string}`]: ((ctx: { columnId: any; column: any; row: any; value: any }) => JSX.Element) | undefined; [key: `editor-${string}`]: ((ctx: { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any }) => JSX.Element) | undefined; [key: string]: ((...args: any[]) => JSX.Element) | undefined; };
   ref?: (h: DataTableHandle) => void;
 }
 
@@ -1304,6 +1304,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   let columnDefsCache: any[] | null = null;
   let columnDefsCacheColumnsRef: any = undefined;
   let columnDefsCacheColRegRef: any = undefined;
+  // B1 (quick 260906-afh) — the def-lookup index, populated INSIDE this SAME memo block on
+  // a cache MISS only (never rebuilt per call — a per-call recursive scan would restore the
+  // O(N^2 x M) blowup D-23 removed, T-AFH-03). A top-level `let` lowers to a per-instance
+  // `useRef` on React (verified in the emitted leaf), so this is instance-scoped like
+  // columnDefsCache above.
+  let columnDefsIndexCache: any = null;
   function columnDefs() {
     const cfg = local.columns || [];
     const reg = colReg() || {};
@@ -1352,9 +1358,20 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     columnDefsCache = out;
     columnDefsCacheColumnsRef = local.columns;
     columnDefsCacheColRegRef = colReg();
+    columnDefsIndexCache = indexDefsById(out);
     return out;
   }
 
+  // defIndex: the def-lookup map for the CURRENT columnDefs() array. Calling columnDefs()
+  // first is deliberate — either an O(1) reference-equality cache hit (columnDefsIndexCache
+  // is already fresh) or a miss that repopulates BOTH slots together, so the index can never
+  // go stale relative to the array. Falls back to an empty null-prototype map (never null/
+  // undefined) so a caller can read it unconditionally.
+  function defIndex() {
+    columnDefs();
+    return columnDefsIndexCache || Object.create(null);
+  }
+
   // The constant id of the auto-injected leading checkbox column (D-04). Distinct from
   // any consumer column id (the registry/config guard never produces a leading "__").
   const SELECT_COL_ID = '__rdt_select';
@@ -3034,10 +3051,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
   // Template helpers reading the resolved column-def metadata by id (plain fns — used
   // in template predicates + interpolation; uniform on all 6, no $computed alias trap).
+  // B1 (quick 260906-afh): reads the O(1) def-lookup index (defIndex(), columnBuilders.rzts)
+  // instead of linearly scanning columnDefs() — which only ever held TOP-LEVEL entries, so a
+  // NESTED group leaf (a `columns:` group child) was invisible to every caller (headerLabel,
+  // columnIsFilterable, editMetaOf/columnEditable/editorTypeOf/editorOptionsOf) and silently
+  // took the "no def" fallback. defIndex() resolves both top-level AND nested leaf ids. This
+  // also removes the per-cell O(N) scan D-23 left in place — defIndex() is memoized in the
+  // SAME cache-invalidation block as columnDefs() itself, never rebuilt per call.
   function defFor(colId: any) {
-    const defs = columnDefs();
-    for (const d of defs as any) if (d.id === colId) return d;
-    return null;
+    if (colId == null) return null;
+    const idx = defIndex();
+    const d = idx[String(colId)];
+    return d != null ? d : null;
   }
   // Per-row visible cells for the body loop. table-core memoizes row objects by id,
   // so a re-pull after a column change (visibility/reorder/pin, or the late <Column>
@@ -3077,20 +3102,6 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     const m = editMetaOf(colId);
     return m && m.editorOptions != null ? m.editorOptions : [];
   }
-  // hasEditorSlot: this column routes through the consumer's #editor scoped slot (req-2)
-  // — true only when the column declared editor='custom' AND the consumer actually
-  // provided an #editor slot. Falls through to the built-in editor otherwise (e.g. a
-  // column marked 'custom' with no slot supplied degrades to the text editor, never blank).
-  function hasEditorSlot(colId: any) {
-    return editorTypeOf(colId) === 'custom' && !!(_props.editorSlot ?? _props.slots?.["editor"]);
-  }
-
-  // hasFilterSlot: the consumer supplied a #filter scoped slot, so it OWNS the per-column
-  // filter UI (re-added in 72-05 alongside the dedicated filter row's `<slot name="filter">`
-  // host — see the 72-03 removal note in that plan's SUMMARY for why this was briefly gone).
-  function hasFilterSlot() {
-    return !!(_props.filterSlot ?? _props.slots?.["filter"]);
-  }
   function columnIsFilterable(colId: any) {
     const d = defFor(colId);
     return !!(d && d.filterable);
@@ -3101,13 +3112,27 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   }
 
   // ── Column-management chrome (req-8/9/10/11) ────────────────────────────────────────
-  // Live header width (px) for a column — drives the <th> :style width binding. Reads the
-  // table-core column size (post-mount) with a fallback to undefined (auto width).
-  function headerWidth(colId: any) {
-    if (tick() < 0 || !table) return null;
-    const col = table.getColumn(colId);
-    if (!col) return null;
-    const w = col.getSize();
+  // Live header width (px) for a <th> — drives the :style width binding. Takes the table-core
+  // HEADER object (not a column id / Column lookup) and reads header.getSize() — deliberately,
+  // NOT column.getSize(). table-core's own ColumnSizing feature (createHeader, always present —
+  // it is in table-core's builtInFeatures, never opt-in) gives Header.getSize() a recursive
+  // implementation: a LEAF header returns its own column's getSize() (identical to the old
+  // column.getSize() path — byte-identical output there), but a GROUP header (one with
+  // subHeaders, e.g. a multi-level `columns:` entry from buildConfigDef) SUMS every descendant
+  // leaf column's getSize() instead of returning the group's own meaningless single-column
+  // default (150px, table-core's defaultColumnSizing.size — group ColumnDefs never set `size`).
+  // Before this fix, a colspan-N grouped <th> asked the browser for ONE column's worth of width
+  // (150px) while spanning N columns; under `table-layout:fixed` the browser then divides that
+  // single declared width ACROSS all N spanned <th>s (150/5 = 30px for this codebase's 5-column
+  // "Group A" fixture) — a 5x collapse of the actual rendered column width, independent of (and
+  // invisible to) columnSize()/the column virtualizer's windowing math, which reads
+  // table.getVisibleLeafColumns()[i].getSize() directly and was never affected. Root cause +
+  // fix confirmed via .planning/debug/datatable-d13-column-axis-all-targets.md and previously
+  // documented as "Gap 1" in .planning/phases/87-.../deferred-items.md (the identical grouped-
+  // header/colspan mismatch, found independently during 87-05/87-06 authoring and deferred).
+  function headerWidth(header: any) {
+    if (tick() < 0 || !header || typeof header.getSize !== 'function') return null;
+    const w = header.getSize();
     return w != null && w > 0 ? w + 'px' : null;
   }
 
@@ -3224,15 +3249,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     }
     return '';
   }
-  // Combined inline style for a <th> (width + pin) and a <td> (pin). Plain string concat —
-  // uniform on all 6, no bound-object trap. zIndex=2 (see pinStyle) so a pinned header cell
-  // — which hosts the ⋯ menu's floating content — always stacks above the pinned filter-row
-  // cell for the same column (zIndex=1, its own default).
-  function thStyle(colId: any) {
+  // Combined inline style for a <th> (width + pin). Plain string concat — uniform on all 6, no
+  // bound-object trap. zIndex=2 (see pinStyle) so a pinned header cell — which hosts the ⋯ menu's
+  // floating content — always stacks above the pinned filter-row cell for the same column
+  // (zIndex=1, its own default). Takes the HEADER object (not a bare colId) so headerWidth() can
+  // read header.getSize() — the group-aware size (see headerWidth's own comment). pinStyle still
+  // keys off the plain column id (pinning is a leaf-column-only concern; a grouped header never
+  // pins as a unit in this codebase's model).
+  function thStyle(header: any) {
     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;
   }
 
@@ -3390,6 +3418,16 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function rowIsGrouped(row: any) {
     return !!(tick() >= 0 && row && row.getIsGrouped && row.getIsGrouped());
   }
+  // rowIndexIsGrouped (quick 260906-cvo, C1/C2): THE single row-level editability/writability
+  // predicate — a group-header row is a SYNTHETIC row whose `original` is table-core's
+  // `leafRows[0].original` (the same fact cellSlotRow's header comment documents), so any
+  // edit or bulk write resolved through it silently lands on an UNRELATED record. Every edit/
+  // write guard in this component calls THIS predicate — never a re-implemented inline
+  // `getIsGrouped()` check — so the invariant has one definition. Indexes into the SAME
+  // `$data.rows` flattened row list rowIsGrouped reads.
+  function rowIndexIsGrouped(rowIndex: any) {
+    return rowIsGrouped((rows() || [])[rowIndex]);
+  }
   // groupingActive: grouping is currently engaged (a non-empty ordered key list). Drives the
   // data-group-leaf marker so it is ABSENT when ungrouped (byte-identical-off, req-10).
   function groupingActive() {
@@ -3405,22 +3443,100 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function cellIsAggregated(cellCtx: any) {
     return !!(tick() >= 0 && cellCtx && cellCtx.getIsAggregated && cellCtx.getIsAggregated());
   }
-  // cellIsPlaceholder: a PLACEHOLDER cell on a group-header row — a non-grouped, non-aggregated
-  // cell that table-core fills with the FIRST leaf row's value (cell.getValue() leaks e.g.
-  // "Services"/"Edsger Dijkstra" onto the group line). Renders BLANK via a dedicated empty
-  // template branch so the leaked leaf value never paints. Tick-gated exactly like cellIsGrouped
-  // so the group chrome re-derives on a re-pull on the fine-grained targets (Solid/Lit).
+  // cellIsPlaceholder: VERIFIED against @tanstack/table-core@8.21.3 (ColumnGrouping.js:120-121,
+  // quick 260906-afh premise correction). A placeholder cell is a cell IN A GROUPING COLUMN
+  // that is NOT the row's OWN grouping column — `!cell.getIsGrouped() && column.getIsGrouped()`.
+  // That is true both on a group-header row (for every OTHER grouping column) and on every leaf
+  // row (for every grouping column) — it is NOT "never true on a group-header row" and it is NOT
+  // "any non-grouped, non-aggregated cell". The operative consequence for this component: a
+  // placeholder can only EVER be a grouping-column cell, so this branch can never reach a
+  // non-grouping column — it does NOT and CANNOT guard the AGGREGATED-cell `row` leak
+  // (cellSlotRow, below) fixes. Where it DOES apply (e.g. under multi-level grouping, the
+  // OTHER grouping column on a group-header row), table-core still fills cell.getValue() with
+  // the FIRST leaf row's value (cell.getValue() leaks e.g. "Oslo" onto a region-level group
+  // line whose grouping is 'region', not 'city'); this branch renders BLANK via a dedicated
+  // empty template so that leaked value never paints. Tick-gated exactly like cellIsGrouped so
+  // the group chrome re-derives on a re-pull on the fine-grained targets (Solid/Lit).
   function cellIsPlaceholder(cellCtx: any) {
     return !!(tick() >= 0 && cellCtx && cellCtx.getIsPlaceholder && cellCtx.getIsPlaceholder());
   }
-  // groupSubRowCount: the number of underlying LEAF RECORDS under a group-header row (the count
-  // shown in the header, e.g. "North (40)"). row.subRows is the IMMEDIATE members — for MULTI-LEVEL
-  // grouping those are sub-GROUPS, not records, so "North" with 2 categories / 40 records would show
-  // "North (2)". getLeafRows() returns all leaf descendants (the actual record count); keep the
-  // subRows fallback for safety. Single-level grouping is unchanged (getLeafRows == subRows when the
-  // children are already leaves).
+  // groupSubRowCount: the number of underlying TRUE LEAF RECORDS under a group-header row (the
+  // count shown in the header, e.g. "North (40)"). row.subRows is the IMMEDIATE members — for
+  // MULTI-LEVEL grouping those are sub-GROUPS, not records, so "North" with 2 categories / 40
+  // records would show "North (2)" off subRows alone. row.getLeafRows() is table-core's
+  // `flattenBy(row.subRows, d => d.subRows)` (ColumnGrouping.js / utils.js, verified against
+  // @tanstack/table-core@8.21.3) — it pushes EVERY node it walks, INCLUDING intermediate group
+  // nodes, so under multi-level grouping it over-counts by exactly the number of sub-group
+  // nodes between the row and its true leaves (C4, quick 260906-cvo: North with 2 city
+  // sub-groups + 3 records reported 5, not 3). `row.getIsGrouped()` is `!!row.groupingColumnId`
+  // — precisely the predicate that separates a group node from a real record — so filter the
+  // flattened list on it rather than hand-rolling a recursive `subRows` walk (getLeafRows()
+  // already flattens; the defect is purely that it does not filter). Single-level grouping is
+  // numerically UNCHANGED: a leaf row has no `subRows`, so no node was ever miscounted there.
   function groupSubRowCount(row: any) {
-    return row && row.getLeafRows ? row.getLeafRows().length : row && row.subRows ? row.subRows.length : 0;
+    if (row && row.getLeafRows) {
+      const leaves = row.getLeafRows();
+      let n = 0;
+      for (let i = 0; i < leaves.length; i++) {
+        const r = leaves[i];
+        if (!(r && r.getIsGrouped && r.getIsGrouped())) n = n + 1;
+      }
+      return n;
+    }
+    return row && row.subRows ? row.subRows.length : 0;
+  }
+
+  // ── B2 (quick 260906-afh) — group-header row #cell slot descriptor ─────────────────────
+  // PROBLEM: table-core builds a flattened group-header row via
+  // `createRow(table, id, leafRows[0].original, …)` (getGroupedRowModel.js), so `row.original`
+  // on a group row IS the FIRST LEAF's record. The #cell scoped slot's existing 4 call sites
+  // all bound `:row="row.original"` (or `wr.row.original`), so an AGGREGATED cell (a
+  // non-grouping column on a group row — cellIsGrouped()===false, cellIsPlaceholder()===false,
+  // so it takes the #cell r-else branch, same as any ordinary leaf cell) silently handed a
+  // consumer template the WRONG record's fields (T-AFH-05). The grouped cell itself (the
+  // group's own column, .rdt-group-value) has the same #cell binding and the same leak.
+  //
+  // FIX: `cellSlotRow(row)` returns a STABLE GROUP DESCRIPTOR — never `row.original` — for a
+  // group-header row, and `row.original` unchanged for every other row. The descriptor is an
+  // OBJECT, never `null` (T-AFH-06 — a consumer already reading `row.foo` would throw on
+  // Vue/Angular if handed null).
+  //
+  // Descriptor cache (T-AFH-02/T-AFH-04): a null-prototype map keyed on `String(row.id)`,
+  // invalidated wholesale whenever `$data.rowModelVer` (bumped by every refreshRowModel, the
+  // SAME reactive re-derivation discipline visibleCellsFor/rowIsGrouped use) differs from the
+  // generation the map was built for — so the descriptor's REFERENCE IDENTITY is stable
+  // across every cell of one group row within a row-model generation (an unstable reference
+  // would thrash the fine-grained targets, Solid/Lit) and refreshed the moment the grouping
+  // changes. Group row ids are built from consumer grouping VALUES, so the map MUST be
+  // null-prototype — a `__proto__` grouping value must not reach Object.prototype.
+  let groupRowDescriptorCache: any = null;
+  let groupRowDescriptorCacheVer: any = undefined;
+  function groupRowDescriptor(row: any) {
+    const ver = rowModelVer();
+    if (!groupRowDescriptorCache || groupRowDescriptorCacheVer !== ver) {
+      groupRowDescriptorCache = Object.create(null);
+      groupRowDescriptorCacheVer = ver;
+    }
+    const key = String(row.id);
+    let d = groupRowDescriptorCache[key];
+    if (!d) {
+      const groupingColumnId = row.groupingColumnId != null ? row.groupingColumnId : '';
+      const groupingValue = row.getGroupingValue ? row.getGroupingValue(groupingColumnId) : row.groupingValue;
+      d = {
+        isGroupRow: true,
+        groupId: row.id,
+        groupingColumnId,
+        groupingValue,
+        leafCount: groupSubRowCount(row)
+      };
+      groupRowDescriptorCache[key] = d;
+    }
+    return d;
+  }
+  // cellSlotRow: the #cell slot's `:row=` value. A group-header row gets the stable
+  // descriptor above (never the leaked first-leaf record); every other row is unchanged.
+  function cellSlotRow(row: any) {
+    return rowIsGrouped(row) ? groupRowDescriptor(row) : row ? row.original : null;
   }
   // groupingKeys: the live ordered grouping array — slot prop for the headless #groupBar + the
   // default styled-token reflection. Reads currentState() ($props.grouping ?? $data.groupingDefault),
@@ -3428,14 +3544,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function groupingKeys() {
     return currentState().grouping || [];
   }
-  // groupableColumns: the data columns OFFERED to the headless #groupBar (those whose Column/config
-  // `groupable` is not false) — `[{ id, label }]`. Excludes the chrome columns (select/expander are
-  // not in columnDefs()). The consumer builds any bar/drag UI from this; the component ships none.
+  // groupableColumns: the data columns OFFERED to the headless #groupBar — `[{ id, label }]`.
+  // Excludes the chrome columns (select/expander are not in columnDefs()). C5+C6 (quick
+  // 260906-cvo): delegates the actual walk to collectGroupableLeafDefs (columnDefUtils.ts) —
+  // a GROUP column (a `columns:` group's own entry) is NEVER offered (it has no accessor and
+  // cannot produce a grouping value, regardless of any `groupable` flag on it), and every
+  // groupable NESTED leaf (a `columns:` group child, opted out via `groupable: false` like any
+  // top-level leaf) IS offered, in declaration order. The consumer builds any bar/drag UI from
+  // this; the component ships none.
   function groupableColumns() {
     const out = [];
-    const defs = columnDefs();
+    const defs = collectGroupableLeafDefs(columnDefs());
     for (const d of defs as any) {
-      if (!d || d.groupable === false) continue;
       out.push({
         id: d.id,
         label: d.header != null ? d.header : d.id
@@ -4450,11 +4570,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       return;
     }
     // ── C2 (phase 63 wave-8): Enter on a GROUP-HEADER cell toggles that group's collapse/
-    // expand (APG treegrid). A group cell is NON-editable (isActiveCellEditable=false, the
-    // verified invariant) so it never hits the edit branches above and would otherwise fall to
-    // enterControl() — which merely FOCUSES the group-toggle button (requiring a second key).
-    // Route it to the SAME onToggleExpand path the chevron uses (group rows ride the expand
-    // model) so one Enter toggles the group. Body cells only (a header-active Enter is unchanged);
+    // expand (APG treegrid). C1 (quick 260906-cvo) CORRECTION: the comment here used to claim
+    // "a group cell is non-editable" as "the verified invariant" — that was FALSE AS WRITTEN.
+    // It held only for the grouping column's OWN cell (cellIsGrouped's branch renders before
+    // the editor branch); a non-grouping EDITABLE column's cell on a group row fell straight
+    // through the branch chain to isEditing(...) and opened an editor (the C1 defect this
+    // quick task closed). What is now TRUE, and WHY: isActiveCellEditable() carries an
+    // explicit rowIndexIsGrouped(...) row guard (filterPaginationRowChrome.rzts), so EVERY
+    // editable column's cell on a group row is non-editable — that is what makes the four
+    // edit-entry branches above fall through to this one, not an incidental property of the
+    // grouping column alone. Route it to the SAME onToggleExpand path the chevron uses (group
+    // rows ride the expand model) so one Enter toggles the group. Body cells only (a
+    // header-active Enter is unchanged);
     // ($data.rows || [])[$data.activeRow] is the active flattened row (page-relative non-virtual /
     // full-model virtual — both index $data.rows). Placed BEFORE the reserved enterControl branch.
     else if (key === 'Enter' && !activeIsHeader() && rowIsGrouped((rows() || [])[activeRow()])) {
@@ -5243,6 +5370,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // rangeToTsv(): serialize the current range to TSV — rows joined by '\n', cells by '\t',
   // reading each cell's value off the visible model by index (cellValueAt). A single active
   // cell (no range) serializes that one cell. Each field is B10-escaped. Pure read — never writes.
+  // C2 (quick 260906-cvo) — DELIBERATE NON-CHANGE: this is a READ, unlike applyGridToRange's
+  // write funnel, and stays UNGUARDED for a group-header row on purpose. cellValueAt reads the
+  // column's DISPLAYED aggregate value on a group row (table-core's cell.getValue()), which is
+  // exactly what the user sees — serializing it is correct behavior, not a leak. Do not "fix"
+  // this asymmetry; it is intentional.
   function rangeToTsv() {
     const box = normalizedRange();
     const r0 = box ? box.r0 : activeRow();
@@ -5296,11 +5428,22 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     for (let gr = 0; gr < grid.length; gr++) {
       const r = originRow + gr;
       if (r > maxRow) break;
+      // C2 (quick 260906-cvo) — hoisted ONCE per ROW (never per cell): a group-header row's
+      // `original` is table-core's `leafRows[0].original` (a synthetic row), so a write
+      // resolved through it silently lands on an unrelated record. This ONE placement closes
+      // pasteRange, cutRange, clearActiveRange AND fillRange — all four build a grid and hand
+      // it to this single funnel, so guarding the four callers individually would be four
+      // chances to miss one.
+      const rowGrouped = rowIndexIsGrouped(r);
       const cols = grid[gr] || [];
       for (let gc = 0; gc < cols.length; gc++) {
         const c = originCol + gc;
         if (c > maxCol) break;
+        // A group-row cell still counts toward `total` — it is a skipped TARGET, exactly like
+        // a non-editable or validator-rejected cell — so the "N of M cells pasted" / "no cells
+        // pasted" announce keeps its existing semantics (never silently under-reports M).
         total = total + 1;
+        if (rowGrouped) continue;
         const colId = columnIdAt(r, c);
         if (colId == null || !columnEditable(colId)) continue;
         const rowObj = rowOriginalAt(r);
@@ -5579,8 +5722,25 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       fillEdgeScrollRaf = null;
     }
   }
-  function cellIndexFromPoint(clientX: any, clientY: any) {
-    if (typeof document === 'undefined' || !document.elementFromPoint) return null;
+  // FILL_HITTEST_PROBE_RADIUS_PX / FILL_HITTEST_PROBE_STEP_PX (hardening, authorized alongside the
+  // D-13 grouped-header width fix — .planning/debug/datatable-d13-column-axis-all-targets.md):
+  // resolveCellAt() below hit-tests document.elementFromPoint at ONE exact pixel — structurally
+  // fragile against a scrolling DOM by construction: any narrow column transiting past that fixed
+  // screen point (the edge-auto-scroll rAF loop in fillDrag re-probes the SAME fixed point every
+  // frame while gridScrollEl's content slides underneath it) has only a single-frame-scale window
+  // to be caught, and a probe pixel landing exactly on a border/rounding edge between two adjacent
+  // `<td>`/`<th>`s can miss both. cellIndexFromPoint widens the miss case ONLY: it tries the exact
+  // point first (byte-identical to the pre-hardening behavior on a hit — this is not a behavior
+  // change to the common case) and, only if that misses, fans out a small nearest-first horizontal
+  // search before giving up. Vertical-only misses are not probed (rows are >=24px tall by design —
+  // FILL_EDGE_SCROLL_PX itself — so a row is never narrower than a single scroll step; only COLUMN
+  // width has no such floor, hence a horizontal-only widening).
+  const FILL_HITTEST_PROBE_RADIUS_PX = 8;
+  const FILL_HITTEST_PROBE_STEP_PX = 2;
+
+  // resolveCellAt: the exact-point hit-test (identical logic to the pre-hardening
+  // cellIndexFromPoint body) extracted so it can be re-tried at nearby x-offsets below.
+  function resolveCellAt(clientX: any, clientY: any) {
     let el = document.elementFromPoint(clientX, clientY);
     // Pierce OPEN shadow roots (Lit): document.elementFromPoint retargets to the shadow HOST, so
     // a drag over the Lit data-table's shadow content would otherwise resolve the host (no cell)
@@ -5605,6 +5765,22 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       c
     };
   }
+  function cellIndexFromPoint(clientX: any, clientY: any) {
+    if (typeof document === 'undefined' || !document.elementFromPoint) return null;
+    const direct = resolveCellAt(clientX, clientY);
+    if (direct) return direct;
+    // Widened nearest-cell search: only reached when the exact point misses. Fans outward
+    // (nearest-first, alternating +/-x) up to FILL_HITTEST_PROBE_RADIUS_PX before giving up —
+    // catches a narrow column that transited past the fixed probe point on this exact frame
+    // without changing which cell wins on an ordinary (non-edge-case) hit.
+    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: any) {
     if (!e) return;
     if (e.preventDefault) e.preventDefault();
@@ -5806,7 +5982,13 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // isActiveCellEditable: the active cell sits in an editable column AND is a body cell
   // (req-1). Gates the F2/Enter/printable edit-entry branches in onGridKeyDown; a
   // non-editable active cell falls through to the reserved enterControl path.
+  // C1 (quick 260906-cvo) — Layer 1: a group-header row is NEVER editable, regardless of
+  // column. This is the single highest-value guard in the cluster: it closes Shift+F2, the
+  // checkbox toggle, and the F2/Enter/printable edit-entry branches in ONE edit (they are all
+  // `else if` branches gated on this predicate), AND restores fallthrough so Enter on a group
+  // row reaches the group-toggle branch below them instead of opening an editor.
   function isActiveCellEditable() {
+    if (rowIndexIsGrouped(activeRow())) return false;
     const colId = activeCellColumnId();
     return colId != null && columnEditable(colId);
   }
@@ -5824,6 +6006,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // non-virtual, wr.vi.index virtual).
   function isEditing(rowIndex: any, colIndex: any) {
     if (editVer() < 0) return false;
+    // C1 (quick 260906-cvo) — Layer 6: the ONLY layer whose reachability does not depend on a
+    // keystroke. Editing state is INDEX-based over the visible model, and nothing clears it
+    // when the row model re-derives — a consumer that changes the grouping model WHILE a cell
+    // editor is open can move a group-header row under the index $data.editingRow/
+    // editingRowIndex still holds, rendering the editor on a group row with no beginEdit
+    // involved. Placed AFTER the editVer read (preserves the Svelte/Solid re-derivation
+    // discipline the header comment above documents).
+    if (rowIndexIsGrouped(rowIndex)) return false;
     if (editingRowIndex() != null && editingRowIndex() === rowIndex) {
       const colId = columnIdAt(rowIndex, colIndex);
       return colId != null && columnEditable(colId);
@@ -5915,39 +6105,73 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     return row ? row.id : null;
   }
 
+  // resolveEditFocusCellEl(rowIndex, colIndex): the DOM cell element for an edit-focus
+  // target, given an EXPLICIT index pair — NEVER a $data re-read inside this function or its
+  // caller's poll closure. Every call site already knows this pair SYNCHRONOUSLY at the
+  // moment it calls (beginEdit's own rowIndex/colIndex params; commitEdit's stable, already-
+  // settled $data.editingRow/editingCol; beginRowEdit's rowIndex + the target column's
+  // editable[].colIndex from editableColumnsForRow) — threading them through as PARAMETERS,
+  // mirroring focusRowEditorAt's already-proven resolveCellEl(String(rowIndex), colIndex)
+  // shape, closes the React batched-setState staleness class 88-05-SUMMARY.md documented
+  // (REACT_STALE_GATE_SINGLE_CELL_BUG): the OLD gate read $data.editFocusColId SYNCHRONOUSLY,
+  // in the SAME tick beginEdit's own setState call set it, and React's batching meant that
+  // read saw the PRE-edit (null) value. A plain function argument threaded through — never a
+  // reactive re-read — is not subject to that race, uniformly on all 6 targets.
+  function resolveEditFocusCellEl(rowIndex: any, colIndex: any) {
+    if (rowIndex == null || colIndex == null || rowIndex < 0 || colIndex < 0) return null;
+    return resolveCellEl(String(rowIndex), colIndex);
+  }
+
   // Focus the freshly-mounted editor (Pitfall 1, ROZ123): after beginEdit flips the editing
   // state, the editor <input> does not exist until the framework commits the r-if branch
-  // (React setState async; Solid/Lit/Svelte next reactive tick). Poll for the
-  // [data-editing-cell] element off gridRoot for ~30 frames — the five fast targets resolve
-  // on attempt 1, React retries across its async commit. NEVER read $refs eagerly.
+  // (React setState async; Solid/Lit/Svelte next reactive tick). Poll for the target CELL's
+  // marked built-in editor for ~30 frames — the five fast targets resolve on attempt 1, React
+  // retries across its async commit. NEVER read $refs eagerly.
   // B2: selectAll gates the post-focus el.select(). Select-all is right when entering
   // edit IN PLACE (F2/Enter/click/row-edit/validation-reject — no seeded char, the user
   // retypes), but WRONG on a type-to-edit entry where a printable key already seeded the
   // draft (selecting the seeded char makes the next keystroke replace it: Zeta → eta).
   // beginEdit threads `seed == null` so a seeded entry skips the select and the caret sits
   // AFTER the seeded char; every other caller keeps the default select-all.
-  // Editor-owns-focus contract (quick 260711-i5m): REVERTS the g52 shadow-piercing helper
-  // (commit 5fa30045) that recursed into descendant shadow roots. Built-in editors are
-  // host-DOM — the plain direct query resolves them on all 6 targets (no shadow to cross). A
-  // #editor DROP-IN now owns its OWN focus via the reactive `autofocus` prop (EditorText's
-  // $onMount + lazy $watch), so the host never needs to reach across a Lit drop-in's nested
-  // shadow root at all — see the !hasEditorSlot gate below, which skips the host focus call
-  // entirely for a drop-in target.
-  function focusEditorWhenReady(selectAll = true) {
+  // D-01/D-02 (88-07): REPLACES the deleted presence-check early-return gate AND the
+  // gridRoot-wide `[data-editing-cell]` first-match query with a column-scoped, marker-driven
+  // poll. Resolves the TARGET cell first (resolveEditFocusCellEl, mirroring
+  // focusRowEditorAt's already-shipped two-step resolve), then queries for an editor carrying
+  // BOTH `data-editing-cell` and the host-owned `data-builtin-editor` marker WITHIN that one
+  // cell — "no marker found" (a drop-in target, D-01) bails immediately rather than reaching
+  // into DOM the host does not own; "no editor at all yet" keeps polling (the framework hasn't
+  // committed the r-if branch). This closes the D-02 wrong-column hole the old grid-wide query
+  // left open (every editable cell mounts an editor at once in row-edit mode) AND fixes the
+  // React staleness race documented above, as a side effect of no longer reading
+  // $data.editFocusColId anywhere in this function.
+  function focusEditorWhenReady(rowIndex: any, colIndex: any, selectAll = true) {
     if (!gridRoot) return;
-    // Editor-owns-focus contract: when the CURRENT focus target is a #editor drop-in, the host
-    // does NOT reach into its DOM — the drop-in self-focuses via its own autofocus prop.
-    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) {
+        // Editor-owns-focus contract (quick 260711-i5m, D-01): if the cell ALREADY holds an
+        // editor that carries only the base marker, it's a consumer drop-in — it owns its own
+        // focus (EditorText's own $onMount + reactive `autofocus`). Bail immediately, zero
+        // wasted frames, rather than burning the retry ceiling on DOM the host does not own.
+        const anyEditor = cellEl && cellEl.querySelector ? cellEl.querySelector('[data-editing-cell]') : null;
+        if (anyEditor) return;
+        attempts = attempts + 1;
+        if (attempts >= 30) return;
+        if (typeof requestAnimationFrame === 'function') requestAnimationFrame(tryFocus);else setTimeout(tryFocus, 16);
+        return;
+      }
       // Do NOT stomp focus a later interaction already placed in a DIFFERENT column's editor of
       // this row: focusEditorWhenReady only needs to get focus INTO the (first) freshly-mounted
       // editor; if focus already sits in another editable cell, a late rAF re-focus would steal it
       // back to the first editor and break row-mode Tab containment (the non-deterministic B21
       // focus-theft). Compare the OWNING cell's data-col-index (NOT node identity) so a stale
       // SAME-column editor node on Solid's node-replacing re-render still resolves as the target —
-      // a genuinely dropped focus is still recovered.
+      // a genuinely dropped focus is still recovered. Stays BROAD on `data-editing-cell` (NOT
+      // narrowed to the builtin marker, D-02): focus validly placed inside a drop-in must still
+      // count as "already placed" — narrowing this check would let a late rAF poll steal focus
+      // back from a drop-in that legitimately holds it.
       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]');
@@ -5956,18 +6180,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         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: any) {}
-        }
-        return;
+      el.focus();
+      if (selectAll && el.select) {
+        try {
+          el.select();
+        } catch (e: any) {}
       }
-      attempts = attempts + 1;
-      if (attempts >= 30) return;
-      if (typeof requestAnimationFrame === 'function') requestAnimationFrame(tryFocus);else setTimeout(tryFocus, 16);
     };
     if (typeof requestAnimationFrame === 'function') requestAnimationFrame(tryFocus);else setTimeout(tryFocus, 0);
   }
@@ -5998,6 +6216,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // $data) so a Tab-advance that just setState'd activeRow/Col works on React. Clears any
   // prior invalid state. Focus moves into the editor.
   function beginEdit(rowIndex: any, colIndex: any, seed: any) {
+    // C1 (quick 260906-cvo) — Layer 2: closes the `onGridClick` (singleClickEdit) path, which
+    // calls beginEdit directly gated ONLY on columnEditable — isActiveCellEditable (Layer 1)
+    // does not run on that path at all.
+    if (rowIndexIsGrouped(rowIndex)) return;
     const colId = columnIdAt(rowIndex, colIndex);
     if (colId == null || !columnEditable(colId)) return;
     // A new edit session starts — reset the sync idempotency latch so THIS session's eventual
@@ -6018,8 +6240,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // from it. Cleared on endEdit.
     setEditFocusColId(colId);
     // B2: a seeded (type-to-edit) entry must NOT select-all — keep the caret after the
-    // seeded char so subsequent typing appends instead of replacing it.
-    focusEditorWhenReady(seed == null);
+    // seeded char so subsequent typing appends instead of replacing it. rowIndex/colIndex
+    // are THIS call's own params — passed through directly (D-02), never re-read off
+    // $data.editingRow/editingCol inside the poll.
+    focusEditorWhenReady(rowIndex, colIndex, seed == null);
   }
 
   // Return focus to a body cell AFTER the editor unmounts (commit/cancel). The display↔
@@ -6133,8 +6357,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     const err = runValidator(colId, newValue, rowOriginal);
     if (err !== true) {
       // D-01: reject — keep the editor open, announce, re-trap focus, NEVER write the model.
+      // $data.editingRow/editingCol are STABLE here (set by a prior beginEdit call, not this
+      // same tick) — safe to read directly, unlike the deleted $data.editFocusColId gate.
       setInvalid(err);
-      focusEditorWhenReady();
+      focusEditorWhenReady(editingRow(), editingCol());
       return false;
     }
     setInvalid('');
@@ -6204,6 +6430,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // editor:'checkbox' columns only (Space/Enter/F2), full-row edit mode is unaffected (the
   // editingRowIndex early return in onGridKeyDown already excludes it).
   function toggleActiveBooleanCell() {
+    // C1 (quick 260906-cvo) — Layer 4: the only write funnel bypassing both beginEdit/
+    // commitEdit and applyGridToRange. Reachable today only through the Layer-1-gated
+    // checkbox branch, so this line is redundant AT HEAD — it earns its place by making "no
+    // write ever targets a group row" a property of the write funnels themselves.
+    if (rowIndexIsGrouped(activeRow())) return;
     const colId = columnIdAt(activeRow(), activeColIndex());
     if (colId == null || !columnEditable(colId)) return;
     const rowList = rows() || [];
@@ -6290,22 +6521,22 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
   // B21/B22: focus the row-mode editor at a given VISIBLE col index. In full-row edit every
   // editable cell is already mounted as an editor, so this resolves the cell off gridRoot and
-  // focuses its [data-editing-cell] control. Bounded rAF-poll (mirrors focusEditorWhenReady)
-  // so a React re-render that recreates the input across the focus call still lands it. select-
-  // all on text/number editors (a no-op try/catch on select/checkbox).
-  // Editor-owns-focus contract (quick 260711-i5m): when the TARGET column is a #editor
-  // drop-in, the host does NOT reach into its DOM (early return, before starting the rAF poll
-  // at all) — the drop-in self-focuses via its own reactive `autofocus` prop, which the caller
-  // (commitRow's B22 reject path / rowEditTab) already flips via $data.editFocusColId. Built-in
-  // columns are unaffected (hasEditorSlot is false for them) — unchanged host direct-focus.
+  // focuses its [data-editing-cell][data-builtin-editor] control. Bounded rAF-poll (mirrors
+  // focusEditorWhenReady) so a React re-render that recreates the input across the focus call
+  // still lands it. select-all on text/number editors (a no-op try/catch on select/checkbox).
+  // D-01/D-02 (88-07): the old columnIdAt + presence-check early-return gate is DELETED — the
+  // host-owned data-builtin-editor marker replaces it. If the resolved cell already holds an
+  // editor carrying ONLY the base data-editing-cell marker (no builtin marker), that's a
+  // consumer drop-in — bail immediately, it owns its own focus (EditorText's own $onMount +
+  // reactive `autofocus`, which the caller already flips via $data.editFocusColId). This
+  // two-step resolve (resolveCellEl THEN a scoped query within that one cell) was ALREADY
+  // column-scoped and correct — it is the shape focusEditorWhenReady's D-02 rework adopts.
   function focusRowEditorAt(rowIndex: any, colIndex: any) {
     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) {
@@ -6315,6 +6546,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         }
         return;
       }
+      // No marked built-in editor yet in this cell: a drop-in mounted there owns its own
+      // focus — bail immediately (D-02) rather than burning the retry ceiling on DOM the
+      // host does not own. No editor at all yet just means "keep polling."
+      const any = cellEl && cellEl.querySelector ? cellEl.querySelector('[data-editing-cell]') : null;
+      if (any) return;
       attempts = attempts + 1;
       if (attempts >= 30) return;
       if (typeof requestAnimationFrame === 'function') requestAnimationFrame(tryFocus);else setTimeout(tryFocus, 16);
@@ -6331,6 +6567,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   function beginRowEdit(row: any) {
     const rowIndex = rowIndexOf(row);
     if (rowIndex < 0) return;
+    // C1 (quick 260906-cvo) — Layer 5: a second, independent editing-state funnel that takes a
+    // row OBJECT from its caller. Reachable today only via Shift+F2 (Layer 1), so also
+    // redundant at HEAD; kept for the same reason as Layer 4 — it is a mutation entry point,
+    // and the natural call site for a future #rowActions "Edit" drop-in button.
+    if (rowIndexIsGrouped(rowIndex)) return;
     const editable = editableColumnsForRow(rowIndex);
     if (editable.length === 0) return;
     // A new edit session starts — reset the sync idempotency latch (see editCellLifecycle.rzts).
@@ -6356,9 +6597,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // Editor-owns-focus contract (quick 260711-i5m): the row's FIRST editable column is the
     // initial focus target — editorAutofocusFor derives the reactive `autofocus` #editor scope
     // prop from it (a built-in column is also host-focused below via focusEditorWhenReady; a
-    // drop-in column self-focuses via its own $onMount, gated off the host reach-in in Task 3).
+    // drop-in column self-focuses via its own $onMount, gated off the host reach-in via D-01's
+    // marker). editable[0].colIndex is THIS call's own already-resolved value (D-02) — passed
+    // through directly, never re-read off $data.editFocusColId inside the poll.
     setEditFocusColId(editable[0].colId);
-    focusEditorWhenReady();
+    focusEditorWhenReady(rowIndex, editable[0].colIndex);
   }
 
   // commitRow(): validate EVERY edited column (D-01 — keep the row open if ANY fails: set
@@ -7153,19 +7396,19 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     </div></Show>}{<Show when={isWindowed()} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader })} role={rozieAttr(tableRole())} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridKeyDown($event); }} onFocusIn={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { syncActiveFromEvent($event); }} onFocusOut={($event: FocusEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridFocusOut($event); }} onMouseDown={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridMouseDown($event); }} onDblClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridDblClick($event); }} onClick={($event: MouseEvent & { currentTarget: HTMLTableElement; target: Element }) => { onGridClick($event); }} data-rozie-s-d5dcab4c="">
       <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         <Key each={headerGroups() as readonly any[]} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} data-rozie-s-d5dcab4c="">
-          <Key each={hg().headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(header().column.id), '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="">
+          <Key each={hg().headers as readonly any[]} by={(header) => header.id}>{(header) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(header().column.id), '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()))} 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'])?.({ columnId: header().column.id, column: header().column, label: headerLabel(header().column.id) }) ?? rozieDisplay(headerLabel(header().column.id))}
+                  {_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) }) ?? rozieDisplay(headerLabel(header().column.id))}
                 </span>
               </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onHeaderSort(header().column.id, $event); }} data-rozie-s-d5dcab4c="">
                 
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {(_props.colHeaderSlot ?? _props.slots?.['colHeader'])?.({ columnId: header().column.id, column: header().column, label: headerLabel(header().column.id) }) ?? rozieDisplay(headerLabel(header().column.id))}
+                  {_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) }) ?? rozieDisplay(headerLabel(header().column.id))}
                 </span>
                 <span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(header().column.id))}</span>
               </button></Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => (<>
@@ -7187,8 +7430,8 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         {<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
           <Key each={headerGroups()[headerGroups().length - 1].headers as readonly any[]} 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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(header().column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { 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'])?.({ columnId: header().column.id, value: columnFilterValue(header().column.id), uniqueValues: getFacetedUniqueValues(header().column.id), minMax: getFacetedMinMaxValues(header().column.id), setFilter: setColumnFilter })}
+              {<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={rozieAttr('Filter ' + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(header().column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { 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>
 
@@ -7199,20 +7442,20 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
           <Key each={visibleCellsFor(row()) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(rowIndexOf(row()), colIndexOf(row(), cell())), 'rdt-cell-active': isActiveCell(String(rowIndexOf(row())), colIndexOf(row(), cell())) })} 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'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+              {_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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} 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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { 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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($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: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} 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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row())) })}
-              </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} 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: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { 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'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+                {_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 class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay('(' + groupSubRowCount(row()) + ')')}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: row().original, checked: rowIsSelected(row()), toggle: e => onToggleRow(row(), e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(row(), $event); }} data-rozie-s-d5dcab4c="" />}
+              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: cellSlotRow(row()), checked: rowIsSelected(row()), toggle: e => onToggleRow(row(), e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(row(), $event); }} data-rozie-s-d5dcab4c="" />}
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={rowCanExpand(row())}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? 'Collapse row' : 'Expand row')} class={"rdt-expander"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(row(), $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? '▾' : '▸')}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(rowIndexOf(row()), colIndexOf(row(), cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>
         </tr>
@@ -7228,15 +7471,15 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       <thead class={"rdt-thead"} role="rowgroup" data-rozie-s-d5dcab4c="">
         <Key each={headerGroups() as readonly any[]} by={(hg) => hg.id}>{(hg, hgLevel) => <tr class={"rdt-tr"} role="row" aria-rowindex={rozieAttr(hgLevel() + 1)} 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(hg(), hgLevel()) as readonly any[]} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(wh().header.column.id), '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="">
+          {<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(hg(), hgLevel()) as readonly any[]} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-th" + " " + rozieClass({ 'rdt-select-th': isSelectColumn(wh().header.column.id), '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))} 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'])?.({ columnId: wh().header.column.id, column: wh().header.column, label: headerLabel(wh().header.column.id) }) ?? rozieDisplay(headerLabel(wh().header.column.id))}
+                  {_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) }) ?? rozieDisplay(headerLabel(wh().header.column.id))}
                 </span>
               </span>}><button type="button" class={"rdt-sort-btn"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onHeaderSort(wh().header.column.id, $event); }} data-rozie-s-d5dcab4c="">
                 <span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
-                  {(_props.colHeaderSlot ?? _props.slots?.['colHeader'])?.({ columnId: wh().header.column.id, column: wh().header.column, label: headerLabel(wh().header.column.id) }) ?? rozieDisplay(headerLabel(wh().header.column.id))}
+                  {_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) }) ?? 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>
               </button></Show>}<Popover trigger="click" placement="bottom-end" strategy="fixed" offset={4} data-rozie-s-d5dcab4c="" anchorSlot={() => (<>
@@ -7258,8 +7501,8 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         {<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) as readonly any[]} 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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(wh().header.column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { 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'])?.({ 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 })}
+              {<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={rozieAttr('Filter ' + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onColumnFilterInput(wh().header.column.id, $event); }} onClick={($event: MouseEvent & { currentTarget: HTMLInputElement; target: Element }) => { 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>
 
@@ -7275,20 +7518,20 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
           {<Show when={colsWindowed()}><td class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle('width:' + colPadLeft() + 'px;padding:0;border:0')} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedCells(wr().row) as readonly any[]} by={(cell) => cell.id}>{(cell) => <td class={"rdt-td" + " " + rozieClass({ 'rdt-select-td': isSelectColumn(cell().column.id), 'rdt-expander-td': isExpanderColumn(cell().column.id), 'rdt-in-range': inRange(wr().vi.index, colIndexOf(wr().row, cell())), 'rdt-cell-active': isActiveCell(String(wr().vi.index), colIndexOf(wr().row, cell())) })} 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'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+              {_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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} 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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { 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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($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: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} 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: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, wr().vi.index) })}
-              </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
+              </select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} 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: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { 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'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: cell().getValue() }) ?? rozieDisplay(cell().getValue())}
+                {_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 class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay('(' + groupSubRowCount(wr().row) + ')')}</span>
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: wr().row.original, checked: rowIsSelected(wr().row), toggle: e => onToggleRow(wr().row, e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(wr().row, $event); }} data-rozie-s-d5dcab4c="" />}
+              {(_props.selectCellSlot ?? _props.slots?.['selectCell'])?.({ row: cellSlotRow(wr().row), checked: rowIsSelected(wr().row), toggle: e => onToggleRow(wr().row, e) }) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onToggleRow(wr().row, $event); }} data-rozie-s-d5dcab4c="" />}
             </span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               {<Show when={rowCanExpand(wr().row)}><button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse row' : 'Expand row')} class={"rdt-expander"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button></Show>}</span></Show>}{<Show when={isFillHandleCell(wr().vi.index, colIndexOf(wr().row, cell()))}><span data-fill-handle="" data-testid="fill-handle" aria-hidden="true" class={"rdt-fill-handle"} onPointerDown={($event: PointerEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onFillHandlePointerDown($event); }} data-rozie-s-d5dcab4c="" /></Show>}</td>}</Key>