@highcharts/grid-pro 2.0.0 → 2.1.0

package/es-modules/Grid/Core/Pagination/PaginationOptions.d.ts

@@ -30,7 +30,7 @@ export interface PageSizeSelectorOptions {
      *
      * @default [10, 20, 50, 100]
      */
-    options: Array<number>;
+    options?: Array<number>;
 }
 
 /**
@@ -44,7 +44,7 @@ export interface PaginationControlsOptions {
      *
      * @default { enabled: true, options: [10, 20, 50, 100] }
      */
-    pageSizeSelector: boolean | PageSizeSelectorOptions;
+    pageSizeSelector?: boolean | PageSizeSelectorOptions;
 
     /**
      * Whether to show the page information text
@@ -73,7 +73,7 @@ export interface PaginationControlsOptions {
      *
      * @default { enabled: true, count: 5 }
      */
-    pageButtons: boolean | PageButtonsOptions;
+    pageButtons?: boolean | PageButtonsOptions;
 }
 
 /**
@@ -86,42 +86,42 @@ export interface PaginationLangOptions {
      *
      * @default "Showing {start} - {end} of {total} (Page {currentPage} of {totalPages})" // eslint-disable-line
      */
-    pageInfo: string;
+    pageInfo?: string;
 
     /**
      * Text for the page size label.
      *
      * @default "rows per page"
      */
-    pageSizeLabel: string;
+    pageSizeLabel?: string;
 
     /**
      * Text for the first page button (accessibility).
      *
      * @default "First page"
      */
-    firstPage: string;
+    firstPage?: string;
 
     /**
      * Text for the previous page button (accessibility).
      *
      * @default "Previous page"
      */
-    previousPage: string;
+    previousPage?: string;
 
     /**
      * Text for the next page button (accessibility).
      *
      * @default "Next page"
      */
-    nextPage: string;
+    nextPage?: string;
 
     /**
      * Text for the last page button (accessibility).
      *
      * @default "Last page"
      */
-    lastPage: string;
+    lastPage?: string;
 
     /**
      * Text for page number button (accessibility).
@@ -129,14 +129,14 @@ export interface PaginationLangOptions {
      *
      * @default "Page {page}"
      */
-    pageNumber: string;
+    pageNumber?: string;
 
     /**
      * Text for ellipsis (accessibility).
      *
      * @default "More pages"
      */
-    ellipsis: string;
+    ellipsis?: string;
 }
 
 /**
@@ -148,7 +148,14 @@ export interface PaginationOptions {
      *
      * @default false
      */
-    enabled: boolean;
+    enabled?: boolean;
+
+    /**
+     * The current page number.
+     *
+     * @default 1
+     */
+    page?: number;
 
     /**
      * Initial number of items per page when the Grid is initialized.
@@ -157,7 +164,7 @@ export interface PaginationOptions {
      *
      * @default 10
      */
-    pageSize: number;
+    pageSize?: number;
 
     /**
      * Position of the pagination container relative to the table.
@@ -169,7 +176,7 @@ export interface PaginationOptions {
     /**
      * Controls options for pagination UI elements.
      */
-    controls: PaginationControlsOptions;
+    controls?: PaginationControlsOptions;
 }
 
 /**
@@ -188,7 +195,7 @@ export interface PageButtonsOptions {
      *
      * @default 5
      */
-    count: number;
+    count?: number;
 }
 
 /**

package/es-modules/Grid/Core/Querying/PaginationController.d.ts

@@ -9,13 +9,21 @@ declare class PaginationController {
      */
     private querying;
     /**
-     * The current page.
+     * Whether the pagination is enabled.
+     */
+    enabled: boolean;
+    /**
+     * The current page (1-based index).
+     */
+    currentPage: number;
+    /**
+     * The current page size.
      */
-    currentPage?: number;
+    currentPageSize: number;
     /**
      * The number of rows before pagination.
      */
-    totalItems?: number;
+    private _totalItems?;
     /**
      * Constructs the PaginationController instance.
      *
@@ -24,12 +32,31 @@ declare class PaginationController {
      */
     constructor(querying: QueryingController);
     /**
-     * Sets the range options.
+     * Total number of items (rows)
+     */
+    get totalItems(): number;
+    /**
+     * Gets the total number of pages.
+     */
+    get totalPages(): number;
+    /**
+     * Clamps the current page to the total number of pages.
+     */
+    clampPage(): void;
+    /**
+     * Sets the page.
      *
      * @param currentPage
      * The current page.
      */
-    setRange(currentPage: number): void;
+    setPage(currentPage: number): void;
+    /**
+     * Sets the page size.
+     *
+     * @param pageSize
+     * The page size.
+     */
+    setPageSize(pageSize: number): void;
     /**
      * Loads range options from the grid options.
      */
@@ -42,9 +69,5 @@ declare class PaginationController {
      * the original data table.
      */
     createModifier(rowsCountBeforePagination?: number): RangeModifier | undefined;
-    /**
-     * Reset the pagination controller.
-     */
-    reset(): void;
 }
 export default PaginationController;

package/es-modules/Grid/Core/Querying/PaginationController.js

@@ -35,7 +35,16 @@ class PaginationController {
      * The querying controller instance.
      */
     constructor(querying) {
+        /**
+         * The current page (1-based index).
+         */
+        this.currentPage = 1;
+        /**
+         * The current page size.
+         */
+        this.currentPageSize = 10;
         this.querying = querying;
+        this.enabled = !!querying.grid.options?.pagination?.enabled;
     }
     /* *
     *
@@ -43,24 +52,62 @@ class PaginationController {
     *
     * */
     /**
-     * Sets the range options.
+     * Total number of items (rows)
+     */
+    get totalItems() {
+        return this._totalItems ?? this.querying.grid.dataTable?.rowCount ?? 0;
+    }
+    /**
+     * Gets the total number of pages.
+     */
+    get totalPages() {
+        return this.currentPageSize > 0 ? Math.ceil(this.totalItems / this.currentPageSize) : 1;
+    }
+    /**
+     * Clamps the current page to the total number of pages.
+     */
+    clampPage() {
+        if (this.currentPage <= this.totalPages) {
+            return;
+        }
+        this.currentPage = this.totalPages;
+        this.querying.shouldBeUpdated = true;
+    }
+    /**
+     * Sets the page.
      *
      * @param currentPage
      * The current page.
      */
-    setRange(currentPage) {
+    setPage(currentPage) {
         this.currentPage = currentPage;
+        this.clampPage();
+        this.querying.shouldBeUpdated = true;
+    }
+    /**
+     * Sets the page size.
+     *
+     * @param pageSize
+     * The page size.
+     */
+    setPageSize(pageSize) {
+        this.currentPageSize = pageSize;
         this.querying.shouldBeUpdated = true;
     }
     /**
      * Loads range options from the grid options.
      */
     loadOptions() {
-        const pagination = this.querying.grid.pagination;
-        if (pagination?.options.enabled &&
-            this.currentPage !== pagination.currentPage) {
-            this.currentPage = pagination.currentPage;
-            this.setRange(this.currentPage);
+        const options = this.querying.grid.options?.pagination || {};
+        if (this.enabled === !options.enabled) {
+            this.enabled = !!options.enabled;
+            this.querying.shouldBeUpdated = true;
+        }
+        if (this.currentPageSize !== options.pageSize) {
+            this.setPageSize(options.pageSize ?? this.currentPageSize);
+        }
+        if (this.currentPage !== options.page) {
+            this.setPage(options.page ?? this.currentPage);
         }
     }
     /**
@@ -71,27 +118,20 @@ class PaginationController {
      * the original data table.
      */
     createModifier(rowsCountBeforePagination = (this.querying.grid.dataTable?.rowCount || 0)) {
-        const currentPage = this.currentPage || 1; // Start from page 1, not 0
-        const pageSize = this.querying.grid.pagination?.currentPageSize;
-        if (!pageSize) {
+        if (!this.enabled) {
             return;
         }
+        const currentPage = this.currentPage;
+        const pageSize = this.currentPageSize;
         // Calculate the start index (0-based)
         const start = (currentPage - 1) * pageSize;
         const end = Math.min(start + pageSize, rowsCountBeforePagination);
-        this.totalItems = rowsCountBeforePagination;
+        this._totalItems = rowsCountBeforePagination;
         return new RangeModifier({
             start,
             end
         });
     }
-    /**
-     * Reset the pagination controller.
-     */
-    reset() {
-        delete this.currentPage;
-        this.querying.shouldBeUpdated = true;
-    }
 }
 /* *
  *

package/es-modules/Grid/Core/Querying/SortingController.d.ts

@@ -12,13 +12,7 @@ declare class SortingController {
     /**
      * The current sorting options: column ID and sorting order.
      */
-    currentSorting?: SortingController.SortingState;
-    /**
-     * The initial sorting options: column ID and sorting order.
-     * This is the sorting that is applied when the data grid is created or
-     * after the whole viewport is reloaded with changed sorting options.
-     */
-    private initialSorting?;
+    currentSorting?: SortingState;
     /**
      * The modifier that is applied to the data table.
      */
@@ -55,13 +49,11 @@ declare class SortingController {
      */
     private createModifier;
 }
-declare namespace SortingController {
-    /**
-     * The sorting state interface.
-     */
-    interface SortingState {
-        columnId?: string;
-        order: ColumnSortingOrder;
-    }
+/**
+ * The sorting state interface.
+ */
+export interface SortingState {
+    columnId?: string;
+    order: ColumnSortingOrder;
 }
 export default SortingController;

package/es-modules/Grid/Core/Querying/SortingController.js

@@ -101,9 +101,8 @@ class SortingController {
      */
     loadOptions() {
         const stateFromOptions = this.getSortingOptions();
-        if (stateFromOptions.columnId !== this.initialSorting?.columnId ||
-            stateFromOptions.order !== this.initialSorting?.order) {
-            this.initialSorting = stateFromOptions;
+        if (stateFromOptions.columnId !== this.currentSorting?.columnId ||
+            stateFromOptions.order !== this.currentSorting?.order) {
             this.setSorting(stateFromOptions.order, stateFromOptions.columnId);
         }
     }

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

@@ -1,4 +1,4 @@
-import type Column from '../../Column';
+import type { Column } from '../../Column';
 import type { Condition } from './FilteringTypes';
 import type FilterCell from './FilterCell.js';
 /**

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

@@ -129,6 +129,26 @@ class ColumnFiltering {
         }
         await this.applyFilter({ value, condition });
     }
+    /**
+     * Refreshes the state of the filtering content by updating the select,
+     * input and clear button according to the column filtering options.
+     * @internal
+     */
+    refreshState() {
+        const colFilteringOptions = this.column.options.filtering;
+        if (this.filterSelect) {
+            this.filterSelect.value =
+                colFilteringOptions?.condition ??
+                    conditionsMap[this.column.dataType][0];
+        }
+        if (this.filterInput) {
+            this.filterInput.value = '' + (colFilteringOptions?.value ?? '');
+        }
+        if (this.clearButton) {
+            this.clearButton.disabled = !this.isFilteringApplied();
+        }
+        this.disableInputIfNeeded();
+    }
     /**
      * Render the filtering content in the container.
      *
@@ -198,8 +218,12 @@ class ColumnFiltering {
                     break;
             }
         }
-        // Update the userOptions.
-        void this.column.update({ filtering: condition }, false);
+        this.column.setOptions({
+            filtering: {
+                condition: condition.condition,
+                value: condition.value
+            }
+        });
         filteringController.addColumnFilterCondition(columnId, condition);
         this.disableInputIfNeeded();
         await querying.proceed();
@@ -224,7 +248,9 @@ class ColumnFiltering {
      */
     renderFilteringInput(inputWrapper, columnType) {
         // Render the input element.
-        this.filterInput = makeHTMLElement('input', {}, inputWrapper);
+        this.filterInput = makeHTMLElement('input', {
+            className: Globals.getClassName('input')
+        }, inputWrapper);
         this.filterInput.setAttribute('tabindex', '-1');
         const column = this.column;
         this.filterInput.setAttribute('id', 'filter-input-' + column.viewport.grid.id + '-' + column.id);
@@ -268,7 +294,9 @@ class ColumnFiltering {
      */
     renderConditionSelect(inputWrapper) {
         // Render the select element.
-        this.filterSelect = makeHTMLElement('select', {}, inputWrapper);
+        this.filterSelect = makeHTMLElement('select', {
+            className: Globals.getClassName('input')
+        }, inputWrapper);
         this.filterSelect.setAttribute('tabindex', '-1');
         const column = this.column;
         this.filterSelect.setAttribute('id', 'filter-select-' + column.viewport.grid.id + '-' + column.id);

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

@@ -1,4 +1,4 @@
-import type Column from '../../Column';
+import type { ColumnDataType } from '../../Column';
 /**
  * String filtering conditions.
  */
@@ -19,7 +19,7 @@ export type BooleanCondition = typeof booleanConditions[number];
  * The event object for the 'afterRender' event.
  */
 export type AfterRenderEvent = Event & {
-    column: Column;
+    column: ColumnDataType;
     filtering: boolean;
 };
 /**
@@ -49,4 +49,4 @@ export declare const booleanValueMap: Record<BooleanCondition, 'all' | boolean |
 /**
  * Conditions map for the condition select options.
  */
-export declare const conditionsMap: Record<Column.DataType, readonly Condition[]>;
+export declare const conditionsMap: Record<ColumnDataType, readonly Condition[]>;

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

@@ -47,10 +47,8 @@ declare class ColumnSorting {
      */
     toggle: () => void;
 }
-declare namespace ColumnSorting {
-    interface Event {
-        target: Column;
-        order: ColumnSortingOrder;
-    }
+export interface ColumnSortingEvent {
+    target: Column;
+    order: ColumnSortingOrder;
 }
 export default ColumnSorting;

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

@@ -110,11 +110,7 @@ class ColumnSorting {
     updateColumnOptions(col) {
         const order = col.viewport.grid.querying.sorting.currentSorting?.order;
         if (col.id === this.column.id && order) {
-            col.update({
-                sorting: {
-                    order
-                }
-            }, false);
+            col.setOptions({ sorting: { order } });
         }
         else {
             delete col.options.sorting?.order;

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

@@ -33,6 +33,14 @@ declare class TableCell extends Cell {
      * Renders the cell by appending it to the row and setting its value.
      */
     render(): void;
+    /**
+     * Edits the cell value and updates the data table. Call this instead of
+     * `setValue` when you want it to trigger the cell value user change event.
+     *
+     * @param value
+     * The new value to set.
+     */
+    editValue(value: DataTable.CellType): Promise<void>;
     /**
      * Sets the cell value and updates its content with it.
      *
@@ -60,9 +68,7 @@ declare class TableCell extends Cell {
      * Handles the focus event on the cell.
      */
     protected onFocus(): void;
-    /**
-     * Handles the mouse out event on the cell.
-     */
+    protected onMouseOver(): void;
     protected onMouseOut(): void;
     /**
      * Handles the double click event on the cell.
@@ -77,12 +83,10 @@ declare class TableCell extends Cell {
      */
     destroy(): void;
 }
-declare namespace TableCell {
-    /**
-     * Event interface for table cell events.
-     */
-    interface TableCellEvent {
-        target: TableCell;
-    }
+/**
+ * Event interface for table cell events.
+ */
+export interface TableCellEvent {
+    target: TableCell;
 }
 export default TableCell;

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

@@ -59,6 +59,21 @@ class TableCell extends Cell {
         super.render();
         void this.setValue();
     }
+    /**
+     * Edits the cell value and updates the data table. Call this instead of
+     * `setValue` when you want it to trigger the cell value user change event.
+     *
+     * @param value
+     * The new value to set.
+     */
+    async editValue(value) {
+        if (this.value === value) {
+            return;
+        }
+        fireEvent(this, 'beforeEditValue');
+        await this.setValue(value, true);
+        fireEvent(this, 'afterEditValue');
+    }
     /**
      * Sets the cell value and updates its content with it.
      *
@@ -82,11 +97,10 @@ class TableCell extends Cell {
             this.content = this.column.createCellContent(this);
         }
         this.htmlElement.setAttribute('data-value', this.value + '');
+        // Set alignment in column cells based on column data type
+        this.htmlElement.classList[this.column.dataType === 'number' ? 'add' : 'remove'](Globals.getClassName('rightAlign'));
+        // Add custom class name from column options
         this.setCustomClassName(this.column.options.cells?.className);
-        // Add alignment to number column
-        if (this.column.dataType === 'number') {
-            this.setCustomClassName(Globals.getClassName('rightAlign'));
-        }
         fireEvent(this, 'afterRender', { target: this });
     }
     /**
@@ -121,8 +135,6 @@ class TableCell extends Cell {
     }
     initEvents() {
         this.cellEvents.push(['dblclick', (e) => (this.onDblClick(e))]);
-        this.cellEvents.push(['mouseout', () => this.onMouseOut()]);
-        this.cellEvents.push(['mouseover', () => this.onMouseOver()]);
         this.cellEvents.push(['mousedown', (e) => {
                 this.onMouseDown(e);
             }]);
@@ -156,28 +168,13 @@ class TableCell extends Cell {
             originalEvent: e
         });
     }
-    /**
-     * Handles the mouse over event on the cell.
-     * @internal
-     */
     onMouseOver() {
-        const { grid } = this.row.viewport;
-        grid.hoverRow(this.row.index);
-        grid.hoverColumn(this.column.id);
-        fireEvent(this, 'mouseOver', {
-            target: this
-        });
+        this.row.viewport.grid.hoverRow(this.row.index);
+        super.onMouseOver();
     }
-    /**
-     * Handles the mouse out event on the cell.
-     */
     onMouseOut() {
-        const { grid } = this.row.viewport;
-        grid.hoverRow();
-        grid.hoverColumn();
-        fireEvent(this, 'mouseOut', {
-            target: this
-        });
+        this.row.viewport.grid.hoverRow();
+        super.onMouseOut();
     }
     /**
      * Handles the double click event on the cell.

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

@@ -74,6 +74,4 @@ declare class TableRow extends Row {
      */
     setTranslateY(value: number): void;
 }
-declare namespace TableRow {
-}
 export default TableRow;

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

@@ -15,6 +15,8 @@
  * */
 'use strict';
 import Templating from '../../../Core/Templating.js';
+import U from '../../../Core/Utilities.js';
+const { fireEvent } = U;
 /* *
  *
  *  Abstract Class of Cell
@@ -77,6 +79,12 @@ class Cell {
         this.cellEvents.push(['keydown', (e) => {
                 this.onKeyDown(e);
             }]);
+        this.cellEvents.push(['mouseout', () => {
+                this.onMouseOut();
+            }]);
+        this.cellEvents.push(['mouseover', () => {
+                this.onMouseOver();
+            }]);
         this.cellEvents.forEach((pair) => {
             this.htmlElement.addEventListener(pair[0], pair[1]);
         });
@@ -150,6 +158,28 @@ class Cell {
             }
         }
     }
+    /**
+     * Handles the mouse over event on the cell.
+     * @internal
+     */
+    onMouseOver() {
+        const { grid } = this.row.viewport;
+        grid.hoverColumn(this.column?.id);
+        fireEvent(this, 'mouseOver', {
+            target: this
+        });
+    }
+    /**
+     * Handles the mouse out event on the cell.
+     * @internal
+     */
+    onMouseOut() {
+        const { grid } = this.row.viewport;
+        grid.hoverColumn();
+        fireEvent(this, 'mouseOut', {
+            target: this
+        });
+    }
     /**
      * Renders the cell by appending the HTML element to the row.
      */