@highcharts/grid-pro 2.0.0

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

@@ -0,0 +1,56 @@
+import type { ColumnSortingOrder } from '../../Options.js';
+import Column from '../Column.js';
+/**
+ * Class that manages sorting for a dedicated column.
+ */
+declare class ColumnSorting {
+    /**
+     * The sorted column of the table.
+     */
+    column: Column;
+    /**
+     * The head element of the column.
+     */
+    headerCellElement: HTMLElement;
+    /**
+     * Constructs sorting for a dedicated column.
+     *
+     * @param column
+     * The column that be sorted.
+     *
+     * @param headerCellElement
+     * The head element of the column.
+     */
+    constructor(column: Column, headerCellElement: HTMLElement);
+    /**
+     * Adds attributes to the column header.
+     */
+    private addHeaderElementAttributes;
+    /**
+     * Updates the column options with the new sorting state.
+     *
+     * @param col
+     * The column to update.
+     */
+    private updateColumnOptions;
+    /**
+     * Set sorting order for the column. It will modify the presentation data
+     * and rerender the rows.
+     *
+     * @param order
+     * The order of sorting. It can be `'asc'`, `'desc'` or `null` if the
+     * sorting should be disabled.
+     */
+    setOrder(order: ColumnSortingOrder): Promise<void>;
+    /**
+     * Toggle sorting order for the column in the order: asc -> desc -> none
+     */
+    toggle: () => void;
+}
+declare namespace ColumnSorting {
+    interface Event {
+        target: Column;
+        order: ColumnSortingOrder;
+    }
+}
+export default ColumnSorting;

package/es-modules/Grid/Core/Table/Actions/ColumnSorting.js

@@ -0,0 +1,170 @@
+/* *
+ *
+ *  Grid ColumnSorting 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 Globals from '../../Globals.js';
+import U from '../../../../Core/Utilities.js';
+const { fireEvent } = U;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Class that manages sorting for a dedicated column.
+ */
+class ColumnSorting {
+    /* *
+    *
+    *  Constructor
+    *
+    * */
+    /**
+     * Constructs sorting for a dedicated column.
+     *
+     * @param column
+     * The column that be sorted.
+     *
+     * @param headerCellElement
+     * The head element of the column.
+     */
+    constructor(column, headerCellElement) {
+        /**
+         * Toggle sorting order for the column in the order: asc -> desc -> none
+         */
+        this.toggle = () => {
+            const viewport = this.column.viewport;
+            const querying = viewport.grid.querying;
+            const sortingController = querying.sorting;
+            const currentOrder = (sortingController.currentSorting?.columnId === this.column.id ?
+                sortingController.currentSorting.order : null) || 'none';
+            const consequents = {
+                none: 'asc',
+                asc: 'desc',
+                desc: null
+            };
+            void this.setOrder(consequents[currentOrder]);
+        };
+        this.column = column;
+        this.headerCellElement = headerCellElement;
+        this.addHeaderElementAttributes();
+        if (column.options.sorting?.sortable) {
+            headerCellElement.classList.add(Globals.getClassName('columnSortable'));
+        }
+    }
+    /* *
+    *
+    *  Methods
+    *
+    * */
+    /**
+     * Adds attributes to the column header.
+     */
+    addHeaderElementAttributes() {
+        const col = this.column;
+        const a11y = col.viewport.grid.accessibility;
+        const sortingOptions = col.options.sorting;
+        const { currentSorting } = col.viewport.grid.querying.sorting;
+        const sortedAscClassName = Globals.getClassName('columnSortedAsc');
+        const sortedDescClassName = Globals.getClassName('columnSortedDesc');
+        const el = this.headerCellElement;
+        if (currentSorting?.columnId !== col.id || !currentSorting?.order) {
+            el.classList.remove(sortedAscClassName);
+            el.classList.remove(sortedDescClassName);
+            if (sortingOptions?.sortable) {
+                a11y?.setColumnSortState(el, 'none');
+            }
+            return;
+        }
+        switch (currentSorting?.order) {
+            case 'asc':
+                el.classList.add(sortedAscClassName);
+                el.classList.remove(sortedDescClassName);
+                a11y?.setColumnSortState(el, 'ascending');
+                break;
+            case 'desc':
+                el.classList.remove(sortedAscClassName);
+                el.classList.add(sortedDescClassName);
+                a11y?.setColumnSortState(el, 'descending');
+                break;
+        }
+    }
+    /**
+     * Updates the column options with the new sorting state.
+     *
+     * @param col
+     * The column to update.
+     */
+    updateColumnOptions(col) {
+        const order = col.viewport.grid.querying.sorting.currentSorting?.order;
+        if (col.id === this.column.id && order) {
+            col.update({
+                sorting: {
+                    order
+                }
+            }, false);
+        }
+        else {
+            delete col.options.sorting?.order;
+            if (col.options.sorting &&
+                Object.keys(col.options.sorting).length < 1) {
+                delete col.options.sorting;
+            }
+        }
+    }
+    /**
+     * Set sorting order for the column. It will modify the presentation data
+     * and rerender the rows.
+     *
+     * @param order
+     * The order of sorting. It can be `'asc'`, `'desc'` or `null` if the
+     * sorting should be disabled.
+     */
+    async setOrder(order) {
+        const viewport = this.column.viewport;
+        // Do not call sorting when cell is currently edited and validated.
+        if (viewport.validator?.errorCell) {
+            return;
+        }
+        const querying = viewport.grid.querying;
+        const sortingController = querying.sorting;
+        const a11y = viewport.grid.accessibility;
+        [this.column, viewport.grid].forEach((source) => {
+            fireEvent(source, 'beforeSort', {
+                target: this.column,
+                order
+            });
+        });
+        sortingController.setSorting(order, this.column.id);
+        await viewport.updateRows();
+        for (const col of viewport.columns) {
+            this.updateColumnOptions(col);
+            col.sorting?.addHeaderElementAttributes();
+        }
+        a11y?.userSortedColumn(order);
+        [this.column, viewport.grid].forEach((source) => {
+            fireEvent(source, 'afterSort', {
+                target: this.column,
+                order
+            });
+        });
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ColumnSorting;

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

@@ -0,0 +1,55 @@
+import Table from '../Table.js';
+import Column from '../Column.js';
+import Cell from '../Cell.js';
+/**
+ * The class that handles the resizing of columns in the data grid.
+ */
+declare class ColumnsResizer {
+    /**
+     * The viewport of the data grid.
+     */
+    private viewport;
+    /**
+     * Any column is being resized. Turned off after slight delay.
+     */
+    isResizing: boolean;
+    /**
+     * The start X position of the drag.
+     */
+    private dragStartX?;
+    /**
+     * The handles and their mouse down event listeners.
+     */
+    private handles;
+    constructor(viewport: Table);
+    /**
+     * Render the drag handle for resizing columns.
+     *
+     * @param column
+     * The reference to rendered column
+     *
+     * @param cell
+     * The reference to rendered cell, where hadles should be added
+     */
+    renderColumnDragHandles(column: Column, cell: Cell): void;
+    /**
+     * Handles the mouse up event on the document.
+     */
+    private onDocumentMouseUp;
+    /**
+     * Adds event listeners to the handle.
+     *
+     * @param handle
+     * The handle element.
+     *
+     * @param column
+     * The column the handle belongs to.
+     */
+    addHandleListeners(handle: HTMLElement, column: Column): void;
+    /**
+     * Removes all added event listeners from the document and handles. This
+     * should be called on the destroy of the data grid.
+     */
+    removeEventListeners(): void;
+}
+export default ColumnsResizer;

package/es-modules/Grid/Core/Table/Actions/ColumnsResizer.js

@@ -0,0 +1,182 @@
+/* *
+ *
+ *  Grid Columns Resizer 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';
+import Globals from '../../Globals.js';
+import Utils from '../../../../Core/Utilities.js';
+const { makeHTMLElement } = GridUtils;
+const { fireEvent } = Utils;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * The class that handles the resizing of columns in the data grid.
+ */
+class ColumnsResizer {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    constructor(viewport) {
+        /**
+         * Any column is being resized. Turned off after slight delay.
+         */
+        this.isResizing = false;
+        /**
+         * The handles and their mouse down event listeners.
+         */
+        this.handles = [];
+        /**
+         * Handles the mouse move event on the document.
+         *
+         * @param e
+         * The mouse event.
+         *
+         * @internal
+         */
+        this.onDocumentMouseMove = (e) => {
+            if (!this.draggedResizeHandle || !this.draggedColumn) {
+                return;
+            }
+            const diff = e.pageX - (this.dragStartX || 0);
+            const vp = this.viewport;
+            vp.columnResizing.resize(this, diff);
+            vp.reflow();
+            vp.rowsVirtualizer.adjustRowHeights();
+            fireEvent(this.draggedColumn, 'afterResize', {
+                target: this.draggedColumn,
+                originalEvent: e
+            });
+        };
+        /**
+         * Handles the mouse up event on the document.
+         */
+        this.onDocumentMouseUp = () => {
+            this.draggedColumn?.header?.htmlElement?.classList.remove(Globals.getClassName('resizedColumn'));
+            if (!this.draggedResizeHandle?.matches(':hover')) {
+                this.draggedResizeHandle?.classList.remove('hovered');
+            }
+            this.dragStartX = void 0;
+            this.draggedColumn = void 0;
+            this.draggedResizeHandle = void 0;
+            this.columnStartWidth = void 0;
+            this.nextColumnStartWidth = void 0;
+            requestAnimationFrame(() => {
+                this.isResizing = false;
+            });
+        };
+        this.viewport = viewport;
+        document.addEventListener('mousemove', this.onDocumentMouseMove);
+        document.addEventListener('mouseup', this.onDocumentMouseUp);
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /**
+     * Render the drag handle for resizing columns.
+     *
+     * @param column
+     * The reference to rendered column
+     *
+     * @param cell
+     * The reference to rendered cell, where hadles should be added
+     */
+    renderColumnDragHandles(column, cell) {
+        const vp = column.viewport;
+        if (vp.columnsResizer) {
+            const handle = makeHTMLElement('div', {
+                className: Globals.getClassName('resizerHandles')
+            }, cell.htmlElement);
+            handle.setAttribute('aria-hidden', true);
+            vp.columnsResizer?.addHandleListeners(handle, column);
+        }
+    }
+    /**
+     * Adds event listeners to the handle.
+     *
+     * @param handle
+     * The handle element.
+     *
+     * @param column
+     * The column the handle belongs to.
+     */
+    addHandleListeners(handle, column) {
+        const onHandleMouseDown = (e) => {
+            const vp = column.viewport;
+            this.isResizing = true;
+            handle.classList.add('hovered');
+            vp.reflow();
+            this.dragStartX = e.pageX;
+            this.draggedColumn = column;
+            this.draggedResizeHandle = handle;
+            this.columnStartWidth = column.getWidth();
+            this.nextColumnStartWidth =
+                vp.columns[column.index + 1]?.getWidth();
+            column.header?.htmlElement.classList.add(Globals.getClassName('resizedColumn'));
+        };
+        const onHandleMouseOver = () => {
+            if (this.draggedResizeHandle) {
+                return;
+            }
+            handle.classList.add('hovered');
+        };
+        const onHandleMouseOut = () => {
+            if (this.draggedResizeHandle) {
+                return;
+            }
+            handle.classList.remove('hovered');
+        };
+        const handleListeners = [{
+                eventName: 'mousedown',
+                listener: onHandleMouseDown
+            }, {
+                eventName: 'mouseover',
+                listener: onHandleMouseOver
+            }, {
+                eventName: 'mouseout',
+                listener: onHandleMouseOut
+            }];
+        for (const { eventName, listener } of handleListeners) {
+            handle.addEventListener(eventName, listener);
+        }
+        this.handles.push([handle, handleListeners]);
+    }
+    /**
+     * Removes all added event listeners from the document and handles. This
+     * should be called on the destroy of the data grid.
+     */
+    removeEventListeners() {
+        document.removeEventListener('mousemove', this.onDocumentMouseMove);
+        document.removeEventListener('mouseup', this.onDocumentMouseUp);
+        for (let i = 0, iEnd = this.handles.length; i < iEnd; i++) {
+            const [handle, listeners] = this.handles[i];
+            for (const { eventName, listener } of listeners) {
+                handle.removeEventListener(eventName, listener);
+            }
+        }
+    }
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ColumnsResizer;

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

@@ -0,0 +1,87 @@
+import type { RowsSettings } from '../../Options';
+import Table from '../Table.js';
+/**
+ * Represents a virtualized rows renderer for the data grid.
+ */
+declare class RowsVirtualizer {
+    /**
+     * The default height of a row.
+     */
+    readonly defaultRowHeight: number;
+    /**
+     * The index of the first visible row.
+     */
+    rowCursor: number;
+    /**
+     * The viewport (table) of the data grid.
+     */
+    readonly viewport: Table;
+    /**
+     * Size of the row buffer - how many rows should be rendered outside of the
+     * viewport from the top and the bottom.
+     */
+    readonly buffer: number;
+    /**
+     * Flag indicating if the rows should have strict heights (no custom or
+     * dynamic heights allowed).
+     */
+    private readonly strictRowHeights;
+    /**
+     * Flag indicating if the scrolling handler should be prevented to avoid
+     * flickering loops when scrolling to the last row.
+     */
+    private preventScroll;
+    /**
+     * Rendering row settings.
+     */
+    rowSettings?: RowsSettings;
+    /**
+     * Constructs an instance of the rows virtualizer.
+     *
+     * @param viewport
+     * The viewport of the data grid to render rows in.
+     */
+    constructor(viewport: Table);
+    /**
+     * Renders the rows in the viewport for the first time.
+     */
+    initialRender(): void;
+    /**
+     * Renders the rows in the viewport. It is called when the rows need to be
+     * re-rendered, e.g., after a sort or filter operation.
+     */
+    rerender(): void;
+    /**
+     * Method called on the viewport scroll event, only when the virtualization
+     * is enabled.
+     */
+    scroll(): void;
+    /**
+     * Adjusts the visible row heights from the bottom of the viewport.
+     */
+    private adjustBottomRowHeights;
+    /**
+     * Renders rows in the specified range. Removes rows that are out of the
+     * range except the last row.
+     *
+     * @param rowCursor
+     * The index of the first visible row.
+     */
+    private renderRows;
+    /**
+     * Adjusts the heights of the rows based on the current scroll position.
+     * It handles the possibility of the rows having different heights than
+     * the default height.
+     */
+    adjustRowHeights(): void;
+    /**
+     * Reflow the rendered rows content dimensions.
+     */
+    reflowRows(): void;
+    /**
+     * Returns the default height of a row. This method should be called only
+     * once on initialization.
+     */
+    private getDefaultRowHeight;
+}
+export default RowsVirtualizer;