@jielga/tmdatagrid 2.1.4 → 2.3.0

package/skills/testing/SKILL.md

@@ -13,7 +13,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.1.4'
+  library_version: '2.3.0'
 sources:
   - 'Jielga/react:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/react:playwright/support/DataGrid.ts'
@@ -104,6 +104,17 @@ match the same rows, and the negative is `:not([data-new])` in CSS and
 
 **Keyed by both**: `editor`.
 
+**The generated lanes** are columns with exported ids: `ROW_NUMBER_COLUMN_ID`
+(`__rowNumber__`), `SELECT_COLUMN_ID` (`__select__`), `GROUP_COLUMN_ID`
+(`__group__`), `DETAILS_COLUMN_ID` (`__details__`) and `EDIT_COLUMN_ID`
+(`__edit__`). A lane's header is
+`[data-dg-part="header"][data-column-id="__select__"]`, a lane cell
+`[data-row-id="42"][data-column-id="__select__"]:not([data-dg-part])`, and the
+control inside it has a row-keyed part: `select-row`, `details-toggle`,
+`group-toggle`, the edit lane's buttons. `select-all` and `details-toggle-all`
+sit in the lane headers. The checkbox parts are on the `<input>` itself, so
+`check()` works on them directly. There is no `data-testid`.
+
 Inside a `filter-row` the controls are `filter-column`, `filter-operator` and
 `filter-value` - or `filter-value-from` / `filter-value-to` for `between` - and
 `filter-remove` is its ✕. None of them carries `data-column-id`; scope through

package/skills/testing-components/SKILL.md

@@ -12,7 +12,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.1.4'
+  library_version: '2.3.0'
 sources:
   - 'Jielga/react:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/react:packages/tmdatagrid/test/gallery/main.tsx'

package/skills/testing-editing/SKILL.md

@@ -12,7 +12,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.1.4'
+  library_version: '2.3.0'
 sources:
   - 'Jielga/react:packages/tmdatagrid/docs/testing.md'
   - 'Jielga/react:packages/tmdatagrid/docs/editing.md'

package/src/components/TMDataGridFilterPills.module.css

@@ -13,13 +13,15 @@
    shape readable against any surface. Scoped through `.filterPills` for the
    specificity to beat Mantine's own rule whichever stylesheet loads last. */
 .filterPills .pill {
-  background-color: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-  color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-  border: 1px solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
+  background-color: var(--mantine-color-gray-1);
+  color: var(--mantine-color-black);
+  border: 1px solid var(--mantine-color-gray-3);
+}
+
+:where([data-mantine-color-scheme="dark"]) .filterPills .pill {
+  background-color: var(--mantine-color-dark-5);
+  color: var(--mantine-color-dark-0);
+  border-color: var(--mantine-color-dark-3);
 }
 
 /* The label is a button so a pill can be clicked back open, but it must read as

package/src/components/TMDataGridTable.module.css

@@ -84,7 +84,13 @@
   --row-bg: var(--dg-row-new-bg, var(--mantine-color-body));
 }
 
-.bodyRow:hover {
+/* The hover tint, on the rows that carry `data-highlight-on-hover` - by default
+   the rows that answer a click or a right-click, see the Table's
+   `highlightOnHover`. `:where()` adds no specificity, so the rule stays at the
+   weight of the state rules around it: declared after the stripe and the entry
+   tint, which it wins, and before the selection and highlight rules, which win
+   over it. */
+.bodyRow:where([data-highlight-on-hover="true"]):hover {
   --row-bg: var(--mantine-color-default-hover);
 }
 
@@ -320,7 +326,9 @@
   /* Base and tint, exactly as .bodyCell paints them. */
   background-color: var(--mantine-color-body);
   background-image: linear-gradient(var(--row-bg), var(--row-bg));
-  padding: var(--dg-padding);
+  /* No padding: the panel is the user's content, and a nested grid or a tab
+     strip wants the full width. Content that should line up with the cell
+     text pads itself with var(--dg-padding). */
   /* The row above may be the selection control, which turns text selection off
      for everything inside it. A panel is content, so it takes both back. */
   user-select: text;
@@ -477,14 +485,15 @@
    the browser's default so the colour is the grid's to state - override with
    `--dg-match-highlight-bg` on the grid. */
 .matchHighlight {
-  background-color: var(
-    --dg-match-highlight-bg,
-    light-dark(var(--mantine-color-yellow-2), rgba(250, 176, 5, 0.35))
-  );
+  background-color: var(--dg-match-highlight-bg, var(--mantine-color-yellow-2));
   color: inherit;
   border-radius: 2px;
 }
 
+:where([data-mantine-color-scheme="dark"]) .matchHighlight {
+  background-color: var(--dg-match-highlight-bg, rgba(250, 176, 5, 0.35));
+}
+
 /* The summary row - one sticky row of column footers along the bottom edge,
    rendered only while at least one column defines `footer`. Same subgrid
    placement as the header, so its cells sit exactly on the body's tracks.

package/src/components/TMDataGridTable.tsx

@@ -41,6 +41,7 @@ import {
 } from "./TMDataGridCellEditor";
 import { TMDataGridEntryRows } from "./TMDataGridEntryRows";
 import {
+  DEFAULT_COLUMN_MIN_SIZE,
   getColumnAlign,
   isControlColumn,
   isGeneratedColumn,
@@ -76,6 +77,12 @@ import {
   writeExportFile,
 } from "../core/export";
 import { autosizeColumn, hasMountedCells } from "../core/autosize";
+import {
+  resolveColSpans,
+  spanAnchorIndex,
+  spanEndIndex,
+  type TMDataGridColumnSection,
+} from "../core/colSpan";
 import {
   getDisplayedRows,
   getSelectableRowIds,
@@ -83,6 +90,7 @@ import {
   resolveRowSelectionClick,
 } from "../core/rowSelection";
 import { readPinnedRows } from "../core/rowPinning";
+import { filterNarrowsRows } from "../core/filterOperators";
 import { buildMatchNeedles, findMatchRanges } from "../core/matchHighlight";
 import { ROW_NUMBER_COLUMN_ID } from "./TMDataGridRowNumberColumn";
 import { SearchIcon } from "./icons";
@@ -253,6 +261,7 @@ function withMatchHighlights(
 function TMDataGridBodyCell({
   cell,
   rowHeight,
+  colSpan = 1,
   layout,
   nav,
   editor,
@@ -267,6 +276,8 @@ function TMDataGridBodyCell({
 }: {
   cell: Cell<TMDataGridFeatures, TMDataGridRowData, unknown>;
   rowHeight: number;
+  /** Columns this cell covers - see `meta.colSpan`. */
+  colSpan?: number;
   layout: TMDataGridColumnLayout;
   nav?: TMDataGridCellNav;
   /** The mounted editor, when this is the cell being edited. */
@@ -332,6 +343,10 @@ function TMDataGridBodyCell({
       // than always.
       role={nav ? "gridcell" : "cell"}
       aria-colindex={nav?.columnIndex}
+      aria-colspan={colSpan > 1 ? colSpan : undefined}
+      // Published for styling and for autosize, which leaves a spanning cell
+      // out of its column's measurement.
+      data-col-span={colSpan > 1 ? colSpan : undefined}
       tabIndex={nav?.tabIndex}
       // The marker the delegated key handler tests: a key event whose target is
       // a cell is the grid's, one from inside a cell belongs to whatever holds
@@ -381,6 +396,7 @@ function TMDataGridBodyCell({
         .join(" ")}
       style={{
         minHeight: rowHeight,
+        gridColumn: colSpan > 1 ? `span ${colSpan}` : undefined,
         left: layout.pinnedAt === "left" ? layout.offset : undefined,
         right: layout.pinnedAt === "right" ? layout.offset : undefined,
         // The focus ring is drawn inside the cell's own box, so the cell has to
@@ -615,6 +631,14 @@ export type TMDataGridTableProps<TData extends RowData> = {
    * stay put while the virtualizer mounts and unmounts rows.
    */
   striped?: boolean;
+  /**
+   * Whether a body row takes the hover tint under the pointer. Unset, a row
+   * takes it when the row itself answers a gesture: `selectionMode: "row"`,
+   * a highlight mode, `onRowClick` or `renderRowContextMenu`. Group rows sit
+   * out those gestures and so sit out the tint too. `true` tints every row,
+   * `false` none. The row carries `data-highlight-on-hover` while it applies.
+   */
+  highlightOnHover?: boolean;
   /**
    * Called when the scroll *arrives* at an edge - once per arrival, not per
    * scroll event, and not on mount (the grid starts at the top-left edge).
@@ -735,6 +759,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   rowClassName,
   rowStyle,
   striped = false,
+  highlightOnHover,
   onScrollToTop,
   onScrollToBottom,
   onScrollToLeft,
@@ -1182,6 +1207,111 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     ...rightLeafColumns,
   ];
 
+  // `meta.colSpan`, resolved per row over the displayed columns. Built from
+  // the three leaf arrays rather than `column.getIsPinned()`, for the reason
+  // the sticky offsets below give. `null` while no column asks to span, so a
+  // plain grid never calls into it.
+  const spanColumns = orderedColumns.some(
+    (column) => column.columnDef.meta?.colSpan !== undefined,
+  )
+    ? orderedColumns.map((column, index) => ({
+        id: column.id,
+        colSpan: column.columnDef.meta?.colSpan,
+        section: (index < leftLeafColumns.length
+          ? "left"
+          : index < leftLeafColumns.length + centerLeafColumns.length
+            ? "center"
+            : "right") as TMDataGridColumnSection,
+      }))
+    : null;
+  /**
+   * Row mode opens every editable cell of the row at once, and rows
+   * accumulate: a second row opening leaves the first one open, so every row
+   * holding a form shows its editors. Which of them holds the caret is not
+   * decided here - see placeEditCaret, which places it once per gesture.
+   *
+   * A parked row is not one of them. It keeps its form, so it is still
+   * "open", but it has been decided: it renders its draft through the
+   * column's own renderer until `begin` reopens it. A committed entry row in
+   * the body has a form too - every entry row does - but it is a value row
+   * until reopened, and reopening takes it back to the entry block.
+   *
+   * Such a row also drops its spans: the form has an editor in every column.
+   */
+  const isRowEditing = (row: Row<TMDataGridFeatures, TMDataGridRowData>) =>
+    features.editMode === "row" &&
+    editOpenRowIdSet.has(row.id) &&
+    !editDraftRowIdSet.has(row.id) &&
+    !newRowIdSet.has(row.id);
+  const colSpanCache = new Map<string, Array<number> | null>();
+  /**
+   * The spans of one row - see {@link resolveColSpans} - or `null` when every
+   * cell is one column wide. Group rows keep their cells: the tree cell and
+   * the aggregates are the grid's, not a record's.
+   */
+  const colSpansOf = (
+    row: Row<TMDataGridFeatures, TMDataGridRowData>,
+  ): Array<number> | null => {
+    if (spanColumns === null || row.getIsGrouped() || isRowEditing(row)) {
+      return null;
+    }
+    const cached = colSpanCache.get(row.id);
+    if (cached !== undefined) return cached;
+    const spans = resolveColSpans(spanColumns, (index) => {
+      const colSpan = spanColumns[index]?.colSpan;
+      return typeof colSpan === "function"
+        ? colSpan({ row, table })
+        : (colSpan ?? 1);
+    });
+    // The open cell editor lives in its column's cell. A span landing on that
+    // column - the row expanding under the edit, say - would unmount the
+    // editor without closing it, so the row keeps its cells until the edit
+    // ends.
+    const editIndex =
+      editActive !== null && editActive.rowId === row.id
+        ? orderedColumns.findIndex(
+            (column) => column.id === editActive.columnId,
+          )
+        : -1;
+    const resolved =
+      spans.every((span) => span === 1) ||
+      (editIndex >= 0 && spans[editIndex] === 0)
+        ? null
+        : spans;
+    colSpanCache.set(row.id, resolved);
+    return resolved;
+  };
+  /** Whether the column at `columnIndex` is covered by a span on `row`. */
+  const isCoveredCell = (
+    row: Row<TMDataGridFeatures, TMDataGridRowData>,
+    columnIndex: number,
+  ): boolean => {
+    const spans = colSpansOf(row);
+    return spans !== null && spans[columnIndex] === 0;
+  };
+  /**
+   * A position moved onto the cell that renders it, under spans: the input
+   * itself when its cell renders, so a caller can compare by identity. `row`
+   * is the position's row; `undefined` for a pinned row, which is not in
+   * `rows` and keeps its position as it is.
+   */
+  const toRenderedCell = (
+    position: TMDataGridCellPosition,
+    row: Row<TMDataGridFeatures, TMDataGridRowData> | undefined,
+  ): TMDataGridCellPosition => {
+    if (spanColumns === null || row === undefined) return position;
+    const spans = colSpansOf(row);
+    if (spans === null) return position;
+    const columnIndex = orderedColumns.findIndex(
+      (column) => column.id === position.columnId,
+    );
+    if (columnIndex < 0) return position;
+    const anchorIndex = spanAnchorIndex(spans, columnIndex);
+    if (anchorIndex === columnIndex) return position;
+    const anchor = orderedColumns[anchorIndex];
+    return anchor ? { ...position, columnId: anchor.id } : position;
+  };
+
   // Headers and cells must follow the same left → center → right order as the
   // column tracks, otherwise pinning a column would shuffle it out of its lane.
   const centerHeaderGroups = table.getCenterHeaderGroups();
@@ -1208,7 +1338,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       const isFixed = column.columnDef.minSize === column.columnDef.maxSize;
       const isResized = column.id in columnSizing;
       const isPinned = column.getIsPinned() !== false;
-      const minWidth = column.columnDef.minSize ?? 80;
+      const minWidth = column.columnDef.minSize ?? DEFAULT_COLUMN_MIN_SIZE;
       if (isFixed || isResized || isPinned) {
         return {
           id: column.id,
@@ -1269,6 +1399,31 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   }
   const layoutFor = (columnId: string) =>
     columnLayout.get(columnId) ?? UNPINNED_LAYOUT;
+  /**
+   * The layout of a cell spanning from `columnId` to the column at
+   * `lastIndex`. A span never leaves its pinned block, so only the sticky
+   * offset and the boundary shadow change: a right-pinned cell sticks at the
+   * offset of the last column it covers, and the cell covering a block's
+   * boundary column carries its shadow.
+   */
+  const spanLayout = (
+    firstIndex: number,
+    lastIndex: number,
+  ): TMDataGridColumnLayout => {
+    const first = layoutFor(orderedColumns[firstIndex]!.id);
+    if (first.pinnedAt === false) return first;
+    const covered = orderedColumns
+      .slice(firstIndex, lastIndex + 1)
+      .map((column) => layoutFor(column.id));
+    return {
+      ...first,
+      offset:
+        first.pinnedAt === "right"
+          ? (covered.at(-1)?.offset ?? first.offset)
+          : first.offset,
+      isBoundary: covered.some((layout) => layout.isBoundary),
+    };
+  };
 
   /**
    * A running resize drag paints itself, straight onto the grid element.
@@ -1332,11 +1487,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   // Pinned rows count as content: with every visible row pinned to an edge,
   // an empty-state message beside them would contradict what is on screen.
   const isEmpty = rows.length === 0 && pinnedRowCount === 0;
-  // Which emptiness this is. The body already subscribes to the whole table
-  // store, so these reads are reactive.
+  // Which emptiness this is. A column filter counts by the rule the pills, the
+  // header indicator and the page reset use, so the grid has one definition
+  // of "active" - see `filterNarrowsRows`. The half-typed
+  // `{ operator, value: "" }` the filter panel seeds filters nothing. The body
+  // already subscribes to the whole table store, so these reads are reactive.
   const emptyGlobalFilter = table.store.state.globalFilter;
   const hasActiveFilters =
-    table.store.state.columnFilters.length > 0 ||
+    table.store.state.columnFilters.some(filterNarrowsRows) ||
     (typeof emptyGlobalFilter === "string"
       ? emptyGlobalFilter.trim() !== ""
       : emptyGlobalFilter != null);
@@ -1612,11 +1770,15 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     findCellElement(container, tabStopCell)?.focus({ preventScroll: true });
   };
 
-  const isCellAt = (
-    position: TMDataGridCellPosition | null,
-    rowId: string,
-    columnId: string,
-  ) => position !== null && position.rowId === rowId && position.columnId === columnId;
+  /**
+   * Whether the focused cell is on this row, in columns `first` to `last` -
+   * one column for most cells, every column it covers for a spanning one.
+   */
+  const isFocusedWithin = (rowId: string, first: number, last: number) =>
+    focusedCell !== null &&
+    focusedCell.rowId === rowId &&
+    focusedColumnIndex >= first &&
+    focusedColumnIndex <= last;
 
   // The rectangle, resolved from ids to the indices the cells are rendered at.
   // `null` whenever a corner has been filtered or hidden away - the range keeps
@@ -1771,7 +1933,9 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     const row = rows[coords.rowIndex];
     const column = orderedColumns[coords.columnIndex];
     if (!row || !column) return;
-    const cell = { rowId: row.id, columnId: column.id };
+    // A column covered by a span on this row has no cell; the one covering it
+    // takes the focus.
+    const cell = toRenderedCell({ rowId: row.id, columnId: column.id }, row);
     // The state moves; the effect below is what makes the DOM follow, because
     // the element for an off-screen row does not exist yet to be focused.
     wantsCellFocusRef.current = true;
@@ -1911,12 +2075,15 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       direction: move,
       rowCount: rows.length,
       columnCount: orderedColumns.length,
+      // A column covered by a span on its row has no cell to hold an editor,
+      // and a move onto it would land back on the spanning cell just left.
       isEditable: (coords) => {
         const row = rows[coords.rowIndex];
         const column = orderedColumns[coords.columnIndex];
         return (
           row !== undefined &&
           column !== undefined &&
+          !isCoveredCell(row, coords.columnIndex) &&
           edit.canEditCell(row, column)
         );
       },
@@ -2035,10 +2202,13 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
           const nextCell =
             container === null
               ? null
-              : findCellElement(container, {
-                  rowId: nextRow.id,
-                  columnId: nextColumn.id,
-                });
+              : findCellElement(
+                  container,
+                  toRenderedCell(
+                    { rowId: nextRow.id, columnId: nextColumn.id },
+                    nextRow,
+                  ),
+                );
           if (nextCell !== null) nextCell.focus({ preventScroll: true });
           else target.blur();
           return;
@@ -2175,10 +2345,19 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       return;
     }
 
+    // Right steps off a spanning cell from the last column it covers, or it
+    // would land back on itself.
+    const spans = rows[rowIndex] ? colSpansOf(rows[rowIndex]) : null;
     const next = resolveCellMove({
       key: event.key,
       ctrlKey: event.ctrlKey || event.metaKey,
-      from: { rowIndex, columnIndex },
+      from: {
+        rowIndex,
+        columnIndex:
+          spans !== null && event.key === "ArrowRight"
+            ? spanEndIndex(spans, columnIndex)
+            : columnIndex,
+      },
       rowCount: rows.length,
       columnCount: orderedColumns.length,
       pageRows: Math.max(
@@ -2192,7 +2371,11 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     // through at the last row would scroll the body out from under a focus that
     // did not move.
     event.preventDefault();
-    if (next.rowIndex === rowIndex && next.columnIndex === columnIndex) return;
+    // A move landing on this cell again - clamped at an edge, or onto a column
+    // this cell covers - changes nothing, the rectangle included.
+    const landing =
+      spans === null ? next.columnIndex : spanAnchorIndex(spans, next.columnIndex);
+    if (next.rowIndex === rowIndex && landing === columnIndex) return;
     // Shift extends the rectangle instead of collapsing it - the same key that
     // extends a text selection, a file list and a spreadsheet range.
     moveFocusedCell(next, { extend: event.shiftKey && cellRangeSelection });
@@ -2230,6 +2413,23 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     // never in this grid.
     const activeElement = container.ownerDocument.activeElement;
 
+    // The column the focus sits on has just been covered by a span - the row
+    // expanded under it, say. Its cell is gone, and the browser dropped the
+    // focus with it, so the state follows the cell that now stands for the
+    // column, and the render after this one puts the focus there. A focus
+    // that had moved elsewhere on the page stays there: only the ring moves.
+    const rendered = toRenderedCell(focusedCell, rows[focusedRowIndex]);
+    if (rendered !== focusedCell) {
+      if (
+        activeElement === null ||
+        activeElement === container.ownerDocument.body
+      ) {
+        wantsCellFocusRef.current = true;
+      }
+      ui.actions.setFocusedCell(rendered);
+      return;
+    }
+
     // Never take the focus from elsewhere on the page. A consumer moving the
     // cell while the user is typing in a form somewhere means "move the ring",
     // not "move the caret" - the scroll above already did the visible part.
@@ -2250,7 +2450,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       return;
     }
 
-    const cellElement = findCellElement(container, focusedCell);
+    const cellElement = findCellElement(container, rendered);
     // Still scrolling. The intent stays up, and the next render tries again.
     if (cellElement === null) return;
     wantsCellFocusRef.current = false;
@@ -2636,28 +2836,21 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
               ) => {
               const isGroupRow = row.getIsGrouped();
               const isInteractive = rowGesturesFor(row);
+              // The hover tint promises that the row answers the pointer, so
+              // by default it follows the gestures the row takes: the ones
+              // behind `isInteractive`, and the context menu - which a group
+              // row sits out as well, see the row's onContextMenu below.
+              const highlightsOnHover =
+                highlightOnHover ??
+                (isInteractive ||
+                  (renderRowContextMenu !== undefined && !isGroupRow));
               const rowCells = [
                 ...row.getStartVisibleCells(),
                 ...row.getCenterVisibleCells(),
                 ...row.getEndVisibleCells(),
               ];
-              // Row mode opens every editable cell of the row at once, and
-              // rows accumulate: a second row opening leaves the first one
-              // open, so every row holding a form shows its editors. Which of
-              // them holds the caret is not decided here - see
-              // placeEditCaret, which places it once per gesture.
-              //
-              // A parked row is not one of them. It keeps its form, so it is
-              // still "open", but it has been decided: it renders its draft
-              // through the column's own renderer until `begin` reopens it.
-              // A committed entry row in the body has a form too - every
-              // entry row does - but it is a value row until reopened, and
-              // reopening takes it back to the entry block.
-              const rowEditing =
-                features.editMode === "row" &&
-                editOpenRowIdSet.has(row.id) &&
-                !editDraftRowIdSet.has(row.id) &&
-                !newRowIdSet.has(row.id);
+              const rowEditing = isRowEditing(row);
+              const spans = colSpansOf(row);
               // Cell selection takes the body's tab stop off the row and puts
               // it on a cell - two stops per row would make Tab a way of
               // walking the grid, which is what the arrow keys are for. Space
@@ -2758,6 +2951,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   data-selects-on-click={
                     (selectsOnRowClick && !isGroupRow) || undefined
                   }
+                  data-highlight-on-hover={highlightsOnHover || undefined}
                   aria-selected={
                     features.rowSelection ? row.getIsSelected() : undefined
                   }
@@ -2835,6 +3029,10 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                   }
                 >
                   {rowCells.map((cell, cellIndex) => {
+                    // Covered by a spanning cell to its left - see colSpansOf.
+                    if (spans !== null && spans[cellIndex] === 0) return null;
+                    const colSpan = spans?.[cellIndex] ?? 1;
+                    const lastIndex = cellIndex + colSpan - 1;
                     const isEditingCell =
                       (editActive !== null &&
                         editActive.rowId === row.id &&
@@ -2845,7 +3043,12 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                       key={cell.id}
                       cell={cell}
                       rowHeight={rowHeight}
-                      layout={layoutFor(cell.column.id)}
+                      colSpan={colSpan}
+                      layout={
+                        colSpan > 1
+                          ? spanLayout(cellIndex, lastIndex)
+                          : layoutFor(cell.column.id)
+                      }
                       contentOverride={
                         rowNumberById !== null &&
                         cell.column.id === ROW_NUMBER_COLUMN_ID
@@ -2897,10 +3100,12 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                           ? {
                               rowId: row.id,
                               columnIndex: cellIndex + 1,
-                              focused: isCellAt(
-                                focusedCell,
+                              // A spanning cell stands for every column it
+                              // covers, wherever the focus was put.
+                              focused: isFocusedWithin(
                                 row.id,
-                                cell.column.id,
+                                cellIndex,
+                                lastIndex,
                               ),
                               // Focusable by click and by the grid, never by
                               // Tab - the guards are the way in. See
@@ -2908,11 +3113,18 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                               tabIndex: -1,
                               // "Selected" means "in the block Ctrl+C would
                               // take" - which under `"single"` is the one cell
-                              // the user is standing on.
+                              // the user is standing on. A spanning cell is in
+                              // it by its first column alone - see
+                              // isWithinBounds.
                               selected: cellRangeSelection
                                 ? isWithinBounds(rangeBounds, viewIndex, cellIndex)
-                                : isCellAt(focusedCell, row.id, cell.column.id),
-                              edges: boundsEdges(rangeBounds, viewIndex, cellIndex),
+                                : isFocusedWithin(row.id, cellIndex, lastIndex),
+                              edges: boundsEdges(
+                                rangeBounds,
+                                viewIndex,
+                                cellIndex,
+                                lastIndex,
+                              ),
                             }
                           : undefined
                       }

package/src/components/sticky.module.css

@@ -5,9 +5,11 @@
    A box-shadow is drawn per cell, and its blur fades in at each cell's own top
    and bottom edge - stacked down a column that reads as banding at every row
    seam. Instead: a gradient pseudo element pinned to `top: 0; bottom: 0` so
-   consecutive cells butt together into one unbroken band. Mantine sets
-   `color-scheme` on the root, so light-dark() resolves without a second
-   selector.
+   consecutive cells butt together into one unbroken band.
+
+   The dark scheme is a second rule under Mantine's `data-mantine-color-scheme`
+   attribute, not the `light-dark` function: scripts/package-stylesheets.test.mjs
+   says why.
 
    No border. A 1px line the colour of the grid's own borders drew a hard rule
    between the pinned lanes and the data, so the pinned columns read as a
@@ -31,8 +33,8 @@
   left: 100%;
   background: linear-gradient(
     to right,
-    light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.26)),
-    light-dark(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.09)) 45%,
+    rgba(0, 0, 0, 0.07),
+    rgba(0, 0, 0, 0.025) 45%,
     transparent
   );
 }
@@ -41,8 +43,26 @@
   right: 100%;
   background: linear-gradient(
     to left,
-    light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.26)),
-    light-dark(rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.09)) 45%,
+    rgba(0, 0, 0, 0.07),
+    rgba(0, 0, 0, 0.025) 45%,
+    transparent
+  );
+}
+
+:where([data-mantine-color-scheme="dark"]) .stickyLeft::after {
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.26),
+    rgba(0, 0, 0, 0.09) 45%,
+    transparent
+  );
+}
+
+:where([data-mantine-color-scheme="dark"]) .stickyRight::after {
+  background: linear-gradient(
+    to left,
+    rgba(0, 0, 0, 0.26),
+    rgba(0, 0, 0, 0.09) 45%,
     transparent
   );
 }