@opencorestack/opengridx 3.3.0 → 3.5.0

package/lib/utils/cellSelection.ts

@@ -184,26 +184,43 @@ export interface GridRowCellRange {
     isBottom: boolean;
     /** Rows from this one to the bottom of the range; only set (else 0) when the grid has row spans. */
     bottomOffset: number;
+    /** Data column index (`columnIndexMap`) of the cell carrying the fill handle; only set on its row. @since v3.5 */
+    fillHandleCol?: number;
+}
+
+/** Where the fill handle is drawn: a renderable row index and a data column index (`columnIndexMap`). */
+export interface GridFillHandlePosition {
+    row: number;
+    col: number;
 }
 
 export function getRowCellRange(
     range: { top: number; bottom: number; left: number; right: number } | null | undefined,
     rowIndex: number,
     hasRowSpan: boolean,
+    fillHandle?: GridFillHandlePosition | null,
 ): GridRowCellRange | null {
-    if (!range || rowIndex < range.top || rowIndex > range.bottom) return null;
-    return {
+    const handleCol = fillHandle && fillHandle.row === rowIndex ? fillHandle.col : undefined;
+    if (!range || rowIndex < range.top || rowIndex > range.bottom) {
+        // A single selected cell draws no range, only the handle: an empty column interval.
+        return handleCol === undefined
+            ? null
+            : { left: 0, right: -1, isTop: false, isBottom: false, bottomOffset: 0, fillHandleCol: handleCol };
+    }
+    const rowRange: GridRowCellRange = {
         left: range.left,
         right: range.right,
         isTop: rowIndex === range.top,
         isBottom: rowIndex === range.bottom,
         bottomOffset: hasRowSpan ? range.bottom - rowIndex : 0,
     };
+    if (handleCol !== undefined) rowRange.fillHandleCol = handleCol;
+    return rowRange;
 }
 
 export const isSameRowCellRange = (a: GridRowCellRange | null | undefined, b: GridRowCellRange | null | undefined): boolean =>
     a === b || (!!a && !!b && a.left === b.left && a.right === b.right && a.isTop === b.isTop && a.isBottom === b.isBottom
-        && a.bottomOffset === b.bottomOffset);
+        && a.bottomOffset === b.bottomOffset && a.fillHandleCol === b.fillHandleCol);
 
 /** Bit flags a cell receives for its place in the range (a number keeps memoised cells stable). */
 export const RANGE_CELL = 1;
@@ -211,6 +228,8 @@ export const RANGE_TOP = 2;
 export const RANGE_BOTTOM = 4;
 export const RANGE_LEFT = 8;
 export const RANGE_RIGHT = 16;
+/** The cell carries the fill handle (v3.5). */
+export const RANGE_FILL_HANDLE = 32;
 
 /**
  * The flags of the cell at data column `colIndex` (spanning `colSpan` columns and `rowSpan` rows from
@@ -218,9 +237,10 @@ export const RANGE_RIGHT = 16;
  */
 export function getCellRangeFlags(rowRange: GridRowCellRange | null | undefined, colIndex: number, colSpan: number, rowSpan: number): number {
     if (!rowRange) return 0;
+    const handle = rowRange.fillHandleCol === colIndex ? RANGE_FILL_HANDLE : 0;
     const lastCol = colIndex + Math.max(1, colSpan) - 1;
-    if (colIndex < rowRange.left || lastCol > rowRange.right) return 0;
-    let flags = RANGE_CELL;
+    if (colIndex < rowRange.left || lastCol > rowRange.right) return handle;
+    let flags = RANGE_CELL | handle;
     if (rowRange.isTop) flags |= RANGE_TOP;
     if (rowRange.isBottom || (rowSpan > 1 && rowSpan - 1 >= rowRange.bottomOffset)) flags |= RANGE_BOTTOM;
     if (colIndex === rowRange.left) flags |= RANGE_LEFT;

package/lib/utils/editing/commit.ts

@@ -0,0 +1,69 @@
+import type { GridColDef, GridRowId, GridRowModel } from '../../types';
+
+/**
+ * The steps every committed edit shares: a single-cell edit (`useGridEditing`) and a batch edit
+ * (`useGridBatchEdit`: paste, range clear, undo, redo) build the row the same way and report errors
+ * the same way.
+ */
+
+/** A misuse of the editing contract (e.g. processRowUpdate returned nothing), as opposed to a consumer rejection. */
+export class OpenGridXEditError extends Error {}
+
+/** One committed cell change: the value before and the value stored after (both read through `getCellValue`). */
+export interface GridCellChange {
+    id: GridRowId;
+    field: string;
+    before: unknown;
+    after: unknown;
+}
+
+/** Cell values compare equal: dates by time, anything else with `Object.is`. */
+export function isSameValue(a: unknown, b: unknown): boolean {
+    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+    return Object.is(a, b);
+}
+
+export function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+    return typeof value === 'object' && value !== null && typeof (value as { then?: unknown }).then === 'function';
+}
+
+/**
+ * Sends an edit failure to `onProcessRowUpdateError`. Without one, a misuse of the contract is logged
+ * in development; a consumer rejection is the consumer's own and stays silent.
+ */
+export function reportEditError(error: unknown, onError: ((error: unknown) => void) | undefined): void {
+    if (onError) {
+        onError(error);
+    } else if (process.env.NODE_ENV !== 'production' && error instanceof OpenGridXEditError) {
+        console.error(error.message);
+    }
+}
+
+/** The error for a `processRowUpdate` that resolved to something other than a row object. */
+export function invalidProcessedRowError(processed: unknown, outcome: string): OpenGridXEditError {
+    return new OpenGridXEditError(
+        `[OpenGridX] processRowUpdate must return the updated row object (or a Promise of it); ` +
+        `it returned ${processed === null ? 'null' : typeof processed}. ${outcome}`
+    );
+}
+
+/** The row with one cell changed: through the column's `valueSetter`, else `row[field] = value`. */
+export function buildEditedRow<R extends GridRowModel>(
+    row: R,
+    cell: { field: string; value: unknown },
+    colDef: GridColDef<R> | undefined,
+    warnedFields: Set<string>
+): R {
+    if (colDef?.valueSetter) {
+        return colDef.valueSetter({ value: cell.value, row, field: cell.field });
+    }
+    if (colDef?.valueGetter && process.env.NODE_ENV !== 'production' && !warnedFields.has(cell.field)) {
+        warnedFields.add(cell.field);
+        console.warn(
+            `[OpenGridX] Column "${cell.field}" is editable and has a valueGetter but no valueSetter. ` +
+            `The edited value was written to row["${cell.field}"], which the valueGetter may ignore, so the cell ` +
+            'can keep showing the old value. Add a valueSetter that maps the value back onto the row.'
+        );
+    }
+    return { ...row, [cell.field]: cell.value };
+}

package/lib/utils/editing/fill.ts

@@ -0,0 +1,238 @@
+import type { GridFillDirection, GridRowId } from '../../types';
+import type { CellRangeRect } from '../cellSelection';
+
+/**
+ * Pure helpers of the fill handle (v3.5): what a fill writes (series detection) and where (the target
+ * rectangle the pointer asks for, the cells of each line).
+ */
+
+/** Digits after the decimal point of a finite number, or null for exponent notation. */
+function decimalPlaces(value: number): number | null {
+    const text = String(value);
+    if (text.includes('e') || text.includes('E')) return null;
+    const dot = text.indexOf('.');
+    return dot === -1 ? 0 : text.length - dot - 1;
+}
+
+/** Rounds to `places` decimals (no rounding for null), so 0.1 + 0.2 reads 0.3. */
+function roundTo(value: number, places: number | null): number {
+    if (places === null) return value;
+    return Number(value.toFixed(Math.min(places, 20)));
+}
+
+function numberSeries(source: readonly number[], count: number): number[] | null {
+    let places: number | null = 0;
+    for (const value of source) {
+        const p = decimalPlaces(value);
+        places = p === null || places === null ? null : Math.max(places, p);
+    }
+    const step = roundTo(source[1] - source[0], places);
+    for (let i = 2; i < source.length; i++) {
+        if (roundTo(source[i] - source[i - 1], places) !== step) return null;
+    }
+    const last = source[source.length - 1];
+    const out: number[] = [];
+    for (let k = 1; k <= count; k++) out.push(roundTo(last + step * k, places));
+    return out;
+}
+
+const MS_PER_DAY = 86_400_000;
+const timeOfDay = (d: Date) => ((d.getHours() * 60 + d.getMinutes()) * 60 + d.getSeconds()) * 1000 + d.getMilliseconds();
+const dayNumber = (d: Date) => Math.round(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()) / MS_PER_DAY);
+const monthNumber = (d: Date) => d.getFullYear() * 12 + d.getMonth();
+const daysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate();
+
+/** The equal step between consecutive keys, or null. */
+function equalStep(keys: readonly number[]): number | null {
+    const step = keys[1] - keys[0];
+    for (let i = 2; i < keys.length; i++) {
+        if (keys[i] - keys[i - 1] !== step) return null;
+    }
+    return step;
+}
+
+function dateSeries(source: readonly Date[], count: number): Date[] | null {
+    const last = source[source.length - 1];
+    const sameTime = source.every(d => timeOfDay(d) === timeOfDay(last));
+    // Same day of the month, months apart by an equal step: continue by months (31 Jan + 1 month is
+    // the last day of February).
+    if (sameTime && source.every(d => d.getDate() === last.getDate())) {
+        const step = equalStep(source.map(monthNumber));
+        if (step !== null && step !== 0) {
+            const out: Date[] = [];
+            for (let k = 1; k <= count; k++) {
+                const month = last.getMonth() + step * k;
+                const year = last.getFullYear() + Math.floor(month / 12);
+                const m = ((month % 12) + 12) % 12;
+                const date = new Date(last.getTime());
+                date.setFullYear(year, m, Math.min(last.getDate(), daysInMonth(year, m)));
+                out.push(date);
+            }
+            return out;
+        }
+    }
+    // Whole days apart (calendar days, so a daylight-saving change does not break the step).
+    if (sameTime) {
+        const step = equalStep(source.map(dayNumber));
+        if (step === null) return null;
+        const out: Date[] = [];
+        for (let k = 1; k <= count; k++) {
+            const date = new Date(last.getTime());
+            date.setDate(last.getDate() + step * k);
+            out.push(date);
+        }
+        return out;
+    }
+    const step = equalStep(source.map(d => d.getTime()));
+    if (step === null) return null;
+    const out: Date[] = [];
+    for (let k = 1; k <= count; k++) out.push(new Date(last.getTime() + step * k));
+    return out;
+}
+
+const isFiniteNumber = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);
+const isValidDate = (value: unknown): value is Date => value instanceof Date && !Number.isNaN(value.getTime());
+
+/**
+ * The continued series of `source` (two or more numbers, or two or more dates, with an exactly equal
+ * step), `count` values long, or null when `source` is not such a series.
+ */
+export function detectFillSeries(source: readonly unknown[], count: number): unknown[] | null {
+    if (source.length < 2) return null;
+    if (source.every(isFiniteNumber)) return numberSeries(source, count);
+    if (source.every(isValidDate)) return dateSeries(source, count);
+    return null;
+}
+
+/** A value repeated into another cell: dates are copied, so cells never share one Date object. */
+const cloneValue = (value: unknown): unknown => (value instanceof Date ? new Date(value.getTime()) : value);
+
+/**
+ * The `count` values a fill writes after `source` (in fill order): the continued series when `series`
+ * is allowed and `source` is one, otherwise `source` repeated (one value: a copy).
+ */
+export function computeFillValues(source: readonly unknown[], count: number, series: boolean): unknown[] {
+    if (source.length === 0 || count <= 0) return [];
+    const continued = series ? detectFillSeries(source, count) : null;
+    if (continued) return continued;
+    const out: unknown[] = [];
+    for (let k = 0; k < count; k++) out.push(cloneValue(source[k % source.length]));
+    return out;
+}
+
+/**
+ * Where a fill-handle drag reaches: the source rectangle extended in one direction to the cell under
+ * the pointer, or null while the pointer is over the source. When the cell lies beyond the source
+ * both down/up and right/left, the larger pointer offset (px, `dx` / `dy` from where the drag
+ * started) decides between vertical and horizontal.
+ */
+export function fillTargetFromPointer(
+    source: CellRangeRect,
+    head: { row: number; col: number },
+    dx: number,
+    dy: number,
+): { rect: CellRangeRect; direction: GridFillDirection } | null {
+    const outVertical = head.row > source.bottom || head.row < source.top;
+    const outHorizontal = head.col > source.right || head.col < source.left;
+    if (!outVertical && !outHorizontal) return null;
+    const vertical = outVertical && (!outHorizontal || Math.abs(dy) >= Math.abs(dx));
+    if (vertical) {
+        return head.row > source.bottom
+            ? { rect: { ...source, bottom: head.row }, direction: 'down' }
+            : { rect: { ...source, top: head.row }, direction: 'up' };
+    }
+    return head.col > source.right
+        ? { rect: { ...source, right: head.col }, direction: 'right' }
+        : { rect: { ...source, left: head.col }, direction: 'left' };
+}
+
+/** One line of a fill: the source positions in fill order and the positions it fills, in order. */
+export interface FillLine {
+    /** Row index for a vertical fill, column index for a horizontal one. */
+    line: number;
+    source: number[];
+    targets: number[];
+}
+
+/** The lines (columns for a vertical fill, rows for a horizontal one) of a fill from `source` to `target`. */
+export function fillLines(source: CellRangeRect, target: CellRangeRect, direction: GridFillDirection): FillLine[] {
+    const range = (from: number, to: number) => {
+        const out: number[] = [];
+        if (from <= to) for (let i = from; i <= to; i++) out.push(i);
+        else for (let i = from; i >= to; i--) out.push(i);
+        return out;
+    };
+    const vertical = direction === 'down' || direction === 'up';
+    const lines = vertical ? range(source.left, source.right) : range(source.top, source.bottom);
+    let sourceOrder: number[];
+    let targets: number[];
+    switch (direction) {
+        case 'down':
+            sourceOrder = range(source.top, source.bottom);
+            targets = target.bottom > source.bottom ? range(source.bottom + 1, target.bottom) : [];
+            break;
+        case 'up':
+            sourceOrder = range(source.bottom, source.top);
+            targets = target.top < source.top ? range(source.top - 1, target.top) : [];
+            break;
+        case 'right':
+            sourceOrder = range(source.left, source.right);
+            targets = target.right > source.right ? range(source.right + 1, target.right) : [];
+            break;
+        default:
+            sourceOrder = range(source.right, source.left);
+            targets = target.left < source.left ? range(source.left - 1, target.left) : [];
+    }
+    return lines.map(line => ({ line, source: sourceOrder, targets }));
+}
+
+/**
+ * The corners the range takes after a fill (or during a fill drag): the original anchor when it is a
+ * corner of `rect`, otherwise the corner on the source side of the fill, so focus stays near it.
+ */
+export function fillRangeCorners(
+    rect: CellRangeRect,
+    direction: GridFillDirection,
+    anchor: { row: number; col: number },
+): { anchor: { row: number; col: number }; head: { row: number; col: number } } {
+    const isCornerRow = anchor.row === rect.top || anchor.row === rect.bottom;
+    const isCornerCol = anchor.col === rect.left || anchor.col === rect.right;
+    let row = anchor.row;
+    let col = anchor.col;
+    if (!isCornerRow || !isCornerCol) {
+        const vertical = direction === 'down' || direction === 'up';
+        if (vertical) {
+            row = direction === 'down' ? rect.top : rect.bottom;
+            col = anchor.col === rect.right ? rect.right : rect.left;
+        } else {
+            col = direction === 'right' ? rect.left : rect.right;
+            row = anchor.row === rect.bottom ? rect.bottom : rect.top;
+        }
+    }
+    return {
+        anchor: { row, col },
+        head: { row: row === rect.top ? rect.bottom : rect.top, col: col === rect.left ? rect.right : rect.left },
+    };
+}
+
+/** The cell the fill handle sits on: the bottom-right cell of the range, or the origin of the span covering it. */
+export function fillHandleCell(
+    rect: CellRangeRect,
+    rowIdAt: (row: number) => GridRowId | undefined,
+    fields: readonly string[],
+    getSpanOrigin?: (rowId: GridRowId, field: string) => { rowId: GridRowId; field: string } | null,
+): { row: number; field: string } | null {
+    const rowId = rowIdAt(rect.bottom);
+    const field = fields[rect.right];
+    if (rowId === undefined || field === undefined) return null;
+    const origin = getSpanOrigin?.(rowId, field);
+    if (!origin || (origin.rowId === rowId && origin.field === field)) return { row: rect.bottom, field };
+    // A span covers the corner: the handle goes on the cell that renders it, a few rows up.
+    for (let r = rect.bottom; r >= Math.max(0, rect.bottom - MAX_SPAN_LOOKBACK); r--) {
+        if (rowIdAt(r) === origin.rowId) return { row: r, field: origin.field };
+    }
+    return null;
+}
+
+/** How far up a span origin is looked for. */
+const MAX_SPAN_LOOKBACK = 1000;

package/lib/utils/editing/targets.ts

@@ -0,0 +1,109 @@
+import type { GridCellCoordinates, GridCellParams, GridColDef, GridRowId, GridRowMeta, GridRowModel } from '../../types';
+import { isRangeColumnField } from '../cellSelection';
+import type { CellRangeRect } from '../cellSelection';
+import { isSystemField } from '../focus';
+import { isSyntheticRowId } from '../syntheticRows';
+import { resolveCellEditable } from './index';
+import { getCellValue } from '../values';
+
+/**
+ * Where batch edits (paste, range clear, undo/redo) land: the renderable rows and the range columns
+ * (data columns, no system or grouping column) in display order, the same coordinates as a cell range.
+ */
+export interface GridEditTargetContext<R extends GridRowModel> {
+    rows: readonly R[];
+    rowIds: GridRowId[];
+    rowIndexById: Map<GridRowId, number>;
+    /** Range columns in screen order. */
+    columns: GridColDef<R>[];
+    colIndexByField: Map<string, number>;
+    /** Number of system columns before the data columns (for `isCellEditable`'s `colIndex`). */
+    dataColumnOffset: number;
+}
+
+export function buildEditTargetContext<R extends GridRowModel>(
+    rows: readonly R[],
+    getRowId: (row: R) => GridRowId,
+    navigationColumns: ReadonlyArray<GridColDef<R>>,
+): GridEditTargetContext<R> {
+    const rowIds = rows.map(getRowId);
+    const rowIndexById = new Map<GridRowId, number>();
+    rowIds.forEach((id, index) => { if (!rowIndexById.has(id)) rowIndexById.set(id, index); });
+    const columns = navigationColumns.filter(c => isRangeColumnField(c.field));
+    const colIndexByField = new Map<string, number>();
+    columns.forEach((c, index) => { colIndexByField.set(c.field, index); });
+    const dataColumnOffset = navigationColumns.filter(c => isSystemField(c.field)).length;
+    return { rows, rowIds, rowIndexById, columns, colIndexByField, dataColumnOffset };
+}
+
+export interface GridEditTargetRules<R extends GridRowModel> {
+    isCellEditable?: (params: GridCellParams<R>) => boolean;
+    rowMetaMap?: ReadonlyMap<GridRowId, GridRowMeta>;
+    /** For a cell covered by a span, the origin cell (`null` otherwise). */
+    getSpanOrigin?: (rowId: GridRowId, field: string) => { rowId: GridRowId; field: string } | null;
+}
+
+/**
+ * Whether a batch edit may write the cell at display position (r, c): a data row (not synthetic),
+ * not covered by a span whose origin is another cell, and editable by the same rule as double-click.
+ */
+export function isEditTargetWritable<R extends GridRowModel>(
+    ctx: GridEditTargetContext<R>,
+    rules: GridEditTargetRules<R>,
+    row: R,
+    r: number,
+    c: number,
+): boolean {
+    const id = ctx.rowIds[r];
+    const colDef = ctx.columns[c];
+    if (!colDef || isSyntheticRowId(id, rules.rowMetaMap)) return false;
+    const origin = rules.getSpanOrigin?.(id, colDef.field);
+    if (origin && (origin.rowId !== id || origin.field !== colDef.field)) return false;
+    return resolveCellEditable({
+        row,
+        field: colDef.field,
+        value: getCellValue(row, colDef.field, colDef),
+        colDef,
+        rowIndex: r,
+        colIndex: ctx.dataColumnOffset + c,
+        rowMeta: rules.rowMetaMap?.get(id),
+    }, rules.isCellEditable);
+}
+
+/** The rectangle around the displayed cells among `cells`, or null when none is displayed. */
+export function boundingTargetRect<R extends GridRowModel>(
+    ctx: GridEditTargetContext<R>,
+    cells: ReadonlyArray<{ id: GridRowId; field: string }>,
+): CellRangeRect | null {
+    let top = Infinity;
+    let bottom = -Infinity;
+    let left = Infinity;
+    let right = -Infinity;
+    for (const cell of cells) {
+        const r = ctx.rowIndexById.get(cell.id);
+        const c = ctx.colIndexByField.get(cell.field);
+        if (r === undefined || c === undefined) continue;
+        if (r < top) top = r;
+        if (r > bottom) bottom = r;
+        if (c < left) left = c;
+        if (c > right) right = c;
+    }
+    return top === Infinity ? null : { top, bottom, left, right };
+}
+
+/** The two corner cells of a rectangle. */
+export function rectCorners<R extends GridRowModel>(
+    ctx: GridEditTargetContext<R>,
+    rect: CellRangeRect,
+): { anchor: GridCellCoordinates; head: GridCellCoordinates } {
+    return {
+        anchor: { id: ctx.rowIds[rect.top], field: ctx.columns[rect.left].field },
+        head: { id: ctx.rowIds[rect.bottom], field: ctx.columns[rect.right].field },
+    };
+}
+
+/** Columns whose empty value is `''` rather than `null`. */
+export function isTextColumn(colDef: Pick<GridColDef, 'type'> | undefined): boolean {
+    const type = colDef?.type;
+    return type === undefined || type === 'string' || type === 'image';
+}

package/lib/utils/filtering/index.ts

@@ -367,3 +367,17 @@ export function getOperatorsForType(type?: string): GridFilterOperator[] {
       return ['contains', 'equals', 'startsWith', 'endsWith', 'isEmpty', 'isNotEmpty'];
   }
 }
+
+/**
+ * The text an input shows for a committed filter value: dates as `YYYY-MM-DD`, lists joined with
+ * commas. Never used to emit anything (the filter panel and the header filter row).
+ */
+export function filterValueToInputText(value: unknown, colType?: string): string {
+  if (value == null) return '';
+  if (colType === 'date' || value instanceof Date) {
+    const day = toLocalDateString(value);
+    return day || (typeof value === 'string' ? value : '');
+  }
+  if (Array.isArray(value)) return value.map(v => String(v)).join(', ');
+  return String(value);
+}

package/lib/utils/focus/index.ts

@@ -13,12 +13,14 @@ export interface FocusedCell {
     /** Row id of the focused body cell, or `null` when a column header cell is focused. */
     id: GridRowId | null;
     field: string;
+    /** With `id: null`: the cell of the header filter row (`headerFilters`), not the column header. */
+    headerFilter?: boolean;
     /** Index in the renderable rows when focus was set; used to pick a neighbour if the row disappears. */
     rowIndex?: number;
 }
 
 export const isSameCell = (a: FocusedCell | null, b: FocusedCell | null): boolean =>
-    a === b || (a !== null && b !== null && a.id === b.id && a.field === b.field);
+    a === b || (a !== null && b !== null && a.id === b.id && a.field === b.field && !a.headerFilter === !b.headerFilter);
 
 /**
  * Where a keydown came from, from the grid's point of view:
@@ -81,7 +83,9 @@ export function focusedCellFromElement<T>(
     const field = cell?.dataset.field;
     if (!cell || !field) return null;
     if (cell.getAttribute('role') === 'columnheader') {
-        return cell.parentElement?.classList.contains('ogx__header') ? { id: null, field } : null;
+        const headerRow = cell.parentElement;
+        if (headerRow?.classList.contains('ogx__header')) return { id: null, field };
+        return headerRow?.classList.contains('ogx__header-filter-row') ? { id: null, field, headerFilter: true } : null;
     }
     const rowIndex = Number(cell.parentElement?.getAttribute('data-rowindex'));
     const row = Number.isInteger(rowIndex) ? rows[rowIndex] : undefined;
@@ -100,7 +104,9 @@ function childWithField(parent: Element | null, field: string): HTMLElement | nu
 export function findFocusTarget(viewport: HTMLElement, cell: FocusedCell, rowIndex: number): HTMLElement | null {
     if (cell.id === null) {
         // The header sits in the sticky top block together with the top-pinned rows.
-        const header = viewport.querySelector(':scope > .ogx__content > .ogx__sticky-top > .ogx__header-wrap > .ogx__header');
+        const header = viewport.querySelector(
+            `:scope > .ogx__content > .ogx__sticky-top > .ogx__header-wrap > ${cell.headerFilter ? '.ogx__header-filter-row' : '.ogx__header'}`
+        );
         const el = childWithField(header, cell.field);
         if (el && cell.field === CHECKBOX_FIELD) return el.querySelector('input') ?? el;
         return el;