@highcharts/grid-pro 2.0.0

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

@@ -0,0 +1,70 @@
+import type { GroupedHeaderOptions } from '../../Options';
+import Cell from '../Cell.js';
+import Column from '../Column';
+import Row from '../Row';
+import TableHeader from './TableHeader.js';
+import ColumnToolbar from './ColumnToolbar/ColumnToolbar.js';
+/**
+ * Represents a cell in the data grid header.
+ */
+declare class HeaderCell extends Cell {
+    /**
+     * The HTML element of the header cell content.
+     */
+    headerContent?: HTMLElement;
+    /**
+     * The container element of the header cell.
+     */
+    container?: HTMLDivElement;
+    /**
+     * List of columns that are subordinated to the header cell.
+     */
+    readonly columns: Column[];
+    /**
+     * Content value of the header cell.
+     */
+    value: string;
+    /**
+     * The table header that this header cell belongs to.
+     */
+    tableHeader: TableHeader;
+    /**
+     * The toolbar of the header cell.
+     */
+    toolbar?: ColumnToolbar;
+    /**
+     * Constructs a cell in the data grid header.
+     *
+     * @param row
+     * The row of the cell.
+     *
+     * @param column
+     * The column of the cell.
+     *
+     * @param columnsTree
+     * If the cell is a wider than one column, this property contains the
+     * structure of the columns that are subordinated to the header cell.
+     */
+    constructor(row: Row, column?: Column, columnsTree?: GroupedHeaderOptions[]);
+    /**
+     * Init element.
+     */
+    init(): HTMLTableCellElement;
+    /**
+     * Render the cell container.
+     */
+    render(): void;
+    reflow(): void;
+    protected onKeyDown(e: KeyboardEvent): void;
+    protected onClick(e: MouseEvent): void;
+    /**
+     * Add sorting option to the column.
+     */
+    private initColumnSorting;
+    /**
+     * Check if the cell is part of the last cell in the header.
+     */
+    isLastColumn(): boolean;
+    destroy(): void;
+}
+export default HeaderCell;

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

@@ -0,0 +1,225 @@
+/* *
+ *
+ *  Grid HeaderCell 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 Cell from '../Cell.js';
+import GridUtils from '../../GridUtils.js';
+import ColumnSorting from '../Actions/ColumnSorting.js';
+import Globals from '../../Globals.js';
+import Utilities from '../../../../Core/Utilities.js';
+import ColumnToolbar from './ColumnToolbar/ColumnToolbar.js';
+const { makeHTMLElement, setHTMLContent, createOptionsProxy } = GridUtils;
+const { fireEvent, isString } = Utilities;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a cell in the data grid header.
+ */
+class HeaderCell extends Cell {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs a cell in the data grid header.
+     *
+     * @param row
+     * The row of the cell.
+     *
+     * @param column
+     * The column of the cell.
+     *
+     * @param columnsTree
+     * If the cell is a wider than one column, this property contains the
+     * structure of the columns that are subordinated to the header cell.
+     */
+    constructor(row, column, columnsTree) {
+        super(row, column);
+        /**
+         * Reference to options taken from the header settings, that will override
+         * the column options.
+         * @internal
+         */
+        this.superColumnOptions = {};
+        /**
+         * List of columns that are subordinated to the header cell.
+         */
+        this.columns = [];
+        /**
+         * Content value of the header cell.
+         */
+        this.value = '';
+        const header = this.row.viewport.header;
+        if (!header) {
+            throw new Error('No header found.');
+        }
+        this.tableHeader = header;
+        if (column) {
+            column.header = this;
+            this.columns.push(column);
+        }
+        else if (columnsTree) {
+            const vp = this.row.viewport;
+            const columnIds = vp.grid.getColumnIds(columnsTree, true);
+            for (const columnId of columnIds) {
+                const column = vp.getColumn(columnId);
+                if (column) {
+                    this.columns.push(column);
+                }
+            }
+        }
+    }
+    /* *
+    *
+    *  Methods
+    *
+    * */
+    /**
+     * Init element.
+     */
+    init() {
+        const elem = document.createElement('th', {});
+        elem.classList.add(Globals.getClassName('headerCell'));
+        elem.setAttribute('role', 'columnheader');
+        return elem;
+    }
+    /**
+     * Render the cell container.
+     */
+    render() {
+        const { column } = this;
+        const options = createOptionsProxy(this.superColumnOptions, column?.options);
+        const headerCellOptions = options.header || {};
+        if (headerCellOptions.formatter) {
+            this.value = headerCellOptions.formatter.call(this).toString();
+        }
+        else if (isString(headerCellOptions.format)) {
+            this.value = column ?
+                column.format(headerCellOptions.format) :
+                headerCellOptions.format;
+        }
+        else {
+            this.value = column?.id || '';
+        }
+        // Render content of th element
+        this.row.htmlElement.appendChild(this.htmlElement);
+        // Create flex container for header content and icons
+        const container = this.container = makeHTMLElement('div', {
+            className: Globals.getClassName('headerCellContainer')
+        }, this.htmlElement);
+        this.headerContent = makeHTMLElement('span', {
+            className: Globals.getClassName('headerCellContent')
+        }, container);
+        // Render the header cell element content.
+        setHTMLContent(this.headerContent, this.value);
+        this.htmlElement.setAttribute('scope', 'col');
+        if (this.superColumnOptions.className) {
+            this.htmlElement.classList.add(...this.superColumnOptions.className.split(/\s+/g));
+        }
+        if (column) {
+            this.htmlElement.setAttribute('data-column-id', column.id);
+            this.htmlElement.setAttribute('aria-label', column.id);
+            // Add user column classname
+            if (column.options.className) {
+                this.htmlElement.classList.add(...column.options.className.split(/\s+/g));
+            }
+            // Add resizing
+            column.viewport.columnsResizer?.renderColumnDragHandles(column, this);
+            // Add toolbar
+            this.toolbar = new ColumnToolbar(column);
+            this.toolbar.add();
+            // Add sorting
+            this.initColumnSorting();
+        }
+        this.setCustomClassName(options.header?.className);
+        // Add alignment to number column
+        if (column?.dataType === 'number') {
+            this.setCustomClassName(Globals.getClassName('rightAlign'));
+        }
+        fireEvent(this, 'afterRender', { column });
+    }
+    reflow() {
+        const th = this.htmlElement;
+        if (!th) {
+            return;
+        }
+        let width = 0;
+        for (const column of this.columns) {
+            width += column.getWidth() || 0;
+        }
+        // Set the width of the column. Max width is needed for the
+        // overflow: hidden to work.
+        th.style.width = th.style.maxWidth = width + 'px';
+        this.toolbar?.reflow();
+    }
+    onKeyDown(e) {
+        if (!this.column || e.target !== this.htmlElement) {
+            return;
+        }
+        if (e.key === 'Enter') {
+            this.toolbar?.focus();
+            e.preventDefault();
+            return;
+        }
+        super.onKeyDown(e);
+    }
+    onClick(e) {
+        const column = this.column;
+        if (!column || (e.target !== this.htmlElement &&
+            e.target !== column.header?.headerContent) || column.viewport.columnsResizer?.isResizing) {
+            return;
+        }
+        if (column.options.sorting?.sortable) {
+            column.sorting?.toggle();
+        }
+        fireEvent(this, 'click', {
+            originalEvent: e,
+            column: this.column
+        });
+    }
+    /**
+     * Add sorting option to the column.
+     */
+    initColumnSorting() {
+        const { column } = this;
+        if (!column) {
+            return;
+        }
+        column.sorting = new ColumnSorting(column, this.htmlElement);
+    }
+    /**
+     * Check if the cell is part of the last cell in the header.
+     */
+    isLastColumn() {
+        const vp = this.row.viewport;
+        const lastViewportColumn = vp.columns[vp.columns.length - 1];
+        const lastCellColumn = this.columns?.[this.columns.length - 1];
+        return lastViewportColumn === lastCellColumn;
+    }
+    destroy() {
+        this.toolbar?.destroy();
+        super.destroy();
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default HeaderCell;

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

@@ -0,0 +1,53 @@
+import type { GroupedHeaderOptions } from '../../Options';
+import Table from '../Table.js';
+import Row from '../Row.js';
+import HeaderCell from './HeaderCell.js';
+import Column from '../Column.js';
+/**
+ * Represents a row in the data grid header.
+ */
+declare class HeaderRow extends Row {
+    /**
+     * The level in the header.
+     */
+    level: number;
+    /**
+     * Constructs a row in the data grid.
+     *
+     * @param viewport
+     * The Grid Table instance which the row belongs to.
+     *
+     * @param level
+     * The current level of header that is rendered.
+     */
+    constructor(viewport: Table, level: number);
+    createCell(column?: Column, columnsTree?: GroupedHeaderOptions[]): HeaderCell;
+    reflow(): void;
+    /**
+     * Sets a specific class to the last cell in the row.
+     */
+    protected setLastCellClass(): void;
+    /**
+     * Get all headers that should be rendered in a level.
+     *
+     * @param scope
+     * Level that we start from
+     *
+     * @param targetLevel
+     * Max level
+     *
+     * @param currentLevel
+     * Current level
+     *
+     * @return
+     * Array of headers that should be rendered in a level
+     */
+    private getColumnsAtLevel;
+    /**
+     * Sets the row HTML element attributes and additional classes.
+     */
+    private setRowAttributes;
+}
+declare namespace HeaderRow {
+}
+export default HeaderRow;

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

@@ -0,0 +1,182 @@
+/* *
+ *
+ *  Grid HeaderRow 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 Row from '../Row.js';
+import HeaderCell from './HeaderCell.js';
+import Globals from '../../Globals.js';
+import Utils from '../../../../Core/Utilities.js';
+const { isString } = Utils;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a row in the data grid header.
+ */
+class HeaderRow extends Row {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs a row in the data grid.
+     *
+     * @param viewport
+     * The Grid Table instance which the row belongs to.
+     *
+     * @param level
+     * The current level of header that is rendered.
+     */
+    constructor(viewport, level) {
+        super(viewport);
+        this.level = level;
+        this.setRowAttributes();
+    }
+    /* *
+    *
+    *  Methods
+    *
+    * */
+    createCell(column, columnsTree) {
+        return new HeaderCell(this, column, columnsTree);
+    }
+    /**
+     * Renders the row's content in the header.
+     *
+     * @param level
+     * The current level in the header tree
+     *
+     * @internal
+     */
+    renderContent(level) {
+        const headerOpt = this.viewport.grid.options?.header;
+        const vp = this.viewport;
+        const enabledColumns = vp.grid.enabledColumns || [];
+        // Render element
+        vp.theadElement?.appendChild(this.htmlElement);
+        this.htmlElement.classList.add(Globals.getClassName('headerRow'));
+        if (!headerOpt) {
+            super.render();
+        }
+        else {
+            const columnsOnLevel = this.getColumnsAtLevel(headerOpt, level);
+            for (let i = 0, iEnd = columnsOnLevel.length; i < iEnd; i++) {
+                const columnOnLevel = columnsOnLevel[i];
+                const colIsString = typeof columnOnLevel === 'string';
+                const colSpan = (!colIsString && columnOnLevel.columns) ?
+                    vp.grid.getColumnIds(columnOnLevel.columns).length : 0;
+                const columnId = colIsString ?
+                    columnOnLevel : columnOnLevel.columnId;
+                const dataColumn = columnId ?
+                    vp.getColumn(columnId || '') : void 0;
+                const headerFormat = !colIsString ?
+                    columnOnLevel.format : void 0;
+                const className = !colIsString ?
+                    columnOnLevel.className : void 0;
+                // Skip hidden column or header when all columns are hidden.
+                if ((columnId && enabledColumns &&
+                    enabledColumns.indexOf(columnId) < 0) || (!dataColumn && colSpan === 0)) {
+                    continue;
+                }
+                const headerCell = this.createCell(dataColumn, !colIsString ? columnOnLevel.columns : void 0);
+                if (!colIsString) {
+                    vp.grid.accessibility?.addHeaderCellDescription(headerCell.htmlElement, columnOnLevel.accessibility?.description);
+                }
+                if (isString(headerFormat)) {
+                    if (!headerCell.superColumnOptions.header) {
+                        headerCell.superColumnOptions.header = {};
+                    }
+                    headerCell.superColumnOptions.header.format = headerFormat;
+                }
+                if (className) {
+                    headerCell.superColumnOptions.className = className;
+                }
+                // Add class to disable left border on first column
+                if (dataColumn?.index === 0 && i === 0) {
+                    headerCell.htmlElement.classList.add(Globals.getClassName('columnFirst'));
+                }
+                headerCell.render();
+                if (columnId) {
+                    headerCell.htmlElement.setAttribute('rowSpan', (this.viewport.header?.levels || 1) - level);
+                }
+                else {
+                    if (colSpan > 1) {
+                        headerCell.htmlElement.setAttribute('colSpan', colSpan);
+                    }
+                }
+            }
+        }
+        this.setLastCellClass();
+    }
+    reflow() {
+        const row = this;
+        for (let i = 0, iEnd = row.cells.length; i < iEnd; i++) {
+            const cell = row.cells[i];
+            cell.reflow();
+        }
+    }
+    /**
+     * Sets a specific class to the last cell in the row.
+     */
+    setLastCellClass() {
+        const lastCell = this.cells[this.cells.length - 1];
+        if (lastCell.isLastColumn()) {
+            lastCell.htmlElement.classList.add(Globals.getClassName('lastHeaderCellInRow'));
+        }
+    }
+    /**
+     * Get all headers that should be rendered in a level.
+     *
+     * @param scope
+     * Level that we start from
+     *
+     * @param targetLevel
+     * Max level
+     *
+     * @param currentLevel
+     * Current level
+     *
+     * @return
+     * Array of headers that should be rendered in a level
+     */
+    getColumnsAtLevel(scope, targetLevel, currentLevel = 0) {
+        let result = [];
+        for (const column of scope) {
+            if (currentLevel === targetLevel) {
+                result.push(column);
+            }
+            if (typeof column !== 'string' && column.columns) {
+                result = result.concat(this.getColumnsAtLevel(column.columns, targetLevel, currentLevel + 1));
+            }
+        }
+        return result;
+    }
+    /**
+     * Sets the row HTML element attributes and additional classes.
+     */
+    setRowAttributes() {
+        this.viewport.grid.accessibility?.setRowIndex(this.htmlElement, this.level // Level (1-based)
+        );
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default HeaderRow;

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

@@ -0,0 +1,65 @@
+import Column from '../Column.js';
+import Table from '../Table.js';
+import HeaderRow from './HeaderRow.js';
+/**
+ * Represents a table header row containing the cells (headers) with
+ * column names.
+ */
+declare class TableHeader {
+    /**
+     * The visible columns of the table.
+     */
+    columns: Column[];
+    /**
+     * The container of the table head.
+     */
+    rows: HeaderRow[];
+    /**
+     * The viewport (table) the table head belongs to.
+     */
+    viewport: Table;
+    /**
+     * Amount of levels in the header, that is used in creating correct rows.
+     * Excludes any extra levels, like filtering row.
+     */
+    levels: number;
+    /**
+     * Constructs a new table head.
+     *
+     * @param viewport
+     * The viewport (table) the table head belongs to.
+     */
+    constructor(viewport: Table);
+    /**
+     * Renders the table head content.
+     */
+    render(): void;
+    /**
+     * Reflows the table head's content dimensions.
+     */
+    reflow(): void;
+    /**
+     * Returns amount of rows for the current cell in header tree.
+     *
+     * @param scope
+     * Structure of header
+     *
+     * @returns
+     */
+    private getRowLevels;
+    /**
+     * Scrolls the table head horizontally, only when the virtualization
+     * is enabled.
+     *
+     * @param scrollLeft
+     * The left scroll position.
+     */
+    scrollHorizontally(scrollLeft: number): void;
+    /**
+     * Destroys the table header and all its associated components.
+     */
+    destroy(): void;
+}
+declare namespace TableHeader {
+}
+export default TableHeader;