@rozie-ui/data-table-lit 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @rozie-ui/data-table-lit
 
+## 0.9.0
+
+### Minor Changes
+
+- cb54e7e: Range fill and border fixes.
+  - **Range fill:** with a block of cells selected, `Ctrl`/`Cmd`+`Enter` in a cell editor writes its value to every selected cell in the active cell's column. It works with built-in, drop-in and custom slot editors. Editor slots get `rangeSize` and `commit(value, { toRange: true })`. The fill follows the paste rules: invalid cells are skipped, it's one undo step with one `cell-edit-commit` per changed cell, and it's announced as "N of M cells updated". The value is written as is, not converted to text. The range stays selected while the editor is open and after the fill.
+  - **Checkbox ranges:** `Space` (or `Enter`/`F2`) on a checkbox range sets every selected cell to the opposite of the active cell's value.
+  - **Border gaps:** the 1px lines of scrolled content beside pinned columns and above the sticky header are gone. The table now uses separate borders, and each cell draws its own lines. Cells also reset their borders, so a host's global `table td { border }` rule no longer draws inside the table.
+  - **Pinned cells:** pinned body and filter cells are opaque, and the group-row and filter-row bands still show on them. The new `--rozie-data-table-pinned-bg` token sets their background. It defaults to `#fff` in the base theme, and to the design system's surface colour in the bootstrap, material and shadcn bridges. On a dark or tinted page, set it to the colour behind the table.
+  - **Column lines:** the new `columnLines` prop draws column lines plus the outer lines at the start of each row and above the header; they follow the writing direction. Their colour follows the row-line colour unless `--rozie-data-table-column-border-color` is set.
+
+## 0.8.1
+
+### Patch Changes
+
+- 3c4b293: README fixes: Angular examples use the `<rozie-data-table>`, `<rozie-column>` and other child-component selectors (the PascalCase tags they showed fail to compile with NG8001), and the grouping and faceting examples no longer nest backticks inside the template string.
+
 ## 0.8.0
 
 ### Minor Changes

package/README.md

@@ -441,11 +441,12 @@ import '@rozie-ui/data-table-lit/themes/shadcn.css';    // or material.css, boot
 | `columnOrder` | `Array` | `[]` | ✓ |  | `ColumnOrderState` — `string[]`. A fresh order array on reorder (never an in-place splice). Two-way: fires `reorder-change`. |
 | `columnPinning` | `Object` | `{…}` | ✓ |  | `ColumnPinningState` — `{ left: string[], right: string[] }`. Pinned columns get `position: sticky` + computed offsets. Defaults to `{ left: [], right: [] }`. Two-way: fires `pin-change`. |
 | `stickyHeader` | `Boolean` | `false` |  |  | Pure-CSS sticky header: the `<thead>` sticks to the top of the scroll container. |
+| `columnLines` | `Boolean` | `false` |  |  | 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. |
 | `interactionMode` | `String` | `"table"` |  |  | `'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. |
 | `singleClickEdit` | `Boolean` | `false` |  |  | Grid mode only. When `true`, a plain click on an **editable** cell opens its editor immediately (single-click-to-edit) instead of just activating the cell. Default `false` keeps click-to-activate (double-click opens the editor). Shift+click (range selection) and clicks on non-editable cells are unaffected. |
 | `undoable` | `Boolean` | `false` |  |  | Grid mode. When `true`, every committed data mutation (cell/row edit, paste, fill, cut, clear) becomes one undo step: Ctrl/Cmd+Z undoes, Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z redoes. Default `false` records no history and Ctrl+Z/Y are inert. |
 | `undoLimit` | `Number` | `100` |  |  | The maximum number of undo steps retained (oldest evicted past this depth). Only consulted when `undoable` is `true`. |
-| `holdView` | `Boolean` | `false` |  |  | 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()`. |
+| `holdView` | `Boolean` | `false` |  |  | 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()`. |
 | `virtual` | `any` | `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`. |
 | `estimateRowHeight` | `Number` | `40` |  |  | Estimated row height (px) — the first-paint seed for the windowing engine before any row has been measured. Only consulted when rows are windowed. When `autoMeasure` is `true`, later renders progressively refine the estimate from measured content; when `autoMeasure` is `false` this remains the explicit override for every render. |
 | `autoMeasure` | `Boolean` | `false` |  |  | Opt-in content-driven row-size estimation. When `true`, the windowing engine feeds `estimateSize()` a running mean of measured row heights instead of the fixed `estimateRowHeight` seed, so `getTotalSize()` converges to the true content total on a large table with variable-height rows. Falls back to `estimateRowHeight` before any row has been measured. Default `false` keeps the estimate fixed at `estimateRowHeight` for every render (today's behavior). |
@@ -556,9 +557,9 @@ A misspelled family key does not fail to compile — the emitted type carries a
 | placeholder | index, columnId |
 | selectCell | row, checked, toggle |
 | cell-<id> | columnId, column, row, value |
-| editor-<id> | columnId, column, row, value, commit, cancel, columnLabel, autofocus |
+| editor-<id> | columnId, column, row, value, commit, cancel, columnLabel, autofocus, rangeSize |
 | detail | row |
 | colHeader | columnId, column, label |
 | filter | columnId, value, uniqueValues, minMax, columnLabel, setFilter |
 | cell | columnId, column, row, value |
-| editor | columnId, column, row, value, commit, cancel, columnLabel, autofocus |
+| editor | columnId, column, row, value, commit, cancel, columnLabel, autofocus, rangeSize |

package/dist/index.cjs

@@ -296,6 +296,28 @@ const tileIndex = (i, lo, hi) => {
 	return lo + k;
 };
 //#endregion
+//#region src/helpers/rangeFill.ts
+const rangeFillTargets = (range, activeRow, activeCol) => {
+	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
+	};
+};
+//#endregion
 //#region src/helpers/rowValueUtils.ts
 const replaceRowValue = (rows, rowIndex, field, value) => {
 	const src = rows || [];
@@ -591,6 +613,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			initialControlledValue: void 0
 		});
 		this.stickyHeader = false;
+		this.columnLines = false;
 		this.interactionMode = "table";
 		this.singleClickEdit = false;
 		this.undoable = false;
@@ -2702,7 +2725,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			this._activeColIndex.value = col;
 			if (isHeader !== prevIsHeader || col !== prevCol || (isHeader ? movedLevel !== prevLevel : movedRow !== prevRow)) this.focusIntentEpoch = this.focusIntentEpoch + 1;
 			if (this.rangeTransition) this.rangeTransition = false;
-			else if (this.rangeClickPending && this.rangeClickPending.isHeader === isHeader && this.rangeClickPending.r === movedRow && this.rangeClickPending.c === col) this.rangeClickPending = null;
+			else if (!isHeader && tgt !== cellEl && this._editingRow.value === movedRow && this._editingCol.value === col) {} else if (this.rangeClickPending && this.rangeClickPending.isHeader === isHeader && this.rangeClickPending.r === movedRow && this.rangeClickPending.c === col) this.rangeClickPending = null;
 			else {
 				this.rangeClickPending = null;
 				this.clearRange();
@@ -3466,6 +3489,14 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			}
 			this.applyGridToRange(grid, box.r0, box.c0, "filled");
 		};
+		this.fillTargets = () => rangeFillTargets(this.normalizedRange(), this._activeRow.value, this._activeColIndex.value);
+		this.rangeSize = () => this._activeIsHeader.value ? 1 : this.fillTargets().size;
+		this.fillActiveColumn = (value) => {
+			const t = this.fillTargets();
+			const grid = [];
+			for (let i = 0; i < t.size; i++) grid.push([value]);
+			return this.applyGridToRange(grid, t.top, t.col, "updated");
+		};
 		this.fillDragging = false;
 		this.fillDragMove = null;
 		this.fillDragUp = null;
@@ -3892,6 +3923,44 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			} else if (skipFocusReturn !== true) this.focusCellWhenReady(focusRow, focusCol);
 			return true;
 		};
+		this.commitEditToRange = (overrideValue = void 0) => {
+			if (this._editingRow.value < 0) return false;
+			if (this.committedThisSession) return false;
+			const colId = this.editingColumnId();
+			if (colId == null) {
+				this.endEdit();
+				return false;
+			}
+			const rawValue = overrideValue !== void 0 ? overrideValue : this._draftValue.value;
+			const err = this.runValidator(colId, this.coerceCellValue(colId, rawValue), this.editingRowOriginal());
+			if (err !== true) {
+				this.setInvalid(err);
+				this.focusEditorWhenReady(this._editingRow.value, this._editingCol.value);
+				return false;
+			}
+			this.setInvalid("");
+			const focusRow = this._editingRow.value;
+			const focusCol = this._editingCol.value;
+			const rowOriginal = this.editingRowOriginal();
+			const rowId = this.editingRowId();
+			this.editTransition = true;
+			this.committedThisSession = true;
+			const result = this.fillActiveColumn(rawValue);
+			this.endEdit();
+			this.editTransition = false;
+			this.rangeClickPending = {
+				isHeader: false,
+				r: focusRow,
+				c: focusCol
+			};
+			if (result && result.changed > 0) this.pendingEditFollow = {
+				rowOriginal,
+				rowId,
+				col: focusCol
+			};
+			else this.focusCellWhenReady(focusRow, focusCol);
+			return true;
+		};
 		this.toggleActiveBooleanCell = () => {
 			if (this.rowIndexIsGrouped(this._activeRow.value)) return;
 			const row = (this._rows.value || [])[this._activeRow.value];
@@ -3903,6 +3972,11 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			const rowId = row.id;
 			const oldValue = this.cellValueAt(this._activeRow.value, this._activeColIndex.value);
 			const newValue = !oldValue;
+			if (this.rangeSize() > 1) {
+				this.setInvalid("");
+				this.fillActiveColumn(newValue);
+				return;
+			}
 			const err = this.runValidator(colId, newValue, rowOriginal);
 			if (err !== true) {
 				this.setInvalid(err);
@@ -4133,14 +4207,21 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 		this.committedThisSession = false;
 		this.rowDraftSync = {};
 		this.dropinTabFlush = null;
+		this.rangeCommitIntent = false;
 		this.inRowEdit = () => this._editingRowIndex.value != null;
 		this.editorValueFor = (colId) => this.inRowEdit() ? this._rowDraft.value ? this._rowDraft.value[colId] : null : this._draftValue.value;
 		this.editorCheckedFor = (colId) => !!(this.inRowEdit() ? this._rowDraft.value ? this._rowDraft.value[colId] : null : this._draftValue.value);
-		this.editorCommitFor = (colId) => (value) => {
+		this.editorCommitFor = (colId) => (value, options) => {
 			if (this.inRowEdit()) {
 				this.setRowDraft(colId, value);
 				return;
 			}
+			const wantsRange = options != null && options.toRange === true || this.rangeCommitIntent;
+			this.rangeCommitIntent = false;
+			if (wantsRange && !this.dropinTabFlush && this.rangeSize() > 1) {
+				this.commitEditToRange(value);
+				return;
+			}
 			if (this.dropinTabFlush) {
 				this.dropinTabFlush.called = true;
 				if (this.commitEdit(value, true)) this.dropinTabFlush.committed = true;
@@ -4212,7 +4293,10 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 				}
 				return;
 			}
-			if (key === "Enter") {
+			if (key === "Enter" && (e.ctrlKey || e.metaKey) && this.rangeSize() > 1) {
+				e.preventDefault();
+				this.commitEditToRange(void 0);
+			} else if (key === "Enter") {
 				e.preventDefault();
 				this.commitEdit(void 0);
 			} else if (key === "Tab") {
@@ -4233,8 +4317,18 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 				this.cancelEdit();
 			}
 		};
+		this.onEditorDropinKeyDownCapture = (e) => {
+			if (!e) return;
+			if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+				this.rangeCommitIntent = true;
+				setTimeout(() => {
+					this.rangeCommitIntent = false;
+				}, 0);
+			}
+		};
 		this.onEditorDropinKeyDown = (e) => {
 			if (!e) return;
+			this.rangeCommitIntent = false;
 			const key = e.key;
 			if (this.inRowEdit()) {
 				if (key === "Enter") {
@@ -4492,6 +4586,8 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
   --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));
@@ -4513,7 +4609,12 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
   --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);
@@ -4572,8 +4673,28 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 .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
@@ -4697,8 +4818,21 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 .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 {
@@ -5295,6 +5429,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 			};
 			document.addEventListener("pointerdown", this.docPointerDown, true);
 		}
+		if (this.gridRoot) this.gridRoot.addEventListener("keydown", this.onEditorDropinKeyDownCapture, true);
 		if (this.isWindowed()) this.gridScrollEl = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector(".rdt-scroll") : null;
 		if (this.rowsWindowed()) {
 			this.virtualizer = new _tanstack_virtual_core.Virtualizer(this.virtualizerOptions());
@@ -5384,6 +5519,7 @@ let DataTable = class DataTable extends (0, _lit_labs_preact_signals.SignalWatch
 					document.removeEventListener("pointerdown", this.docPointerDown, true);
 					this.docPointerDown = null;
 				}
+				if (this.gridRoot) this.gridRoot.removeEventListener("keydown", this.onEditorDropinKeyDownCapture, true);
 				if (this.virtualizerCleanup) this.virtualizerCleanup();
 				if (this.colVirtualizerCleanup) this.colVirtualizerCleanup();
 				this.teardownColRtlWatch();
@@ -5457,7 +5593,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 <table class="${Object.entries({
 			"rozie-data-table": true,
 			"rdt-sticky": this.stickyHeader,
-			"rdt-col-windowed": this.colsWindowed()
+			"rdt-col-windowed": this.colsWindowed(),
+			"rdt-column-lines": this.columnLines
 		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.tableRole())} aria-rowcount=${(0, _rozie_runtime_lit.rozieAttr)(this.gridAriaRowCount())} aria-colcount=${(0, _rozie_runtime_lit.rozieAttr)(this.gridAriaColCount())} @keydown=${($event) => {
 			this.onGridKeyDown($event);
 		}} @focusin=${($event) => {
@@ -5792,7 +5929,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
 			columnLabel: this.headerLabel(cell.column.id),
-			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
+			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index),
+			rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 		}) : lit.html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -5803,7 +5941,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
 					columnLabel: this.headerLabel(cell.column.id),
-					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
+					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index),
+					rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 				});
 			} catch {
 				return "{}";
@@ -5817,7 +5956,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
 			columnLabel: this.headerLabel(cell.column.id),
-			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
+			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index),
+			rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 		}) : lit.html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -5828,7 +5968,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
 					columnLabel: this.headerLabel(cell.column.id),
-					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
+					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index),
+					rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 				});
 			} catch {
 				return "{}";
@@ -5910,7 +6051,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 </table>
 </div>` : lit.html`<table class="${Object.entries({
 			"rozie-data-table": true,
-			"rdt-sticky": this.stickyHeader
+			"rdt-sticky": this.stickyHeader,
+			"rdt-column-lines": this.columnLines
 		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${(0, _rozie_runtime_lit.rozieAttr)(this.tableRole())} aria-rowcount=${(0, _rozie_runtime_lit.rozieAttr)(this.gridAriaRowCount())} aria-colcount=${(0, _rozie_runtime_lit.rozieAttr)(this.gridAriaColCount())} @keydown=${($event) => {
 			this.onGridKeyDown($event);
 		}} @focusin=${($event) => {
@@ -6222,7 +6364,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
 			columnLabel: this.headerLabel(cell.column.id),
-			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row)),
+			rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 		}) : lit.html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -6233,7 +6376,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
 					columnLabel: this.headerLabel(cell.column.id),
-					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row)),
+					rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 				});
 			} catch {
 				return "{}";
@@ -6247,7 +6391,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
 			columnLabel: this.headerLabel(cell.column.id),
-			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row)),
+			rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 		}) : lit.html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -6258,7 +6403,8 @@ ${this.groupable ? lit.html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
 					columnLabel: this.headerLabel(cell.column.id),
-					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row)),
+					rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 				});
 			} catch {
 				return "{}";
@@ -6521,6 +6667,11 @@ __decorate([(0, lit_decorators_js.property)({
 	reflect: true,
 	attribute: "sticky-header"
 })], DataTable.prototype, "stickyHeader", void 0);
+__decorate([(0, lit_decorators_js.property)({
+	type: Boolean,
+	reflect: true,
+	attribute: "column-lines"
+})], DataTable.prototype, "columnLines", void 0);
 __decorate([(0, lit_decorators_js.property)({
 	type: String,
 	reflect: true,

package/dist/index.d.cts

@@ -20,6 +20,14 @@ interface HoldController {
   viewState(table: any): ViewState;
 }
 //#endregion
+//#region src/helpers/rangeFill.d.ts
+interface FillTargets {
+  top: number;
+  bottom: number;
+  col: number;
+  size: number;
+}
+//#endregion
 //#region src/DataTable.d.ts
 /** A cell position as integers over the visible (display-order) model. */
 interface DataTableCellPosition {
@@ -233,6 +241,10 @@ declare class DataTable extends DataTable_base {
    * 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.
+   */
+  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.
    */
@@ -250,7 +262,7 @@ declare class DataTable extends DataTable_base {
    */
   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;
   /**
@@ -388,10 +400,13 @@ declare class DataTable extends DataTable_base {
     column: Column$1<any, unknown>;
     row: any;
     value: any;
-    commit: (value: any) => void;
+    commit: (value: any, options?: {
+      toRange?: boolean;
+    }) => void;
     cancel: () => void;
     columnLabel: string;
     autofocus: boolean;
+    rangeSize: number;
   }) => unknown;
   rozieSlots?: {
     [key: `colHeader-${string}`]: (scope: {
@@ -418,10 +433,13 @@ declare class DataTable extends DataTable_base {
       column: Column$1<any, unknown>;
       row: any;
       value: any;
-      commit: (value: any) => void;
+      commit: (value: any, options?: {
+        toRange?: boolean;
+      }) => void;
       cancel: () => void;
       columnLabel: string;
       autofocus: boolean;
+      rangeSize: number;
     }) => unknown;
   } & Record<string, (scope: any) => unknown>;
   private _disconnectCleanups;
@@ -845,6 +863,13 @@ declare class DataTable extends DataTable_base {
   cutRange: () => void;
   clearActiveRange: () => void;
   fillRange: (sourceBox: any, endCell: any) => void;
+  fillTargets: () => FillTargets;
+  rangeSize: () => number;
+  fillActiveColumn: (value: any) => {
+    wrote: number;
+    changed: number;
+    total: number;
+  };
   fillDragging: boolean;
   fillDragMove: any;
   fillDragUp: any;
@@ -896,6 +921,7 @@ declare class DataTable extends DataTable_base {
   editorAutofocusFor: (colId: any, rowIndex: any) => boolean;
   coerceCellValue: (colId: any, raw: any) => any;
   commitEdit: (overrideValue?: any, skipFocusReturn?: boolean) => boolean;
+  commitEditToRange: (overrideValue?: any) => boolean;
   toggleActiveBooleanCell: () => void;
   cancelEdit: () => void;
   editableColumnsForRow: (rowIndex: any) => any[];
@@ -919,16 +945,18 @@ declare class DataTable extends DataTable_base {
     called: boolean;
     committed: boolean;
   } | null;
+  rangeCommitIntent: boolean;
   inRowEdit: () => boolean;
   editorValueFor: (colId: any) => any;
   editorCheckedFor: (colId: any) => boolean;
-  editorCommitFor: (colId: any) => (value: any) => void;
+  editorCommitFor: (colId: any) => (value: any, options: any) => void;
   editorCancelFor: () => () => void;
   onCellEditorInput: (colId: any, evt: any) => void;
   onCellEditorCheckbox: (colId: any, evt: any) => void;
   setRowDraft: (colId: any, value: any) => void;
   rowEditTab: (target: any, backward: any) => void;
   onEditorKeyDown: (e: any) => void;
+  onEditorDropinKeyDownCapture: (e: any) => void;
   onEditorDropinKeyDown: (e: any) => void;
   onEditorBlur: (e: any) => void;
   editCell: (rowIndex: number, colIndex: number) => void;

package/dist/index.d.mts

@@ -20,6 +20,14 @@ interface HoldController {
   viewState(table: any): ViewState;
 }
 //#endregion
+//#region src/helpers/rangeFill.d.ts
+interface FillTargets {
+  top: number;
+  bottom: number;
+  col: number;
+  size: number;
+}
+//#endregion
 //#region src/DataTable.d.ts
 /** A cell position as integers over the visible (display-order) model. */
 interface DataTableCellPosition {
@@ -233,6 +241,10 @@ declare class DataTable extends DataTable_base {
    * 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.
+   */
+  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.
    */
@@ -250,7 +262,7 @@ declare class DataTable extends DataTable_base {
    */
   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;
   /**
@@ -388,10 +400,13 @@ declare class DataTable extends DataTable_base {
     column: Column$1<any, unknown>;
     row: any;
     value: any;
-    commit: (value: any) => void;
+    commit: (value: any, options?: {
+      toRange?: boolean;
+    }) => void;
     cancel: () => void;
     columnLabel: string;
     autofocus: boolean;
+    rangeSize: number;
   }) => unknown;
   rozieSlots?: {
     [key: `colHeader-${string}`]: (scope: {
@@ -418,10 +433,13 @@ declare class DataTable extends DataTable_base {
       column: Column$1<any, unknown>;
       row: any;
       value: any;
-      commit: (value: any) => void;
+      commit: (value: any, options?: {
+        toRange?: boolean;
+      }) => void;
       cancel: () => void;
       columnLabel: string;
       autofocus: boolean;
+      rangeSize: number;
     }) => unknown;
   } & Record<string, (scope: any) => unknown>;
   private _disconnectCleanups;
@@ -845,6 +863,13 @@ declare class DataTable extends DataTable_base {
   cutRange: () => void;
   clearActiveRange: () => void;
   fillRange: (sourceBox: any, endCell: any) => void;
+  fillTargets: () => FillTargets;
+  rangeSize: () => number;
+  fillActiveColumn: (value: any) => {
+    wrote: number;
+    changed: number;
+    total: number;
+  };
   fillDragging: boolean;
   fillDragMove: any;
   fillDragUp: any;
@@ -896,6 +921,7 @@ declare class DataTable extends DataTable_base {
   editorAutofocusFor: (colId: any, rowIndex: any) => boolean;
   coerceCellValue: (colId: any, raw: any) => any;
   commitEdit: (overrideValue?: any, skipFocusReturn?: boolean) => boolean;
+  commitEditToRange: (overrideValue?: any) => boolean;
   toggleActiveBooleanCell: () => void;
   cancelEdit: () => void;
   editableColumnsForRow: (rowIndex: any) => any[];
@@ -919,16 +945,18 @@ declare class DataTable extends DataTable_base {
     called: boolean;
     committed: boolean;
   } | null;
+  rangeCommitIntent: boolean;
   inRowEdit: () => boolean;
   editorValueFor: (colId: any) => any;
   editorCheckedFor: (colId: any) => boolean;
-  editorCommitFor: (colId: any) => (value: any) => void;
+  editorCommitFor: (colId: any) => (value: any, options: any) => void;
   editorCancelFor: () => () => void;
   onCellEditorInput: (colId: any, evt: any) => void;
   onCellEditorCheckbox: (colId: any, evt: any) => void;
   setRowDraft: (colId: any, value: any) => void;
   rowEditTab: (target: any, backward: any) => void;
   onEditorKeyDown: (e: any) => void;
+  onEditorDropinKeyDownCapture: (e: any) => void;
   onEditorDropinKeyDown: (e: any) => void;
   onEditorBlur: (e: any) => void;
   editCell: (rowIndex: number, colIndex: number) => void;