@highcharts/grid-pro 2.0.0

package/es-modules/Grid/Core/Table/CellContent/TextContent.js

@@ -0,0 +1,98 @@
+/* *
+ *
+ *  Text Cell Content 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 AST from '../../../../Core/Renderer/HTML/AST.js';
+import CellContent from './CellContent.js';
+import GridUtils from '../../GridUtils.js';
+const { setHTMLContent } = GridUtils;
+import Utils from '../../../../Core/Utilities.js';
+const { defined } = Utils;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a text type of content.
+ */
+class TextContent extends CellContent {
+    constructor(cell) {
+        super(cell);
+        this.add();
+    }
+    add() {
+        this.update();
+    }
+    destroy() {
+        this.cell.htmlElement.innerHTML = AST.emptyHTML;
+    }
+    update() {
+        setHTMLContent(this.cell.htmlElement, this.format());
+    }
+    /**
+     * Returns the formatted value of the cell.
+     *
+     * @internal
+     */
+    format() {
+        const { cell } = this;
+        const cellsDefaults = cell.row.viewport.grid.options?.columnDefaults?.cells || {};
+        const { format, formatter } = cell.column.options.cells || {};
+        let value = cell.value;
+        if (!defined(value)) {
+            value = '';
+        }
+        let cellContent = '';
+        if (!format && !formatter) {
+            return cell.format(TextContent.defaultFormatsForDataTypes[cell.column.dataType]);
+        }
+        const isDefaultFormat = cellsDefaults.format === format;
+        const isDefaultFormatter = cellsDefaults.formatter === formatter;
+        if (isDefaultFormat && isDefaultFormatter) {
+            cellContent = formatter ?
+                formatter.call(cell).toString() :
+                (format ? cell.format(format) : value + '');
+        }
+        else if (isDefaultFormat) {
+            cellContent = formatter?.call(cell).toString() || value + '';
+        }
+        else if (isDefaultFormatter) {
+            cellContent = format ? cell.format(format) : value + '';
+        }
+        return cellContent;
+    }
+}
+/* *
+ *
+ *  Namespace
+ *
+ * */
+(function (TextContent) {
+    /**
+     * Default formats for data types.
+     */
+    TextContent.defaultFormatsForDataTypes = {
+        string: '{value}',
+        number: '{value}',
+        'boolean': '{value}',
+        datetime: '{value:%Y-%m-%d %H:%M:%S}'
+    };
+})(TextContent || (TextContent = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default TextContent;

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

@@ -0,0 +1,136 @@
+import type { IndividualColumnOptions } from '../Options';
+import type Cell from './Cell';
+import type CellContent from './CellContent/CellContent';
+import type HeaderCell from './Header/HeaderCell';
+import Table from './Table.js';
+import DataTable from '../../../Data/DataTable.js';
+import ColumnSorting from './Actions/ColumnSorting';
+import ColumnFiltering from './Actions/ColumnFiltering/ColumnFiltering.js';
+import TableCell from './Body/TableCell';
+/**
+ * Represents a column in the data grid.
+ */
+declare class Column {
+    /**
+     * The viewport (table) the column belongs to.
+     */
+    readonly viewport: Table;
+    /**
+     * Type of the data in the column.
+     */
+    readonly dataType: Column.DataType;
+    /**
+     * The cells of the column.
+     */
+    cells: Cell[];
+    /**
+     * The id of the column (`name` in the Data Table).
+     */
+    id: string;
+    /**
+     * The data of the column.
+     */
+    data?: DataTable.Column;
+    /**
+     * The options of the column as a proxy that provides merged access to
+     * original options and defaults if not defined in the individual options.
+     */
+    readonly options: Column.Options;
+    /**
+     * The index of the column in the viewport.
+     */
+    readonly index: number;
+    /**
+     * The wrapper for content of head.
+     */
+    header?: HeaderCell;
+    /**
+     * Sorting column module.
+     */
+    sorting?: ColumnSorting;
+    /**
+     * Filtering column module.
+     */
+    filtering?: ColumnFiltering;
+    /**
+     * Constructs a column in the data grid.
+     *
+     * @param viewport
+     * The viewport (table) the column belongs to.
+     *
+     * @param id
+     * The id of the column (`name` in the Data Table).
+     *
+     * @param index
+     * The index of the column.
+     */
+    constructor(viewport: Table, id: string, index: number);
+    /**
+     * Loads the data of the column from the viewport's data table.
+     */
+    loadData(): void;
+    /**
+     * Creates a cell content instance.
+     *
+     * @param cell
+     * The cell that is to be edited.
+     *
+     */
+    createCellContent(cell: TableCell): CellContent;
+    /**
+     * Assumes the data type of the column based on the options or data in the
+     * column if not specified.
+     */
+    private assumeDataType;
+    /**
+     * Registers a cell in the column.
+     *
+     * @param cell
+     * The cell to register.
+     */
+    registerCell(cell: Cell): void;
+    /**
+     * Unregister a cell from the column.
+     *
+     * @param cell
+     * The cell to unregister.
+     */
+    unregisterCell(cell: Cell): void;
+    /**
+     * Returns the width of the column in pixels.
+     */
+    getWidth(): number;
+    /**
+     * Adds or removes the hovered CSS class to the column element
+     * and its cells.
+     *
+     * @param hovered
+     * Whether the column should be hovered.
+     */
+    setHoveredState(hovered: boolean): void;
+    /**
+     * Adds or removes the synced CSS class to the column element
+     * and its cells.
+     *
+     * @param synced
+     * Whether the column should have synced state.
+     */
+    setSyncedState(synced: boolean): void;
+    /**
+     * Returns the formatted string where the templating context is the column.
+     *
+     * @param template
+     * The template string.
+     *
+     * @return
+     * The formatted string.
+     */
+    format(template: string): string;
+    update(options: Column.Options, render?: boolean): void;
+    update(options: Column.Options, render?: true): Promise<void>;
+}
+declare namespace Column {
+    type Options = Omit<IndividualColumnOptions, 'id'>;
+    type DataType = 'string' | 'number' | 'boolean' | 'datetime';
+}
+export default Column;

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

@@ -0,0 +1,230 @@
+/* *
+ *
+ *  Grid Column class
+ *
+ *  (c) 2020-2025 Highsoft AS
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ *  Authors:
+ *  - Dawid Dragula
+ *  - Sebastian Bochan
+ *
+ * */
+'use strict';
+import Utils from '../../../Core/Utilities.js';
+import ColumnFiltering from './Actions/ColumnFiltering/ColumnFiltering.js';
+import Templating from '../../../Core/Templating.js';
+import TextContent from './CellContent/TextContent.js';
+import Globals from '../Globals.js';
+import GridUtils from '../GridUtils.js';
+const { defined, fireEvent } = Utils;
+const { createOptionsProxy } = GridUtils;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a column in the data grid.
+ */
+class Column {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs a column in the data grid.
+     *
+     * @param viewport
+     * The viewport (table) the column belongs to.
+     *
+     * @param id
+     * The id of the column (`name` in the Data Table).
+     *
+     * @param index
+     * The index of the column.
+     */
+    constructor(viewport, id, index) {
+        var _a;
+        /**
+         * The cells of the column.
+         */
+        this.cells = [];
+        const { grid } = viewport;
+        this.id = id;
+        this.index = index;
+        this.viewport = viewport;
+        this.loadData();
+        this.dataType = this.assumeDataType();
+        // Populate column options map if not exists, to prepare option
+        // references for each column.
+        if (grid.options && !grid.columnOptionsMap?.[id]) {
+            const columnOptions = { id };
+            ((_a = grid.options).columns ?? (_a.columns = [])).push(columnOptions);
+            grid.columnOptionsMap[id] = {
+                index: grid.options.columns.length - 1,
+                options: columnOptions
+            };
+        }
+        this.options = createOptionsProxy(grid.columnOptionsMap?.[id]?.options ?? {}, grid.options?.columnDefaults);
+        if (this.options.filtering?.enabled) {
+            this.filtering = new ColumnFiltering(this);
+        }
+        fireEvent(this, 'afterInit');
+    }
+    /* *
+    *
+    *  Methods
+    *
+    * */
+    /**
+     * Loads the data of the column from the viewport's data table.
+     */
+    loadData() {
+        this.data = this.viewport.dataTable.getColumn(this.id, true);
+    }
+    /**
+     * Creates a cell content instance.
+     *
+     * @param cell
+     * The cell that is to be edited.
+     *
+     */
+    createCellContent(cell) {
+        return new TextContent(cell);
+    }
+    /**
+     * Assumes the data type of the column based on the options or data in the
+     * column if not specified.
+     */
+    assumeDataType() {
+        const { grid } = this.viewport;
+        const type = grid.columnOptionsMap?.[this.id]?.options.dataType ??
+            grid.options?.columnDefaults?.dataType;
+        if (type) {
+            return type;
+        }
+        if (!this.data) {
+            return 'string';
+        }
+        if (!Array.isArray(this.data)) {
+            // Typed array
+            return 'number';
+        }
+        for (let i = 0, iEnd = Math.min(this.data.length, 30); i < iEnd; ++i) {
+            if (!defined(this.data[i])) {
+                // If the data is null or undefined, we should look
+                // at the next value to determine the type.
+                continue;
+            }
+            switch (typeof this.data[i]) {
+                case 'number':
+                    return 'number';
+                case 'boolean':
+                    return 'boolean';
+                default:
+                    return 'string';
+            }
+        }
+        // eslint-disable-next-line no-console
+        console.warn(`Column "${this.id}" contains too few data points with ` +
+            'unambiguous types to correctly determine its dataType. It\'s ' +
+            'recommended to set the `dataType` option for it.');
+        return 'string';
+    }
+    /**
+     * Registers a cell in the column.
+     *
+     * @param cell
+     * The cell to register.
+     */
+    registerCell(cell) {
+        cell.htmlElement.setAttribute('data-column-id', this.id);
+        if (this.options.className) {
+            cell.htmlElement.classList.add(...this.options.className.split(/\s+/g));
+        }
+        if (this.viewport.grid.hoveredColumnId === this.id) {
+            cell.htmlElement.classList.add(Globals.getClassName('hoveredColumn'));
+        }
+        this.cells.push(cell);
+    }
+    /**
+     * Unregister a cell from the column.
+     *
+     * @param cell
+     * The cell to unregister.
+     */
+    unregisterCell(cell) {
+        const index = this.cells.indexOf(cell);
+        if (index > -1) {
+            this.cells.splice(index, 1);
+        }
+    }
+    /**
+     * Returns the width of the column in pixels.
+     */
+    getWidth() {
+        return this.viewport.columnResizing.getColumnWidth(this);
+    }
+    /**
+     * Adds or removes the hovered CSS class to the column element
+     * and its cells.
+     *
+     * @param hovered
+     * Whether the column should be hovered.
+     */
+    setHoveredState(hovered) {
+        this.header?.htmlElement?.classList[hovered ? 'add' : 'remove'](Globals.getClassName('hoveredColumn'));
+        for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
+            this.cells[i].htmlElement.classList[hovered ? 'add' : 'remove'](Globals.getClassName('hoveredColumn'));
+        }
+    }
+    /**
+     * Adds or removes the synced CSS class to the column element
+     * and its cells.
+     *
+     * @param synced
+     * Whether the column should have synced state.
+     */
+    setSyncedState(synced) {
+        this.header?.htmlElement?.classList[synced ? 'add' : 'remove'](Globals.getClassName('syncedColumn'));
+        for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
+            this.cells[i].htmlElement.classList[synced ? 'add' : 'remove'](Globals.getClassName('syncedColumn'));
+        }
+    }
+    /**
+     * Returns the formatted string where the templating context is the column.
+     *
+     * @param template
+     * The template string.
+     *
+     * @return
+     * The formatted string.
+     */
+    format(template) {
+        return Templating.format(template, this, this.viewport.grid);
+    }
+    /**
+     * Updates the column with new options.
+     *
+     * @param newOptions
+     * The new options for the column.
+     *
+     * @param render
+     * Whether to re-render after the update. If `false`, the update will just
+     * extend the options object. Defaults to `true`.
+     */
+    async update(newOptions, render = true) {
+        await this.viewport.grid.updateColumn(this.id, newOptions, render);
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default Column;

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

@@ -0,0 +1,7 @@
+import type ColumnsResizer from '../Actions/ColumnsResizer';
+import ResizingMode from './ResizingMode.js';
+declare class AdjacentResizingMode extends ResizingMode {
+    readonly type: "adjacent";
+    resize(resizer: ColumnsResizer, diff: number): void;
+}
+export default AdjacentResizingMode;

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

@@ -0,0 +1,62 @@
+/* *
+ *
+ *  Adjacent 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 AdjacentResizingMode extends ResizingMode {
+    constructor() {
+        /* *
+         *
+         *  Properties
+         *
+         * */
+        super(...arguments);
+        this.type = 'adjacent';
+    }
+    /* *
+     *
+     *  Methods
+     *
+     * */
+    resize(resizer, diff) {
+        const vp = this.viewport;
+        const column = resizer.draggedColumn;
+        if (!column) {
+            return;
+        }
+        const colW = resizer.columnStartWidth ?? 0;
+        const minWidth = ResizingMode.getMinWidth(column);
+        const nextCol = vp.columns[column.index + 1];
+        const newW = Math.round(Math.max(colW + diff, minWidth) * 10) / 10;
+        this.columnWidths[column.id] = newW;
+        this.columnWidthUnits[column.id] = 0; // Always save in px
+        column.update({ width: newW }, false);
+        if (nextCol) {
+            const newNextW = this.columnWidths[nextCol.id] = Math.round(Math.max((resizer.nextColumnStartWidth ?? 0) + colW - newW, minWidth) * 10) / 10;
+            this.columnWidthUnits[nextCol.id] = 0; // Always save in px
+            nextCol.update({ width: newNextW }, false);
+        }
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default AdjacentResizingMode;

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

@@ -0,0 +1,32 @@
+import type Table from '../Table';
+import ResizingMode from './ResizingMode.js';
+import AdjacentResizingMode from './AdjacentResizingMode.js';
+import IndependentResizingMode from './IndependentResizingMode.js';
+import DistributedResizingMode from './DistributedResizingMode.js';
+declare namespace ColumnResizing {
+    /**
+     * Abstract class representing a column resizing mode.
+     */
+    const AbstractStrategy: typeof ResizingMode;
+    /**
+     * Registry of column resizing modes.
+     */
+    const types: {
+        adjacent: typeof AdjacentResizingMode;
+        distributed: typeof DistributedResizingMode;
+        independent: typeof IndependentResizingMode;
+    };
+    type ModeType = keyof typeof types;
+    /**
+     * Creates a new column resizing mode instance based on the
+     * viewport's options.
+     *
+     * @param viewport
+     * The table that the column resizing mode is applied to.
+     *
+     * @returns
+     * The proper column resizing mode.
+     */
+    function initMode(viewport: Table): ResizingMode;
+}
+export default ColumnResizing;

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

@@ -0,0 +1,68 @@
+/* *
+ *
+ *  Column Resizing namespace
+ *
+ *  (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';
+import AdjacentResizingMode from './AdjacentResizingMode.js';
+import IndependentResizingMode from './IndependentResizingMode.js';
+import DistributedResizingMode from './DistributedResizingMode.js';
+/* *
+ *
+ *  Namespace
+ *
+ * */
+var ColumnResizing;
+(function (ColumnResizing) {
+    /**
+     * Abstract class representing a column resizing mode.
+     */
+    ColumnResizing.AbstractStrategy = ResizingMode;
+    /**
+     * Registry of column resizing modes.
+     */
+    ColumnResizing.types = {
+        adjacent: AdjacentResizingMode,
+        distributed: DistributedResizingMode,
+        independent: IndependentResizingMode
+    };
+    /**
+     * Creates a new column resizing mode instance based on the
+     * viewport's options.
+     *
+     * @param viewport
+     * The table that the column resizing mode is applied to.
+     *
+     * @returns
+     * The proper column resizing mode.
+     */
+    function initMode(viewport) {
+        const modeName = viewport.grid.options?.rendering?.columns?.resizing?.mode ||
+            'adjacent';
+        let ModeConstructor = ColumnResizing.types[modeName];
+        if (!ModeConstructor) {
+            // eslint-disable-next-line no-console
+            console.warn(`Unknown column resizing mode: '${modeName}'. Applied ` +
+                'default \'adjacent\' mode.');
+            ModeConstructor = ColumnResizing.types.adjacent;
+        }
+        return new ModeConstructor(viewport);
+    }
+    ColumnResizing.initMode = initMode;
+})(ColumnResizing || (ColumnResizing = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ColumnResizing;

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

@@ -0,0 +1,7 @@
+import type ColumnsResizer from '../Actions/ColumnsResizer.js';
+import ResizingMode from './ResizingMode.js';
+declare class DistributedResizingMode extends ResizingMode {
+    readonly type: "distributed";
+    resize(resizer: ColumnsResizer, diff: number): void;
+}
+export default DistributedResizingMode;

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

@@ -0,0 +1,53 @@
+/* *
+ *
+ *  Distributed 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 DistributedResizingMode extends ResizingMode {
+    constructor() {
+        /* *
+         *
+         *  Properties
+         *
+         * */
+        super(...arguments);
+        this.type = 'distributed';
+    }
+    /* *
+     *
+     *  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
+        column.update({ width }, false);
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default DistributedResizingMode;

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

@@ -0,0 +1,7 @@
+import type ColumnsResizer from '../Actions/ColumnsResizer.js';
+import ResizingMode from './ResizingMode.js';
+declare class IndependentResizingMode extends ResizingMode {
+    readonly type: "independent";
+    resize(resizer: ColumnsResizer, diff: number): void;
+}
+export default IndependentResizingMode;