@highcharts/grid-pro 2.2.0 → 2.3.0

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

@@ -14,13 +14,12 @@
  *
  * */
 'use strict';
-import Utils from '../../../Core/Utilities.js';
 import ColumnFiltering from './Actions/ColumnFiltering/ColumnFiltering.js';
 import Templating from '../../../Core/Templating.js';
 import TextContent from './CellContent/TextContent.js';
 import Globals from '../Globals.js';
 import GridUtils from '../GridUtils.js';
-const { defined, fireEvent } = Utils;
+import { fireEvent } from '../../../Shared/Utilities.js';
 const { createOptionsProxy } = GridUtils;
 /* *
  *
@@ -50,6 +49,10 @@ export class Column {
      */
     constructor(viewport, id, index) {
         var _a;
+        /**
+         * Type of the data in the column.
+         */
+        this.dataType = 'string';
         /**
          * The cells of the column.
          */
@@ -58,8 +61,6 @@ export class Column {
         this.id = id;
         this.index = index;
         this.viewport = viewport;
-        this.loadData();
-        this.dataType = this.assumeDataType();
         // Populate column options map if not exists, to prepare option
         // references for each column.
         if (grid.options && !grid.columnOptionsMap?.[id]) {
@@ -74,18 +75,31 @@ export class Column {
         if (this.options.filtering?.enabled) {
             this.filtering = new ColumnFiltering(this);
         }
-        fireEvent(this, 'afterInit');
     }
     /* *
     *
     *  Methods
     *
     * */
+    /**
+     * Initializes the column data-related properties.
+     */
+    async init() {
+        this.loadData();
+        this.dataType = await this.assumeDataType();
+        fireEvent(this, 'afterInit');
+    }
     /**
      * Loads the data of the column from the viewport's data table.
      */
     loadData() {
-        this.data = this.viewport.dataTable.getColumn(this.id, true);
+        const dp = this.viewport.grid.dataProvider;
+        if (dp && 'getDataTable' in dp) {
+            this.data = dp.getDataTable(true)?.getColumn(this.id, true);
+        }
+        else {
+            delete this.data;
+        }
     }
     /**
      * Creates a cell content instance.
@@ -101,40 +115,15 @@ export class Column {
      * Assumes the data type of the column based on the options or data in the
      * column if not specified.
      */
-    assumeDataType() {
+    async assumeDataType() {
         const { grid } = this.viewport;
+        const dp = grid.dataProvider;
         const type = grid.columnOptionsMap?.[this.id]?.options.dataType ??
             grid.options?.columnDefaults?.dataType;
         if (type) {
             return type;
         }
-        if (!this.data) {
-            return 'string';
-        }
-        if (!Array.isArray(this.data)) {
-            // Typed array
-            return 'number';
-        }
-        for (let i = 0, iEnd = Math.min(this.data.length, 30); i < iEnd; ++i) {
-            if (!defined(this.data[i])) {
-                // If the data is null or undefined, we should look
-                // at the next value to determine the type.
-                continue;
-            }
-            switch (typeof this.data[i]) {
-                case 'number':
-                    return 'number';
-                case 'boolean':
-                    return 'boolean';
-                default:
-                    return 'string';
-            }
-        }
-        // eslint-disable-next-line no-console
-        console.warn(`Column "${this.id}" contains too few data points with ` +
-            'unambiguous types to correctly determine its dataType. It\'s ' +
-            'recommended to set the `dataType` option for it.');
-        return 'string';
+        return (await dp?.getColumnDataType(this.id)) ?? 'string';
     }
     /**
      * Registers a cell in the column.

package/es-modules/Grid/Core/Table/ColumnResizing/IndependentResizingMode.js

@@ -42,15 +42,16 @@ class IndependentResizingMode extends ResizingMode {
         // Set the width of the resized column.
         const width = this.columnWidths[column.id] = Math.round(Math.max((resizer.columnStartWidth || 0) + diff, ResizingMode.getMinWidth(column)) * 10) / 10;
         this.columnWidthUnits[column.id] = 0; // Set to px
-        // Change width units of all columns on the right to px.
+        // Change width units of all columns to px.
         const vp = this.viewport;
-        const colIndex = column.index;
-        for (let i = colIndex; i < vp.columns.length; ++i) {
-            const rightCol = vp.columns[i];
-            const rcWidth = this.columnWidths[rightCol.id] =
-                rightCol.getWidth();
-            this.columnWidthUnits[rightCol.id] = 0; // Set to px
-            rightCol.setOptions({ width: rcWidth });
+        for (let i = 0; i < vp.columns.length; ++i) {
+            const col = vp.columns[i];
+            if (col.id === column.id) {
+                continue;
+            }
+            const colWidth = this.columnWidths[col.id] = col.getWidth();
+            this.columnWidthUnits[col.id] = 0; // Set to px
+            col.setOptions({ width: colWidth });
         }
         column.setOptions({ width });
     }

package/es-modules/Grid/Core/Table/ColumnResizing/ResizingMode.js

@@ -13,8 +13,7 @@
  *
  * */
 'use strict';
-import U from '../../../../Core/Utilities.js';
-const { getStyle, defined } = U;
+import { defined, getStyle } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -86,7 +85,9 @@ class ResizingMode {
      */
     loadColumn(column) {
         const rawWidth = column.options.width;
-        if (!rawWidth) {
+        if (!defined(rawWidth) || rawWidth === 'auto') {
+            delete this.columnWidths[column.id];
+            delete this.columnWidthUnits[column.id];
             return;
         }
         let value;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ColumnToolbar.d.ts

@@ -1,3 +1,4 @@
+import type Grid from '../../../Grid';
 import type Toolbar from '../../../UI/Toolbar';
 import type Column from '../../Column';
 import ToolbarButton from '../../../UI/ToolbarButton.js';
@@ -10,6 +11,10 @@ declare class HeaderCellToolbar implements Toolbar {
      * The column that this toolbar belongs to.
      */
     column: Column;
+    /**
+     * Reference to the Grid instance for icon registry and options.
+     */
+    get grid(): Grid;
     buttons: ToolbarButton[];
     container?: HTMLDivElement;
     focusCursor: number;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ColumnToolbar.js

@@ -18,15 +18,20 @@ import Globals from '../../../Globals.js';
 import SortToolbarButton from './ToolbarButtons/SortToolbarButton.js';
 import FilterToolbarButton from './ToolbarButtons/FilterToolbarButton.js';
 import MenuToolbarButton from './ToolbarButtons/MenuToolbarButton.js';
-import U from '../../../../../Core/Utilities.js';
+import { getStyle } from '../../../../../Shared/Utilities.js';
 const { makeHTMLElement } = GridUtils;
-const { getStyle } = U;
 /* *
  *
  *  Class
  *
  * */
 class HeaderCellToolbar {
+    /**
+     * Reference to the Grid instance for icon registry and options.
+     */
+    get grid() {
+        return this.column.viewport.grid;
+    }
     /* *
      *
      *  Constructor

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/FilterPopup.js

@@ -14,8 +14,7 @@
  * */
 'use strict';
 import Popup from '../../../UI/Popup.js';
-import U from '../../../../../Core/Utilities.js';
-const { merge } = U;
+import { merge } from '../../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuButtons/FilterMenuButton.js

@@ -16,8 +16,7 @@
 import FilterPopup from '../FilterPopup.js';
 import StateHelpers from '../StateHelpers.js';
 import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
-import U from '../../../../../../Core/Utilities.js';
-const { addEvent } = U;
+import { addEvent } from '../../../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/MenuButtons/SortMenuButton.js

@@ -15,8 +15,7 @@
 'use strict';
 import ContextMenuButton from '../../../../UI/ContextMenuButton.js';
 import StateHelpers from '../StateHelpers.js';
-import U from '../../../../../../Core/Utilities.js';
-const { addEvent } = U;
+import { addEvent } from '../../../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -29,7 +28,7 @@ class SortMenuButton extends ContextMenuButton {
      *
      * */
     constructor(langOptions, direction) {
-        super({ icon: direction === 'asc' ? 'sortAsc' : 'sortDesc' });
+        super({ icon: direction === 'asc' ? 'arrowUp' : 'arrowDown' });
         this.direction = direction;
         this.baseLabel = langOptions[direction === 'asc' ? 'sortAscending' : 'sortDescending'] || '';
         this.options.label = this.baseLabel;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/FilterToolbarButton.js

@@ -16,8 +16,7 @@
 import FilterPopup from '../FilterPopup.js';
 import ToolbarButton from '../../../../UI/ToolbarButton.js';
 import StateHelpers from '../StateHelpers.js';
-import U from '../../../../../../Core/Utilities.js';
-const { addEvent } = U;
+import { addEvent } from '../../../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/MenuToolbarButton.js

@@ -16,8 +16,7 @@
 import ToolbarButton from '../../../../UI/ToolbarButton.js';
 import StateHelpers from '../StateHelpers.js';
 import MenuPopup from '../MenuPopup.js';
-import U from '../../../../../../Core/Utilities.js';
-const { addEvent } = U;
+import { addEvent } from '../../../../../../Shared/Utilities.js';
 /* *
  *
  *  Class

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/SortToolbarButton.d.ts

@@ -10,6 +10,5 @@ declare class SortToolbarButton extends ToolbarButton {
     private renderSortPriorityIndicator;
     refreshState(): void;
     protected addEventListeners(): void;
-    protected renderActiveIndicator(render: boolean): void;
 }
 export default SortToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/SortToolbarButton.js

@@ -15,11 +15,9 @@
 'use strict';
 import ToolbarButton from '../../../../UI/ToolbarButton.js';
 import GridUtils from '../../../../GridUtils.js';
-import Globals from '../../../../Globals.js';
 import StateHelpers from '../StateHelpers.js';
-import U from '../../../../../../Core/Utilities.js';
+import { addEvent } from '../../../../../../Shared/Utilities.js';
 const { formatText } = GridUtils;
-const { addEvent } = U;
 /* *
  *
  *  Class
@@ -75,8 +73,7 @@ class SortToolbarButton extends ToolbarButton {
      * */
     constructor() {
         super({
-            icon: 'upDownArrows',
-            classNameKey: 'headerCellSortIcon',
+            icon: 'arrowUpDown',
             accessibility: {
                 ariaLabel: 'sort'
             }
@@ -107,7 +104,6 @@ class SortToolbarButton extends ToolbarButton {
         }
         if (!this.sortPriorityIndicator) {
             this.sortPriorityIndicator = document.createElement('span');
-            this.sortPriorityIndicator.className = Globals.getClassName('sortPriorityIndicator');
         }
         // Ensure the indicator is rendered to the right of the icon.
         button.appendChild(this.sortPriorityIndicator);
@@ -126,13 +122,13 @@ class SortToolbarButton extends ToolbarButton {
                 void 0));
         if (!StateHelpers.isSorted(column) || !columnSorting?.order) {
             this.setActive(false);
-            this.setIcon('upDownArrows');
+            this.setIcon('arrowUpDown');
             this.renderSortPriorityIndicator();
             this.updateA11yLabel(null);
             return;
         }
         this.setActive(true);
-        this.setIcon(columnSorting.order === 'asc' ? 'sortAsc' : 'sortDesc');
+        this.setIcon(columnSorting.order === 'asc' ? 'arrowUp' : 'arrowDown');
         const sortIndex = sortings.findIndex((sorting) => sorting.columnId === column.id);
         const priority = (sortings.length > 1 && sortIndex !== -1 ?
             sortIndex + 1 :
@@ -149,12 +145,6 @@ class SortToolbarButton extends ToolbarButton {
         // If this grid is currently sorted, update the state
         this.eventListenerDestroyers.push(addEvent(column.viewport.grid, 'afterSort', () => this.refreshState()));
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    renderActiveIndicator(render) {
-        // Sorting uses directional icons + priority indicators
-        // (for multi-sort), not the generic active dot indicator
-        // (reserved for filtering).
-    }
 }
 /* *
  *

package/es-modules/Grid/Core/Table/Header/HeaderCell.d.ts

@@ -53,7 +53,12 @@ declare class HeaderCell extends Cell {
     /**
      * Render the cell container.
      */
-    render(): void;
+    render(): Promise<void>;
+    /**
+     * Returns merged header styles from defaults and current column options.
+     *
+     */
+    private getColumnStyles;
     reflow(): void;
     onKeyDown(e: KeyboardEvent): void;
     onClick(e: MouseEvent): void;

package/es-modules/Grid/Core/Table/Header/HeaderCell.js

@@ -15,13 +15,11 @@
  * */
 'use strict';
 import Cell from '../Cell.js';
-import GridUtils from '../../GridUtils.js';
+import { makeHTMLElement, setHTMLContent, createOptionsProxy, resolveStyleValue, mergeStyleValues } from '../../GridUtils.js';
 import ColumnSorting from '../Actions/ColumnSorting.js';
 import Globals from '../../Globals.js';
-import Utilities from '../../../../Core/Utilities.js';
 import ColumnToolbar from './ColumnToolbar/ColumnToolbar.js';
-const { makeHTMLElement, setHTMLContent, createOptionsProxy } = GridUtils;
-const { fireEvent, isString } = Utilities;
+import { fireEvent, isString } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -102,12 +100,14 @@ class HeaderCell extends Cell {
     /**
      * Render the cell container.
      */
-    render() {
+    async render() {
         const { column } = this;
         const options = createOptionsProxy(this.superColumnOptions, column?.options);
         const headerCellOptions = options.header || {};
-        if (column && headerCellOptions.formatter) {
-            this.value = headerCellOptions.formatter.call(column).toString();
+        const headerValue = column ?
+            headerCellOptions.formatter?.call(column) : void 0;
+        if (headerValue) {
+            this.value = headerValue.toString();
         }
         else if (isString(headerCellOptions.format)) {
             this.value = column ?
@@ -151,7 +151,25 @@ class HeaderCell extends Cell {
         this.htmlElement.classList[column?.dataType === 'number' ? 'add' : 'remove'](Globals.getClassName('rightAlign'));
         // Add custom class name from column options
         this.setCustomClassName(options.header?.className);
+        this.setCustomStyles(this.getColumnStyles());
         fireEvent(this, 'afterRender', { column });
+        return Promise.resolve();
+    }
+    /**
+     * Returns merged header styles from defaults and current column options.
+     *
+     */
+    getColumnStyles() {
+        const { column } = this;
+        if (!column) {
+            return resolveStyleValue(this.superColumnOptions.header?.style);
+        }
+        const { grid } = this.row.viewport;
+        const rawColumnOptions = grid.columnOptionsMap?.[column.id]?.options;
+        return {
+            ...mergeStyleValues(column, grid.options?.columnDefaults?.style, rawColumnOptions?.style),
+            ...mergeStyleValues(column, grid.options?.columnDefaults?.header?.style, rawColumnOptions?.header?.style)
+        };
     }
     reflow() {
         const th = this.htmlElement;
@@ -179,14 +197,16 @@ class HeaderCell extends Cell {
         super.onKeyDown(e);
     }
     onClick(e) {
-        const column = this.column;
-        if (!column || (e.target !== this.htmlElement &&
-            e.target !== column.header?.headerContent) || column.viewport.columnsResizer?.isResizing) {
+        if (!this.column ||
+            !this.htmlElement.contains(e.target) ||
+            this.column.viewport.columnsResizer?.isResizing) {
             return;
         }
-        if ((column.options.sorting?.enabled ??
-            column.options.sorting?.sortable)) {
-            column.sorting?.toggle(e);
+        // Toggle sort only when clicking header text/area, not toolbar icons
+        if (!this.toolbar?.container?.contains(e.target) &&
+            (this.column.options.sorting?.enabled ??
+                this.column.options.sorting?.sortable)) {
+            this.column.sorting?.toggle(e);
         }
         fireEvent(this, 'click', {
             originalEvent: e,

package/es-modules/Grid/Core/Table/Header/HeaderRow.js

@@ -17,8 +17,7 @@
 import Row from '../Row.js';
 import HeaderCell from './HeaderCell.js';
 import Globals from '../../Globals.js';
-import Utils from '../../../../Core/Utilities.js';
-const { isString } = Utils;
+import { isString } from '../../../../Shared/Utilities.js';
 /* *
  *
  *  Class
@@ -63,7 +62,7 @@ class HeaderRow extends Row {
      *
      * @internal
      */
-    renderContent(level) {
+    async renderContent(level) {
         const headerOpt = this.viewport.grid.options?.header;
         const vp = this.viewport;
         const enabledColumns = vp.grid.enabledColumns || [];
@@ -71,7 +70,7 @@ class HeaderRow extends Row {
         vp.theadElement?.appendChild(this.htmlElement);
         this.htmlElement.classList.add(Globals.getClassName('headerRow'));
         if (!headerOpt) {
-            super.render();
+            await super.render();
         }
         else {
             const columnsOnLevel = this.getColumnsAtLevel(headerOpt, level);
@@ -110,7 +109,7 @@ class HeaderRow extends Row {
                 if (dataColumn?.index === 0 && i === 0) {
                     headerCell.htmlElement.classList.add(Globals.getClassName('columnFirst'));
                 }
-                headerCell.render();
+                await headerCell.render();
                 if (columnId) {
                     headerCell.htmlElement.setAttribute('rowSpan', (this.viewport.header?.levels || 1) - level);
                 }

package/es-modules/Grid/Core/Table/Header/TableHeader.d.ts

@@ -33,7 +33,7 @@ declare class TableHeader {
     /**
      * Renders the table head content.
      */
-    render(): void;
+    render(): Promise<void>;
     /**
      * Reflows the table head's content dimensions.
      */

package/es-modules/Grid/Core/Table/Header/TableHeader.js

@@ -70,7 +70,7 @@ class TableHeader {
     /**
      * Renders the table head content.
      */
-    render() {
+    async render() {
         const vp = this.viewport;
         if (!vp.grid.enabledColumns) {
             return;
@@ -78,14 +78,14 @@ class TableHeader {
         // Render regular, multiple level rows.
         for (let i = 0, iEnd = this.levels; i < iEnd; i++) {
             const row = new HeaderRow(vp, i + 1); // Avoid indexing from 0
-            row.renderContent(i);
+            await row.renderContent(i);
             this.rows.push(row);
         }
         // Render an extra row for inline filtering.
         if (vp.columns.some((column) => (column.options.filtering?.enabled &&
             column.options.filtering.inline) || false)) {
             const row = new FilterRow(vp);
-            row.renderContent();
+            await row.renderContent();
             this.rows.push(row);
         }
     }

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

@@ -39,7 +39,7 @@ declare abstract class Row {
      * Renders the row's content. It does not attach the row element to the
      * viewport nor pushes the rows to the viewport.rows array.
      */
-    render(): void;
+    render(): Promise<void>;
     /**
      * Reflows the row's content dimensions.
      */

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

@@ -54,11 +54,11 @@ class Row {
      * Renders the row's content. It does not attach the row element to the
      * viewport nor pushes the rows to the viewport.rows array.
      */
-    render() {
+    async render() {
         const columns = this.viewport.columns;
         for (let i = 0, iEnd = columns.length; i < iEnd; i++) {
             const cell = this.createCell(columns[i]);
-            cell.render();
+            await cell.render();
         }
         this.rendered = true;
         if (this.viewport.virtualRows) {

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

@@ -1,5 +1,6 @@
 import type TableRow from './Body/TableRow';
-import DataTable from '../../../Data/DataTable.js';
+import type DataTable from '../../../Data/DataTable';
+import type { RowId } from '../Data/DataProvider';
 import ColumnResizingMode from './ColumnResizing/ResizingMode.js';
 import Column from './Column.js';
 import TableHeader from './Header/TableHeader.js';
@@ -13,14 +14,6 @@ declare class Table {
      * The data grid instance which the table (viewport) belongs to.
      */
     readonly grid: Grid;
-    /**
-     * The presentation version of the data table. It has applied modifiers
-     * and is ready to be rendered.
-     *
-     * If you want to modify the data table, you should use the original
-     * instance that is stored in the `grid.dataTable` property.
-     */
-    dataTable: DataTable;
     /**
      * The HTML element of the table.
      */
@@ -63,6 +56,10 @@ declare class Table {
      * The flag that indicates if the table rows are virtualized.
      */
     virtualRows: boolean;
+    /**
+     * Cell context menu instance (lazy created).
+     */
+    private cellContextMenu?;
     /**
      * Constructs a new data grid table.
      *
@@ -74,9 +71,17 @@ declare class Table {
      */
     constructor(grid: Grid, tableElement: HTMLTableElement);
     /**
-     * Initializes the data grid table.
+     * The presentation version of the data table. It has applied modifiers
+     * and is ready to be rendered.
+     *
+     * @deprecated Use `grid.dataProvider` instead.
+     */
+    get dataTable(): DataTable | undefined;
+    /**
+     * Initializes the table. Should be called after creation so that the table
+     * can be asynchronously initialized.
      */
-    private init;
+    init(): Promise<void>;
     /**
      * Sets the minimum height of the table body.
      */
@@ -125,6 +130,11 @@ declare class Table {
      * @param e Mouse event
      */
     private onCellDblClick;
+    /**
+     * Delegated context menu handler for cells.
+     * @param e Mouse event
+     */
+    private onCellContextMenu;
     /**
      * Delegated mousedown handler for cells.
      * @param e Mouse event
@@ -145,6 +155,22 @@ declare class Table {
      * @param e Keyboard event
      */
     private onCellKeyDown;
+    /**
+     * Opens a cell context menu if configured and enabled.
+     *
+     * @param tableCell
+     * The target cell.
+     *
+     * @param clientX
+     * The viewport X coordinate for anchoring.
+     *
+     * @param clientY
+     * The viewport Y coordinate for anchoring.
+     *
+     * @returns
+     * True if the menu was opened.
+     */
+    private openCellContextMenu;
     /**
      * Scrolls the table to the specified row.
      *
@@ -194,7 +220,7 @@ declare class Table {
      * @param id
      * The ID of the row.
      */
-    getRow(id: number): TableRow | undefined;
+    getRow(id: RowId): TableRow | undefined;
 }
 /**
  * Represents the metadata of the viewport state. It is used to save the