@highcharts/grid-pro 2.0.0

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

@@ -0,0 +1,63 @@
+/* *
+ *
+ *  Independent Resizing Mode 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 ResizingMode from './ResizingMode.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+class IndependentResizingMode extends ResizingMode {
+    constructor() {
+        /* *
+         *
+         *  Properties
+         *
+         * */
+        super(...arguments);
+        this.type = 'independent';
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    resize(resizer, diff) {
+        const column = resizer.draggedColumn;
+        if (!column) {
+            return;
+        }
+        // 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.
+        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.update({ width: rcWidth }, false);
+        }
+        column.update({ width }, false);
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default IndependentResizingMode;

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

@@ -0,0 +1,92 @@
+import type { ColumnResizingMode } from '../../Options';
+import type Table from '../Table';
+import type Column from '../Column.js';
+import type ColumnsResizer from '../Actions/ColumnsResizer';
+/**
+ * Represents a column distribution strategy.
+ */
+declare abstract class ResizingMode {
+    /**
+     * The type of the column distribution strategy.
+     */
+    abstract readonly type: ColumnResizingMode;
+    /**
+     * The table that the column distribution strategy is applied to.
+     */
+    readonly viewport: Table;
+    /**
+     * The current widths values of the columns.
+     */
+    columnWidths: Record<string, number>;
+    /**
+     * Array of units for each column width value. Codified as:
+     * - `0` - px
+     * - `1` - %
+     */
+    columnWidthUnits: Record<string, number>;
+    /**
+     * Whether the column distribution strategy is invalidated. This flag is
+     * used to determine whether the column distribution strategy metadata
+     * should be maintained when the table is destroyed and recreated.
+     */
+    invalidated?: boolean;
+    /**
+     * Creates a new column distribution strategy.
+     *
+     * @param viewport
+     * The table that the column distribution strategy is applied to.
+     */
+    constructor(viewport: Table);
+    /**
+     * Resizes the column by the given diff of pixels.
+     *
+     * @param resizer
+     * The columns resizer instance that is used to resize the column.
+     *
+     * @param diff
+     * The X position difference in pixels.
+     */
+    abstract resize(resizer: ColumnsResizer, diff: number): void;
+    /**
+     * Returns the column's current width in pixels.
+     *
+     * @param column
+     * The column to get the width for.
+     *
+     * @returns
+     * The column's current width in pixels.
+     */
+    getColumnWidth(column: Column): number;
+    /**
+     * Performs important calculations when the column is loaded.
+     *
+     * @param column
+     * The column that is loaded.
+     */
+    loadColumn(column: Column): void;
+    /**
+     * Loads the column to the distribution strategy. Should be called before
+     * the table is rendered.
+     */
+    loadColumns(): void;
+    /**
+     * Recaulculates the changing dimentions of the table.
+     */
+    reflow(): void;
+    /**
+     * Returns the minimum width of the column.
+     *
+     * @param column
+     * The column to get the minimum width for.
+     *
+     * @returns
+     * The minimum width in pixels.
+     */
+    protected static getMinWidth(column: Column): number;
+    /**
+     * Calculates defined (px and %) widths of all columns with non-undefined
+     * widths in the grid. Total in px.
+     */
+    private calculateOccupiedWidth;
+}
+export default ResizingMode;

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

@@ -0,0 +1,194 @@
+/* *
+ *
+ *  Resizing Mode abstract 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 U from '../../../../Core/Utilities.js';
+const { getStyle, defined } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a column distribution strategy.
+ */
+class ResizingMode {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Creates a new column distribution strategy.
+     *
+     * @param viewport
+     * The table that the column distribution strategy is applied to.
+     */
+    constructor(viewport) {
+        /**
+         * The current widths values of the columns.
+         */
+        this.columnWidths = {};
+        /**
+         * Array of units for each column width value. Codified as:
+         * - `0` - px
+         * - `1` - %
+         */
+        this.columnWidthUnits = {};
+        this.viewport = viewport;
+    }
+    /**
+     * Returns the column's current width in pixels.
+     *
+     * @param column
+     * The column to get the width for.
+     *
+     * @returns
+     * The column's current width in pixels.
+     */
+    getColumnWidth(column) {
+        const vp = this.viewport;
+        const widthValue = this.columnWidths[column.id];
+        const minWidth = ResizingMode.getMinWidth(column);
+        if (!defined(widthValue)) {
+            const tbody = vp.tbodyElement;
+            const freeWidth = tbody.getBoundingClientRect().width -
+                this.calculateOccupiedWidth() -
+                tbody.offsetWidth + tbody.clientWidth;
+            const freeColumns = (vp.grid.enabledColumns?.length || 0) -
+                Object.keys(this.columnWidths).length;
+            // If undefined width:
+            return Math.max(freeWidth / freeColumns, minWidth);
+        }
+        if (this.columnWidthUnits[column.id] === 0) {
+            // If px:
+            return widthValue;
+        }
+        // If %:
+        return Math.max(vp.getWidthFromRatio(widthValue / 100), minWidth);
+    }
+    /**
+     * Performs important calculations when the column is loaded.
+     *
+     * @param column
+     * The column that is loaded.
+     */
+    loadColumn(column) {
+        const rawWidth = column.options.width;
+        if (!rawWidth) {
+            return;
+        }
+        let value;
+        let unitCode = 0;
+        if (typeof rawWidth === 'number') {
+            value = rawWidth;
+            unitCode = 0;
+        }
+        else {
+            value = parseFloat(rawWidth);
+            unitCode = rawWidth.charAt(rawWidth.length - 1) === '%' ? 1 : 0;
+        }
+        this.columnWidthUnits[column.id] = unitCode;
+        this.columnWidths[column.id] = value;
+    }
+    /**
+     * Loads the column to the distribution strategy. Should be called before
+     * the table is rendered.
+     */
+    loadColumns() {
+        const { columns } = this.viewport;
+        for (let i = 0, iEnd = columns.length; i < iEnd; ++i) {
+            this.loadColumn(columns[i]);
+        }
+    }
+    /**
+     * Recaulculates the changing dimentions of the table.
+     */
+    reflow() {
+        const vp = this.viewport;
+        let rowsWidth = 0;
+        for (let i = 0, iEnd = vp.columns.length; i < iEnd; ++i) {
+            rowsWidth += this.getColumnWidth(vp.columns[i]);
+        }
+        vp.rowsWidth = rowsWidth;
+    }
+    /* *
+     *
+     * Static Methods
+     *
+     * */
+    /**
+     * Returns the minimum width of the column.
+     *
+     * @param column
+     * The column to get the minimum width for.
+     *
+     * @returns
+     * The minimum width in pixels.
+     */
+    static getMinWidth(column) {
+        const tableColumnEl = column.cells[0]?.htmlElement;
+        const headerColumnEl = column.header?.htmlElement;
+        const getElPaddings = (el) => ((getStyle(el, 'padding-left', true) || 0) +
+            (getStyle(el, 'padding-right', true) || 0) +
+            (getStyle(el, 'border-left', true) || 0) +
+            (getStyle(el, 'border-right', true) || 0));
+        let result = ResizingMode.MIN_COLUMN_WIDTH;
+        if (tableColumnEl) {
+            result = Math.max(result, getElPaddings(tableColumnEl));
+        }
+        if (headerColumnEl) {
+            result = Math.max(result, getElPaddings(headerColumnEl));
+        }
+        return result;
+    }
+    /**
+     * Calculates defined (px and %) widths of all columns with non-undefined
+     * widths in the grid. Total in px.
+     */
+    calculateOccupiedWidth() {
+        const vp = this.viewport;
+        let occupiedWidth = 0;
+        let unit, width;
+        const columnIds = Object.keys(this.columnWidths);
+        let columnId;
+        for (let i = 0, iEnd = columnIds.length; i < iEnd; ++i) {
+            columnId = columnIds[i];
+            unit = this.columnWidthUnits[columnId];
+            if (unit === 0) {
+                occupiedWidth += this.columnWidths[columnId];
+                continue;
+            }
+            width = this.columnWidths[columnId];
+            occupiedWidth += vp.getWidthFromRatio(width / 100);
+        }
+        return occupiedWidth;
+    }
+}
+/* *
+*
+*  Static Properties
+*
+* */
+/**
+ * The minimum width of a column.
+ * @internal
+ */
+ResizingMode.MIN_COLUMN_WIDTH = 20;
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ResizingMode;

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

@@ -0,0 +1,68 @@
+import type Toolbar from '../../../UI/Toolbar';
+import type Column from '../../Column';
+import ToolbarButton from '../../../UI/ToolbarButton.js';
+declare class HeaderCellToolbar implements Toolbar {
+    /**
+     * The maximum width of the column to be minimized.
+     */
+    static MINIMIZED_COLUMN_WIDTH: number;
+    /**
+     * The column that this toolbar belongs to.
+     */
+    column: Column;
+    buttons: ToolbarButton[];
+    container?: HTMLDivElement;
+    focusCursor: number;
+    /**
+     * Whether the toolbar is minimized. If true, the toolbar will only show
+     * the context menu button.
+     */
+    private isMinimized?;
+    /**
+     * Whether the menu button is centered. Used when the header content is
+     * super thin, so that it's not visible.
+     */
+    private isMenuCentered?;
+    /**
+     * The resize observer of the column.
+     */
+    private columnResizeObserver?;
+    /**
+     * The event listener destroyers of the toolbar.
+     */
+    private eventListenerDestroyers;
+    constructor(column: Column);
+    /**
+     * Initializes the buttons of the toolbar.
+     */
+    private renderFull;
+    private renderMinimized;
+    /**
+     * Render the toolbar.
+     */
+    add(): void;
+    /**
+     * Destroys all buttons of the toolbar.
+     */
+    clearButtons(): void;
+    /**
+     * Reflows the toolbar. It is called when the column is resized.
+     */
+    reflow(): void;
+    /**
+     * Destroy the toolbar.
+     */
+    destroy(): void;
+    /**
+     * Focuses the first button of the toolbar.
+     */
+    focus(): void;
+    /**
+     * Handles the key down event on the toolbar.
+     *
+     * @param e
+     * Keyboard event object.
+     */
+    private keyDownHandler;
+}
+export default HeaderCellToolbar;

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

@@ -0,0 +1,187 @@
+/* *
+ *
+ *  Grid Header Cell Toolbar 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 GridUtils from '../../../GridUtils.js';
+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';
+const { makeHTMLElement } = GridUtils;
+const { getStyle } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+class HeaderCellToolbar {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(column) {
+        this.buttons = [];
+        this.focusCursor = 0;
+        /**
+         * The event listener destroyers of the toolbar.
+         */
+        this.eventListenerDestroyers = [];
+        this.column = column;
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    /**
+     * Initializes the buttons of the toolbar.
+     */
+    renderFull() {
+        const columnOptions = this.column.options;
+        if (columnOptions.sorting?.sortable) {
+            new SortToolbarButton().add(this);
+        }
+        if (columnOptions.filtering?.enabled &&
+            !columnOptions.filtering.inline) {
+            new FilterToolbarButton().add(this);
+        }
+    }
+    renderMinimized() {
+        const columnOptions = this.column.options;
+        if (columnOptions.sorting?.sortable || (columnOptions.filtering?.enabled &&
+            !columnOptions.filtering.inline)) {
+            new MenuToolbarButton().add(this);
+        }
+    }
+    /**
+     * Render the toolbar.
+     */
+    add() {
+        const headerCell = this.column.header;
+        if (!headerCell?.container) {
+            return;
+        }
+        if (this.columnResizeObserver) {
+            this.columnResizeObserver.disconnect();
+            delete this.columnResizeObserver;
+        }
+        this.columnResizeObserver = new ResizeObserver(() => this.reflow());
+        this.columnResizeObserver.observe(headerCell.container);
+        const container = this.container = makeHTMLElement('div', {
+            className: Globals.getClassName('headerCellIcons')
+        });
+        headerCell.container.appendChild(container);
+        const onKeyDown = (e) => {
+            this.keyDownHandler(e);
+        };
+        container.addEventListener('keydown', onKeyDown);
+        this.eventListenerDestroyers.push(() => {
+            container.removeEventListener('keydown', onKeyDown);
+        });
+    }
+    /**
+     * Destroys all buttons of the toolbar.
+     */
+    clearButtons() {
+        const { buttons } = this;
+        while (buttons.length > 0) {
+            buttons[buttons.length - 1].destroy();
+        }
+    }
+    /**
+     * Reflows the toolbar. It is called when the column is resized.
+     */
+    reflow() {
+        const width = this.column.getWidth();
+        const shouldBeMinimized = width <= HeaderCellToolbar.MINIMIZED_COLUMN_WIDTH;
+        if (shouldBeMinimized !== this.isMinimized) {
+            this.isMinimized = shouldBeMinimized;
+            this.clearButtons();
+            if (shouldBeMinimized) {
+                this.renderMinimized();
+            }
+            else {
+                this.renderFull();
+            }
+        }
+        if (!shouldBeMinimized) {
+            return;
+        }
+        const parent = this.column.header?.htmlElement;
+        const container = this.container;
+        const parentWidth = parent?.offsetWidth || 0;
+        const containerWidth = this.buttons[0]?.wrapper?.offsetWidth || 0;
+        const parentPaddings = ((parent && getStyle(parent, 'padding-left', true) || 0) +
+            (parent && getStyle(parent, 'padding-right', true) || 0));
+        const containerMargins = ((container && getStyle(container, 'margin-left', true) || 0) +
+            (container && getStyle(container, 'margin-right', true) || 0));
+        const shouldBeCentered = parentWidth - parentPaddings < containerWidth + containerMargins;
+        if (this.isMenuCentered !== shouldBeCentered) {
+            this.isMenuCentered = shouldBeCentered;
+            this.column.header?.container?.classList.toggle(Globals.getClassName('noWidth'), shouldBeCentered);
+        }
+    }
+    /**
+     * Destroy the toolbar.
+     */
+    destroy() {
+        for (const destroyer of this.eventListenerDestroyers) {
+            destroyer();
+        }
+        this.eventListenerDestroyers.length = 0;
+        this.columnResizeObserver?.disconnect();
+        delete this.columnResizeObserver;
+    }
+    /**
+     * Focuses the first button of the toolbar.
+     */
+    focus() {
+        this.buttons[0]?.focus();
+    }
+    /**
+     * Handles the key down event on the toolbar.
+     *
+     * @param e
+     * Keyboard event object.
+     */
+    keyDownHandler(e) {
+        const len = this.buttons.length;
+        const cursor = this.focusCursor;
+        switch (e.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                this.buttons[Math.abs((cursor - 1 + len) % len)].focus();
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                this.buttons[(cursor + 1) % len].focus();
+                break;
+            case 'Escape':
+                this.column.header?.htmlElement.focus();
+                break;
+        }
+    }
+}
+/**
+ * The maximum width of the column to be minimized.
+ */
+HeaderCellToolbar.MINIMIZED_COLUMN_WIDTH = 120;
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default HeaderCellToolbar;

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

@@ -0,0 +1,29 @@
+import type Button from '../../../UI/Button';
+import ColumnFiltering from '../../Actions/ColumnFiltering/ColumnFiltering.js';
+import Popup from '../../../UI/Popup.js';
+/**
+ * The column filtering popup.
+ */
+declare class FilterPopup extends Popup {
+    /**
+     * The column filtering.
+     */
+    filtering: ColumnFiltering;
+    /**
+     * Constructs a column filtering popup.
+     *
+     * @param filtering
+     * The column filtering.
+     *
+     * @param button
+     * The button that opened the popup.
+     *
+     * @param options
+     * Popup options.
+     */
+    constructor(filtering: ColumnFiltering, button: Button, options?: Popup.Options);
+    show(anchorElement?: HTMLElement): void;
+    protected renderContent(contentElement: HTMLElement): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+}
+export default FilterPopup;

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

@@ -0,0 +1,77 @@
+/* *
+ *
+ *  Grid Filter Popup 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 Popup from '../../../UI/Popup.js';
+import U from '../../../../../Core/Utilities.js';
+const { merge } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * The column filtering popup.
+ */
+class FilterPopup extends Popup {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    /**
+     * Constructs a column filtering popup.
+     *
+     * @param filtering
+     * The column filtering.
+     *
+     * @param button
+     * The button that opened the popup.
+     *
+     * @param options
+     * Popup options.
+     */
+    constructor(filtering, button, options) {
+        const grid = filtering.column.viewport.grid;
+        super(grid, button, merge({
+            header: {
+                category: grid.options?.lang?.setFilter,
+                label: filtering.column.header?.value || ''
+            }
+        }, options));
+        this.filtering = filtering;
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    show(anchorElement) {
+        super.show(anchorElement);
+        this.filtering.filterSelect?.focus();
+    }
+    renderContent(contentElement) {
+        this.filtering.renderFilteringContent(contentElement);
+    }
+    onKeyDown(event) {
+        super.onKeyDown(event);
+        this.filtering.onKeyDown(event);
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default FilterPopup;