@highcharts/grid-pro 2.2.0 → 2.3.0

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

@@ -13,8 +13,7 @@
  *
  * */
 import AST from '../../Core/Renderer/HTML/AST.js';
-import U from '../../Core/Utilities.js';
-const { isObject } = U;
+import { isObject } from '../../Shared/Utilities.js';
 AST.allowedAttributes.push('srcset', 'media');
 AST.allowedTags.push('picture', 'source');
 /* *
@@ -163,6 +162,52 @@ export function createOptionsProxy(options, defaultOptions = {}) {
 export function formatText(template, values) {
     return template.replace(/\{(\w+)\}/g, (match, key) => (values[key] !== void 0 ? String(values[key]) : match));
 }
+/**
+ * Resolves a style value that can be static or callback based.
+ *
+ * @param style
+ * Style object or callback returning one.
+ *
+ * @param target
+ * Runtime target used as callback context and first argument.
+ *
+ * @returns
+ * A resolved style object or `undefined`.
+ */
+export function resolveStyleValue(style, target) {
+    if (!style) {
+        return;
+    }
+    if (typeof style === 'function') {
+        if (!target) {
+            return;
+        }
+        return style.call(target, target);
+    }
+    return style;
+}
+/**
+ * Resolves and merges style values in order.
+ *
+ * @param target
+ * Runtime target used as callback context and first argument.
+ *
+ * @param styleValues
+ * Style values to merge in order, where latter entries override former.
+ *
+ * @returns
+ * Merged style object.
+ */
+export function mergeStyleValues(target, ...styleValues) {
+    const mergedStyle = {};
+    for (const styleValue of styleValues) {
+        const resolvedStyle = resolveStyleValue(styleValue, target);
+        if (resolvedStyle) {
+            Object.assign(mergedStyle, resolvedStyle);
+        }
+    }
+    return mergedStyle;
+}
 /* *
  *
  *  Default Export
@@ -175,5 +220,7 @@ export default {
     sanitizeText,
     setHTMLContent,
     createOptionsProxy,
-    formatText
+    formatText,
+    resolveStyleValue,
+    mergeStyleValues
 };

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

@@ -2,12 +2,17 @@ import type { A11yOptions, HeaderCellA11yOptions, LangAccessibilityOptions } fro
 import type { PaginationLangOptions, PaginationOptions } from './Pagination/PaginationOptions';
 import type { ColumnResizingMode } from './Table/ColumnResizing/ColumnResizing';
 import type { ColumnDataType } from './Table/Column';
+import type { DataProviderOptionsType } from './Data/DataProviderType';
 import type DataTable from '../../Data/DataTable';
+import type { CellType as DataTableCellType } from '../../Data/DataTable';
 import type DataTableOptions from '../../Data/DataTableOptions';
 import type Cell from './Table/Cell';
 import type Column from './Table/Column';
+import type TableCell from './Table/Body/TableCell';
+import type { IconRegistryValue } from './UI/SvgIcons';
 import type { LangOptionsCore } from '../../Shared/LangOptionsCore';
 import type { Condition as ColumnFilteringCondition } from './Table/Actions/ColumnFiltering/FilteringTypes';
+import type CSSObject from '../../Core/Renderer/CSSObject';
 /**
  * Callback function to be called when a header event is triggered. Returns a
  * formatted cell's string.
@@ -18,10 +23,80 @@ export type CellFormatterCallback = (this: Cell) => string;
  * formatted header's string.
  */
 export type HeaderFormatterCallback = (this: Column) => string;
+/**
+ * Callback function to resolve dynamic style for a grid entity.
+ */
+export type StyleCallback<T> = (this: T, target: T) => CSSObject;
+/**
+ * A static style object or a callback that returns one.
+ */
+export type StyleValue<T> = CSSObject | StyleCallback<T>;
 /**
  * Column sorting order type.
  */
 export type ColumnSortingOrder = 'asc' | 'desc' | null;
+/**
+ * Options for a single cell context menu item.
+ */
+export interface CellContextMenuActionItemOptions {
+    /**
+     * The label shown in the menu.
+     */
+    label: string;
+    /**
+     * Optional icon name for the menu item (built-in name from the default
+     * registry or custom name from rendering.icons).
+     */
+    icon?: string;
+    /**
+     * Whether the menu item should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to render a divider instead of a button.
+     */
+    separator?: false;
+    /**
+     * Callback executed when the menu item is clicked.
+     *
+     * The cell is available on `this` and is also passed as the first argument
+     * to support arrow functions.
+     */
+    onClick?: (this: TableCell, cell: TableCell) => void;
+}
+/**
+ * Options for a divider item in the cell context menu.
+ */
+export interface CellContextMenuDividerItemOptions {
+    /**
+     * Whether to render a divider instead of a button.
+     */
+    separator: true;
+    /**
+     * Optional label for accessibility or testing.
+     * Not rendered as a clickable item.
+     */
+    label?: string;
+}
+/**
+ * Options for a single cell context menu item.
+ */
+export type CellContextMenuItemOptions = CellContextMenuDividerItemOptions | CellContextMenuActionItemOptions;
+/**
+ * Cell context menu options.
+ */
+export interface CellContextMenuOptions {
+    /**
+     * Whether the cell context menu is enabled.
+     *
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * List of items to show in the cell context menu.
+     */
+    items?: Array<CellContextMenuItemOptions>;
+}
 /**
  * Options to control the content and the user experience of a grid structure.
  */
@@ -47,8 +122,15 @@ export interface Options {
      * Options for individual columns.
      */
     columns?: Array<IndividualColumnOptions>;
+    /**
+     * Options for the data provider.
+     */
+    data?: DataProviderOptionsType;
     /**
      * Data table with the data to display in the grid structure.
+     *
+     * @deprecated
+     * Use `data.dataTable` instead.
      */
     dataTable?: DataTable | DataTableOptions;
     /**
@@ -83,6 +165,25 @@ export interface Options {
  * Options to control the way grid is rendered.
  */
 export interface RenderingSettings {
+    /**
+     * Custom or override icons for the grid. Keys are icon names (either
+     * built-in names from the default registry or custom names). Values
+     * are either an SVG definition object or a raw SVG markup string.
+     * Built-in icons can be overridden; new names can be used for custom
+     * icons and referenced where an icon name is accepted (e.g. menu
+     * items, pagination buttons).
+     *
+     * @example
+     * ```js
+     * rendering: {
+     *   icons: {
+     *     chevronRight: '<svg>...</svg>',
+     *     myCustomIcon: { width: 16, height: 16, children: [{ d: '...' }] }
+     *   }
+     * }
+     * ```
+     */
+    icons?: Record<string, IconRegistryValue>;
     /**
      * Options to control the columns rendering.
      */
@@ -268,9 +369,9 @@ export interface ColumnOptions {
      */
     sorting?: ColumnSortingOptions;
     /**
-     * The width of the column. It can be set in pixels or as a percentage of
-     * the table width. If unset, the width is distributed evenly between all
-     * columns.
+     * The width of the column. It can be set in pixels, as a percentage of the
+     * table width, or `'auto'`. If unset or `'auto'`, the width is distributed
+     * evenly between columns without a fixed width.
      *
      * This option does not work with the `resizing` option set to `full`.
      *
@@ -282,6 +383,11 @@ export interface ColumnOptions {
      * Filtering options for the column.
      */
     filtering?: ColumnFilteringOptions;
+    /**
+     * CSS styles for the whole column, applied to the header and body cells.
+     * Can be a static style object or a callback that returns one.
+     */
+    style?: StyleValue<Column>;
 }
 /**
  * Options for all cells in the column.
@@ -319,6 +425,11 @@ export interface ColumnCellOptions {
      * A string to be set as a table cell's content.
      */
     formatter?: CellFormatterCallback;
+    /**
+     * CSS styles for table body cells in the column.
+     * Can be a static style object or a callback that returns one.
+     */
+    style?: StyleValue<Cell>;
 }
 /**
  * Options for the header cells in the columns.
@@ -344,6 +455,11 @@ export interface ColumnHeaderOptions {
      * A string to be set as a header cell's content.
      */
     formatter?: HeaderFormatterCallback;
+    /**
+     * CSS styles for the column header cells.
+     * Can be a static style object or a callback that returns one.
+     */
+    style?: StyleValue<Column>;
 }
 /**
  * Column sorting options available for applying to all columns at once.
@@ -367,6 +483,22 @@ export interface ColumnSortingOptions {
      * Use `enabled` instead
      */
     sortable?: boolean;
+    /**
+     * Sequence of sorting orders used when toggling sorting from the user
+     * interface (for example by clicking the column header).
+     *
+     * The sequence can contain any number of values, in any order, with
+     * duplicates allowed. Allowed values are: `'asc'`, `'desc'`, and `null`.
+     *
+     * If the sequence is empty (`[]`), sorting toggles become a no-op while
+     * the sortable UI can still be shown.
+     *
+     * This option can be set in both `columnDefaults.sorting` and
+     * `columns[].sorting`.
+     *
+     * @default ['asc', 'desc', null]
+     */
+    orderSequence?: ColumnSortingOrder[];
     /**
      * Custom compare function to sort the column values. It overrides the
      * default sorting behavior. If not set, the default sorting behavior is
@@ -382,7 +514,7 @@ export interface ColumnSortingOptions {
      * A number indicating whether the first value (`a`) is less than (`-1`),
      * equal to (`0`), or greater than (`1`) the second value (`b`).
      */
-    compare?: (a: DataTable.CellType, b: DataTable.CellType) => number;
+    compare?: (a: DataTableCellType, b: DataTableCellType) => number;
 }
 /**
  * Column sorting options that can be set for each column individually.
@@ -439,6 +571,15 @@ export interface CaptionOptions {
      * The custom CSS class name for the table caption.
      */
     className?: string;
+    /**
+     * The HTML tag to use for the caption. When set, the caption is rendered
+     * as that element (e.g. `h1`, `p`, `span`). Must be one of
+     * [AST.allowedTags](https://api.highcharts.com/class-reference/Highcharts.AST#allowedTags)
+     * (e.g. `div`, `p`, `span`, `h1`–`h6`).
+     *
+     * @default 'div'
+     */
+    htmlTag?: string;
     /**
      * The caption of the grid.
      *

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

@@ -91,6 +91,9 @@ declare class Pagination {
      * the specified ID.
      */
     render(): void;
+    private getAlignmentClass;
+    updateAlignmentClass(): void;
+    redraw(): void;
     /**
      * Render pagination in a tfoot element.
      */

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

@@ -13,13 +13,19 @@
  *
  * */
 'use strict';
-import Icons from './Icons.js';
+import { createGridIcon } from '../UI/SvgIcons.js';
 import Globals from '../Globals.js';
 import GridUtils from '../GridUtils.js';
-import Utilities from '../../../Core/Utilities.js';
 import AST from '../../../Core/Renderer/HTML/AST.js';
+import { defined, fireEvent, isObject, merge } from '../../../Shared/Utilities.js';
 const { makeHTMLElement, formatText } = GridUtils;
-const { defined, fireEvent, isObject, merge } = Utilities;
+const paginationAlignments = [
+    'left',
+    'center',
+    'right',
+    'distributed'
+];
+const alignmentClassName = (alignment) => `${Globals.classNamePrefix}pagination-${alignment}`;
 /**
  *  Representing the pagination functionalities for the Grid.
  */
@@ -83,6 +89,10 @@ class Pagination {
             delete diff.page;
             delete diff.pageSize;
         }
+        if ('alignment' in diff) {
+            this.isDirtyAlignment = true;
+            delete diff.alignment;
+        }
         // TODO: Optimize more options here.
         if (Object.keys(diff).length > 0) {
             this.grid.dirtyFlags.add('grid');
@@ -101,6 +111,7 @@ class Pagination {
     render() {
         const position = this.options?.position;
         const grid = this.grid;
+        const alignmentClass = this.getAlignmentClass();
         this.oldTotalItems = this.controller.totalItems;
         // Set row count for a11y
         grid.tableElement?.setAttribute('aria-current', 'page');
@@ -114,7 +125,9 @@ class Pagination {
                 this.renderFooter();
             }
             this.contentWrapper = makeHTMLElement('nav', {
-                className: Globals.getClassName('paginationWrapper')
+                className: alignmentClass ?
+                    `${Globals.getClassName('pagination')} ${alignmentClass}` :
+                    Globals.getClassName('pagination')
             }, position === 'footer' ?
                 this.paginationContainer : grid.contentWrapper);
             this.contentWrapper.setAttribute('aria-label', 'Results pagination');
@@ -126,6 +139,30 @@ class Pagination {
         // Update button states after rendering
         this.updateButtonStates();
     }
+    getAlignmentClass() {
+        const align = this.options?.align || '';
+        return alignmentClassName(align);
+    }
+    updateAlignmentClass() {
+        const wrapper = this.contentWrapper;
+        if (!wrapper) {
+            return;
+        }
+        const alignmentClasses = paginationAlignments.map(alignmentClassName);
+        wrapper.classList.remove(...alignmentClasses);
+        const alignmentClass = this.getAlignmentClass();
+        wrapper.classList.add(alignmentClass);
+    }
+    redraw() {
+        if (this.isDirtyQuerying) {
+            this.updateControls(true);
+        }
+        if (this.isDirtyAlignment) {
+            this.updateAlignmentClass();
+        }
+        delete this.isDirtyQuerying;
+        delete this.isDirtyAlignment;
+    }
     /**
      * Render pagination in a tfoot element.
      */
@@ -156,9 +193,13 @@ class Pagination {
             return;
         }
         this.paginationContainer = customContainer;
+        const alignmentClass = this.getAlignmentClass();
+        const className = alignmentClass ?
+            `${Globals.getClassName('pagination')} ${alignmentClass}` :
+            Globals.getClassName('pagination');
         // Set content wrapper to the custom container
         this.contentWrapper = makeHTMLElement('div', {
-            className: Globals.getClassName('paginationContainer')
+            className: className
         }, customContainer);
     }
     /**
@@ -199,7 +240,7 @@ class Pagination {
      */
     renderControls() {
         const navContainer = makeHTMLElement('div', {
-            className: Globals.getClassName('paginationControlsContainer')
+            className: Globals.getClassName('paginationControls')
         }, this.contentWrapper);
         const controls = this.options?.controls || {};
         // Render first/previous buttons
@@ -214,8 +255,6 @@ class Pagination {
         if (controls.pageButtons) {
             this.renderPageNumbers(navContainer);
         }
-        // Render dropdown page selector
-        this.renderDropdownPageSelector(navContainer);
         // Render next button
         if (controls.previousNextButtons) {
             this.renderNextButton(navContainer);
@@ -257,11 +296,11 @@ class Pagination {
             (isObject(firstLastButtons) && firstLastButtons.enabled === false)) {
             return;
         }
-        // Create first button
+        const firstIconEl = createGridIcon('doubleChevronLeft', this.grid.options?.rendering?.icons);
         this.firstButton = makeHTMLElement('button', {
-            className: Globals.getClassName('button'),
-            innerHTML: Icons.first
+            className: Globals.getClassName('button')
         }, container);
+        this.firstButton.appendChild(firstIconEl);
         this.firstButton.title = this.lang?.firstPage ?? '';
         // Set aria-label for a11y
         this.firstButton.setAttribute('aria-label', this.lang?.firstPage ?? '');
@@ -284,11 +323,12 @@ class Pagination {
                 previousNextButtons.enabled === false)) {
             return;
         }
-        // Create previous button
+        const prevIconName = 'chevronLeft';
+        const prevIconEl = createGridIcon(prevIconName, this.grid.options?.rendering?.icons);
         this.prevButton = makeHTMLElement('button', {
-            className: Globals.getClassName('button'),
-            innerHTML: Icons.previous
+            className: Globals.getClassName('button')
         }, container);
+        this.prevButton.appendChild(prevIconEl);
         this.prevButton.title = this.lang?.previousPage ?? '';
         // Set aria-label for a11y
         this.prevButton.setAttribute('aria-label', this.lang?.previousPage ?? '');
@@ -311,11 +351,12 @@ class Pagination {
                 previousNextButtons.enabled === false)) {
             return;
         }
-        // Create next button
+        const nextIconName = 'chevronRight';
+        const nextIconEl = createGridIcon(nextIconName, this.grid.options?.rendering?.icons);
         this.nextButton = makeHTMLElement('button', {
-            className: Globals.getClassName('button'),
-            innerHTML: Icons.next
+            className: Globals.getClassName('button')
         }, container);
+        this.nextButton.appendChild(nextIconEl);
         this.nextButton.title = this.lang?.nextPage ?? '';
         // Set aria-label for a11y
         this.nextButton.setAttribute('aria-label', this.lang?.nextPage ?? '');
@@ -337,11 +378,12 @@ class Pagination {
             (isObject(firstLastButtons) && firstLastButtons.enabled === false)) {
             return;
         }
-        // Create last button
+        const lastIconName = 'doubleChevronRight';
+        const lastIconEl = createGridIcon(lastIconName, this.grid.options?.rendering?.icons);
         this.lastButton = makeHTMLElement('button', {
-            className: Globals.getClassName('button'),
-            innerHTML: Icons.last
+            className: Globals.getClassName('button')
         }, container);
+        this.lastButton.appendChild(lastIconEl);
         this.lastButton.title = this.lang?.lastPage ?? '';
         // Set aria-label for a11y
         this.lastButton.setAttribute('aria-label', this.lang?.lastPage ?? '');
@@ -364,7 +406,7 @@ class Pagination {
             return;
         }
         this.pageNumbersContainer = makeHTMLElement('div', {
-            className: Globals.getClassName('paginationNavButtonsContainer')
+            className: Globals.getClassName('paginationPages')
         }, container);
         this.updatePageNumbers();
     }
@@ -481,8 +523,6 @@ class Pagination {
                 }
             });
         }
-        // Update dropdown selector if it exists
-        this.updateDropdownPageSelector();
     }
     /**
      * Create a page number button.

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

@@ -138,6 +138,10 @@ export interface PaginationOptions {
      * @default 'bottom'
      */
     position?: string;
+    /**
+     * Alignment of the pagination elements within the wrapper.
+     */
+    align?: 'left' | 'center' | 'right' | 'distributed';
     /**
      * Controls options for pagination UI elements.
      */

package/es-modules/Grid/Core/Querying/FilteringController.js

@@ -14,8 +14,7 @@
  * */
 'use strict';
 import FilterModifier from '../../../Data/Modifiers/FilterModifier.js';
-import U from '../../../Core/Utilities.js';
-const { isString } = U;
+import { isString } from '../../../Shared/Utilities.js';
 /* *
  *
  *  Class

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

@@ -23,7 +23,7 @@ declare class PaginationController {
     /**
      * The number of rows before pagination.
      */
-    private _totalItems?;
+    totalItemsCount?: number;
     /**
      * Constructs the PaginationController instance.
      *
@@ -32,7 +32,7 @@ declare class PaginationController {
      */
     constructor(querying: QueryingController);
     /**
-     * Total number of items (rows)
+     * Total number of items (rows before pagination).
      */
     get totalItems(): number;
     /**

package/es-modules/Grid/Core/Querying/PaginationController.js

@@ -52,10 +52,10 @@ class PaginationController {
     *
     * */
     /**
-     * Total number of items (rows)
+     * Total number of items (rows before pagination).
      */
     get totalItems() {
-        return this._totalItems ?? this.querying.grid.dataTable?.rowCount ?? 0;
+        return this.totalItemsCount ?? 0;
     }
     /**
      * Gets the total number of pages.
@@ -126,7 +126,7 @@ class PaginationController {
         // Calculate the start index (0-based)
         const start = (currentPage - 1) * pageSize;
         const end = Math.min(start + pageSize, rowsCountBeforePagination);
-        this._totalItems = rowsCountBeforePagination;
+        this.totalItemsCount = rowsCountBeforePagination;
         return new RangeModifier({
             start,
             end

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

@@ -51,7 +51,7 @@ declare class QueryingController {
      */
     getGroupedModifiers(): DataModifier[];
     /**
-     * Apply all modifiers to the data table.
+     * Apply all modifiers to the data provider.
      */
     private modifyData;
 }

package/es-modules/Grid/Core/Querying/QueryingController.js

@@ -13,7 +13,6 @@
  *
  * */
 'use strict';
-import ChainModifier from '../../../Data/Modifiers/ChainModifier.js';
 import SortingController from './SortingController.js';
 import FilteringController from './FilteringController.js';
 import PaginationController from './PaginationController.js';
@@ -89,33 +88,10 @@ class QueryingController {
         return modifiers;
     }
     /**
-     * Apply all modifiers to the data table.
+     * Apply all modifiers to the data provider.
      */
     async modifyData() {
-        const originalDataTable = this.grid.dataTable;
-        if (!originalDataTable) {
-            return;
-        }
-        const groupedModifiers = this.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();
-        }
-        // Pagination modifier
-        const paginationModifier = this.pagination.createModifier(interTable.rowCount);
-        if (paginationModifier) {
-            interTable = interTable.clone();
-            await paginationModifier.modify(interTable);
-            interTable = interTable.getModified();
-        }
-        this.grid.presentationTable = interTable;
+        await this.grid.dataProvider?.applyQuery();
         this.shouldBeUpdated = false;
     }
 }

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

@@ -0,0 +1,53 @@
+import type { DeepPartial } from '../../../Shared/Types';
+import type Grid from '../../Core/Grid';
+import type { Options } from '../Options';
+import type { ResponsiveOptions, RuleOptions } from './ResponsiveOptions';
+/**
+ * Extends the grid classes with responsive options.
+ *
+ * @param GridClass
+ * The class to extend.
+ *
+ */
+export declare function compose(GridClass: typeof Grid): void;
+declare module '../Options' {
+    interface Options {
+        /**
+         * Allows setting a set of rules to apply for different screen or grid
+         * sizes. Each rule specifies additional grid options.
+         */
+        responsive?: ResponsiveOptions;
+    }
+}
+declare module '../Grid' {
+    export default interface Grid {
+        /**
+         * Tracks the ResizeObserver instance for the grid.
+         * @private
+         */
+        resizeObserver?: ResizeObserver;
+        /**
+         * Cache of currently active responsive rules.
+         * @private
+         */
+        activeRules?: Set<RuleOptions>;
+        /**
+         * Stores merged responsive options and undo data.
+         * @private
+         */
+        currentResponsive?: {
+            ruleIds?: string;
+            mergedOptions: DeepPartial<Options>;
+            undoOptions: DeepPartial<Options>;
+        };
+        /**
+         * Prevents recursive updates during responsive changes.
+         * @private
+         */
+        updatingResponsive?: boolean;
+    }
+}
+declare const _default: {
+    readonly compose: typeof compose;
+};
+export default _default;