@highcharts/grid-pro 2.0.0

package/es-modules/Grid/Core/Table/Body/TableRow.d.ts

@@ -0,0 +1,79 @@
+import type Cell from '../Cell';
+import type Column from '../Column';
+import type DataTable from '../../../../Data/DataTable';
+import Row from '../Row.js';
+import Table from '../Table.js';
+/**
+ * Represents a row in the data grid.
+ */
+declare class TableRow extends Row {
+    /**
+     * The row values from the data table in the original column order.
+     */
+    data: DataTable.RowObject;
+    /**
+     * The local index of the row in the presentation data table.
+     */
+    index: number;
+    /**
+     * The index of the row in the original data table (ID).
+     */
+    id?: number;
+    /**
+     * The vertical translation of the row.
+     */
+    translateY: number;
+    /**
+     * Constructs a row in the data grid.
+     *
+     * @param viewport
+     * The Grid Table instance which the row belongs to.
+     *
+     * @param index
+     * The index of the row in the data table.
+     */
+    constructor(viewport: Table, index: number);
+    createCell(column: Column): Cell;
+    /**
+     * Loads the row data from the data table.
+     */
+    private loadData;
+    /**
+     * Updates the row data and its cells with the latest values from the data
+     * table.
+     */
+    update(): void;
+    /**
+     * Adds or removes the hovered CSS class to the row element.
+     *
+     * @param hovered
+     * Whether the row should be hovered.
+     */
+    setHoveredState(hovered: boolean): void;
+    /**
+     * Adds or removes the synced CSS class to the row element.
+     *
+     * @param synced
+     * Whether the row should be synced.
+     */
+    setSyncedState(synced: boolean): void;
+    /**
+     * Sets the row HTML element attributes and additional classes.
+     */
+    setRowAttributes(): void;
+    /**
+     * Sets the row HTML element attributes that are updateable in the row
+     * lifecycle.
+     */
+    updateRowAttributes(): void;
+    /**
+     * Sets the vertical translation of the row. Used for virtual scrolling.
+     *
+     * @param value
+     * The vertical translation of the row.
+     */
+    setTranslateY(value: number): void;
+}
+declare namespace TableRow {
+}
+export default TableRow;

package/es-modules/Grid/Core/Table/Body/TableRow.js

@@ -0,0 +1,177 @@
+/* *
+ *
+ *  Grid TableRow 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 TableCell from './TableCell.js';
+import Globals from '../../Globals.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a row in the data grid.
+ */
+class TableRow extends Row {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs a row in the data grid.
+     *
+     * @param viewport
+     * The Grid Table instance which the row belongs to.
+     *
+     * @param index
+     * The index of the row in the data table.
+     */
+    constructor(viewport, index) {
+        super(viewport);
+        /* *
+        *
+        *  Properties
+        *
+        * */
+        /**
+         * The row values from the data table in the original column order.
+         */
+        this.data = {};
+        /**
+         * The vertical translation of the row.
+         */
+        this.translateY = 0;
+        this.index = index;
+        this.id = viewport.dataTable.getOriginalRowIndex(index);
+        this.loadData();
+        this.setRowAttributes();
+    }
+    /* *
+    *
+    *  Methods
+    *
+    * */
+    createCell(column) {
+        return new TableCell(this, column);
+    }
+    /**
+     * Loads the row data from the data table.
+     */
+    loadData() {
+        const data = this.viewport.dataTable.getRowObject(this.index);
+        if (!data) {
+            return;
+        }
+        this.data = data;
+    }
+    /**
+     * Updates the row data and its cells with the latest values from the data
+     * table.
+     */
+    update() {
+        this.id = this.viewport.dataTable.getOriginalRowIndex(this.index);
+        this.updateRowAttributes();
+        this.loadData();
+        for (let i = 0, iEnd = this.cells.length; i < iEnd; ++i) {
+            const cell = this.cells[i];
+            void cell.setValue();
+        }
+        this.reflow();
+    }
+    /**
+     * Adds or removes the hovered CSS class to the row element.
+     *
+     * @param hovered
+     * Whether the row should be hovered.
+     */
+    setHoveredState(hovered) {
+        this.htmlElement.classList[hovered ? 'add' : 'remove'](Globals.getClassName('hoveredRow'));
+        if (hovered) {
+            this.viewport.grid.hoveredRowIndex = this.index;
+        }
+    }
+    /**
+     * Adds or removes the synced CSS class to the row element.
+     *
+     * @param synced
+     * Whether the row should be synced.
+     */
+    setSyncedState(synced) {
+        this.htmlElement.classList[synced ? 'add' : 'remove'](Globals.getClassName('syncedRow'));
+        if (synced) {
+            this.viewport.grid.syncedRowIndex = this.index;
+        }
+    }
+    /**
+     * Sets the row HTML element attributes and additional classes.
+     */
+    setRowAttributes() {
+        const idx = this.index;
+        const el = this.htmlElement;
+        el.classList.add(Globals.getClassName('rowElement'));
+        // Index of the row in the presentation data table
+        el.setAttribute('data-row-index', idx);
+        this.updateRowAttributes();
+        // Indexing from 0, so rows with even index are odd.
+        el.classList.add(Globals.getClassName(idx % 2 ? 'rowEven' : 'rowOdd'));
+        if (this.viewport.grid.hoveredRowIndex === idx) {
+            el.classList.add(Globals.getClassName('hoveredRow'));
+        }
+        if (this.viewport.grid.syncedRowIndex === idx) {
+            el.classList.add(Globals.getClassName('syncedRow'));
+        }
+    }
+    /**
+     * Sets the row HTML element attributes that are updateable in the row
+     * lifecycle.
+     */
+    updateRowAttributes() {
+        const vp = this.viewport;
+        const a11y = vp.grid.accessibility;
+        const idx = this.index;
+        const el = this.htmlElement;
+        // Index of the row in the original data table (ID)
+        if (this.id !== void 0) {
+            el.setAttribute('data-row-id', this.id);
+        }
+        // Calculate levels of header, 1 to avoid indexing from 0
+        a11y?.setRowIndex(el, idx + (vp.header?.rows.length ?? 0) + 1);
+    }
+    /**
+     * Sets the vertical translation of the row. Used for virtual scrolling.
+     *
+     * @param value
+     * The vertical translation of the row.
+     */
+    setTranslateY(value) {
+        this.translateY = value;
+        this.htmlElement.style.transform = `translateY(${value}px)`;
+    }
+    /**
+     * Returns the default top offset of the row (before adjusting row heights).
+     * @internal
+     */
+    getDefaultTopOffset() {
+        return this.index * this.viewport.rowsVirtualizer.defaultRowHeight;
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default TableRow;

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

@@ -0,0 +1,92 @@
+import type DataTable from '../../../Data/DataTable';
+import Column from './Column';
+import Row from './Row';
+declare abstract class Cell {
+    /**
+     * The HTML element of the cell.
+     */
+    htmlElement: HTMLTableCellElement;
+    /**
+     * The column of the cell.
+     */
+    column?: Column;
+    /**
+     * The row of the cell.
+     */
+    row: Row;
+    /**
+     * The raw value of the cell.
+     */
+    value: DataTable.CellType;
+    /**
+     * An additional, custom class name that can be changed dynamically.
+     */
+    private customClassName?;
+    /**
+     * Array of cell events to be removed when the cell is destroyed.
+     */
+    protected cellEvents: Array<[
+        keyof HTMLElementEventMap,
+        (e: Event) => void
+    ]>;
+    /**
+     * Constructs a cell in the data grid.
+     *
+     * @param row
+     * The row of the cell.
+     *
+     * @param column
+     * The column of the cell.
+     */
+    constructor(row: Row, column?: Column);
+    /**
+     * Initialize event listeners. Events added to the `cellEvents` array will
+     * be registered now and unregistered when the cell is destroyed.
+     */
+    protected initEvents(): void;
+    /**
+     * Handles the focus event on the cell.
+     */
+    protected onFocus(): void;
+    /**
+     * Handles the blur event on the cell.
+     */
+    protected onBlur(): void;
+    /**
+     * Handles user keydown on the cell.
+     *
+     * @param e
+     * Keyboard event object.
+     */
+    protected onKeyDown(e: KeyboardEvent): void;
+    /**
+     * Renders the cell by appending the HTML element to the row.
+     */
+    render(): void;
+    /**
+     * Reflows the cell dimensions.
+     */
+    reflow(): void;
+    /**
+     * Returns the formatted string where the templating context is the cell.
+     *
+     * @param template
+     * The template string.
+     *
+     * @return
+     * The formatted string.
+     */
+    format(template: string): string;
+    /**
+     * Sets the custom class name of the cell based on the template.
+     *
+     * @param template
+     * The template string.
+     */
+    protected setCustomClassName(template?: string): void;
+    /**
+     * Destroys the cell.
+     */
+    destroy(): void;
+}
+export default Cell;

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

@@ -0,0 +1,223 @@
+/* *
+ *
+ *  Grid Cell abstract 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 Templating from '../../../Core/Templating.js';
+/* *
+ *
+ *  Abstract Class of Cell
+ *
+ * */
+class Cell {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs a cell in the data grid.
+     *
+     * @param row
+     * The row of the cell.
+     *
+     * @param column
+     * The column of the cell.
+     */
+    constructor(row, column) {
+        /**
+         * Array of cell events to be removed when the cell is destroyed.
+         */
+        this.cellEvents = [];
+        this.column = column;
+        this.row = row;
+        this.row.registerCell(this);
+        this.htmlElement = this.init();
+        this.htmlElement.setAttribute('tabindex', '-1');
+        if (!this.column?.options.cells?.editMode?.enabled) {
+            this.htmlElement.setAttribute('aria-readonly', 'true');
+        }
+        this.initEvents();
+    }
+    /* *
+    *
+    *  Methods
+    *
+    * */
+    /**
+     * Init element.
+     * @internal
+     */
+    init() {
+        const cell = document.createElement('td', {});
+        cell.setAttribute('role', 'gridcell');
+        return cell;
+    }
+    /**
+     * Initialize event listeners. Events added to the `cellEvents` array will
+     * be registered now and unregistered when the cell is destroyed.
+     */
+    initEvents() {
+        this.cellEvents.push(['blur', () => this.onBlur()]);
+        this.cellEvents.push(['focus', () => this.onFocus()]);
+        this.cellEvents.push(['click', (e) => {
+                this.onClick(e);
+            }]);
+        this.cellEvents.push(['keydown', (e) => {
+                this.onKeyDown(e);
+            }]);
+        this.cellEvents.forEach((pair) => {
+            this.htmlElement.addEventListener(pair[0], pair[1]);
+        });
+    }
+    /**
+     * Handles the focus event on the cell.
+     */
+    onFocus() {
+        this.row.viewport.setFocusAnchorCell(this);
+    }
+    /**
+     * Handles the blur event on the cell.
+     */
+    onBlur() {
+        delete this.row.viewport.focusCursor;
+    }
+    /**
+     * Handles user keydown on the cell.
+     *
+     * @param e
+     * Keyboard event object.
+     */
+    onKeyDown(e) {
+        const { row, column } = this;
+        if (!column) {
+            return;
+        }
+        const vp = row.viewport;
+        const { header } = vp;
+        const getVerticalPos = () => {
+            if (row.index !== void 0) {
+                return row.index - vp.rows[0].index;
+            }
+            const level = row.level;
+            if (!header || level === void 0) {
+                return 0;
+            }
+            return Math.max(level, header.levels) - header.rows.length - 1;
+        };
+        const changeFocusKeys = {
+            ArrowDown: [1, 0],
+            ArrowUp: [-1, 0],
+            ArrowLeft: [0, -1],
+            ArrowRight: [0, 1]
+        };
+        const dir = changeFocusKeys[e.key];
+        if (e.key === 'Enter') {
+            this.onClick(e);
+        }
+        if (dir) {
+            e.preventDefault();
+            e.stopPropagation();
+            const { header } = vp;
+            const localRowIndex = getVerticalPos();
+            const nextVerticalDir = localRowIndex + dir[0];
+            if (nextVerticalDir < 0 && header) {
+                const extraRowIdx = header.rows.length + nextVerticalDir;
+                if (extraRowIdx + 1 > header.levels) {
+                    header.rows[extraRowIdx]
+                        .cells[column.index + dir[1]]?.htmlElement.focus();
+                }
+                else {
+                    vp.columns[column.index + dir[1]]
+                        ?.header?.htmlElement.focus();
+                }
+                return;
+            }
+            const nextRow = vp.rows[nextVerticalDir];
+            if (nextRow) {
+                nextRow.cells[column.index + dir[1]]?.htmlElement.focus();
+            }
+        }
+    }
+    /**
+     * Renders the cell by appending the HTML element to the row.
+     */
+    render() {
+        this.row.htmlElement.appendChild(this.htmlElement);
+        this.reflow();
+    }
+    /**
+     * Reflows the cell dimensions.
+     */
+    reflow() {
+        const column = this.column;
+        if (!column) {
+            return;
+        }
+        const elementStyle = this.htmlElement.style;
+        elementStyle.width = elementStyle.maxWidth = column.getWidth() + 'px';
+    }
+    /**
+     * Returns the formatted string where the templating context is the cell.
+     *
+     * @param template
+     * The template string.
+     *
+     * @return
+     * The formatted string.
+     */
+    format(template) {
+        return Templating.format(template, this, this.row.viewport.grid);
+    }
+    /**
+     * Sets the custom class name of the cell based on the template.
+     *
+     * @param template
+     * The template string.
+     */
+    setCustomClassName(template) {
+        const element = this.htmlElement;
+        if (this.customClassName) {
+            element.classList.remove(...this.customClassName.split(/\s+/g));
+        }
+        if (!template) {
+            delete this.customClassName;
+            return;
+        }
+        const newClassName = this.format(template);
+        if (!newClassName) {
+            delete this.customClassName;
+            return;
+        }
+        element.classList.add(...newClassName.split(/\s+/g));
+        this.customClassName = newClassName;
+    }
+    /**
+     * Destroys the cell.
+     */
+    destroy() {
+        this.cellEvents.forEach((pair) => {
+            this.htmlElement.removeEventListener(pair[0], pair[1]);
+        });
+        this.column?.unregisterCell(this);
+        this.row.unregisterCell(this);
+        this.htmlElement.remove();
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default Cell;

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

@@ -0,0 +1,30 @@
+import type TableCell from '../Body/TableCell';
+/**
+ * Represents a cell content in the grid.
+ */
+declare abstract class CellContent {
+    /**
+     * The cell to which the content belongs.
+     */
+    readonly cell: TableCell;
+    /**
+     * Creates and renders the cell content.
+     *
+     * @param cell
+     * The cell to which the content belongs.
+     */
+    constructor(cell: TableCell);
+    /**
+     * Renders the cell content.
+     */
+    protected abstract add(): void;
+    /**
+     * Destroy the cell content.
+     */
+    abstract destroy(): void;
+    /**
+     * Updates the cell content without re-rendering it.
+     */
+    abstract update(): void;
+}
+export default CellContent;

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

@@ -0,0 +1,40 @@
+/* *
+ *
+ *  Cell Content 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';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a cell content in the grid.
+ */
+class CellContent {
+    /**
+     * Creates and renders the cell content.
+     *
+     * @param cell
+     * The cell to which the content belongs.
+     */
+    constructor(cell) {
+        this.cell = cell;
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default CellContent;

package/es-modules/Grid/Core/Table/CellContent/TextContent.d.ts

@@ -0,0 +1,19 @@
+import type Column from '../Column';
+import CellContent from './CellContent.js';
+import TableCell from '../Body/TableCell';
+/**
+ * Represents a text type of content.
+ */
+declare class TextContent extends CellContent {
+    constructor(cell: TableCell);
+    protected add(): void;
+    destroy(): void;
+    update(): void;
+}
+declare namespace TextContent {
+    /**
+     * Default formats for data types.
+     */
+    const defaultFormatsForDataTypes: Record<Column.DataType, string>;
+}
+export default TextContent;