@highcharts/grid-pro 2.0.0

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

@@ -0,0 +1,159 @@
+/* *
+ *
+ *  Grid TableHeader 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 HeaderRow from './HeaderRow.js';
+import FilterRow from '../Actions/ColumnFiltering/FilterRow.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a table header row containing the cells (headers) with
+ * column names.
+ */
+class TableHeader {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs a new table head.
+     *
+     * @param viewport
+     * The viewport (table) the table head belongs to.
+     */
+    constructor(viewport) {
+        /* *
+        *
+        *  Properties
+        *
+        * */
+        /**
+         * The visible columns of the table.
+         */
+        this.columns = [];
+        /**
+         * The container of the table head.
+         */
+        this.rows = [];
+        /**
+         * Amount of levels in the header, that is used in creating correct rows.
+         * Excludes any extra levels, like filtering row.
+         */
+        this.levels = 1;
+        this.viewport = viewport;
+        this.columns = viewport.columns;
+        if (viewport.grid.options?.header) {
+            this.levels = this.getRowLevels(viewport.grid.options?.header);
+        }
+    }
+    /* *
+    *
+    *  Methods
+    *
+    * */
+    /**
+     * Renders the table head content.
+     */
+    render() {
+        const vp = this.viewport;
+        if (!vp.grid.enabledColumns) {
+            return;
+        }
+        // Render regular, multiple level rows.
+        for (let i = 0, iEnd = this.levels; i < iEnd; i++) {
+            const row = new HeaderRow(vp, i + 1); // Avoid indexing from 0
+            row.renderContent(i);
+            this.rows.push(row);
+        }
+        // Render an extra row for inline filtering.
+        if (vp.columns.some((column) => (column.options.filtering?.enabled &&
+            column.options.filtering.inline) || false)) {
+            const row = new FilterRow(vp);
+            row.renderContent();
+            this.rows.push(row);
+        }
+    }
+    /**
+     * Reflows the table head's content dimensions.
+     */
+    reflow() {
+        const vp = this.viewport;
+        if (!vp.theadElement) {
+            return;
+        }
+        const { clientWidth, offsetWidth } = vp.tbodyElement;
+        const rows = this.rows;
+        const bordersWidth = offsetWidth - clientWidth;
+        for (const row of rows) {
+            row.reflow();
+        }
+        if (vp.rowsWidth) {
+            vp.theadElement.style.width =
+                Math.max(vp.rowsWidth, clientWidth) + bordersWidth + 'px';
+        }
+    }
+    /**
+     * Returns amount of rows for the current cell in header tree.
+     *
+     * @param scope
+     * Structure of header
+     *
+     * @returns
+     */
+    getRowLevels(scope) {
+        let maxDepth = 0;
+        for (const item of scope) {
+            if (typeof item !== 'string' && item.columns) {
+                const depth = this.getRowLevels(item.columns);
+                if (depth > maxDepth) {
+                    maxDepth = depth;
+                }
+            }
+        }
+        return maxDepth + 1;
+    }
+    /**
+     * Scrolls the table head horizontally, only when the virtualization
+     * is enabled.
+     *
+     * @param scrollLeft
+     * The left scroll position.
+     */
+    scrollHorizontally(scrollLeft) {
+        const el = this.viewport.theadElement;
+        if (!el) {
+            return;
+        }
+        el.style.transform = `translateX(${-scrollLeft}px)`;
+    }
+    /**
+     * Destroys the table header and all its associated components.
+     */
+    destroy() {
+        for (const row of this.rows) {
+            row.destroy();
+        }
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default TableHeader;

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

@@ -0,0 +1,76 @@
+import type Cell from './Cell';
+import type Column from './Column';
+import Table from './Table.js';
+/**
+ * Represents a row in the data grid.
+ */
+declare abstract class Row {
+    /**
+     * The cells of the row.
+     */
+    cells: Cell[];
+    /**
+     * The HTML element of the row.
+     */
+    htmlElement: HTMLTableRowElement;
+    /**
+     * The viewport the row belongs to.
+     */
+    viewport: Table;
+    /**
+     * Flag to determine if the row is added to the DOM.
+     */
+    rendered?: boolean;
+    /**
+     * Constructs a row in the data grid.
+     *
+     * @param viewport
+     * The Grid Table instance which the row belongs to.
+     */
+    constructor(viewport: Table);
+    /**
+     * Creates a cell in the row.
+     *
+     * @param column
+     * The column the cell belongs to.
+     */
+    abstract createCell(column?: Column): Cell;
+    /**
+     * Renders the row's content. It does not attach the row element to the
+     * viewport nor pushes the rows to the viewport.rows array.
+     */
+    render(): void;
+    /**
+     * Reflows the row's content dimensions.
+     */
+    reflow(): void;
+    /**
+     * Destroys the row.
+     */
+    destroy(): void;
+    /**
+     * Returns the cell with the given column ID.
+     *
+     * @param columnId
+     * The column ID that the cell belongs to.
+     *
+     * @returns
+     * The cell with the given column ID or undefined if not found.
+     */
+    getCell(columnId: string): Cell | undefined;
+    /**
+     * Registers a cell in the row.
+     *
+     * @param cell
+     * The cell to register.
+     */
+    registerCell(cell: Cell): void;
+    /**
+     * Unregister a cell from the row.
+     *
+     * @param cell
+     * The cell to unregister.
+     */
+    unregisterCell(cell: Cell): void;
+}
+export default Row;

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

@@ -0,0 +1,131 @@
+/* *
+ *
+ *  Grid Row 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 GridUtils from '../GridUtils.js';
+const { makeHTMLElement } = GridUtils;
+/* *
+ *
+ *  Abstract Class of Row
+ *
+ * */
+/**
+ * Represents a row in the data grid.
+ */
+class Row {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs a row in the data grid.
+     *
+     * @param viewport
+     * The Grid Table instance which the row belongs to.
+     */
+    constructor(viewport) {
+        /* *
+        *
+        *  Properties
+        *
+        * */
+        /**
+         * The cells of the row.
+         */
+        this.cells = [];
+        this.viewport = viewport;
+        this.htmlElement = makeHTMLElement('tr', {});
+        this.htmlElement.setAttribute('role', 'row');
+    }
+    /**
+     * Renders the row's content. It does not attach the row element to the
+     * viewport nor pushes the rows to the viewport.rows array.
+     */
+    render() {
+        const columns = this.viewport.columns;
+        for (let i = 0, iEnd = columns.length; i < iEnd; i++) {
+            const cell = this.createCell(columns[i]);
+            cell.render();
+        }
+        this.rendered = true;
+        if (this.viewport.virtualRows) {
+            this.reflow();
+        }
+    }
+    /**
+     * Reflows the row's content dimensions.
+     */
+    reflow() {
+        for (let j = 0, jEnd = this.cells.length; j < jEnd; ++j) {
+            this.cells[j].reflow();
+        }
+        const vp = this.viewport;
+        if (vp.rowsWidth) {
+            this.htmlElement.style.width = vp.rowsWidth + 'px';
+        }
+    }
+    /**
+     * Destroys the row.
+     */
+    destroy() {
+        if (!this.htmlElement) {
+            return;
+        }
+        for (let i = this.cells.length - 1; i >= 0; --i) {
+            this.cells[i].destroy();
+        }
+        this.htmlElement.remove();
+    }
+    /**
+     * Returns the cell with the given column ID.
+     *
+     * @param columnId
+     * The column ID that the cell belongs to.
+     *
+     * @returns
+     * The cell with the given column ID or undefined if not found.
+     */
+    getCell(columnId) {
+        return this.cells.find((cell) => cell.column?.id === columnId);
+    }
+    /**
+     * Registers a cell in the row.
+     *
+     * @param cell
+     * The cell to register.
+     */
+    registerCell(cell) {
+        this.cells.push(cell);
+    }
+    /**
+     * Unregister a cell from the row.
+     *
+     * @param cell
+     * The cell to unregister.
+     */
+    unregisterCell(cell) {
+        const index = this.cells.indexOf(cell);
+        if (index > -1) {
+            this.cells.splice(index, 1);
+        }
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default Row;

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

@@ -0,0 +1,181 @@
+import type TableRow from './Body/TableRow';
+import DataTable from '../../../Data/DataTable.js';
+import ColumnResizingMode from './ColumnResizing/ResizingMode.js';
+import Column from './Column.js';
+import TableHeader from './Header/TableHeader.js';
+import Grid from '../Grid.js';
+import Cell from './Cell.js';
+/**
+ * Represents a table viewport of the data grid.
+ */
+declare class Table {
+    /**
+     * The data grid instance which the table (viewport) belongs to.
+     */
+    readonly grid: Grid;
+    /**
+     * The presentation version of the data table. It has applied modifiers
+     * and is ready to be rendered.
+     *
+     * If you want to modify the data table, you should use the original
+     * instance that is stored in the `grid.dataTable` property.
+     */
+    dataTable: DataTable;
+    /**
+     * The HTML element of the table.
+     */
+    readonly tableElement: HTMLTableElement;
+    /**
+     * The HTML element of the table head.
+     */
+    readonly theadElement?: HTMLElement;
+    /**
+     * The HTML element of the table body.
+     */
+    readonly tbodyElement: HTMLElement;
+    /**
+     * The head of the table.
+     */
+    header?: TableHeader;
+    /**
+     * The visible columns of the table.
+     */
+    columns: Column[];
+    /**
+     * The visible rows of the table.
+     */
+    rows: TableRow[];
+    /**
+     * The column distribution.
+     */
+    readonly columnResizing: ColumnResizingMode;
+    /**
+     * The focus cursor position: [rowIndex, columnIndex] or `undefined` if the
+     * table cell is not focused.
+     */
+    focusCursor?: [number, number];
+    /**
+     * The only cell that is to be focusable using tab key - a table focus
+     * entry point.
+     */
+    focusAnchorCell?: Cell;
+    /**
+     * The flag that indicates if the table rows are virtualized.
+     */
+    virtualRows: boolean;
+    /**
+     * Constructs a new data grid table.
+     *
+     * @param grid
+     * The data grid instance which the table (viewport) belongs to.
+     *
+     * @param tableElement
+     * The HTML table element of the data grid.
+     */
+    constructor(grid: Grid, tableElement: HTMLTableElement);
+    /**
+     * Initializes the data grid table.
+     */
+    private init;
+    /**
+     * Sets the minimum height of the table body.
+     */
+    private setTbodyMinHeight;
+    /**
+     * Checks if rows virtualization should be enabled.
+     *
+     * @returns
+     * Whether rows virtualization should be enabled.
+     */
+    private shouldVirtualizeRows;
+    /**
+     * Loads the columns of the table.
+     */
+    private loadColumns;
+    /**
+     * Updates the rows of the table.
+     */
+    updateRows(): Promise<void>;
+    /**
+     * Reflows the table's content dimensions.
+     */
+    reflow(): void;
+    /**
+     * Handles the focus event on the table body.
+     *
+     * @param e
+     * The focus event.
+     */
+    private onTBodyFocus;
+    /**
+     * Handles the resize event.
+     */
+    private onResize;
+    /**
+     * Handles the scroll event.
+     */
+    private onScroll;
+    /**
+     * Scrolls the table to the specified row.
+     *
+     * @param index
+     * The index of the row to scroll to.
+     *
+     * Try it: {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/grid-lite/basic/scroll-to-row | Scroll to row}
+     */
+    scrollToRow(index: number): void;
+    /**
+     * Destroys the grid table.
+     */
+    destroy(): void;
+    /**
+     * Get the viewport state metadata. It is used to save the state of the
+     * viewport and restore it when the data grid is re-rendered.
+     *
+     * @returns
+     * The viewport state metadata.
+     */
+    getStateMeta(): Table.ViewportStateMetadata;
+    /**
+     * Apply the metadata to the viewport state. It is used to restore the state
+     * of the viewport when the data grid is re-rendered.
+     *
+     * @param meta
+     * The viewport state metadata.
+     */
+    applyStateMeta(meta: Table.ViewportStateMetadata): void;
+    /**
+     * Sets the focus anchor cell.
+     *
+     * @param cell
+     * The cell to set as the focus anchor cell.
+     */
+    setFocusAnchorCell(cell: Cell): void;
+    /**
+     * Returns the column with the provided ID.
+     *
+     * @param id
+     * The ID of the column.
+     */
+    getColumn(id: string): Column | undefined;
+    /**
+     * Returns the row with the provided ID.
+     *
+     * @param id
+     * The ID of the row.
+     */
+    getRow(id: number): TableRow | undefined;
+}
+declare namespace Table {
+    /**
+     * Represents the metadata of the viewport state. It is used to save the
+     * state of the viewport and restore it when the data grid is re-rendered.
+     */
+    interface ViewportStateMetadata {
+        scrollTop: number;
+        scrollLeft: number;
+        columnResizing: ColumnResizingMode;
+        focusCursor?: [number, number];
+    }
+}
+export default Table;