@opencorestack/opengridx 2.1.0 → 3.0.1

package/lib/utils/focus/index.ts

@@ -0,0 +1,115 @@
+import type { GridRowId } from '../../types';
+
+/** Synthetic navigation columns rendered before the data columns, in render order. */
+export const REORDER_FIELD = '__reorder_col__';
+export const EXPAND_FIELD = '__expand_col__';
+export const CHECKBOX_FIELD = '__checkbox_col__';
+
+export const isSystemField = (field: string): boolean =>
+    field === REORDER_FIELD || field === EXPAND_FIELD || field === CHECKBOX_FIELD;
+
+/** The grid's logical focus position. */
+export interface FocusedCell {
+    /** Row id of the focused body cell, or `null` when a column header cell is focused. */
+    id: GridRowId | null;
+    field: string;
+    /** 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);
+
+/**
+ * Where a keydown came from, from the grid's point of view:
+ * - `grid`: the viewport or a cell / header cell itself — the grid handles the key;
+ * - `control`: a button, link or checkbox inside a cell — navigation keys move grid focus, but
+ *   Enter and Space are left to the control;
+ * - `editor`: inside the cell being edited;
+ * - `foreign`: anything the grid must leave alone — text inputs rendered in cells, detail-panel
+ *   content, portals such as the column menu.
+ */
+export type GridKeyTarget = 'grid' | 'control' | 'editor' | 'foreign';
+
+const NON_TEXT_INPUT_TYPES = new Set(['checkbox', 'radio', 'button', 'submit', 'reset', 'image', 'file', 'color']);
+const TEXT_ROLES = new Set(['textbox', 'searchbox', 'combobox', 'listbox', 'slider', 'spinbutton']);
+
+/** True for elements that use typing or arrow keys themselves. */
+export function isTextEntryElement(el: Element): boolean {
+    const tag = el.tagName;
+    if (tag === 'INPUT') return !NON_TEXT_INPUT_TYPES.has((el as HTMLInputElement).type);
+    if (tag === 'TEXTAREA' || tag === 'SELECT') return true;
+    if ((el as HTMLElement).isContentEditable || el.closest('[contenteditable]:not([contenteditable="false"])')) return true;
+    const role = el.getAttribute('role');
+    return role !== null && TEXT_ROLES.has(role);
+}
+
+const isElement = (target: EventTarget | null): target is Element =>
+    target !== null && (target as Node).nodeType === 1;
+
+/** The cell or header cell of `viewport` (not of a grid nested inside it) that contains `el`, if any. */
+function owningCell(el: Element, viewport: HTMLElement): HTMLElement | null {
+    const panel = el.closest('.ogx__detail-panel');
+    if (panel && viewport.contains(panel)) return null;
+    const cell = el.closest<HTMLElement>('[role="gridcell"], [role="columnheader"]');
+    if (!cell || cell.closest('.ogx__viewport') !== viewport) return null;
+    return cell;
+}
+
+export function classifyKeyTarget(target: EventTarget | null, viewport: HTMLElement): GridKeyTarget {
+    if (target === viewport) return 'grid';
+    if (!isElement(target) || !viewport.contains(target)) return 'foreign';
+    const cell = owningCell(target, viewport);
+    if (!cell) return 'foreign';
+    if (cell.classList.contains('ogx__cell--editing')) return 'editor';
+    if (cell === target) return 'grid';
+    if (isTextEntryElement(target)) return 'foreign';
+    // The select-all checkbox input is the header cell's own focus target.
+    if (cell.classList.contains('ogx__header-cell--checkbox')) return 'grid';
+    return 'control';
+}
+
+/** Resolves the cell that holds `target` to a focus position, or `null` when it is not in a cell. */
+export function focusedCellFromElement<T>(
+    target: EventTarget | null,
+    viewport: HTMLElement,
+    rows: ReadonlyArray<T>,
+    getRowId: (row: T) => GridRowId
+): FocusedCell | null {
+    if (!isElement(target)) return null;
+    const cell = owningCell(target, viewport);
+    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 rowIndex = Number(cell.parentElement?.getAttribute('data-rowindex'));
+    const row = Number.isInteger(rowIndex) ? rows[rowIndex] : undefined;
+    return row ? { id: getRowId(row), field, rowIndex } : null;
+}
+
+function childWithField(parent: Element | null, field: string): HTMLElement | null {
+    if (!parent) return null;
+    for (const child of Array.from(parent.children)) {
+        if ((child as HTMLElement).dataset.field === field) return child as HTMLElement;
+    }
+    return null;
+}
+
+/** The DOM element that should hold focus for `cell`, or `null` while it is not rendered. */
+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 el = childWithField(header, cell.field);
+        if (el && cell.field === CHECKBOX_FIELD) return el.querySelector('input') ?? el;
+        return el;
+    }
+    if (rowIndex < 0) return null;
+    const row = viewport.querySelector(
+        `:scope > .ogx__content > .ogx__virtual-container > .ogx__rows > [data-rowindex="${rowIndex}"],` +
+        `:scope > .ogx__content > .ogx__sticky-top > .ogx__pinned-rows > [data-rowindex="${rowIndex}"],` +
+        `:scope > .ogx__content > .ogx__sticky-bottom > .ogx__pinned-rows > [data-rowindex="${rowIndex}"]`
+    );
+    return childWithField(row, cell.field);
+}

package/lib/utils/gridApiRows.ts

@@ -0,0 +1,35 @@
+import type { GridRowId, GridRowMeta, GridRowModel } from '../types';
+
+export interface CollectAllFilteredRowsParams<R extends GridRowModel> {
+    /** The active tree-data / row-grouping handlers, or null when the rows are flat. */
+    hierarchyHandlers: { getVisibleRows: (options?: { expandAll?: boolean; labelField?: string }) => R[] | null } | null;
+    /** The column that shows the hierarchy, so sorting by it orders the rows as on screen. */
+    hierarchyField?: string;
+    pinnedTopRows: R[];
+    /** Every unpinned row that passes the filter, sorted, across all pages. */
+    sortedUnpinnedRows: R[];
+    pinnedBottomRows: R[];
+    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    getRowId: (row: GridRowModel) => GridRowId;
+    /**
+     * With a hierarchy: the rows that pass the filter (the set select-all and the footer use).
+     * Tree-data ancestors shown only to give a match its context are left out. Omitted: every
+     * non-synthetic row of the expanded hierarchy is returned.
+     */
+    dataRows?: readonly R[];
+}
+
+/**
+ * `GridApi.getAllFilteredRows()`: every data row that passes the filter, in display order,
+ * ignoring pagination and hierarchy expansion. Flat rows keep their pinned rows; with a
+ * hierarchy every group is expanded, and synthetic group rows and tree-data ancestors that do
+ * not match the filter themselves (shown only for context) are left out, so the result is the
+ * set select-all and the aggregation footer act on.
+ */
+export function collectAllFilteredRows<R extends GridRowModel>(params: CollectAllFilteredRowsParams<R>): R[] {
+    const { hierarchyHandlers, pinnedTopRows, sortedUnpinnedRows, pinnedBottomRows, rowMetaMap, getRowId, hierarchyField, dataRows } = params;
+    const hierarchyRows = hierarchyHandlers?.getVisibleRows({ expandAll: true, labelField: hierarchyField });
+    if (!hierarchyRows) return [...pinnedTopRows, ...sortedUnpinnedRows, ...pinnedBottomRows];
+    const matching = dataRows ? new Set<R>(dataRows) : null;
+    return hierarchyRows.filter(row => !rowMetaMap.get(getRowId(row))?.isGroupRow && (!matching || matching.has(row)));
+}

package/lib/utils/gridModes.ts

@@ -0,0 +1,77 @@
+import type { GridRowGroupingModel } from '../types';
+
+/**
+ * Stable empty grouping model: used when `rowGroupingModel` is not passed and while pivot mode
+ * is active. It must keep its identity across renders, because the hierarchy hooks memoize on it.
+ */
+export const EMPTY_ROW_GROUPING_MODEL: GridRowGroupingModel = [];
+
+export interface ResolveGridModesParams {
+    /** `rowGroupingModel` prop (or `EMPTY_ROW_GROUPING_MODEL`). */
+    rowGroupingModel: GridRowGroupingModel;
+    /** `treeData` prop. */
+    treeData: boolean;
+    /** Whether `getTreeDataPath` was passed. */
+    hasTreeDataPath: boolean;
+    /** Whether the pivot is producing the rows (`useGridPivot().isActive`). */
+    isPivotActive: boolean;
+    /** `rowReordering` prop. */
+    rowReordering: boolean;
+    /** Whether `groupingColDef` was passed. */
+    hasGroupingColDef: boolean;
+    /** `pagination` prop. */
+    pagination: boolean;
+    paginationMode: 'client' | 'server' | 'infinite';
+    /** `listView` prop. */
+    listView: boolean;
+    /** Whether `listViewColumn` was passed. */
+    hasListViewColumn: boolean;
+}
+
+export interface GridModes {
+    /** Row drag-reorder is on (never over generated pivot rows). */
+    rowReordering: boolean;
+    /** The grouping model the hierarchy hooks see: empty while pivoting. */
+    hierarchyRowGroupingModel: GridRowGroupingModel;
+    /** `treeData` asked for and not overridden by the pivot. */
+    isTreeDataRequested: boolean;
+    /** Tree data is built: requested and `getTreeDataPath` is present. */
+    isTreeData: boolean;
+    isRowGrouping: boolean;
+    isHierarchyEnabled: boolean;
+    /** The synthetic `__group__` column is shown. */
+    hasGroupingColumn: boolean;
+    /** Pagination is on: requested, not grouping, and not infinite scroll. */
+    pagination: boolean;
+    /** List view is shown: requested and `listViewColumn` is present. */
+    listView: boolean;
+}
+
+/**
+ * Which grid features are in effect, from the props that request them. Features override each
+ * other here and nowhere else:
+ * - pivot rows are generated, so row-reorder indices over them would mean nothing to the consumer;
+ * - pivot rows are already grouped by the pivot row fields, so tree data and row grouping would regroup them;
+ * - without `getTreeDataPath` there is no tree to build: the rows are shown flat (useTreeData warns);
+ * - infinite scroll loads rows as the user scrolls: it has no pages to show or slice;
+ * - list view needs a `listViewColumn` to render its items; without one the grid view is shown
+ *   (useGridDevWarnings says so) instead of an empty container.
+ */
+export function resolveGridModes(params: ResolveGridModesParams): GridModes {
+    const { isPivotActive } = params;
+    const hierarchyRowGroupingModel = isPivotActive ? EMPTY_ROW_GROUPING_MODEL : params.rowGroupingModel;
+    const isTreeDataRequested = params.treeData && !isPivotActive;
+    const isTreeData = isTreeDataRequested && params.hasTreeDataPath;
+    const isRowGrouping = hierarchyRowGroupingModel.length > 0;
+    return {
+        rowReordering: params.rowReordering && !isPivotActive,
+        hierarchyRowGroupingModel,
+        isTreeDataRequested,
+        isTreeData,
+        isRowGrouping,
+        isHierarchyEnabled: isTreeData || isRowGrouping,
+        hasGroupingColumn: params.hasGroupingColDef && (isRowGrouping || isTreeData),
+        pagination: params.pagination && !isRowGrouping && params.paginationMode !== 'infinite',
+        listView: params.listView && params.hasListViewColumn,
+    };
+}

package/lib/utils/grouping/groupedExportRows.ts

@@ -0,0 +1,91 @@
+import type {
+    GridAggregationModel,
+    GridAggregationResult,
+    GridColDef,
+    GridGroupedExportRow,
+    GridRowId,
+    GridRowMeta,
+    GridRowModel,
+} from '../../types';
+import { computeAggregations } from '../aggregation';
+
+export interface BuildGroupedExportRowsParams<R extends GridRowModel> {
+    /**
+     * The grouped rows in display order with every group expanded: group rows followed by
+     * their filtered, sorted descendants (useRowGrouping's getVisibleRows({ expandAll: true })).
+     */
+    rows: R[];
+    getRowId: (row: R) => GridRowId;
+    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    columns: GridColDef<R>[];
+    aggregationModel: GridAggregationModel;
+    /** The footer's grand total (already over the filtered data rows); omitted when null. */
+    aggregationResult: GridAggregationResult | null;
+    /** Groups whose subtotal is hidden (getAggregationPosition returned null for them); no subtotal is written. */
+    isSubtotalHidden?: (groupId: GridRowId) => boolean;
+}
+
+interface OpenGroup<R> {
+    id: GridRowId;
+    header: GridGroupedExportRow;
+    leaves: R[];
+}
+
+/**
+ * Flattens the grouping tree for export: group-header, its leaves and nested groups, then
+ * its subtotal, and a grand total at the end. The collapsed/expanded state on screen does
+ * not matter, and subtotals are computed over the group's filtered leaves (the rows the
+ * export contains), so every subtotal agrees with the rows above it.
+ */
+export function buildGroupedExportRows<R extends GridRowModel>(params: BuildGroupedExportRowsParams<R>): GridGroupedExportRow[] {
+    const { rows, getRowId, rowMetaMap, columns, aggregationModel, aggregationResult, isSubtotalHidden } = params;
+    const hasAggregation = Object.keys(aggregationModel).length > 0;
+    const columnsLookup = new Map(columns.map(col => [col.field, col]));
+
+    const result: GridGroupedExportRow[] = [];
+    const open: OpenGroup<R>[] = [];
+
+    const closeGroupsFrom = (depth: number) => {
+        while (open.length > 0 && (open[open.length - 1].header.depth >= depth)) {
+            const group = open.pop()!;
+            if (hasAggregation && !isSubtotalHidden?.(group.id)) {
+                result.push({
+                    type: 'group-subtotal',
+                    depth: group.header.depth,
+                    groupField: group.header.groupField,
+                    groupValue: group.header.groupValue,
+                    groupLabel: group.header.groupLabel,
+                    aggregatedValues: computeAggregations(group.leaves, aggregationModel, columnsLookup, 'getGroupedExportRows'),
+                });
+            }
+        }
+    };
+
+    for (const row of rows) {
+        const id = getRowId(row);
+        const meta = rowMetaMap.get(id);
+        if (meta?.isGroupFooter) continue;
+        if (meta?.isGroupRow) {
+            const depth = meta.treeDepth ?? 0;
+            closeGroupsFrom(depth);
+            const header: GridGroupedExportRow = {
+                type: 'group-header',
+                depth,
+                groupField: meta.groupingField,
+                groupValue: meta.groupingValue,
+                groupLabel: meta.groupLabel,
+            };
+            result.push(header);
+            open.push({ id, header, leaves: [] });
+        } else {
+            result.push({ type: 'leaf', depth: meta?.treeDepth ?? open.length, row });
+            open.forEach(group => group.leaves.push(row));
+        }
+    }
+    closeGroupsFrom(0);
+
+    if (hasAggregation && aggregationResult) {
+        result.push({ type: 'grand-total', depth: 0, aggregatedValues: aggregationResult });
+    }
+    return result;
+}

package/lib/utils/pagination/index.ts

@@ -0,0 +1,56 @@
+import type { GridLocaleText } from '../../types';
+
+/**
+ * Page-size and page-index arithmetic shared by the row pipeline, the pager and the list view,
+ * so all three agree on which page is shown.
+ */
+
+/** A usable page size: a whole number of at least 1. A size of 0, a negative size or NaN would divide by zero. */
+export function normalizePageSize(pageSize: number): number {
+    return pageSize >= 1 ? Math.floor(pageSize) : 1;
+}
+
+/** The number of pages needed for `rowCount` rows; at least 1, so an empty grid still has page 1. */
+export function getPageCount(rowCount: number, pageSize: number): number {
+    return Math.max(1, Math.ceil(Math.max(0, rowCount) / normalizePageSize(pageSize)));
+}
+
+export interface GetPaginationRowCountParams {
+    paginationMode: 'client' | 'server' | 'infinite';
+    /** Whether a `dataSource` is set: its response's `rowCount` then wins over the prop. */
+    hasDataSource: boolean;
+    /** The server total from the last `dataSource` response, if any. */
+    dataSourceRowCount: number | null | undefined;
+    /** The `rowCount` prop. */
+    rowCountProp: number | undefined;
+    /** The filtered, unpinned rows the grid holds. */
+    clientRowCount: number;
+}
+
+/**
+ * What the pager pages through. Client: the filtered, unpinned rows (pinned rows show on every
+ * page). Server: the server total, from the dataSource response or the rowCount prop, falling
+ * back to the rows the grid holds.
+ */
+export function getPaginationRowCount(params: GetPaginationRowCountParams): number {
+    const { paginationMode, hasDataSource, dataSourceRowCount, rowCountProp, clientRowCount } = params;
+    if (paginationMode !== 'server') return clientRowCount;
+    return (hasDataSource ? dataSourceRowCount ?? rowCountProp : rowCountProp) ?? clientRowCount;
+}
+
+/** The pager's strings out of the grid's `localeText` (undefined when there is none). */
+export function pickPaginationLocaleText(
+    localeText: GridLocaleText | undefined
+): Pick<GridLocaleText, 'paginationRowsPerPage' | 'paginationOf' | 'paginationPage'> | undefined {
+    return localeText ? {
+        paginationRowsPerPage: localeText.paginationRowsPerPage,
+        paginationOf: localeText.paginationOf,
+        paginationPage: localeText.paginationPage,
+    } : undefined;
+}
+
+/** `page` limited to the valid range `0 … pageCount - 1`. */
+export function clampPage(page: number, pageCount: number): number {
+    if (!Number.isFinite(page)) return 0;
+    return Math.min(Math.max(0, Math.floor(page)), Math.max(0, pageCount - 1));
+}

package/lib/utils/pinning/index.ts

@@ -1,5 +1,9 @@
 
 import type { GridColDef, GridRowModel, GridColumnPinning, GridRowPinning, GridPinnedPosition, GridRowId } from '../../types';
+import { getRenderedColumnWidth } from '../columnWidth';
+
+/** Width of each built-in system column (drag handle, detail-panel toggle, checkbox). */
+export const SYSTEM_COLUMN_WIDTH = 48;
 
 export function isColumnPinned(field: string, pinnedColumns?: GridColumnPinning): GridPinnedPosition | null {
     if (!pinnedColumns) return null;
@@ -15,6 +19,11 @@ export function isColumnPinned(field: string, pinnedColumns?: GridColumnPinning)
     return null;
 }
 
+/**
+ * Splits columns into left-pinned, unpinned and right-pinned groups. The unpinned group keeps
+ * column order; the pinned groups follow the order of `pinnedColumns.left` / `.right`, which is
+ * the order the grid renders them in.
+ */
 export function getPinnedColumnGroups<R extends GridRowModel = GridRowModel>(
     columns: GridColDef<R>[],
     pinnedColumns?: GridColumnPinning
@@ -62,6 +71,12 @@ export function getPinnedColumnGroups<R extends GridRowModel = GridRowModel>(
     return { left, center, right };
 }
 
+/**
+ * Sticky `left` / `right` offsets of the pinned columns, in pixels. Offsets follow the order of
+ * `columns`, which must be the order the cells are rendered in (the grid renders pinned columns
+ * in `pinnedColumns.left` / `.right` order), and use each column's rendered width (see
+ * `getRenderedColumnWidth`). Left offsets start after the pinned system columns.
+ */
 export function calculatePinnedPositions<R extends GridRowModel = GridRowModel>(
     columns: GridColDef<R>[],
     columnWidths: Record<string, number>,
@@ -76,39 +91,52 @@ export function calculatePinnedPositions<R extends GridRowModel = GridRowModel>(
 
     if (!pinnedColumns) return positions;
 
-    const groups = getPinnedColumnGroups(columns, pinnedColumns);
-
-    let leftOffset = 0;
-
-    if (rowReordering) {
-        leftOffset += 48;
-    }
-
-    if (hasDetailPanel && pinExpandColumn) {
-        leftOffset += 48; 
-    }
-
-    if (checkboxSelection && pinCheckboxColumn) {
-        leftOffset += 48; 
-    }
+    let leftOffset =
+        (rowReordering ? SYSTEM_COLUMN_WIDTH : 0) +
+        (hasDetailPanel && pinExpandColumn ? SYSTEM_COLUMN_WIDTH : 0) +
+        (checkboxSelection && pinCheckboxColumn ? SYSTEM_COLUMN_WIDTH : 0);
+    const right: GridColDef<R>[] = [];
 
-    groups.left.forEach(col => {
-        positions[col.field] = leftOffset;
-        const width = columnWidths[col.field] ?? col.width ?? 100;
-        leftOffset += width;
+    columns.forEach(col => {
+        if (col.isSpacer) return;
+        const side = isColumnPinned(col.field, pinnedColumns);
+        if (side === 'left') {
+            positions[col.field] = leftOffset;
+            leftOffset += getRenderedColumnWidth(col, columnWidths);
+        } else if (side === 'right') {
+            right.push(col);
+        }
     });
 
     let rightOffset = 0;
-
-    [...groups.right].reverse().forEach(col => {
-        const width = columnWidths[col.field] ?? col.width ?? 100;
-        positions[col.field] = rightOffset;
-        rightOffset += width;
-    });
+    for (let i = right.length - 1; i >= 0; i--) {
+        positions[right[i].field] = rightOffset;
+        rightOffset += getRenderedColumnWidth(right[i], columnWidths);
+    }
 
     return positions;
 }
 
+/**
+ * The last rendered left-pinned column and the first rendered right-pinned column: the cells that
+ * carry the pinned-section edge classes. `columns` is in render order; spacers are skipped.
+ */
+export function getPinnedEdgeFields<R extends GridRowModel = GridRowModel>(
+    columns: GridColDef<R>[],
+    pinnedColumns?: GridColumnPinning
+): { lastLeft: string | null; firstRight: string | null } {
+    let lastLeft: string | null = null;
+    let firstRight: string | null = null;
+    if (!pinnedColumns) return { lastLeft, firstRight };
+    for (const col of columns) {
+        if (col.isSpacer) continue;
+        const side = isColumnPinned(col.field, pinnedColumns);
+        if (side === 'left') lastLeft = col.field;
+        else if (side === 'right' && firstRight === null) firstRight = col.field;
+    }
+    return { lastLeft, firstRight };
+}
+
 export function isColumnPinnable<R extends GridRowModel = GridRowModel>(
     colDef: GridColDef<R>
 ): boolean {
@@ -166,8 +194,7 @@ export function getPinnedColumnsWidth(
         const col = columns.find(c => c.field === field);
         if (!col) return total;
 
-        const width = columnWidths[field] ?? col.width ?? 100;
-        return total + width;
+        return total + getRenderedColumnWidth(col, columnWidths);
     }, 0);
 }
 
@@ -190,7 +217,8 @@ export function isRowPinned(
 
 export function getPinnedRowGroups<R extends GridRowModel = GridRowModel>(
     rows: R[],
-    pinnedRows?: GridRowPinning
+    pinnedRows?: GridRowPinning,
+    getRowId: (row: R) => GridRowId = (row) => row.id
 ): {
     top: R[];
     center: R[];
@@ -205,7 +233,7 @@ export function getPinnedRowGroups<R extends GridRowModel = GridRowModel>(
     }
 
     rows.forEach(row => {
-        const pinnedPosition = isRowPinned(row.id, pinnedRows);
+        const pinnedPosition = isRowPinned(getRowId(row), pinnedRows);
 
         if (pinnedPosition === 'top') {
             top.push(row);
@@ -218,16 +246,16 @@ export function getPinnedRowGroups<R extends GridRowModel = GridRowModel>(
 
     if (pinnedRows.top) {
         top.sort((a, b) => {
-            const aIndex = pinnedRows.top!.indexOf(a.id);
-            const bIndex = pinnedRows.top!.indexOf(b.id);
+            const aIndex = pinnedRows.top!.indexOf(getRowId(a));
+            const bIndex = pinnedRows.top!.indexOf(getRowId(b));
             return aIndex - bIndex;
         });
     }
 
     if (pinnedRows.bottom) {
         bottom.sort((a, b) => {
-            const aIndex = pinnedRows.bottom!.indexOf(a.id);
-            const bIndex = pinnedRows.bottom!.indexOf(b.id);
+            const aIndex = pinnedRows.bottom!.indexOf(getRowId(a));
+            const bIndex = pinnedRows.bottom!.indexOf(getRowId(b));
             return aIndex - bIndex;
         });
     }
@@ -280,3 +308,19 @@ export function getPinnedRowsCount(
     const pinnedIds = position === 'top' ? pinnedRows.top : pinnedRows.bottom;
     return pinnedIds?.length || 0;
 }
+
+/**
+ * The column pinning model after the column menu pins `field` to `side` (appended after the
+ * columns already pinned there) or unpins it (`null`). The field is removed from the other side.
+ */
+export function pinColumnTo(
+    pinnedColumns: GridColumnPinning | undefined,
+    field: string,
+    side: GridPinnedPosition | null
+): GridColumnPinning {
+    const cleanLeft = (pinnedColumns?.left ?? []).filter(f => f !== field);
+    const cleanRight = (pinnedColumns?.right ?? []).filter(f => f !== field);
+    if (side === 'left') return { left: [...cleanLeft, field], right: cleanRight };
+    if (side === 'right') return { left: cleanLeft, right: [...cleanRight, field] };
+    return { left: cleanLeft, right: cleanRight };
+}