@highcharts/grid-pro 2.2.0 → 2.3.0

package/es-modules/Grid/Core/Data/LocalDataProvider.js

@@ -0,0 +1,341 @@
+/* *
+ *
+ *  Local Data Provider class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *
+ * */
+'use strict';
+import { DataProvider } from './DataProvider.js';
+import DataTable from '../../../Data/DataTable.js';
+import ChainModifier from '../../../Data/Modifiers/ChainModifier.js';
+import DataConnector from '../../../Data/Connectors/DataConnector.js';
+import DataProviderRegistry from './DataProviderRegistry.js';
+import { uniqueKey } from '../../../Core/Utilities.js';
+import { defined, isNumber, isString } from '../../../Shared/Utilities.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Local data provider for the Grid.
+ *
+ * Uses a DataTable instances to serve data to the grid, applying query
+ * modifiers and persisting edits locally.
+ */
+export class LocalDataProvider extends DataProvider {
+    constructor() {
+        super(...arguments);
+        /**
+         * Unbind callbacks for DataTable events.
+         */
+        this.dataTableEventDestructors = [];
+        /**
+         * Unbind callbacks for connector events.
+         */
+        this.connectorEventDestructors = [];
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    async init() {
+        if (this.dataTable) {
+            return;
+        }
+        await this.initDataTable();
+    }
+    async initDataTable() {
+        this.querying.shouldBeUpdated = true;
+        this.clearDataTableEvents();
+        this.clearConnector();
+        if (this.options.connector) {
+            await this.initConnector(this.options.connector);
+            return;
+        }
+        let dataTable = this.options.dataTable;
+        if (!dataTable) {
+            dataTable = new DataTable({
+                columns: this.options.columns ?? {}
+            });
+        }
+        this.setDataTable(dataTable);
+    }
+    setDataTable(table) {
+        this.dataTable = table;
+        this.presentationTable = table.getModified();
+        this.prePaginationRowCount = this.presentationTable?.rowCount ?? 0;
+        for (const eventName of LocalDataProvider.tableChangeEventNames) {
+            const fn = table.on(eventName, (e) => {
+                void this.handleTableChange(e);
+            });
+            this.dataTableEventDestructors.push(fn);
+        }
+        const idColId = this.options.idColumn;
+        if (idColId) {
+            const idColumn = table.getColumn(idColId, true);
+            if (!idColumn) {
+                throw new Error(`Column "${idColId}" not found in table.`);
+            }
+            const map = new Map();
+            for (let i = 0, len = idColumn.length; i < len; ++i) {
+                const value = idColumn[i];
+                if (!isString(value) && !isNumber(value)) {
+                    throw new Error('idColumn must contain only string or number values.');
+                }
+                map.set(value, i);
+            }
+            if (map.size !== idColumn.length) {
+                throw new Error('idColumn must contain unique values.');
+            }
+            this.originalRowIndexesMap = map;
+        }
+    }
+    async handleTableChange(e) {
+        this.querying.shouldBeUpdated = true;
+        const grid = this.querying.grid;
+        if (!grid?.viewport) {
+            return;
+        }
+        if (e.type === 'afterSetCell' && e.detail?.fromGrid) {
+            return;
+        }
+        if (this.options.updateOnChange) {
+            await grid.viewport.updateRows();
+        }
+        // TODO: Handle this when Polling emits proper events.
+        // grid.dirtyFlags.add((
+        //     eventName === 'afterDeleteColumns' ||
+        //     eventName === 'afterSetColumns'
+        // ) ? 'grid' : 'rows');
+        // await grid.redraw();
+    }
+    clearDataTableEvents() {
+        this.dataTableEventDestructors.forEach((fn) => fn());
+        this.dataTableEventDestructors.length = 0;
+    }
+    clearConnector() {
+        this.connectorEventDestructors.forEach((fn) => fn());
+        this.connectorEventDestructors.length = 0;
+        this.connector?.stopPolling();
+        this.connector = void 0;
+    }
+    async initConnector(connectorInput) {
+        let connector;
+        if (LocalDataProvider.isConnectorInstance(connectorInput)) {
+            connector = connectorInput;
+        }
+        else {
+            const ConnectorClass = DataConnector.types[connectorInput.type];
+            if (!ConnectorClass) {
+                throw new Error(`Connector type not found. (${connectorInput.type})`);
+            }
+            if (!connectorInput.id) {
+                connectorInput.id = 'connector-' + uniqueKey();
+            }
+            connector = new ConnectorClass(connectorInput);
+        }
+        this.connector = connector;
+        this.connectorEventDestructors.push(connector.on('afterLoad', () => {
+            this.querying.shouldBeUpdated = true;
+        }));
+        this.setDataTable(connector.getTable());
+        if ('enablePolling' in connector.options &&
+            connector.options.enablePolling &&
+            !connector.polling &&
+            'dataRefreshRate' in connector.options) {
+            connector.startPolling(Math.max(connector.options.dataRefreshRate || 0, 1) * 1000);
+        }
+        if (!connector.loaded) {
+            try {
+                await connector.load();
+            }
+            catch {
+                return;
+            }
+        }
+    }
+    getColumnIds() {
+        return Promise.resolve(this.presentationTable?.getColumnIds() ?? []);
+    }
+    /**
+     * Returns the row ID for a given local row index. If not found, returns
+     * `undefined`.
+     *
+     * If the `data.idColumn` option is set, the row ID is the value of the
+     * row in the column with the given ID. Otherwise, the row ID is the
+     * original row index.
+     *
+     * @param rowIndex
+     * The local (presentation table) row index to get the row ID for.
+     */
+    async getRowId(rowIndex) {
+        const originalRowIndex = await this.getOriginalRowIndexFromLocal(rowIndex);
+        if (!defined(originalRowIndex) || !this.dataTable) {
+            return Promise.resolve(void 0);
+        }
+        const idColId = this.options.idColumn;
+        if (!idColId) {
+            return Promise.resolve(originalRowIndex);
+        }
+        const rawId = this.dataTable.getCell(idColId, originalRowIndex);
+        if (isString(rawId) || isNumber(rawId)) {
+            return Promise.resolve(rawId);
+        }
+    }
+    /**
+     * Returns the local (presentation table) row index for a given row ID. If
+     * not found, returns `undefined`.
+     *
+     * @param rowId
+     * The row ID to get the row index for. If the `data.idColumn` option is
+     * set, the row ID is the value of the row in the column with the given ID.
+     * Otherwise, the row ID is the original row index.
+     */
+    getRowIndex(rowId) {
+        if (!this.originalRowIndexesMap && isNumber(rowId)) {
+            return this.getLocalRowIndexFromOriginal(rowId);
+        }
+        const originalRowIndex = this.originalRowIndexesMap?.get(rowId);
+        if (!defined(originalRowIndex)) {
+            return Promise.resolve(void 0);
+        }
+        return this.getLocalRowIndexFromOriginal(originalRowIndex);
+    }
+    /**
+     * Returns the original row index for a given local row index.
+     *
+     * @param localRowIndex
+     * The local row index to get the original row index for.
+     */
+    getOriginalRowIndexFromLocal(localRowIndex) {
+        return Promise.resolve(this.presentationTable?.getOriginalRowIndex(localRowIndex));
+    }
+    /**
+     * Returns the local (presentation table) row index for a given original
+     * data table row index.
+     *
+     * @param originalRowIndex
+     * The original data table row index to get the presentation table row index
+     * for.
+     */
+    getLocalRowIndexFromOriginal(originalRowIndex) {
+        return Promise.resolve(this.presentationTable?.getLocalRowIndex(originalRowIndex));
+    }
+    getRowObject(rowIndex) {
+        return Promise.resolve(this.presentationTable?.getRowObject(rowIndex));
+    }
+    getPrePaginationRowCount() {
+        return Promise.resolve(this.prePaginationRowCount ?? 0);
+    }
+    getRowCount() {
+        return Promise.resolve(this.presentationTable?.getRowCount() ?? 0);
+    }
+    getValue(columnId, rowIndex) {
+        return Promise.resolve(this.presentationTable?.getCell(columnId, rowIndex));
+    }
+    async setValue(value, columnId, rowId) {
+        const localRowIndex = await this.getRowIndex(rowId);
+        if (!defined(localRowIndex)) {
+            // eslint-disable-next-line no-console
+            console.error('[setValue] Wrong row ID:', rowId);
+            return;
+        }
+        const rowIndex = await this.getOriginalRowIndexFromLocal(localRowIndex);
+        if (!defined(rowIndex)) {
+            // eslint-disable-next-line no-console
+            console.error('[setValue] Wrong local row index:', localRowIndex);
+            return;
+        }
+        this.dataTable?.setCell(columnId, rowIndex, value, { fromGrid: true });
+        return;
+    }
+    /**
+     * Applies querying modifiers and updates the presentation table.
+     */
+    async applyQuery() {
+        const controller = this.querying;
+        const originalDataTable = this.dataTable;
+        if (!originalDataTable) {
+            return;
+        }
+        const groupedModifiers = controller.getGroupedModifiers();
+        let interTable;
+        // Grouped modifiers
+        if (groupedModifiers.length > 0) {
+            const chainModifier = new ChainModifier({}, ...groupedModifiers);
+            const dataTableCopy = originalDataTable.clone();
+            await chainModifier.modify(dataTableCopy.getModified());
+            interTable = dataTableCopy.getModified();
+        }
+        else {
+            interTable = originalDataTable.getModified();
+        }
+        this.prePaginationRowCount = interTable.rowCount;
+        // Pagination modifier
+        const paginationModifier = controller.pagination.createModifier(interTable.rowCount);
+        if (paginationModifier) {
+            interTable = interTable.clone();
+            await paginationModifier.modify(interTable);
+            interTable = interTable.getModified();
+        }
+        this.presentationTable = interTable;
+    }
+    destroy() {
+        this.clearDataTableEvents();
+        this.clearConnector();
+    }
+    getColumnDataType(columnId) {
+        const column = this.dataTable?.getColumn(columnId);
+        if (!column) {
+            return Promise.resolve('string');
+        }
+        if (!Array.isArray(column)) {
+            // Typed array
+            return Promise.resolve('number');
+        }
+        return Promise.resolve(DataProvider.assumeColumnDataType(column.slice(0, 30), columnId));
+    }
+    /**
+     * Returns the current data table. When `presentation` is `true`, returns
+     * the presentation table (after modifiers).
+     *
+     * @param presentation
+     * Whether to return the presentation table (after modifiers).
+     *
+     * @return
+     * The data table.
+     */
+    getDataTable(presentation = false) {
+        return presentation ? this.presentationTable : this.dataTable;
+    }
+    /**
+     * Checks if the object is an instance of DataConnector.
+     *
+     * @param connector
+     * The object to check.
+     *
+     * @returns `true` if the object is an instance of DataConnector, `false`
+     * otherwise.
+     */
+    static isConnectorInstance(connector) {
+        return 'getTable' in connector;
+    }
+}
+LocalDataProvider.tableChangeEventNames = [
+    'afterDeleteColumns',
+    'afterDeleteRows',
+    'afterSetCell',
+    'afterSetColumns',
+    'afterSetRows'
+];
+DataProviderRegistry.registerDataProvider('local', LocalDataProvider);

package/es-modules/Grid/Core/Defaults.js

@@ -15,8 +15,7 @@
  * */
 'use strict';
 import Pagination from './Pagination/Pagination.js';
-import Utils from '../../Core/Utilities.js';
-const { merge } = Utils;
+import { merge } from '../../Shared/Utilities.js';
 /**
  * Default language options for the Grid.
  */
@@ -109,6 +108,9 @@ export const defaultOptions = {
             afterGridFormat: 'End of Grid.'
         }
     },
+    data: {
+        providerType: 'local'
+    },
     time: {
         timezone: 'UTC'
     },

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

@@ -3,7 +3,7 @@ export type DeepRequired<T> = {
 };
 export type ClassNameKey = keyof typeof rawClassNames;
 export declare const classNamePrefix: string;
-export declare const version = "2.2.0";
+export declare const version = "2.3.0";
 export declare const rawClassNames: {
     readonly container: "container";
     readonly tableElement: "table";
@@ -40,7 +40,6 @@ export declare const rawClassNames: {
     readonly columnSortableIcon: "column-sortable-icon";
     readonly columnSortedAsc: "column-sorted-asc";
     readonly columnSortedDesc: "column-sorted-desc";
-    readonly sortPriorityIndicator: "sort-priority-indicator";
     readonly resizableContent: "resizable-content";
     readonly resizerHandles: "column-resizer";
     readonly resizedColumn: "column-resized";
@@ -55,12 +54,12 @@ export declare const rawClassNames: {
     readonly popup: "popup";
     readonly button: "button";
     readonly buttonSelected: "button-selected";
+    readonly buttonHighlighted: "button-highlighted";
     readonly input: "input";
     readonly icon: "icon";
     readonly iconSearch: "icon-search";
     readonly popupContent: "popup-content";
     readonly columnFilterWrapper: "column-filter-wrapper";
-    readonly toolbarButtonActiveIndicator: "active-indicator";
     readonly menuContainer: "menu-container";
     readonly menuItem: "menu-item";
     readonly menuHeader: "menu-header";
@@ -70,13 +69,16 @@ export declare const rawClassNames: {
     readonly menuItemLabel: "menu-item-label";
     readonly menuDivider: "menu-divider";
     readonly clearFilterButton: "clear-filter-button";
-    readonly paginationWrapper: "pagination-wrapper";
-    readonly paginationContainer: "pagination-container";
+    readonly pagination: "pagination";
     readonly paginationPageInfo: "pagination-info";
-    readonly paginationControlsContainer: "pagination-controls-container";
-    readonly paginationNavButtonsContainer: "pagination-nav-buttons-container";
-    readonly paginationNavDropdown: "pagination-nav-dropdown";
+    readonly paginationControls: "pagination-controls";
     readonly paginationPageSize: "pagination-page-size";
+    readonly paginationPages: "pagination-pages";
+    readonly paginationNavDropdown: "pagination-nav-dropdown";
+    readonly paginationLeft: "pagination-left";
+    readonly paginationCenter: "pagination-center";
+    readonly paginationRight: "pagination-right";
+    readonly paginationDistributed: "pagination-distributed";
     readonly noWidth: "no-width";
     readonly rightAlign: "right";
     readonly centerAlign: "center";
@@ -90,7 +92,7 @@ export declare const isSafari: boolean;
 export declare const getClassName: (classNameKey: ClassNameKey) => string;
 declare const _default: {
     readonly classNamePrefix: string;
-    readonly version: "2.2.0";
+    readonly version: "2.3.0";
     readonly rawClassNames: {
         readonly container: "container";
         readonly tableElement: "table";
@@ -127,7 +129,6 @@ declare const _default: {
         readonly columnSortableIcon: "column-sortable-icon";
         readonly columnSortedAsc: "column-sorted-asc";
         readonly columnSortedDesc: "column-sorted-desc";
-        readonly sortPriorityIndicator: "sort-priority-indicator";
         readonly resizableContent: "resizable-content";
         readonly resizerHandles: "column-resizer";
         readonly resizedColumn: "column-resized";
@@ -142,12 +143,12 @@ declare const _default: {
         readonly popup: "popup";
         readonly button: "button";
         readonly buttonSelected: "button-selected";
+        readonly buttonHighlighted: "button-highlighted";
         readonly input: "input";
         readonly icon: "icon";
         readonly iconSearch: "icon-search";
         readonly popupContent: "popup-content";
         readonly columnFilterWrapper: "column-filter-wrapper";
-        readonly toolbarButtonActiveIndicator: "active-indicator";
         readonly menuContainer: "menu-container";
         readonly menuItem: "menu-item";
         readonly menuHeader: "menu-header";
@@ -157,13 +158,16 @@ declare const _default: {
         readonly menuItemLabel: "menu-item-label";
         readonly menuDivider: "menu-divider";
         readonly clearFilterButton: "clear-filter-button";
-        readonly paginationWrapper: "pagination-wrapper";
-        readonly paginationContainer: "pagination-container";
+        readonly pagination: "pagination";
         readonly paginationPageInfo: "pagination-info";
-        readonly paginationControlsContainer: "pagination-controls-container";
-        readonly paginationNavButtonsContainer: "pagination-nav-buttons-container";
-        readonly paginationNavDropdown: "pagination-nav-dropdown";
+        readonly paginationControls: "pagination-controls";
         readonly paginationPageSize: "pagination-page-size";
+        readonly paginationPages: "pagination-pages";
+        readonly paginationNavDropdown: "pagination-nav-dropdown";
+        readonly paginationLeft: "pagination-left";
+        readonly paginationCenter: "pagination-center";
+        readonly paginationRight: "pagination-right";
+        readonly paginationDistributed: "pagination-distributed";
         readonly noWidth: "no-width";
         readonly rightAlign: "right";
         readonly centerAlign: "center";

package/es-modules/Grid/Core/Globals.js

@@ -18,7 +18,7 @@
  *
  * */
 export const classNamePrefix = 'hcg-';
-export const version = '2.2.0';
+export const version = '2.3.0';
 export const rawClassNames = {
     container: 'container',
     tableElement: 'table',
@@ -55,7 +55,6 @@ export const rawClassNames = {
     columnSortableIcon: 'column-sortable-icon',
     columnSortedAsc: 'column-sorted-asc',
     columnSortedDesc: 'column-sorted-desc',
-    sortPriorityIndicator: 'sort-priority-indicator',
     resizableContent: 'resizable-content',
     resizerHandles: 'column-resizer',
     resizedColumn: 'column-resized',
@@ -70,12 +69,12 @@ export const rawClassNames = {
     popup: 'popup',
     button: 'button',
     buttonSelected: 'button-selected',
+    buttonHighlighted: 'button-highlighted',
     input: 'input',
     icon: 'icon',
     iconSearch: 'icon-search',
     popupContent: 'popup-content',
     columnFilterWrapper: 'column-filter-wrapper',
-    toolbarButtonActiveIndicator: 'active-indicator',
     menuContainer: 'menu-container',
     menuItem: 'menu-item',
     menuHeader: 'menu-header',
@@ -85,13 +84,16 @@ export const rawClassNames = {
     menuItemLabel: 'menu-item-label',
     menuDivider: 'menu-divider',
     clearFilterButton: 'clear-filter-button',
-    paginationWrapper: 'pagination-wrapper',
-    paginationContainer: 'pagination-container',
+    pagination: 'pagination',
     paginationPageInfo: 'pagination-info',
-    paginationControlsContainer: 'pagination-controls-container',
-    paginationNavButtonsContainer: 'pagination-nav-buttons-container',
-    paginationNavDropdown: 'pagination-nav-dropdown',
+    paginationControls: 'pagination-controls',
     paginationPageSize: 'pagination-page-size',
+    paginationPages: 'pagination-pages',
+    paginationNavDropdown: 'pagination-nav-dropdown',
+    paginationLeft: 'pagination-left',
+    paginationCenter: 'pagination-center',
+    paginationRight: 'pagination-right',
+    paginationDistributed: 'pagination-distributed',
     noWidth: 'no-width',
     rightAlign: 'right',
     centerAlign: 'center',

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

@@ -1,4 +1,5 @@
 import type { ColumnSortingOrder, Options, GroupedHeaderOptions } from './Options';
+import type { DataProviderType } from './Data/DataProviderType';
 import type { NoIdColumnOptions } from './Table/Column';
 import type Popup from './UI/Popup.js';
 import Accessibility from './Accessibility/Accessibility.js';
@@ -69,11 +70,6 @@ export declare class Grid {
      * The content container of the Grid.
      */
     contentWrapper?: HTMLElement;
-    /**
-     * The data source of the Grid. It contains the original data table
-     * that was passed to the Grid.
-     */
-    dataTable?: DataTable;
     /**
      * The description element of the Grid.
      */
@@ -82,12 +78,6 @@ export declare class Grid {
      * The container element of the loading indicator overlaying the Grid.
      */
     loadingWrapper?: HTMLElement;
-    /**
-     * The presentation table of the Grid. It contains a modified version
-     * of the data table that is used for rendering the Grid content. If
-     * not modified, just a reference to the original data table.
-     */
-    presentationTable?: DataTable;
     /**
      * The HTML element of the table.
      */
@@ -117,16 +107,11 @@ export declare class Grid {
     /**
      * The unique ID of the Grid.
      */
-    id: string;
+    readonly id: string;
     /**
      * The list of currently shown popups.
      */
     popups: Set<Popup>;
-    /**
-     * Functions that unregister events attached to the grid's data table,
-     * that need to be removed when the grid is destroyed.
-     */
-    private dataTableEventDestructors;
     /**
      * The render target (container) of the Grid.
      */
@@ -135,6 +120,14 @@ export declare class Grid {
      * Whether the Grid is rendered.
      */
     private isRendered;
+    /**
+     * Internal redraw queue used to prevent concurrent `redraw()` calls from
+     * interleaving async DOM work and corrupting the state (for example
+     * rendering duplicate pagination controls when `update()` is called
+     * multiple times without awaiting).
+     */
+    private redrawQueue;
+    dataProvider?: DataProviderType;
     /**
      * Constructs a new Grid.
      *
@@ -148,6 +141,21 @@ export declare class Grid {
      * The callback that is called after the Grid is loaded.
      */
     constructor(renderTo: string | HTMLElement, options: Options, afterLoadCallback?: (grid: Grid) => void);
+    /**
+     * The data source of the Grid. It contains the original data table
+     * that was passed to the Grid.
+     *
+     * @deprecated Use `dataProvider` instead.
+     */
+    get dataTable(): DataTable | undefined;
+    /**
+     * The presentation table of the Grid. It contains a modified version
+     * of the data table that is used for rendering the Grid content. If
+     * not modified, just a reference to the original data table.
+     *
+     * @deprecated Use `dataProvider` instead.
+     */
+    get presentationTable(): DataTable | undefined;
     private initAccessibility;
     private initPagination;
     /**
@@ -277,11 +285,7 @@ export declare class Grid {
      * grid, in the correct order.
      */
     private getEnabledColumnIDs;
-    /**
-     * Loads the data table of the Grid. If the data table is passed as a
-     * reference, it should be used instead of creating a new one.
-     */
-    private loadDataTable;
+    private loadDataProvider;
     /**
      * Extracts all references to columnIds on all levels below defined level
      * in the settings.header structure.
@@ -317,6 +321,11 @@ export declare class Grid {
     /**
      * Returns the grid data as a JSON string.
      *
+     * **Note:** This method only works with `LocalDataProvider`.
+     * For other data providers, use your data source directly.
+     *
+     * @deprecated
+     *
      * @param modified
      * Whether to return the modified data table (after filtering/sorting/etc.)
      * or the unmodified, original one. Default value is set to `true`.