@highcharts/grid-pro 2.1.1 → 2.3.0

package/es-modules/Grid/Core/Table/Body/CellContextMenu.d.ts

@@ -0,0 +1,11 @@
+import type TableCell from './TableCell';
+import ContextMenu from '../../UI/ContextMenu.js';
+declare class CellContextMenu extends ContextMenu {
+    cell?: TableCell;
+    private cursorAnchorElement?;
+    private removeCellOutdateListener?;
+    showAt(cell: TableCell, clientX: number, clientY: number): void;
+    hide(): void;
+    protected renderContent(): void;
+}
+export default CellContextMenu;

package/es-modules/Grid/Core/Table/Body/CellContextMenu.js

@@ -0,0 +1,84 @@
+/* *
+ *
+ *  Grid Cell Context Menu
+ *
+ *  (c) 2020-2026 Highsoft AS
+ *
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
+ *
+ *  Authors:
+ *  - Mikkel Espolin Birkeland
+ *
+ * */
+'use strict';
+import ContextMenu from '../../UI/ContextMenu.js';
+import ContextMenuButton from '../../UI/ContextMenuButton.js';
+import { addEvent } from '../../../../Shared/Utilities.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+class CellContextMenu extends ContextMenu {
+    showAt(cell, clientX, clientY) {
+        const wrapper = this.grid.contentWrapper;
+        if (!wrapper) {
+            return;
+        }
+        this.cell = cell;
+        this.removeCellOutdateListener?.();
+        this.removeCellOutdateListener = addEvent(cell, 'outdate', () => {
+            this.hide();
+            delete this.cell;
+        });
+        const rect = wrapper.getBoundingClientRect();
+        this.cursorAnchorElement = document.createElement('div');
+        this.cursorAnchorElement.style.position = 'absolute';
+        this.cursorAnchorElement.style.left = (clientX - rect.left) + 'px';
+        this.cursorAnchorElement.style.top = (clientY - rect.top) + 'px';
+        this.cursorAnchorElement.style.width = '0px';
+        this.cursorAnchorElement.style.height = '0px';
+        this.cursorAnchorElement.style.pointerEvents = 'none';
+        wrapper.appendChild(this.cursorAnchorElement);
+        super.show(this.cursorAnchorElement);
+    }
+    hide() {
+        super.hide();
+        this.cursorAnchorElement?.remove();
+        this.removeCellOutdateListener?.();
+        delete this.cursorAnchorElement;
+        delete this.removeCellOutdateListener;
+    }
+    renderContent() {
+        const { cell } = this;
+        if (!cell) {
+            return;
+        }
+        const items = cell.column?.options.cells?.contextMenu?.items || [];
+        for (const item of items) {
+            if (item.separator) {
+                this.addDivider();
+                continue;
+            }
+            const btn = new ContextMenuButton({
+                label: item.label,
+                icon: item.icon,
+                onClick: () => {
+                    if (item.disabled) {
+                        return;
+                    }
+                    item.onClick?.call(cell, cell);
+                    this.hide();
+                }
+            }).add(this);
+            if (btn && item.disabled) {
+                // Minimal disable support for v1. We don't currently have a
+                // dedicated ContextMenuButton API for disabled state.
+                // This keeps behavior consistent without introducing new CSS.
+                btn.wrapper?.querySelector('button')?.setAttribute('disabled', '');
+            }
+        }
+    }
+}
+export default CellContextMenu;

package/es-modules/Grid/Core/Table/Body/TableCell.d.ts

@@ -1,4 +1,4 @@
-import type DataTable from '../../../../Data/DataTable';
+import type { CellType as DataTableCellType } from '../../../../Data/DataTable';
 import type Column from '../Column';
 import type TableRow from './TableRow';
 import Cell from '../Cell.js';
@@ -19,6 +19,16 @@ declare class TableCell extends Cell {
      * The cell's content.
      */
     content?: CellContent;
+    /**
+     * A token used to prevent stale async responses from overwriting cell
+     * data. In virtualized grids, cells are reused as rows scroll in/out of
+     * view. If a cell starts an async value fetch for row A, then gets reused
+     * for row B before the fetch completes, the stale response for row A
+     * could incorrectly overwrite row B's data. This token is incremented
+     * before each async fetch, and checked when the fetch completes - if the
+     * token has changed, the response is discarded as stale.
+     */
+    private asyncFetchToken;
     /**
      * Constructs a cell in the data grid.
      *
@@ -32,15 +42,15 @@ declare class TableCell extends Cell {
     /**
      * Renders the cell by appending it to the row and setting its value.
      */
-    render(): void;
+    render(): Promise<void>;
     /**
-     * Edits the cell value and updates the data table. Call this instead of
+     * Edits the cell value and updates the dataset. Call this instead of
      * `setValue` when you want it to trigger the cell value user change event.
      *
      * @param value
      * The new value to set.
      */
-    editValue(value: DataTable.CellType): Promise<void>;
+    editValue(value: DataTableCellType): Promise<void>;
     /**
      * Sets the cell value and updates its content with it.
      *
@@ -48,28 +58,39 @@ declare class TableCell extends Cell {
      * The raw value to set. If not provided, it will use the value from the
      * data table for the current row and column.
      *
-     * @param updateTable
-     * Whether to update the table after setting the content. Defaults to
-     * `false`, meaning the table will not be updated.
+     * @param updateDataset
+     * Whether to update the dataset after setting the content. Defaults to
+     * `false`, meaning the dataset will not be updated.
+     */
+    setValue(value?: DataTableCellType, updateDataset?: boolean): Promise<void>;
+    /**
+     * Returns merged styles from defaults and current column options.
      */
-    setValue(value?: DataTable.CellType, updateTable?: boolean): Promise<void>;
+    private getCellStyles;
     /**
-     * Updates the the data table so that it reflects the current state of
-     * the grid.
+     * Updates the the dataset so that it reflects the current state of the
+     * grid.
      *
      * @returns
      * A promise that resolves to `true` if the cell triggered all the whole
-     * viewport rows to be updated, or `false` if the only change should be
-     * the cell's content.
+     * viewport rows to be updated, or `false` if the only change was the cell's
+     * content.
+     */
+    private updateDataset;
+    /**
+     * Initialize event listeners for table body cells.
+     *
+     * Most events (click, dblclick, keydown, mousedown, mouseover, mouseout)
+     * are delegated to Table for better performance with virtualization.
+     * Only focus/blur remain on individual cells for focus management.
      */
-    private updateDataTable;
     initEvents(): void;
     /**
      * Handles the focus event on the cell.
      */
     protected onFocus(): void;
-    protected onMouseOver(): void;
-    protected onMouseOut(): void;
+    onMouseOver(): void;
+    onMouseOut(): void;
     /**
      * Handles the double click event on the cell.
      *

package/es-modules/Grid/Core/Table/Body/TableCell.js

@@ -2,11 +2,11 @@
  *
  *  Grid class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -16,8 +16,8 @@
 'use strict';
 import Globals from '../../Globals.js';
 import Cell from '../Cell.js';
-import Utils from '../../../../Core/Utilities.js';
-const { fireEvent } = Utils;
+import { defined, fireEvent } from '../../../../Shared/Utilities.js';
+import { mergeStyleValues } from '../../GridUtils.js';
 /* *
  *
  *  Class
@@ -43,6 +43,16 @@ class TableCell extends Cell {
      */
     constructor(row, column) {
         super(row, column);
+        /**
+         * A token used to prevent stale async responses from overwriting cell
+         * data. In virtualized grids, cells are reused as rows scroll in/out of
+         * view. If a cell starts an async value fetch for row A, then gets reused
+         * for row B before the fetch completes, the stale response for row A
+         * could incorrectly overwrite row B's data. This token is incremented
+         * before each async fetch, and checked when the fetch completes - if the
+         * token has changed, the response is discarded as stale.
+         */
+        this.asyncFetchToken = 0;
         this.column = column;
         this.row = row;
         this.column.registerCell(this);
@@ -55,12 +65,12 @@ class TableCell extends Cell {
     /**
      * Renders the cell by appending it to the row and setting its value.
      */
-    render() {
-        super.render();
-        void this.setValue();
+    async render() {
+        await super.render();
+        await this.setValue();
     }
     /**
-     * Edits the cell value and updates the data table. Call this instead of
+     * Edits the cell value and updates the dataset. Call this instead of
      * `setValue` when you want it to trigger the cell value user change event.
      *
      * @param value
@@ -81,14 +91,40 @@ class TableCell extends Cell {
      * The raw value to set. If not provided, it will use the value from the
      * data table for the current row and column.
      *
-     * @param updateTable
-     * Whether to update the table after setting the content. Defaults to
-     * `false`, meaning the table will not be updated.
+     * @param updateDataset
+     * Whether to update the dataset after setting the content. Defaults to
+     * `false`, meaning the dataset will not be updated.
      */
-    async setValue(value = this.column.data?.[this.row.index], updateTable = false) {
+    async setValue(value, updateDataset = false) {
+        const fetchToken = ++this.asyncFetchToken;
+        const { grid } = this.column.viewport;
+        // TODO(design): Design a better way to show the cell val being updated.
+        this.htmlElement.style.opacity = '0.5';
+        if (!defined(value)) {
+            value = await grid.dataProvider?.getValue(this.column.id, this.row.index);
+            // Discard stale response if cell was reused for a different row
+            if (fetchToken !== this.asyncFetchToken) {
+                this.htmlElement.style.opacity = '';
+                return;
+            }
+        }
+        const oldValue = this.value;
         this.value = value;
-        if (updateTable && await this.updateDataTable()) {
-            return;
+        if (updateDataset) {
+            try {
+                grid.showLoading();
+                if (await this.updateDataset()) {
+                    return;
+                }
+            }
+            catch (err) {
+                // eslint-disable-next-line no-console
+                console.error(err);
+                this.value = oldValue;
+            }
+            finally {
+                grid.hideLoading();
+            }
         }
         if (this.content) {
             this.content.update();
@@ -101,44 +137,64 @@ class TableCell extends Cell {
         this.htmlElement.classList[this.column.dataType === 'number' ? 'add' : 'remove'](Globals.getClassName('rightAlign'));
         // Add custom class name from column options
         this.setCustomClassName(this.column.options.cells?.className);
+        this.setCustomStyles(this.getCellStyles());
+        // TODO(design): Remove this after the first part was implemented.
+        this.htmlElement.style.opacity = '';
         fireEvent(this, 'afterRender', { target: this });
     }
     /**
-     * Updates the the data table so that it reflects the current state of
-     * the grid.
+     * Returns merged styles from defaults and current column options.
+     */
+    getCellStyles() {
+        const { grid } = this.column.viewport;
+        const rawColumnOptions = grid.columnOptionsMap?.[this.column.id]?.options;
+        return {
+            ...mergeStyleValues(this.column, grid.options?.columnDefaults?.style, rawColumnOptions?.style),
+            ...mergeStyleValues(this, grid.options?.columnDefaults?.cells?.style, rawColumnOptions?.cells?.style)
+        };
+    }
+    /**
+     * Updates the the dataset so that it reflects the current state of the
+     * grid.
      *
      * @returns
      * A promise that resolves to `true` if the cell triggered all the whole
-     * viewport rows to be updated, or `false` if the only change should be
-     * the cell's content.
+     * viewport rows to be updated, or `false` if the only change was the cell's
+     * content.
      */
-    async updateDataTable() {
-        if (this.column.data?.[this.row.index] === this.value) {
+    async updateDataset() {
+        const oldValue = await this.column.viewport.grid.dataProvider?.getValue(this.column.id, this.row.index);
+        if (oldValue === this.value) {
             // Abort if the value is the same as in the data table.
             return false;
         }
         const vp = this.column.viewport;
-        const { dataTable: originalDataTable } = vp.grid;
-        const rowTableIndex = this.row.id &&
-            originalDataTable?.getLocalRowIndex(this.row.id);
-        if (!originalDataTable || rowTableIndex === void 0) {
+        const { dataProvider: dp } = vp.grid;
+        const rowId = this.row.id;
+        if (!dp || rowId === void 0) {
             return false;
         }
         this.row.data[this.column.id] = this.value;
-        originalDataTable.setCell(this.column.id, rowTableIndex, this.value);
-        // If no modifiers, don't update all rows
-        if (vp.grid.dataTable === vp.grid.presentationTable) {
+        await dp.setValue(this.value, this.column.id, rowId);
+        if (vp.grid.querying.willNotModify()) {
             return false;
         }
         await vp.updateRows();
         return true;
     }
+    /**
+     * Initialize event listeners for table body cells.
+     *
+     * Most events (click, dblclick, keydown, mousedown, mouseover, mouseout)
+     * are delegated to Table for better performance with virtualization.
+     * Only focus/blur remain on individual cells for focus management.
+     */
     initEvents() {
-        this.cellEvents.push(['dblclick', (e) => (this.onDblClick(e))]);
-        this.cellEvents.push(['mousedown', (e) => {
-                this.onMouseDown(e);
-            }]);
-        super.initEvents();
+        this.cellEvents.push(['blur', () => this.onBlur()]);
+        this.cellEvents.push(['focus', () => this.onFocus()]);
+        this.cellEvents.forEach((pair) => {
+            this.htmlElement.addEventListener(pair[0], pair[1]);
+        });
     }
     /**
      * Handles the focus event on the cell.

package/es-modules/Grid/Core/Table/Body/TableRow.d.ts

@@ -1,6 +1,7 @@
 import type Cell from '../Cell';
 import type Column from '../Column';
-import type DataTable from '../../../../Data/DataTable';
+import type { RowObject as DataTableRowObject } from '../../../../Data/DataTable';
+import type { RowId } from '../../Data/DataProvider';
 import Row from '../Row.js';
 import Table from '../Table.js';
 /**
@@ -10,15 +11,15 @@ declare class TableRow extends Row {
     /**
      * The row values from the data table in the original column order.
      */
-    data: DataTable.RowObject;
+    data: DataTableRowObject;
     /**
      * The local index of the row in the presentation data table.
      */
     index: number;
     /**
-     * The index of the row in the original data table (ID).
+     * The unique ID of the row.
      */
-    id?: number;
+    id?: RowId;
     /**
      * The vertical translation of the row.
      */
@@ -33,6 +34,7 @@ declare class TableRow extends Row {
      * The index of the row in the data table.
      */
     constructor(viewport: Table, index: number);
+    init(): Promise<void>;
     createCell(column: Column): Cell;
     /**
      * Loads the row data from the data table.
@@ -42,7 +44,7 @@ declare class TableRow extends Row {
      * Updates the row data and its cells with the latest values from the data
      * table.
      */
-    update(): void;
+    update(): Promise<void>;
     /**
      * Adds or removes the hovered CSS class to the row element.
      *
@@ -66,6 +68,14 @@ declare class TableRow extends Row {
      * lifecycle.
      */
     updateRowAttributes(): void;
+    /**
+     * Updates the row parity class based on index.
+     */
+    private updateParityClass;
+    /**
+     * Updates the hovered and synced classes based on grid state.
+     */
+    private updateStateClasses;
     /**
      * Sets the vertical translation of the row. Used for virtual scrolling.
      *

package/es-modules/Grid/Core/Table/Body/TableRow.js

@@ -2,11 +2,11 @@
  *
  *  Grid TableRow class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
@@ -17,6 +17,7 @@
 import Row from '../Row.js';
 import TableCell from './TableCell.js';
 import Globals from '../../Globals.js';
+import { fireEvent } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -56,24 +57,28 @@ class TableRow extends Row {
          */
         this.translateY = 0;
         this.index = index;
-        this.id = viewport.dataTable.getOriginalRowIndex(index);
-        this.loadData();
-        this.setRowAttributes();
     }
     /* *
     *
     *  Methods
     *
     * */
+    async init() {
+        const dp = this.viewport.grid.dataProvider;
+        this.id = await dp?.getRowId(this.index);
+        await this.loadData();
+        this.setRowAttributes();
+    }
     createCell(column) {
         return new TableCell(this, column);
     }
     /**
      * Loads the row data from the data table.
      */
-    loadData() {
-        const data = this.viewport.dataTable.getRowObject(this.index);
+    async loadData() {
+        const data = await this.viewport.grid.dataProvider?.getRowObject(this.index);
         if (!data) {
+            this.data = {};
             return;
         }
         this.data = data;
@@ -82,13 +87,42 @@ class TableRow extends Row {
      * Updates the row data and its cells with the latest values from the data
      * table.
      */
-    update() {
-        this.id = this.viewport.dataTable.getOriginalRowIndex(this.index);
+    async update() {
+        this.id = await this.viewport.grid.dataProvider?.getRowId(this.index);
+        this.updateRowAttributes();
+        await this.loadData();
+        for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
+            const cell = this.cells[i];
+            await cell.setValue();
+        }
+        this.reflow();
+    }
+    /**
+     * Reuses the row instance for a new index.
+     *
+     * @param index
+     * The index of the row in the data table.
+     *
+     * @internal
+     */
+    async reuse(index) {
+        for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
+            fireEvent(this.cells[i], 'outdate');
+        }
+        if (this.index === index) {
+            await this.update();
+            return;
+        }
+        this.index = index;
+        this.id = await this.viewport.grid.dataProvider?.getRowId(this.index);
+        this.htmlElement.setAttribute('data-row-index', index);
         this.updateRowAttributes();
-        this.loadData();
+        this.updateParityClass();
+        this.updateStateClasses();
+        await this.loadData();
         for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
             const cell = this.cells[i];
-            void cell.setValue();
+            await cell.setValue();
         }
         this.reflow();
     }
@@ -127,13 +161,8 @@ class TableRow extends Row {
         el.setAttribute('data-row-index', idx);
         this.updateRowAttributes();
         // Indexing from 0, so rows with even index are odd.
-        el.classList.add(Globals.getClassName(idx % 2 ? 'rowEven' : 'rowOdd'));
-        if (this.viewport.grid.hoveredRowIndex === idx) {
-            el.classList.add(Globals.getClassName('hoveredRow'));
-        }
-        if (this.viewport.grid.syncedRowIndex === idx) {
-            el.classList.add(Globals.getClassName('syncedRow'));
-        }
+        this.updateParityClass();
+        this.updateStateClasses();
     }
     /**
      * Sets the row HTML element attributes that are updateable in the row
@@ -151,6 +180,28 @@ class TableRow extends Row {
         // Calculate levels of header, 1 to avoid indexing from 0
         a11y?.setRowIndex(el, idx + (vp.header?.rows.length ?? 0) + 1);
     }
+    /**
+     * Updates the row parity class based on index.
+     */
+    updateParityClass() {
+        const el = this.htmlElement;
+        el.classList.remove(Globals.getClassName('rowEven'), Globals.getClassName('rowOdd'));
+        // Indexing from 0, so rows with even index are odd.
+        el.classList.add(Globals.getClassName(this.index % 2 ? 'rowEven' : 'rowOdd'));
+    }
+    /**
+     * Updates the hovered and synced classes based on grid state.
+     */
+    updateStateClasses() {
+        const el = this.htmlElement;
+        el.classList.remove(Globals.getClassName('hoveredRow'), Globals.getClassName('syncedRow'));
+        if (this.viewport.grid.hoveredRowIndex === this.index) {
+            el.classList.add(Globals.getClassName('hoveredRow'));
+        }
+        if (this.viewport.grid.syncedRowIndex === this.index) {
+            el.classList.add(Globals.getClassName('syncedRow'));
+        }
+    }
     /**
      * Sets the vertical translation of the row. Used for virtual scrolling.
      *

package/es-modules/Grid/Core/Table/Cell.d.ts

@@ -1,4 +1,5 @@
-import type DataTable from '../../../Data/DataTable';
+import type { CellType as DataTableCellType } from '../../../Data/DataTable';
+import type CSSObject from '../../../Core/Renderer/CSSObject';
 import Column from './Column';
 import Row from './Row';
 declare abstract class Cell {
@@ -17,11 +18,15 @@ declare abstract class Cell {
     /**
      * The raw value of the cell.
      */
-    value: DataTable.CellType;
+    value: DataTableCellType;
     /**
      * An additional, custom class name that can be changed dynamically.
      */
     private customClassName?;
+    /**
+     * Custom inline styles currently applied from user options.
+     */
+    private customStyleProperties?;
     /**
      * Array of cell events to be removed when the cell is destroyed.
      */
@@ -52,17 +57,10 @@ declare abstract class Cell {
      * Handles the blur event on the cell.
      */
     protected onBlur(): void;
-    /**
-     * Handles user keydown on the cell.
-     *
-     * @param e
-     * Keyboard event object.
-     */
-    protected onKeyDown(e: KeyboardEvent): void;
     /**
      * Renders the cell by appending the HTML element to the row.
      */
-    render(): void;
+    render(): Promise<void>;
     /**
      * Reflows the cell dimensions.
      */
@@ -84,6 +82,14 @@ declare abstract class Cell {
      * The template string.
      */
     protected setCustomClassName(template?: string): void;
+    /**
+     * Sets custom inline styles from options and removes the previously applied
+     * custom styles to keep updates deterministic.
+     *
+     * @param styles
+     * A style object to apply.
+     */
+    protected setCustomStyles(styles?: CSSObject): void;
     /**
      * Destroys the cell.
      */