@highcharts/grid-pro 2.1.1 → 2.3.0

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

@@ -1,3 +1,4 @@
+import type CSSObject from '../../Core/Renderer/CSSObject';
 /**
  * The event object for the grid.
  */
@@ -28,6 +29,10 @@ export interface MakeHTMLElementParameters {
     innerHTML?: string;
     style?: Partial<CSSStyleDeclaration>;
 }
+/**
+ * A style object or callback returning one.
+ */
+export type StyleValue<T> = CSSObject | ((this: T, target: T) => CSSObject);
 /**
  * Creates a HTML element with the provided options.
  *
@@ -105,6 +110,32 @@ export declare function createOptionsProxy<T extends object>(options: T, default
  * @returns Formatted text
  */
 export declare function formatText(template: string, values: Record<string, string | number>): string;
+/**
+ * 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 declare function resolveStyleValue<T>(style?: StyleValue<T>, target?: T): (CSSObject | undefined);
+/**
+ * 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 declare function mergeStyleValues<T>(target: T, ...styleValues: Array<(StyleValue<T> | undefined)>): CSSObject;
 declare const _default: {
     readonly makeHTMLElement: typeof makeHTMLElement;
     readonly makeDiv: typeof makeDiv;
@@ -113,5 +144,7 @@ declare const _default: {
     readonly setHTMLContent: typeof setHTMLContent;
     readonly createOptionsProxy: typeof createOptionsProxy;
     readonly formatText: typeof formatText;
+    readonly resolveStyleValue: typeof resolveStyleValue;
+    readonly mergeStyleValues: typeof mergeStyleValues;
 };
 export default _default;

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

@@ -2,19 +2,18 @@
  *
  *  Grid utilities
  *
- *  (c) 2009-2025 Highsoft AS
+ *  (c) 2009-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula
  *
  * */
 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,20 +2,101 @@ 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.
  */
 export type CellFormatterCallback = (this: Cell) => string;
+/**
+ * Callback function to be called when a header event is triggered. Returns a
+ * 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.
  */
@@ -41,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;
     /**
@@ -77,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.
      */
@@ -262,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`.
      *
@@ -276,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.
@@ -313,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.
@@ -337,7 +454,12 @@ export interface ColumnHeaderOptions {
      * @return
      * A string to be set as a header cell's content.
      */
-    formatter?: CellFormatterCallback;
+    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.
@@ -355,7 +477,28 @@ export interface ColumnSortingOptions {
      *
      * @default true
      */
+    enabled?: boolean;
+    /**
+     * @deprecated
+     * 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
@@ -371,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.
@@ -384,6 +527,11 @@ export interface IndividualColumnSortingOptions extends ColumnSortingOptions {
      * @default null
      */
     order?: ColumnSortingOrder;
+    /**
+     * Priority of this column when multiple columns are sorted. Lower numbers
+     * have higher priority.
+     */
+    priority?: number;
 }
 /**
  * Column options that can be set for each column individually.
@@ -423,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/Options.js

@@ -2,11 +2,11 @@
  *
  *  Grid options
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Dawid Dragula

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

@@ -2,24 +2,30 @@
  *
  *  Grid Pagination class
  *
- *  (c) 2020-2025 Highsoft AS
+ *  (c) 2020-2026 Highsoft AS
  *
- *  License: www.highcharts.com/license
+ *  A commercial license may be required depending on use.
+ *  See www.highcharts.com/license
  *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  *  Authors:
  *  - Sebastian Bochan
  *
  * */
 '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.