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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @rozie-ui/data-table-solid
 
+## 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

package/README.md

@@ -485,11 +485,12 @@ import '@rozie-ui/data-table-solid/themes/shadcn.css';    // or material.css, bo
 | `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). |
@@ -597,9 +598,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

@@ -317,6 +317,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 || [];
@@ -502,6 +524,8 @@ var _tmpl$$11 = /* @__PURE__ */ (0, solid_js_web.template)(`<div class=rozie-dat
   --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));
@@ -523,7 +547,12 @@ var _tmpl$$11 = /* @__PURE__ */ (0, solid_js_web.template)(`<div class=rozie-dat
   --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);
@@ -582,8 +611,28 @@ var _tmpl$$11 = /* @__PURE__ */ (0, solid_js_web.template)(`<div class=rozie-dat
 .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
@@ -686,8 +735,21 @@ var _tmpl$$11 = /* @__PURE__ */ (0, solid_js_web.template)(`<div class=rozie-dat
 .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 {
@@ -908,6 +970,7 @@ function DataTable(_props) {
 		getSubRows: null,
 		groupable: false,
 		stickyHeader: false,
+		columnLines: false,
 		interactionMode: "table",
 		singleClickEdit: false,
 		undoable: false,
@@ -940,6 +1003,7 @@ function DataTable(_props) {
 		"columnOrder",
 		"columnPinning",
 		"stickyHeader",
+		"columnLines",
 		"interactionMode",
 		"singleClickEdit",
 		"undoable",
@@ -1251,6 +1315,7 @@ function DataTable(_props) {
 			};
 			document.addEventListener("pointerdown", docPointerDown, true);
 		}
+		if (gridRoot) gridRoot.addEventListener("keydown", onEditorDropinKeyDownCapture, true);
 		if (isWindowed()) gridScrollEl = __rozieRootRef ? __rozieRootRef.querySelector(".rdt-scroll") : null;
 		if (rowsWindowed()) {
 			virtualizer = new _tanstack_virtual_core.Virtualizer(virtualizerOptions());
@@ -1287,6 +1352,7 @@ function DataTable(_props) {
 			document.removeEventListener("pointerdown", docPointerDown, true);
 			docPointerDown = null;
 		}
+		if (gridRoot) gridRoot.removeEventListener("keydown", onEditorDropinKeyDownCapture, true);
 		if (virtualizerCleanup) virtualizerCleanup();
 		if (colVirtualizerCleanup) colVirtualizerCleanup();
 		teardownColRtlWatch();
@@ -3377,7 +3443,7 @@ function DataTable(_props) {
 		setActiveColIndex(col);
 		if (isHeader !== prevIsHeader || col !== prevCol || (isHeader ? movedLevel !== prevLevel : movedRow !== prevRow)) focusIntentEpoch = focusIntentEpoch + 1;
 		if (rangeTransition) rangeTransition = false;
-		else if (rangeClickPending && rangeClickPending.isHeader === isHeader && rangeClickPending.r === movedRow && rangeClickPending.c === col) rangeClickPending = null;
+		else if (!isHeader && tgt !== cellEl && editingRow() === movedRow && editingCol() === col) {} else if (rangeClickPending && rangeClickPending.isHeader === isHeader && rangeClickPending.r === movedRow && rangeClickPending.c === col) rangeClickPending = null;
 		else {
 			rangeClickPending = null;
 			clearRange();
@@ -4125,6 +4191,18 @@ function DataTable(_props) {
 		}
 		applyGridToRange(grid, box.r0, box.c0, "filled");
 	}
+	function fillTargets() {
+		return rangeFillTargets(normalizedRange(), activeRow(), activeColIndex());
+	}
+	function rangeSize() {
+		return activeIsHeader() ? 1 : fillTargets().size;
+	}
+	function fillActiveColumn(value) {
+		const t = fillTargets();
+		const grid = [];
+		for (let i = 0; i < t.size; i++) grid.push([value]);
+		return applyGridToRange(grid, t.top, t.col, "updated");
+	}
 	let fillDragging = false;
 	let fillDragMove = null;
 	let fillDragUp = null;
@@ -4547,6 +4625,44 @@ function DataTable(_props) {
 		} else if (skipFocusReturn !== true) focusCellWhenReady(focusRow, focusCol);
 		return true;
 	}
+	function commitEditToRange(overrideValue = void 0) {
+		if (editingRow() < 0) return false;
+		if (committedThisSession) return false;
+		const colId = editingColumnId();
+		if (colId == null) {
+			endEdit();
+			return false;
+		}
+		const rawValue = overrideValue !== void 0 ? 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();
+		editTransition = true;
+		committedThisSession = true;
+		const result = fillActiveColumn(rawValue);
+		endEdit();
+		editTransition = false;
+		rangeClickPending = {
+			isHeader: false,
+			r: focusRow,
+			c: focusCol
+		};
+		if (result && result.changed > 0) pendingEditFollow = {
+			rowOriginal,
+			rowId,
+			col: focusCol
+		};
+		else focusCellWhenReady(focusRow, focusCol);
+		return true;
+	}
 	function toggleActiveBooleanCell() {
 		if (rowIndexIsGrouped(activeRow())) return;
 		const row = (rows() || [])[activeRow()];
@@ -4558,6 +4674,11 @@ function DataTable(_props) {
 		const rowId = row.id;
 		const oldValue = cellValueAt(activeRow(), activeColIndex());
 		const newValue = !oldValue;
+		if (rangeSize() > 1) {
+			setInvalid("");
+			fillActiveColumn(newValue);
+			return;
+		}
 		const err = runValidator(colId, newValue, rowOriginal);
 		if (err !== true) {
 			setInvalid(err);
@@ -4779,6 +4900,7 @@ function DataTable(_props) {
 	let committedThisSession = false;
 	let rowDraftSync = {};
 	let dropinTabFlush = null;
+	let rangeCommitIntent = false;
 	function inRowEdit() {
 		return editingRowIndex() != null;
 	}
@@ -4789,11 +4911,17 @@ function DataTable(_props) {
 		return !!(inRowEdit() ? rowDraft() ? rowDraft()[colId] : null : draftValue());
 	}
 	function editorCommitFor(colId) {
-		return (value) => {
+		return (value, options) => {
 			if (inRowEdit()) {
 				setRowDraft$local(colId, value);
 				return;
 			}
+			const wantsRange = options != null && options.toRange === true || rangeCommitIntent;
+			rangeCommitIntent = false;
+			if (wantsRange && !dropinTabFlush && rangeSize() > 1) {
+				commitEditToRange(value);
+				return;
+			}
 			if (dropinTabFlush) {
 				dropinTabFlush.called = true;
 				if (commitEdit(value, true)) dropinTabFlush.committed = true;
@@ -4868,7 +4996,10 @@ function DataTable(_props) {
 			}
 			return;
 		}
-		if (key === "Enter") {
+		if (key === "Enter" && (e.ctrlKey || e.metaKey) && rangeSize() > 1) {
+			e.preventDefault();
+			commitEditToRange(void 0);
+		} else if (key === "Enter") {
 			e.preventDefault();
 			commitEdit(void 0);
 		} else if (key === "Tab") {
@@ -4889,8 +5020,18 @@ function DataTable(_props) {
 			cancelEdit();
 		}
 	}
+	function onEditorDropinKeyDownCapture(e) {
+		if (!e) return;
+		if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+			rangeCommitIntent = true;
+			setTimeout(() => {
+				rangeCommitIntent = false;
+			}, 0);
+		}
+	}
 	function onEditorDropinKeyDown(e) {
 		if (!e) return;
+		rangeCommitIntent = false;
 		const key = e.key;
 		if (inRowEdit()) {
 			if (key === "Enter") {
@@ -5752,6 +5893,9 @@ function DataTable(_props) {
 																											},
 																											get autofocus() {
 																												return editorAutofocusFor(cell().column.id, rowIndexOf(row()));
+																											},
+																											get rangeSize() {
+																												return inRowEdit() ? 1 : rangeSize();
 																											}
 																										}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
 																											get columnId() {
@@ -5777,6 +5921,9 @@ function DataTable(_props) {
 																											},
 																											get autofocus() {
 																												return editorAutofocusFor(cell().column.id, rowIndexOf(row()));
+																											},
+																											get rangeSize() {
+																												return inRowEdit() ? 1 : rangeSize();
 																											}
 																										}) ?? (() => {
 																											var _el$68 = _tmpl$29();
@@ -6059,7 +6206,10 @@ function DataTable(_props) {
 							}))]
 						}));
 						(0, solid_js_web.effect)((_p$) => {
-							var _v$0 = (0, _rozie_runtime_solid.rozieAttr)(gridAriaRowCount()), _v$1 = (0, _rozie_runtime_solid.rozieAttr)(gridAriaColCount()), _v$10 = "rozie-data-table " + (0, _rozie_runtime_solid.rozieClass)({ "rdt-sticky": local.stickyHeader }), _v$11 = (0, _rozie_runtime_solid.rozieAttr)(tableRole());
+							var _v$0 = (0, _rozie_runtime_solid.rozieAttr)(gridAriaRowCount()), _v$1 = (0, _rozie_runtime_solid.rozieAttr)(gridAriaColCount()), _v$10 = "rozie-data-table " + (0, _rozie_runtime_solid.rozieClass)({
+								"rdt-sticky": local.stickyHeader,
+								"rdt-column-lines": local.columnLines
+							}), _v$11 = (0, _rozie_runtime_solid.rozieAttr)(tableRole());
 							_v$0 !== _p$.e && (0, solid_js_web.setAttribute)(_el$23, "aria-rowcount", _p$.e = _v$0);
 							_v$1 !== _p$.t && (0, solid_js_web.setAttribute)(_el$23, "aria-colcount", _p$.t = _v$1);
 							_v$10 !== _p$.a && (0, solid_js_web.className)(_el$23, _p$.a = _v$10);
@@ -6635,6 +6785,9 @@ function DataTable(_props) {
 																																},
 																																get autofocus() {
 																																	return editorAutofocusFor(cell().column.id, wr().vi.index);
+																																},
+																																get rangeSize() {
+																																	return inRowEdit() ? 1 : rangeSize();
 																																}
 																															}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
 																																get columnId() {
@@ -6660,6 +6813,9 @@ function DataTable(_props) {
 																																},
 																																get autofocus() {
 																																	return editorAutofocusFor(cell().column.id, wr().vi.index);
+																																},
+																																get rangeSize() {
+																																	return inRowEdit() ? 1 : rangeSize();
 																																}
 																															}) ?? (() => {
 																																var _el$126 = _tmpl$29();
@@ -6997,7 +7153,8 @@ function DataTable(_props) {
 					(0, solid_js_web.effect)((_p$) => {
 						var _v$ = (0, _rozie_runtime_solid.parseInlineStyle)(rowsWindowed() && local.maxHeight ? "max-height:" + local.maxHeight + ";overflow:auto;--rozie-data-table-max-height:" + local.maxHeight : "overflow:auto"), _v$2 = (0, _rozie_runtime_solid.rozieAttr)(gridAriaRowCount()), _v$3 = (0, _rozie_runtime_solid.rozieAttr)(gridAriaColCount()), _v$4 = "rozie-data-table " + (0, _rozie_runtime_solid.rozieClass)({
 							"rdt-sticky": local.stickyHeader,
-							"rdt-col-windowed": colsWindowed()
+							"rdt-col-windowed": colsWindowed(),
+							"rdt-column-lines": local.columnLines
 						}), _v$5 = (0, _rozie_runtime_solid.rozieAttr)(tableRole()), _v$6 = (0, _rozie_runtime_solid.rozieAttr)(windowedColSpan()), _v$7 = (0, _rozie_runtime_solid.parseInlineStyle)("height:" + padTop() + "px;padding:0;border:0"), _v$8 = (0, _rozie_runtime_solid.rozieAttr)(windowedColSpan()), _v$9 = (0, _rozie_runtime_solid.parseInlineStyle)("height:" + padBottom() + "px;padding:0;border:0");
 						_p$.e = (0, solid_js_web.style)(_el$15, _v$, _p$.e);
 						_v$2 !== _p$.t && (0, solid_js_web.setAttribute)(_el$16, "aria-rowcount", _p$.t = _v$2);

package/dist/index.d.cts

@@ -123,10 +123,13 @@ interface EditorSlotCtx {
   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;
 }
 interface DataTableProps {
   /**
@@ -243,6 +246,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.
+   */
+  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.
    */
@@ -260,7 +267,7 @@ 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;
   /**
@@ -332,10 +339,13 @@ interface DataTableProps {
       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;
     }) => JSX.Element) | undefined;
     [key: string]: ((...args: any[]) => JSX.Element) | undefined;
   };

package/dist/index.d.mts

@@ -123,10 +123,13 @@ interface EditorSlotCtx {
   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;
 }
 interface DataTableProps {
   /**
@@ -243,6 +246,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.
+   */
+  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.
    */
@@ -260,7 +267,7 @@ 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;
   /**
@@ -332,10 +339,13 @@ interface DataTableProps {
       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;
     }) => JSX.Element) | undefined;
     [key: string]: ((...args: any[]) => JSX.Element) | undefined;
   };