@highcharts/grid-pro 2.2.0 → 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,21 +58,25 @@ 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 updateDataTable;
+    private updateDataset;
     /**
      * Initialize event listeners for table body cells.
      *

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

@@ -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,33 +137,46 @@ 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();

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,17 +44,7 @@ declare class TableRow extends Row {
      * Updates the row data and its cells with the latest values from the data
      * table.
      */
-    update(): void;
-    /**
-     * Reuses the row instance for a new index.
-     *
-     * @param index
-     * The index of the row in the data table.
-     *
-     * @param doReflow
-     * Whether to reflow the row after updating the cells.
-     */
-    reuse(index: number, doReflow?: boolean): void;
+    update(): Promise<void>;
     /**
      * Adds or removes the hovered CSS class to the row element.
      *

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

@@ -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,13 @@ 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();
-        this.loadData();
+        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();
     }
@@ -98,28 +103,28 @@ class TableRow extends Row {
      * @param index
      * The index of the row in the data table.
      *
-     * @param doReflow
-     * Whether to reflow the row after updating the cells.
+     * @internal
      */
-    reuse(index, doReflow = true) {
+    async reuse(index) {
+        for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
+            fireEvent(this.cells[i], 'outdate');
+        }
         if (this.index === index) {
-            this.update();
+            await this.update();
             return;
         }
         this.index = index;
-        this.id = this.viewport.dataTable.getOriginalRowIndex(index);
+        this.id = await this.viewport.grid.dataProvider?.getRowId(this.index);
         this.htmlElement.setAttribute('data-row-index', index);
         this.updateRowAttributes();
         this.updateParityClass();
         this.updateStateClasses();
-        this.loadData();
+        await this.loadData();
         for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
             const cell = this.cells[i];
-            void cell.setValue();
-        }
-        if (doReflow) {
-            this.reflow();
+            await cell.setValue();
         }
+        this.reflow();
     }
     /**
      * Adds or removes the hovered CSS class to the row element.

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.
      */
@@ -55,7 +60,7 @@ declare abstract class Cell {
     /**
      * Renders the cell by appending the HTML element to the row.
      */
-    render(): void;
+    render(): Promise<void>;
     /**
      * Reflows the cell dimensions.
      */
@@ -77,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.
      */

package/es-modules/Grid/Core/Table/Cell.js

@@ -15,8 +15,7 @@
  * */
 'use strict';
 import Templating from '../../../Core/Templating.js';
-import U from '../../../Core/Utilities.js';
-const { fireEvent } = U;
+import { fireEvent } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Abstract Class of Cell
@@ -185,9 +184,10 @@ class Cell {
     /**
      * Renders the cell by appending the HTML element to the row.
      */
-    render() {
+    async render() {
         this.row.htmlElement.appendChild(this.htmlElement);
         this.reflow();
+        return Promise.resolve();
     }
     /**
      * Reflows the cell dimensions.
@@ -235,6 +235,39 @@ class Cell {
         element.classList.add(...newClassName.split(/\s+/g));
         this.customClassName = newClassName;
     }
+    /**
+     * Sets custom inline styles from options and removes the previously applied
+     * custom styles to keep updates deterministic.
+     *
+     * @param styles
+     * A style object to apply.
+     */
+    setCustomStyles(styles) {
+        const elementStyle = this.htmlElement.style;
+        const getCSSPropertyName = (property) => (property.indexOf('-') > -1 ?
+            property :
+            property.replace(/[A-Z]/g, '-$&').toLowerCase());
+        if (this.customStyleProperties) {
+            for (const property of this.customStyleProperties) {
+                elementStyle.removeProperty(property);
+            }
+        }
+        if (!styles) {
+            delete this.customStyleProperties;
+            return;
+        }
+        const appliedProperties = [];
+        for (const key of Object.keys(styles)) {
+            const value = styles[key];
+            if (value === void 0 || value === null) {
+                continue;
+            }
+            const property = getCSSPropertyName(String(key));
+            elementStyle.setProperty(property, String(value));
+            appliedProperties.push(property);
+        }
+        this.customStyleProperties = appliedProperties;
+    }
     /**
      * Destroys the cell.
      */

package/es-modules/Grid/Core/Table/CellContent/TextContent.js

@@ -17,8 +17,7 @@ import AST from '../../../../Core/Renderer/HTML/AST.js';
 import CellContent from './CellContent.js';
 import GridUtils from '../../GridUtils.js';
 const { setHTMLContent } = GridUtils;
-import Utils from '../../../../Core/Utilities.js';
-const { defined, isString } = Utils;
+import { defined } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -77,12 +76,8 @@ class TextContent extends CellContent {
         }
         else if (isDefaultFormat) {
             const formattedValue = formatter?.call(cell);
-            if (isString(formattedValue)) {
-                cellContent = formattedValue;
-            }
-            else {
-                cellContent = value + '';
-            }
+            cellContent = defined(formattedValue) ?
+                String(formattedValue) : value + '';
         }
         else if (isDefaultFormatter) {
             cellContent = format ? cell.format(format) : value + '';

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

@@ -2,8 +2,8 @@ import type { IndividualColumnOptions } from '../Options';
 import type Cell from './Cell';
 import type CellContent from './CellContent/CellContent';
 import type HeaderCell from './Header/HeaderCell';
+import type { Column as DataTableColumn } from '../../../Data/DataTable';
 import Table from './Table.js';
-import DataTable from '../../../Data/DataTable.js';
 import ColumnSorting from './Actions/ColumnSorting';
 import ColumnFiltering from './Actions/ColumnFiltering/ColumnFiltering.js';
 import TableCell from './Body/TableCell';
@@ -18,7 +18,7 @@ export declare class Column {
     /**
      * Type of the data in the column.
      */
-    readonly dataType: ColumnDataType;
+    dataType: ColumnDataType;
     /**
      * The cells of the column.
      */
@@ -28,9 +28,11 @@ export declare class Column {
      */
     id: string;
     /**
-     * The data of the column.
+     * The data of the column. Shouldn't be used directly in all cases, because
+     * it's not guaranteed to be defined (e.g. when using the lazy loading,
+     * `RemoteDataProvider`).
      */
-    data?: DataTable.Column;
+    data?: DataTableColumn;
     /**
      * The options of the column as a proxy that provides merged access to
      * original options and defaults if not defined in the individual options.
@@ -65,6 +67,10 @@ export declare class Column {
      * The index of the column.
      */
     constructor(viewport: Table, id: string, index: number);
+    /**
+     * Initializes the column data-related properties.
+     */
+    init(): Promise<void>;
     /**
      * Loads the data of the column from the viewport's data table.
      */