@rozie-ui/data-table-solid 0.8.1 → 0.9.1

package/src/DataTable.tsx

@@ -8,6 +8,7 @@ import { columnRuleKeys } from './helpers/columnRuleUtils';
 import { applyUpdater, clamp, focusables } from './helpers/indexMath';
 import { resolveFollow, sameIdSequence } from './helpers/activeFollow';
 import { escapeTsvField, parseTsv, tileGridToBox, tileIndex } from './helpers/tsvGrid';
+import { rangeFillTargets } from './helpers/rangeFill';
 import { replaceRowValue, indexOfRowIn, replaceRowValues } from './helpers/rowValueUtils';
 import { createTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getExpandedRowModel, getGroupedRowModel,
 // Faceted filtering (phase 50 reqs 8-9, D-03). All three are supplied UNCONDITIONALLY
@@ -131,6 +132,8 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
   --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--rdt-ds-border-color));
   --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
   --rdt-filter-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-column-border: 1px solid var(--rozie-data-table-column-border-color, var(--rozie-data-table-border-color, var(--rdt-ds-column-border-color)));
+  --rdt-pinned-bg: var(--rozie-data-table-pinned-bg, var(--rdt-ds-pinned-bg));
   --rdt-font: var(--rozie-data-table-font, var(--rdt-ds-font));
   --rdt-cell-padding: var(--rozie-data-table-cell-padding, var(--rdt-ds-cell-padding));
   --rdt-header-bg: var(--rozie-data-table-header-bg, var(--rdt-ds-header-bg));
@@ -152,7 +155,12 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
   --rdt-page-size-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
 }
 .rozie-data-table[data-rozie-s-d5dcab4c] {
-  border-collapse: collapse;
+  /* SEPARATE, not collapse. With collapsed borders the browser keeps a sticky cell's shared
+     border in the scrolling grid, so a 1px line of scrolled content shows beside pinned
+     columns and above the sticky header. Separate borders travel with their cell; zero
+     spacing keeps lines 1px because each cell draws only its own sides (see the cell rule). */
+  border-collapse: separate;
+  border-spacing: 0;
   width: 100%;
   font: var(--rdt-font, 14px system-ui, sans-serif);
   color: var(--rdt-color, inherit);
@@ -211,8 +219,28 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-td[data-rozie-s-d5dcab4c] {
   padding: var(--rdt-cell-padding, 0.5rem 0.75rem);
   text-align: left;
+  /* Reset every side, then draw only the row line. Under separate borders each cell owns its
+     lines, and the reset keeps a host's plain \`table td { border }\` rule from drawing a second
+     set inside the table (this class-scoped rule outranks it). */
+  border: 0;
   border-bottom: var(--rdt-border, 1px solid rgba(0, 0, 0, 0.08));
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-detail-cell[data-rozie-s-d5dcab4c] {
+  border: 0;
+}
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-th[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-td[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-filter-cell[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-detail-cell[data-rozie-s-d5dcab4c] {
+  border-inline-end: var(--rdt-column-border, 1px solid rgba(0, 0, 0, 0.08));
+}
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] tr[data-rozie-s-d5dcab4c] > [data-rozie-s-d5dcab4c]:first-child:not(.rdt-col-spacer[data-rozie-s-d5dcab4c]),
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] tr[data-rozie-s-d5dcab4c] > .rdt-col-spacer[data-rozie-s-d5dcab4c]:first-child + *[data-rozie-s-d5dcab4c] {
+  border-inline-start: var(--rdt-column-border, 1px solid rgba(0, 0, 0, 0.08));
+}
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-thead[data-rozie-s-d5dcab4c] > tr[data-rozie-s-d5dcab4c]:first-child > .rdt-th[data-rozie-s-d5dcab4c] {
+  border-top: var(--rdt-column-border, 1px solid rgba(0, 0, 0, 0.08));
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-thead[data-rozie-s-d5dcab4c] .rdt-th[data-rozie-s-d5dcab4c] {
   font-weight: var(--rdt-header-weight, 600);
   /* OPAQUE default (was rgba(0,0,0,0.03)): a translucent header lets the scrolling body
@@ -315,8 +343,21 @@ __rozieInjectStyle('DataTable-d5dcab4c', `[data-rozie-s-d5dcab4c]:host {
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-pinned[data-rozie-s-d5dcab4c] {
   box-sizing: border-box;
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-td.rdt-pinned[data-rozie-s-d5dcab4c] {
+  background-color: var(--rdt-pinned-bg, #fff);
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-group-header[data-rozie-s-d5dcab4c] > .rdt-td.rdt-pinned[data-rozie-s-d5dcab4c] {
+  background: linear-gradient(var(--rdt-group-header-bg, rgba(0, 0, 0, 0.025)), var(--rdt-group-header-bg, rgba(0, 0, 0, 0.025))), var(--rdt-pinned-bg, #fff);
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-filter-cell.rdt-pinned[data-rozie-s-d5dcab4c] {
+  background: linear-gradient(var(--rdt-filter-row-bg, rgba(0, 0, 0, 0.015)), var(--rdt-filter-row-bg, rgba(0, 0, 0, 0.015))), var(--rdt-pinned-bg, #fff);
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-td.rdt-pinned.rdt-in-range[data-rozie-s-d5dcab4c] {
+  background: linear-gradient(var(--rdt-range-bg, rgba(37, 99, 235, 0.12)), var(--rdt-range-bg, rgba(37, 99, 235, 0.12))), var(--rdt-pinned-bg, #fff);
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-filter-cell[data-rozie-s-d5dcab4c] {
   padding: var(--rdt-filter-cell-padding, 0.35rem 0.75rem);
+  border: 0;
   border-bottom: var(--rdt-border, 1px solid rgba(0, 0, 0, 0.08));
 }
 .rozie-data-table-wrap[data-rozie-s-d5dcab4c] .rdt-filter-row[data-rozie-s-d5dcab4c] .rdt-col-filter {
@@ -542,7 +583,9 @@ interface FilterSlotCtx { columnId: string; value: any; uniqueValues: any[]; min
 
 interface CellSlotCtx { columnId: string; column: TableColumn<any, unknown>; row: any; value: any; }
 
-interface EditorSlotCtx { columnId: string; column: TableColumn<any, unknown>; row: any; value: any; commit: (value: any) => void; cancel: () => void; columnLabel: string; autofocus: boolean; }
+interface EditorSlotCtx { columnId: string; column: TableColumn<any, unknown>; row: any; value: any; commit: (value: any, options?: {
+    toRange?: boolean;
+  }) => void; cancel: () => void; columnLabel: string; autofocus: boolean; rangeSize: number; }
 
 interface DataTableProps {
   /**
@@ -659,6 +702,10 @@ interface DataTableProps {
    * Pure-CSS sticky header: the `<thead>` sticks to the top of the scroll container.
    */
   stickyHeader?: boolean;
+  /**
+   * Draw a line between columns, plus an outer line at the start of each row and above the header row. The colour follows `--rozie-data-table-border-color` unless `--rozie-data-table-column-border-color` is set. Each line takes 1px inside the cell, so outside column windowing a column renders 1px wider than without lines; pinned and windowed columns keep their declared width.
+   */
+  columnLines?: boolean;
   /**
    * `'table'` (default, row-oriented, byte-behaviorally identical to a plain accessible table) | `'grid'` — lights up the full WAI-ARIA **[grid interaction mode](/components/data-table-grid-mode)**: `role="grid"`, a roving single tab-stop, 2-D APG arrow-key cell navigation, range selection, and clipboard support.
    */
@@ -676,11 +723,11 @@ interface DataTableProps {
    */
   undoLimit?: number;
   /**
-   * When `true`, the table holds its current view through its own writes (edit, paste, fill, cut, clear, the boolean toggle, undo and redo): rows keep the membership and order they had before the write and new values render in place, so an edited row does not jump or vanish under an active sort or filter. The view is re-derived (and both mismatch counts reset to 0) when `sorting`, `columnFilters` or `globalFilter` change, when `refreshView()` is called, when the dataset is swapped externally, or when `holdView` is toggled. Paging, page size, column visibility/order/pinning/sizing and expanding rows move through the held rows; a table write or `refreshView()` never changes the page (a sort, filter or grouping change returns to the first page). Falls back to live behaviour (with one console warning) while grouping is active, in `manual` mode, or with tree data (`getSubRows`). Passing a fresh `data` array that did not come from the table (for example reloading from the server after a save) is an external swap: it re-derives the view and clears undo history. Track mismatches with `view-state-change` / `getViewState()`.
+   * When `true`, the table holds its current view through its own writes (edit, paste, fill, range fill, cut, clear, the boolean toggle, undo and redo): rows keep the membership and order they had before the write and new values render in place, so an edited row does not jump or vanish under an active sort or filter. The view is re-derived (and both mismatch counts reset to 0) when `sorting`, `columnFilters` or `globalFilter` change, when `refreshView()` is called, when the dataset is swapped externally, or when `holdView` is toggled. Paging, page size, column visibility/order/pinning/sizing and expanding rows move through the held rows; a table write or `refreshView()` never changes the page (a sort, filter or grouping change returns to the first page). Falls back to live behaviour (with one console warning) while grouping is active, in `manual` mode, or with tree data (`getSubRows`). Passing a fresh `data` array that did not come from the table (for example reloading from the server after a save) is an external swap: it re-derives the view and clears undo history. Track mismatches with `view-state-change` / `getViewState()`.
    */
   holdView?: boolean;
   /**
-   * Opt-in windowing grammar: `false` (default, off — byte-identical to a non-virtual table) | `true` or `'rows'` (vertical row windowing; `true` is byte-behavior-identical to every existing consumer, zero churn) | `'columns'` (horizontal column windowing) | `'both'` (both axes windowed). Row windowing renders only the visible slice of rows inside a bounded `rdt-scroll` container (with leading/trailing spacer rows preserving total scroll height), windowing over the full filtered + sorted (pre-pagination) model and suppressing the client pagination chrome. Column windowing renders only the visible slice of leaf columns inside the same `rdt-scroll` container. An unrecognised string behaves as `false`.
+   * Opt-in windowing grammar: `false` (default, off — byte-identical to a non-virtual table) | `true` or `'rows'` (vertical row windowing; `true` is byte-behavior-identical to every existing consumer, zero churn) | `'columns'` (horizontal column windowing) | `'both'` (both axes windowed). Row windowing renders only the visible slice of rows inside a bounded `rdt-scroll` container (with leading/trailing spacer rows preserving total scroll height), windowing over the full filtered + sorted (pre-pagination) model and suppressing the client pagination chrome. Column windowing renders only the visible slice of leaf columns inside the same `rdt-scroll` container. An unrecognised string behaves as `false`. Choose it when the table mounts: changing `virtual` afterwards is not supported (remount the table instead).
    */
   virtual?: boolean | string;
   /**
@@ -724,7 +771,9 @@ interface DataTableProps {
   filterSlot?: (ctx: FilterSlotCtx) => JSX.Element;
   cellSlot?: (ctx: CellSlotCtx) => JSX.Element;
   editorSlot?: (ctx: EditorSlotCtx) => JSX.Element;
-  slots?: { [key: `colHeader-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; label: string }) => JSX.Element) | undefined; [key: `filter-${string}`]: ((ctx: { columnId: string; value: any; uniqueValues: any[]; minMax: [number, number] | null; columnLabel: string; setFilter: (columnId: string, value: any) => void }) => JSX.Element) | undefined; [key: `cell-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; row: any; value: any }) => JSX.Element) | undefined; [key: `editor-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; row: any; value: any; commit: (value: any) => void; cancel: () => void; columnLabel: string; autofocus: boolean }) => JSX.Element) | undefined; [key: string]: ((...args: any[]) => JSX.Element) | undefined; };
+  slots?: { [key: `colHeader-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; label: string }) => JSX.Element) | undefined; [key: `filter-${string}`]: ((ctx: { columnId: string; value: any; uniqueValues: any[]; minMax: [number, number] | null; columnLabel: string; setFilter: (columnId: string, value: any) => void }) => JSX.Element) | undefined; [key: `cell-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; row: any; value: any }) => JSX.Element) | undefined; [key: `editor-${string}`]: ((ctx: { columnId: string; column: TableColumn<any, unknown>; row: any; value: any; commit: (value: any, options?: {
+    toRange?: boolean;
+  }) => void; cancel: () => void; columnLabel: string; autofocus: boolean; rangeSize: number }) => JSX.Element) | undefined; [key: string]: ((...args: any[]) => JSX.Element) | undefined; };
   ref?: (h: DataTableHandle) => void;
 }
 
@@ -770,8 +819,8 @@ export interface DataTableHandle {
 }
 
 export default function DataTable(_props: DataTableProps): JSX.Element {
-  const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getRowId: null, getSubRows: null, groupable: false, stickyHeader: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, holdView: false, virtual: false, estimateRowHeight: 40, autoMeasure: false, maxHeight: '' }, _props);
-  const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getRowId', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'holdView', 'virtual', 'estimateRowHeight', 'autoMeasure', 'maxHeight', 'children', 'ref', 'onActivecellChange', 'onCellEditCommit', 'onExpandChange', 'onFilterChange', 'onGroupChange', 'onHistoryChange', 'onPageChange', 'onPinChange', 'onRangeChange', 'onReorderChange', 'onResizeChange', 'onRowActivate', 'onRowEditCommit', 'onSelectionChange', 'onSortChange', 'onVisibilityChange', 'onViewStateChange', 'onVisibleRangeChange', 'groupBarSlot', 'selectAllSlot', 'placeholderSlot', 'selectCellSlot', 'detailSlot', 'colHeaderSlot', 'filterSlot', 'cellSlot', 'editorSlot', 'slots']);
+  const _merged = mergeProps({ columns: (() => [])() as any[], selectionMode: 'none', manual: false, rowCount: null, pageCount: null, expandable: false, getRowId: null, getSubRows: null, groupable: false, stickyHeader: false, columnLines: false, interactionMode: 'table', singleClickEdit: false, undoable: false, undoLimit: 100, holdView: false, virtual: false, estimateRowHeight: 40, autoMeasure: false, maxHeight: '' }, _props);
+  const [local, attrs] = splitProps(_merged, ['data', 'columns', 'selectionMode', 'sorting', 'globalFilter', 'columnFilters', 'pagination', 'manual', 'rowCount', 'pageCount', 'expandable', 'expanded', 'getRowId', 'getSubRows', 'groupable', 'grouping', 'rowSelection', 'columnVisibility', 'columnSizing', 'columnOrder', 'columnPinning', 'stickyHeader', 'columnLines', 'interactionMode', 'singleClickEdit', 'undoable', 'undoLimit', 'holdView', 'virtual', 'estimateRowHeight', 'autoMeasure', 'maxHeight', 'children', 'ref', 'onActivecellChange', 'onCellEditCommit', 'onExpandChange', 'onFilterChange', 'onGroupChange', 'onHistoryChange', 'onPageChange', 'onPinChange', 'onRangeChange', 'onReorderChange', 'onResizeChange', 'onRowActivate', 'onRowEditCommit', 'onSelectionChange', 'onSortChange', 'onVisibilityChange', 'onViewStateChange', 'onVisibleRangeChange', 'groupBarSlot', 'selectAllSlot', 'placeholderSlot', 'selectCellSlot', 'detailSlot', 'colHeaderSlot', 'filterSlot', 'cellSlot', 'editorSlot', 'slots']);
   const resolved = () => local.children;
   onMount(() => { local.ref?.({ sortColumn, clearSorting, toggleRowExpanded, expandAll, collapseAll, getExpandedRows, applyGrouping, clearGrouping, getFacetedUniqueValues, getFacetedMinMaxValues, getColumnDefs, toggleAllRows, clearSelection, getSelectedRows, setPage, setRowsPerPage, toggleColumnVisibility, applyColumnOrder, resetColumnSizing, pinColumn, focusCell, getActiveCell, clearActiveCell, scrollToRow, getScrollElement, getRowIndexRelativeToPage, editCell, commitEditing, editRow, getSelectedRange, cut, undo, redo, canUndo, canRedo, clearHistory, refreshView, getViewState }); });
 
@@ -1157,6 +1206,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       };
       document.addEventListener('pointerdown', docPointerDown, true);
     }
+    // Range fill: a CAPTURE-phase keydown on the grid root runs before any editor's own keydown
+    // handler — built-in, drop-in or slotted (on Lit the slotted editor's composed path still
+    // passes through the grid root). Registered here in script rather than as a template
+    // `.capture` binding so it is the same code on all six targets. It reads no reactive state
+    // (a mount-time closure would see stale state on React); the commit checks the range.
+    if (gridRoot) gridRoot.addEventListener('keydown', onEditorDropinKeyDownCapture, true);
     // WR-04: NO on-mount auto-focus of the entry cell. Auto-focusing here stole focus on
     // page load AND was non-deterministic on React/Solid (the entry cell may not be
     // committed to the DOM yet at the $onMount microtask). The roving tabindex="0" entry
@@ -1292,6 +1347,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       document.removeEventListener('pointerdown', docPointerDown, true);
       docPointerDown = null;
     }
+    if (gridRoot) gridRoot.removeEventListener('keydown', onEditorDropinKeyDownCapture, true);
     if (virtualizerCleanup) virtualizerCleanup();
     // Phase 87 87-04: tear down the column virtualizer's scroll-element ResizeObserver too.
     // No-op when column windowing was off (cleanup stays null).
@@ -5840,6 +5896,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     // any OTHER cell falls through to clearRange() and clears the flag on the way past.
     if (rangeTransition) {
       rangeTransition = false;
+    } else if (!isHeader && tgt !== cellEl && editingRow() === movedRow && editingCol() === col) {
+      // Focus moving INTO the open editor of this cell (a built-in input, or a slot editor that
+      // focuses itself) is not navigation: keep the range so the editor can commit to it with
+      // Ctrl/Cmd+Enter.
     } else if (rangeClickPending && rangeClickPending.isHeader === isHeader && rangeClickPending.r === movedRow && rangeClickPending.c === col) {
       rangeClickPending = null;
     } else {
@@ -7207,6 +7267,28 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     applyGridToRange(grid, box.r0, box.c0, 'filled');
   }
 
+  // ══ Range fill (Ctrl/Cmd+Enter from an editor; Space on a checkbox range) ════════════════
+  // rangeSize(): how many cells a range fill would write — the range's rows in the ACTIVE
+  // cell's column, or 1 with no range. Exposed to editor slots as `rangeSize` so a custom
+  // editor can say "Apply to 24 cells".
+  function fillTargets() {
+    return rangeFillTargets(normalizedRange(), activeRow(), activeColIndex());
+  }
+  function rangeSize() {
+    return activeIsHeader() ? 1 : fillTargets().size;
+  }
+
+  // fillActiveColumn(value): write ONE value down the active cell's column for every row of the
+  // range, through the same funnel as paste and fill (skip rule, one undo step, one
+  // cell-edit-commit per changed cell, "N of M cells updated"). The value is written AS IS — a
+  // one-column grid of the same value, never stringified — so an array or object survives.
+  function fillActiveColumn(value: any) {
+    const t = fillTargets();
+    const grid = [];
+    for (let i = 0; i < t.size; i++) grid.push([value]);
+    return applyGridToRange(grid, t.top, t.col, 'updated');
+  }
+
   // onFillHandlePointerDown: begin a fill-handle drag (req-8 / D-04). The handle sits on the
   // range's bottom-right cell; a pointer drag extends the range (reusing setRangeFocus off the
   // cell under the pointer) and, on release, value-fills the dragged rectangle. Kept minimal:
@@ -8029,6 +8111,62 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     return true;
   }
 
+  // commitEditToRange(overrideValue): the Ctrl/Cmd+Enter commit. Writes the editor's value to
+  // every selected cell in the editing cell's column through fillActiveColumn (the paste/fill
+  // funnel: skip rule, one undo step, one cell-edit-commit per changed cell, "N of M cells
+  // updated"), then closes the editor and returns focus to the active cell WITHOUT clearing the
+  // range. The value is checked against the editing cell first: if the cell being edited rejects
+  // it, the editor stays open with the error, exactly as a single-cell commit does.
+  function commitEditToRange(overrideValue = undefined) {
+    if (editingRow() < 0) return false;
+    if (committedThisSession) return false;
+    const colId = editingColumnId();
+    if (colId == null) {
+      endEdit();
+      return false;
+    }
+    const rawValue = overrideValue !== undefined ? overrideValue : draftValue();
+    const err = runValidator(colId, coerceCellValue(colId, rawValue), editingRowOriginal());
+    if (err !== true) {
+      setInvalid(err);
+      focusEditorWhenReady(editingRow(), editingCol());
+      return false;
+    }
+    setInvalid('');
+    const focusRow = editingRow();
+    const focusCol = editingCol();
+    const rowOriginal = editingRowOriginal();
+    const rowId = editingRowId();
+    // Same teardown guards as commitEdit: the unmount blur of the editor must not commit again.
+    editTransition = true;
+    committedThisSession = true;
+    const result = fillActiveColumn(rawValue);
+    endEdit();
+    editTransition = false;
+    // Keep the range when focus comes back to the active cell (the selection stays put after a
+    // fill, as in a spreadsheet). Coordinate-matched, like a Shift+Click: if focus lands anywhere
+    // else first (the user clicks another cell, or the focus return gives up), that focusin
+    // clears the range as usual instead of inheriting a stale "keep" flag.
+    rangeClickPending = {
+      isHeader: false,
+      r: focusRow,
+      c: focusCol
+    };
+    if (result && result.changed > 0) {
+      // A write can re-sort or re-filter the rows (holdView off), so follow the active cell's
+      // RECORD rather than its old index — the same B23 path commitEdit uses. A re-order also
+      // clears the range, so the coordinate match above only keeps it when nothing moved.
+      pendingEditFollow = {
+        rowOriginal,
+        rowId,
+        col: focusCol
+      };
+    } else {
+      focusCellWhenReady(focusRow, focusCol);
+    }
+    return true;
+  }
+
   // toggleActiveBooleanCell (design doc 2026-07-05, Change 1): the spreadsheet-standard
   // single-keystroke boolean toggle. Flips the ACTIVE cell's value and commits it through the
   // EXACT SAME write funnel commitEdit uses (replaceRowValue → writeData → single $emit) but
@@ -8057,6 +8195,14 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     const rowId = row.id;
     const oldValue = cellValueAt(activeRow(), activeColIndex());
     const newValue = !oldValue;
+    // With a range selected, set every selected cell in this column to the active cell's new
+    // value (one value for all, not a per-cell flip) through the paste/fill funnel: invalid cells
+    // skipped, one undo step, one cell-edit-commit per changed cell, "N of M cells updated".
+    if (rangeSize() > 1) {
+      setInvalid('');
+      fillActiveColumn(newValue);
+      return;
+    }
     // D-01: same discipline as commitEdit — a rejecting validator blocks the toggle. There is
     // no editor to keep open here, so the toggle simply does not apply (no model write).
     const err = runValidator(colId, newValue, rowOriginal);
@@ -8454,6 +8600,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     committed: boolean;
   } | null = null;
 
+  // rangeCommitIntent: set by the drop-in wrapper's CAPTURE-phase keydown when Ctrl/Cmd+Enter is
+  // pressed while a range is selected, so the slot editor's own commit — which runs during that
+  // same keypress — goes to the whole range. Cleared by the bubble-phase handler and by a
+  // setTimeout(0), so an editor that does not commit during the keypress falls back to one cell.
+  let rangeCommitIntent = false;
+
   // ── Per-cell editor draft source (req-6) ──────────────────────────────────────────────
   // In single-cell mode every editor binds the shared $data.draftValue. In full-row mode
   // (editingRowIndex != null) each editable cell owns its OWN draft keyed by columnId in
@@ -8477,11 +8629,19 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // reverts the cell (single) or the whole row (row mode). Factory-bound per columnId so the
   // row-mode commit targets the right draft key.
   function editorCommitFor(colId: any) {
-    return (value: any) => {
+    return (value: any, options: any) => {
       if (inRowEdit()) {
         setRowDraft$local(colId, value);
         return;
       }
+      // Range fill: an explicit `commit(v, { toRange: true })`, or any commit made during a
+      // Ctrl/Cmd+Enter keypress (rangeCommitIntent), writes v to every selected cell in this column.
+      const wantsRange = options != null && options.toRange === true || rangeCommitIntent;
+      rangeCommitIntent = false;
+      if (wantsRange && !dropinTabFlush && rangeSize() > 1) {
+        commitEditToRange(value);
+        return;
+      }
       // C-10: during the drop-in wrapper's Tab flush, record the outcome and skip the focus
       // return — the Tab handler advances focus to the next editor itself.
       if (dropinTabFlush) {
@@ -8593,7 +8753,12 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       }
       return;
     }
-    if (key === 'Enter') {
+    if (key === 'Enter' && (e.ctrlKey || e.metaKey) && rangeSize() > 1) {
+      // Ctrl/Cmd+Enter with a range selected: write the draft to every selected cell in this
+      // column. Plain Enter (below) still commits the active cell only.
+      e.preventDefault();
+      commitEditToRange(undefined);
+    } else if (key === 'Enter') {
       e.preventDefault();
       commitEdit(undefined);
     } else if (key === 'Tab') {
@@ -8681,8 +8846,23 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // advances. `dropinTabFlush` tells editorCommitFor to report the outcome and skip the focus
   // return. A drop-in that does not commit on blur (EditorCheckbox commits on change, so it holds
   // nothing pending) falls back to the host-draft path, which is exactly right in that case.
+  // Capture-phase keydown on the grid root (registered at mount): runs BEFORE any editor's own
+  // keydown handler. Ctrl/Cmd+Enter marks the commit an editor makes during this keypress as a
+  // range commit; editorCommitFor decides whether a range is actually selected. The mark expires
+  // after this event, so a commit that comes later (on blur, after an async step) writes one
+  // cell, as usual. Reads NO reactive state: it is a mount-time closure (stale on React).
+  function onEditorDropinKeyDownCapture(e: any) {
+    if (!e) return;
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      rangeCommitIntent = true;
+      setTimeout(() => {
+        rangeCommitIntent = false;
+      }, 0);
+    }
+  }
   function onEditorDropinKeyDown(e: any) {
     if (!e) return;
+    rangeCommitIntent = false;
     const key = e.key;
     if (inRowEdit()) {
       if (key === 'Enter') {
@@ -9209,7 +9389,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
 
     {<Show when={local.groupable}><div class={"rdt-group-bar-host"} data-rozie-s-d5dcab4c="">
       {(_props.groupBarSlot ?? _props.slots?.['groupBar'])?.({ get grouping() { return groupingKeys(); }, get groupableColumns() { return groupableColumns(); }, applyGrouping, clearGrouping }) ?? <Key each={groupingKeys() as readonly any[]} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{rozieDisplay(gk())}</span>}</Key>}
-    </div></Show>}{<Show when={isWindowed()} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} aria-colcount={rozieAttr(gridAriaColCount())} 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="">
+    </div></Show>}{<Show when={isWindowed()} fallback={<table aria-rowcount={rozieAttr(gridAriaRowCount())} aria-colcount={rozieAttr(gridAriaColCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader, 'rdt-column-lines': local.columnLines })} 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-pinned': columnPinSide(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()))} aria-colindex={rozieAttr(headerLeafStart(hg(), header()) + 1)} tabIndex={rozieAttr(cellTabindex('__header', headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header()))} data-rozie-s-d5dcab4c="">
@@ -9261,7 +9441,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
               {_props.slots?.[`cell-${cell().column.id}`]?.({ 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'])?.({ 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="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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" }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onEditorDropinKeyDown($event); }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`editor-${cell().column.id}`]?.({ 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 columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ 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 columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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="" />}
+                {_props.slots?.[`editor-${cell().column.id}`]?.({ 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 columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); }, get rangeSize() { return inRowEdit() ? 1 : rangeSize(); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ 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 columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, rowIndexOf(row())); }, get rangeSize() { return inRowEdit() ? 1 : rangeSize(); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} ref={(el) => { rozieSelectValue(el as HTMLSelectElement, () => (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="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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="">
@@ -9283,7 +9463,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
         </tr></Show>}</>}</Key>
       </tbody>
     </table>}><div class={"rdt-scroll"} style={parseInlineStyle(rowsWindowed() && local.maxHeight ? 'max-height:' + local.maxHeight + ';overflow:auto;--rozie-data-table-max-height:' + local.maxHeight : 'overflow:auto')} data-rozie-s-d5dcab4c="">
-    <table aria-rowcount={rozieAttr(gridAriaRowCount())} aria-colcount={rozieAttr(gridAriaColCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader, 'rdt-col-windowed': colsWindowed() })} 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="">
+    <table aria-rowcount={rozieAttr(gridAriaRowCount())} aria-colcount={rozieAttr(gridAriaColCount())} class={"rozie-data-table" + " " + rozieClass({ 'rdt-sticky': local.stickyHeader, 'rdt-col-windowed': colsWindowed(), 'rdt-column-lines': local.columnLines })} 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="">
           
@@ -9338,7 +9518,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
               {_props.slots?.[`cell-${cell().column.id}`]?.({ 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'])?.({ 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="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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" }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSpanElement; target: Element }) => { onEditorDropinKeyDown($event); }} data-rozie-s-d5dcab4c="">
-                {_props.slots?.[`editor-${cell().column.id}`]?.({ 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 columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ 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 columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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="" />}
+                {_props.slots?.[`editor-${cell().column.id}`]?.({ 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 columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); }, get rangeSize() { return inRowEdit() ? 1 : rangeSize(); } }) ?? (_props.editorSlot ?? _props.slots?.['editor'])?.({ 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 columnLabel() { return headerLabel(cell().column.id); }, get autofocus() { return editorAutofocusFor(cell().column.id, wr().vi.index); }, get rangeSize() { return inRowEdit() ? 1 : rangeSize(); } }) ?? <input type="text" data-editing-cell="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} class={"rdt-cell-editor"} ref={(el) => { rozieSelectValue(el as HTMLSelectElement, () => (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="" data-builtin-editor="" aria-invalid={rozieAttr(invalidMsg() ? 'true' : null)} 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="">

package/src/helpers/rangeFill.ts

@@ -0,0 +1,22 @@
+// rangeFill.ts — which cells a range fill writes. Pure, sigil-free.
+//
+// A range fill (Ctrl/Cmd+Enter in an editor, or Space on a checkbox range) writes one value
+// down the ACTIVE cell's column for every row the range covers. Other columns of a
+// multi-column range are left alone: one typed value rarely makes sense in several columns.
+// With no range, or an active cell outside it, the fill is the active cell alone (size 1).
+
+export interface FillRange { r0: number; r1: number; c0: number; c1: number }
+export interface FillTargets { top: number; bottom: number; col: number; size: number }
+
+const rangeFillTargets = (range: FillRange | null, activeRow: number, activeCol: number): FillTargets => {
+  const single = { top: activeRow, bottom: activeRow, col: activeCol, size: 1 }
+  if (!range) return single
+  const top = Math.min(range.r0, range.r1)
+  const bottom = Math.max(range.r0, range.r1)
+  const left = Math.min(range.c0, range.c1)
+  const right = Math.max(range.c0, range.c1)
+  if (activeCol < left || activeCol > right || activeRow < top || activeRow > bottom) return single
+  return { top, bottom, col: activeCol, size: bottom - top + 1 }
+}
+
+export { rangeFillTargets }

package/src/themes/base.css

@@ -1,15 +1,15 @@
 /*
  * @rozie-ui/data-table — base token reference.
  *
- * This file is the PUBLIC token reference. It wires each of the 18 public
+ * This file is the PUBLIC token reference. It wires each of the 20 public
  * `--rozie-data-table-*` tokens, with its default, onto the short internal `--rdt-*`
- * token the component's scoped `<style>` actually reads. The component reads 82 internal `--rdt-*`
+ * token the component's scoped `<style>` actually reads. The component reads 84 internal `--rdt-*`
  * tokens in total, each with an inline `var(--rdt-x, <fallback>)` default, so the
  * table renders ZERO-CONFIG without importing this file.
  *
  * Scope, stated plainly: remapping the public tokens re-skins the table's primary
  * surfaces — type, borders, background, header, row, cell padding, accent, and the
- * max-height. It does NOT reach every cosmetic value. 58 of the 82 internal tokens
+ * max-height. It does NOT reach every cosmetic value. 58 of the 84 internal tokens
  * have no public counterpart today, including the grid active-cell ring, the range
  * highlight, the fill handle, the invalid-cell outline, the group tokens, the filter
  * row, the per-header column ⋯ menu (its panel is a composed @rozie-ui/popover, so its
@@ -27,7 +27,7 @@
  * the element itself), never on the `.rozie-data-table` / `.rozie-data-table-wrap`
  * classes — on that target both of those render inside the component's shadow root,
  * where a document stylesheet cannot reach them. The tokens themselves inherit across
- * the boundary, and the component carries the mapping internally, so every one of the 18
+ * the boundary, and the component carries the mapping internally, so every one of the 20
  * works there.
  *
  * NOTE the split: the STRUCTURAL rules — `border-collapse`, the keyed-r-for
@@ -75,6 +75,12 @@
   --rdt-border: 1px solid var(--rozie-data-table-border-color, rgba(0, 0, 0, 0.08));
   --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, rgba(0, 0, 0, 0.2));
   --rdt-filter-radius: var(--rozie-data-table-radius, 4px);
+  /* Column lines are off unless the `columnLines` prop is set. Their colour follows the
+     row-line colour unless the column token is set, so one variable themes both. */
+  --rdt-column-border: 1px solid var(--rozie-data-table-column-border-color, var(--rozie-data-table-border-color, rgba(0, 0, 0, 0.08)));
+  /* Pinned body cells are opaque so scrolled content never shows through them. Set this
+     to the surface colour behind the table. */
+  --rdt-pinned-bg: var(--rozie-data-table-pinned-bg, #fff);
 
   /* ── typography / cell metrics ──────────────────────────────────────────── */
   --rdt-font: var(--rozie-data-table-font, 14px system-ui, sans-serif);
@@ -125,6 +131,8 @@
   --rdt-ds-fg: currentColor;
   --rdt-ds-select-accent: #0066cc;
   --rdt-ds-border-color: rgba(0, 0, 0, 0.08);
+  --rdt-ds-column-border-color: var(--rdt-ds-border-color);
+  --rdt-ds-pinned-bg: #fff;
   --rdt-ds-control-border-color: rgba(0, 0, 0, 0.2);
   --rdt-ds-radius: 4px;
   --rdt-ds-font: 14px system-ui, sans-serif;

package/src/themes/bootstrap.css

@@ -35,6 +35,8 @@ rozie-data-table {
   --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--bs-border-color, #dee2e6));
   --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, var(--bs-border-color, #dee2e6));
   --rdt-filter-radius: var(--rozie-data-table-radius, var(--bs-border-radius, 0.375rem));
+  --rdt-column-border: 1px solid var(--rozie-data-table-column-border-color, var(--rozie-data-table-border-color, var(--bs-border-color, #dee2e6)));
+  --rdt-pinned-bg: var(--rozie-data-table-pinned-bg, var(--bs-body-bg, #fff));
   --rdt-header-bg: var(--rozie-data-table-header-bg, var(--bs-tertiary-bg, #f8f9fa));
   --rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color, var(--bs-border-color, #dee2e6));
   --rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active, var(--rozie-data-table-accent, var(--bs-primary, #0d6efd)));
@@ -60,6 +62,7 @@ rozie-data-table {
   --rdt-ds-fg: var(--bs-body-color, #212529);
   --rdt-ds-select-accent: var(--bs-primary, #0d6efd);
   --rdt-ds-border-color: var(--bs-border-color, #dee2e6);
+  --rdt-ds-pinned-bg: var(--bs-body-bg, #fff);
   --rdt-ds-control-border-color: var(--bs-border-color, #dee2e6);
   --rdt-ds-radius: var(--bs-border-radius, 0.375rem);
   --rdt-ds-header-bg: var(--bs-tertiary-bg, #f8f9fa);

package/src/themes/material.css

@@ -33,6 +33,8 @@ rozie-data-table {
   --rdt-color: var(--rozie-data-table-fg, var(--md-sys-color-on-surface, #1d1b20));
   --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, var(--md-sys-color-primary, #6750a4)));
   --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--md-sys-color-outline-variant, #cac4d0));
+  --rdt-column-border: 1px solid var(--rozie-data-table-column-border-color, var(--rozie-data-table-border-color, var(--md-sys-color-outline-variant, #cac4d0)));
+  --rdt-pinned-bg: var(--rozie-data-table-pinned-bg, var(--md-sys-color-surface, #fef7ff));
   --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, var(--md-sys-color-outline, #79747e));
   --rdt-header-bg: var(--rozie-data-table-header-bg, var(--md-sys-color-surface-container-highest, #e6e0e9));
   --rdt-header-weight: var(--rozie-data-table-header-weight, 500);
@@ -55,6 +57,7 @@ rozie-data-table {
   --rdt-ds-fg: var(--md-sys-color-on-surface, #1d1b20);
   --rdt-ds-select-accent: var(--md-sys-color-primary, #6750a4);
   --rdt-ds-border-color: var(--md-sys-color-outline-variant, #cac4d0);
+  --rdt-ds-pinned-bg: var(--md-sys-color-surface, #fef7ff);
   --rdt-ds-control-border-color: var(--md-sys-color-outline, #79747e);
   --rdt-ds-radius: 4px;
   --rdt-ds-header-bg: var(--md-sys-color-surface-container-highest, #e6e0e9);

package/src/themes/shadcn.css

@@ -39,6 +39,8 @@ rozie-data-table {
   --rdt-color: var(--rozie-data-table-fg, hsl(var(--foreground, 222.2 47.4% 11.2%)));
   --rdt-select-accent: var(--rozie-data-table-select-accent, var(--rozie-data-table-accent, hsl(var(--primary, 222.2 47.4% 11.2%))));
   --rdt-border: 1px solid var(--rozie-data-table-border-color, hsl(var(--border, 214.3 31.8% 91.4%)));
+  --rdt-column-border: 1px solid var(--rozie-data-table-column-border-color, var(--rozie-data-table-border-color, hsl(var(--border, 214.3 31.8% 91.4%))));
+  --rdt-pinned-bg: var(--rozie-data-table-pinned-bg, hsl(var(--background, 0 0% 100%)));
   --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, hsl(var(--border, 214.3 31.8% 91.4%)));
   --rdt-filter-radius: var(--rozie-data-table-radius, var(--radius, 0.5rem));
   --rdt-header-bg: var(--rozie-data-table-header-bg, hsl(var(--muted, 210 40% 96.1%)));
@@ -65,6 +67,7 @@ rozie-data-table {
   --rdt-ds-fg: hsl(var(--foreground, 222.2 47.4% 11.2%));
   --rdt-ds-select-accent: hsl(var(--primary, 222.2 47.4% 11.2%));
   --rdt-ds-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
+  --rdt-ds-pinned-bg: hsl(var(--background, 0 0% 100%));
   --rdt-ds-control-border-color: hsl(var(--border, 214.3 31.8% 91.4%));
   --rdt-ds-radius: var(--radius, 0.5rem);
   --rdt-ds-header-bg: hsl(var(--muted, 210 40% 96.1%));