@highcharts/grid-pro 2.0.1 → 2.1.1

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

@@ -18,7 +18,7 @@ import CellContent from './CellContent.js';
 import GridUtils from '../../GridUtils.js';
 const { setHTMLContent } = GridUtils;
 import Utils from '../../../../Core/Utilities.js';
-const { defined } = Utils;
+const { defined, isString } = Utils;
 /* *
  *
  *  Class
@@ -28,10 +28,20 @@ const { defined } = Utils;
  * Represents a text type of content.
  */
 class TextContent extends CellContent {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
     constructor(cell) {
         super(cell);
         this.add();
     }
+    /* *
+     *
+     *  Methods
+     *
+     * */
     add() {
         this.update();
     }
@@ -66,7 +76,13 @@ class TextContent extends CellContent {
                 (format ? cell.format(format) : value + '');
         }
         else if (isDefaultFormat) {
-            cellContent = formatter?.call(cell).toString() || value + '';
+            const formattedValue = formatter?.call(cell);
+            if (isString(formattedValue)) {
+                cellContent = formattedValue;
+            }
+            else {
+                cellContent = value + '';
+            }
         }
         else if (isDefaultFormatter) {
             cellContent = format ? cell.format(format) : value + '';
@@ -76,20 +92,15 @@ class TextContent extends CellContent {
 }
 /* *
  *
- *  Namespace
+ *  Static Properties
  *
  * */
-(function (TextContent) {
-    /**
-     * Default formats for data types.
-     */
-    TextContent.defaultFormatsForDataTypes = {
-        string: '{value}',
-        number: '{value}',
-        'boolean': '{value}',
-        datetime: '{value:%Y-%m-%d %H:%M:%S}'
-    };
-})(TextContent || (TextContent = {}));
+TextContent.defaultFormatsForDataTypes = {
+    string: '{value}',
+    number: '{value}',
+    'boolean': '{value}',
+    datetime: '{value:%Y-%m-%d %H:%M:%S}'
+};
 /* *
  *
  *  Default Export

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

@@ -10,7 +10,7 @@ import TableCell from './Body/TableCell';
 /**
  * Represents a column in the data grid.
  */
-declare class Column {
+export declare class Column {
     /**
      * The viewport (table) the column belongs to.
      */
@@ -18,7 +18,7 @@ declare class Column {
     /**
      * Type of the data in the column.
      */
-    readonly dataType: Column.DataType;
+    readonly dataType: ColumnDataType;
     /**
      * The cells of the column.
      */
@@ -35,7 +35,7 @@ declare class Column {
      * The options of the column as a proxy that provides merged access to
      * original options and defaults if not defined in the individual options.
      */
-    readonly options: Column.Options;
+    readonly options: NoIdColumnOptions;
     /**
      * The index of the column in the viewport.
      */
@@ -126,11 +126,9 @@ declare class Column {
      * The formatted string.
      */
     format(template: string): string;
-    update(options: Column.Options, render?: boolean): void;
-    update(options: Column.Options, render?: true): Promise<void>;
-}
-declare namespace Column {
-    type Options = Omit<IndividualColumnOptions, 'id'>;
-    type DataType = 'string' | 'number' | 'boolean' | 'datetime';
+    update(options: NoIdColumnOptions, render?: boolean): void;
+    update(options: NoIdColumnOptions, render?: true): Promise<void>;
 }
+export type NoIdColumnOptions = Omit<IndividualColumnOptions, 'id'>;
+export type ColumnDataType = 'string' | 'number' | 'boolean' | 'datetime';
 export default Column;

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

@@ -30,7 +30,7 @@ const { createOptionsProxy } = GridUtils;
 /**
  * Represents a column in the data grid.
  */
-class Column {
+export class Column {
     /* *
     *
     *  Constructor
@@ -208,6 +208,28 @@ class Column {
     format(template) {
         return Templating.format(template, this, this.viewport.grid);
     }
+    /**
+     * Sets the new column options to the userOptions field.
+     *
+     * @param options
+     * The options to set.
+     *
+     * @param overwrite
+     * Whether to overwrite the existing column options with the new ones.
+     * Default is `false`.
+     *
+     * @returns
+     * The difference between the previous and the new column options in form
+     * of a record of `[column.id]: column.options`.
+     *
+     * @internal
+     */
+    setOptions(options, overwrite = false) {
+        return this.viewport.grid.setColumnOptions([{
+                id: this.id,
+                ...options
+            }], overwrite);
+    }
     /**
      * Updates the column with new options.
      *

package/es-modules/Grid/Core/Table/ColumnResizing/AdjacentResizingMode.js

@@ -46,11 +46,11 @@ class AdjacentResizingMode extends ResizingMode {
         const newW = Math.round(Math.max(colW + diff, minWidth) * 10) / 10;
         this.columnWidths[column.id] = newW;
         this.columnWidthUnits[column.id] = 0; // Always save in px
-        column.update({ width: newW }, false);
+        column.setOptions({ width: newW });
         if (nextCol) {
             const newNextW = this.columnWidths[nextCol.id] = Math.round(Math.max((resizer.nextColumnStartWidth ?? 0) + colW - newW, minWidth) * 10) / 10;
             this.columnWidthUnits[nextCol.id] = 0; // Always save in px
-            nextCol.update({ width: newNextW }, false);
+            nextCol.setOptions({ width: newNextW });
         }
     }
 }

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

@@ -3,30 +3,37 @@ import ResizingMode from './ResizingMode.js';
 import AdjacentResizingMode from './AdjacentResizingMode.js';
 import IndependentResizingMode from './IndependentResizingMode.js';
 import DistributedResizingMode from './DistributedResizingMode.js';
-declare namespace ColumnResizing {
-    /**
-     * Abstract class representing a column resizing mode.
-     */
-    const AbstractStrategy: typeof ResizingMode;
-    /**
-     * Registry of column resizing modes.
-     */
-    const types: {
+export type ColumnResizingMode = keyof typeof types;
+/**
+ * Abstract class representing a column resizing mode.
+ */
+export declare const AbstractStrategy: typeof ResizingMode;
+/**
+ * Registry of column resizing modes.
+ */
+export declare const types: {
+    adjacent: typeof AdjacentResizingMode;
+    distributed: typeof DistributedResizingMode;
+    independent: typeof IndependentResizingMode;
+};
+/**
+ * Creates a new column resizing mode instance based on the
+ * viewport's options.
+ *
+ * @param viewport
+ * The table that the column resizing mode is applied to.
+ *
+ * @returns
+ * The proper column resizing mode.
+ */
+export declare function initMode(viewport: Table): ResizingMode;
+declare const _default: {
+    readonly initMode: typeof initMode;
+    readonly types: {
         adjacent: typeof AdjacentResizingMode;
         distributed: typeof DistributedResizingMode;
         independent: typeof IndependentResizingMode;
     };
-    type ModeType = keyof typeof types;
-    /**
-     * Creates a new column resizing mode instance based on the
-     * viewport's options.
-     *
-     * @param viewport
-     * The table that the column resizing mode is applied to.
-     *
-     * @returns
-     * The proper column resizing mode.
-     */
-    function initMode(viewport: Table): ResizingMode;
-}
-export default ColumnResizing;
+    readonly AbstractStrategy: typeof ResizingMode;
+};
+export default _default;

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

@@ -19,50 +19,50 @@ import IndependentResizingMode from './IndependentResizingMode.js';
 import DistributedResizingMode from './DistributedResizingMode.js';
 /* *
  *
- *  Namespace
+ *  Definitions
  *
  * */
-var ColumnResizing;
-(function (ColumnResizing) {
-    /**
-     * Abstract class representing a column resizing mode.
-     */
-    ColumnResizing.AbstractStrategy = ResizingMode;
-    /**
-     * Registry of column resizing modes.
-     */
-    ColumnResizing.types = {
-        adjacent: AdjacentResizingMode,
-        distributed: DistributedResizingMode,
-        independent: IndependentResizingMode
-    };
-    /**
-     * Creates a new column resizing mode instance based on the
-     * viewport's options.
-     *
-     * @param viewport
-     * The table that the column resizing mode is applied to.
-     *
-     * @returns
-     * The proper column resizing mode.
-     */
-    function initMode(viewport) {
-        const modeName = viewport.grid.options?.rendering?.columns?.resizing?.mode ||
-            'adjacent';
-        let ModeConstructor = ColumnResizing.types[modeName];
-        if (!ModeConstructor) {
-            // eslint-disable-next-line no-console
-            console.warn(`Unknown column resizing mode: '${modeName}'. Applied ` +
-                'default \'adjacent\' mode.');
-            ModeConstructor = ColumnResizing.types.adjacent;
-        }
-        return new ModeConstructor(viewport);
+/**
+ * Abstract class representing a column resizing mode.
+ */
+export const AbstractStrategy = ResizingMode;
+/**
+ * Registry of column resizing modes.
+ */
+export const types = {
+    adjacent: AdjacentResizingMode,
+    distributed: DistributedResizingMode,
+    independent: IndependentResizingMode
+};
+/**
+ * Creates a new column resizing mode instance based on the
+ * viewport's options.
+ *
+ * @param viewport
+ * The table that the column resizing mode is applied to.
+ *
+ * @returns
+ * The proper column resizing mode.
+ */
+export function initMode(viewport) {
+    const modeName = viewport.grid.options?.rendering?.columns?.resizing?.mode ||
+        'adjacent';
+    let ModeConstructor = types[modeName];
+    if (!ModeConstructor) {
+        // eslint-disable-next-line no-console
+        console.warn(`Unknown column resizing mode: '${modeName}'. Applied ` +
+            'default \'adjacent\' mode.');
+        ModeConstructor = types.adjacent;
     }
-    ColumnResizing.initMode = initMode;
-})(ColumnResizing || (ColumnResizing = {}));
+    return new ModeConstructor(viewport);
+}
 /* *
  *
  *  Default Export
  *
  * */
-export default ColumnResizing;
+export default {
+    initMode,
+    types,
+    AbstractStrategy
+};

package/es-modules/Grid/Core/Table/ColumnResizing/DistributedResizingMode.js

@@ -42,7 +42,7 @@ class DistributedResizingMode extends ResizingMode {
         // Set the width of the resized column.
         const width = this.columnWidths[column.id] = Math.round(Math.max((resizer.columnStartWidth || 0) + diff, ResizingMode.getMinWidth(column)) * 10) / 10;
         this.columnWidthUnits[column.id] = 0; // Set to px
-        column.update({ width }, false);
+        column.setOptions({ width });
     }
 }
 /* *

package/es-modules/Grid/Core/Table/ColumnResizing/IndependentResizingMode.js

@@ -50,9 +50,9 @@ class IndependentResizingMode extends ResizingMode {
             const rcWidth = this.columnWidths[rightCol.id] =
                 rightCol.getWidth();
             this.columnWidthUnits[rightCol.id] = 0; // Set to px
-            rightCol.update({ width: rcWidth }, false);
+            rightCol.setOptions({ width: rcWidth });
         }
-        column.update({ width }, false);
+        column.setOptions({ width });
     }
 }
 /* *

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

@@ -1,4 +1,4 @@
-import type { ColumnResizingMode } from '../../Options';
+import type { ColumnResizingMode } from './ColumnResizing';
 import type Table from '../Table';
 import type Column from '../Column.js';
 import type ColumnsResizer from '../Actions/ColumnsResizer';
@@ -30,6 +30,11 @@ declare abstract class ResizingMode {
      * should be maintained when the table is destroyed and recreated.
      */
     invalidated?: boolean;
+    /**
+     * Whether the column distribution strategy is dirty. This flag is used to
+     * determine whether the column widths should be re-loaded.
+     */
+    isDirty?: boolean;
     /**
      * Creates a new column distribution strategy.
      *

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

@@ -92,6 +92,15 @@ class HeaderCellToolbar {
             container.removeEventListener('keydown', onKeyDown);
         });
     }
+    /**
+     * Refreshes the state of the toolbar buttons.
+     * @internal
+     */
+    refreshState() {
+        for (const button of this.buttons) {
+            button.refreshState();
+        }
+    }
     /**
      * Destroys all buttons of the toolbar.
      */
@@ -142,6 +151,7 @@ class HeaderCellToolbar {
             destroyer();
         }
         this.eventListenerDestroyers.length = 0;
+        this.clearButtons();
         this.columnResizeObserver?.disconnect();
         delete this.columnResizeObserver;
     }

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

@@ -1,6 +1,6 @@
 import type Button from '../../../UI/Button';
 import ColumnFiltering from '../../Actions/ColumnFiltering/ColumnFiltering.js';
-import Popup from '../../../UI/Popup.js';
+import Popup, { PopupOptions } from '../../../UI/Popup.js';
 /**
  * The column filtering popup.
  */
@@ -21,7 +21,7 @@ declare class FilterPopup extends Popup {
      * @param options
      * Popup options.
      */
-    constructor(filtering: ColumnFiltering, button: Button, options?: Popup.Options);
+    constructor(filtering: ColumnFiltering, button: Button, options?: PopupOptions);
     show(anchorElement?: HTMLElement): void;
     protected renderContent(contentElement: HTMLElement): void;
     protected onKeyDown(event: KeyboardEvent): void;

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

@@ -1,25 +1,27 @@
 import type Column from '../../Column';
-declare namespace StateHelpers {
-    /**
-     * Checks if the column is filtered.
-     *
-     * @param column
-     * The column to check.
-     */
-    function isFiltered(column: Column): boolean;
-    /**
-     * Checks if the column is sorted.
-     *
-     * @param column
-     * The column to check.
-     *
-     * @param order
-     * Optional sorting order to check for.
-     *
-     * @returns
-     * True if the column is sorted. In case of `order` is provided, true
-     * only if the column is sorted in the provided order.
-     */
-    function isSorted(column: Column, order?: ('asc' | 'desc')): boolean;
-}
-export default StateHelpers;
+/**
+ * Checks if the column is filtered.
+ *
+ * @param column
+ * The column to check.
+ */
+export declare function isFiltered(column: Column): boolean;
+/**
+ * Checks if the column is sorted.
+ *
+ * @param column
+ * The column to check.
+ *
+ * @param order
+ * Optional sorting order to check for.
+ *
+ * @returns
+ * True if the column is sorted. In case of `order` is provided, true
+ * only if the column is sorted in the provided order.
+ */
+export declare function isSorted(column: Column, order?: ('asc' | 'desc')): boolean;
+declare const _default: {
+    readonly isFiltered: typeof isFiltered;
+    readonly isSorted: typeof isSorted;
+};
+export default _default;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/StateHelpers.js

@@ -18,48 +18,46 @@
  *  Namespace
  *
  * */
-var StateHelpers;
-(function (StateHelpers) {
-    /**
-     * Checks if the column is filtered.
-     *
-     * @param column
-     * The column to check.
-     */
-    function isFiltered(column) {
-        const { condition, value } = column.options.filtering || {};
-        return !!(condition && (['empty', 'notEmpty', 'true', 'false'].includes(condition) ||
-            (value !== void 0 && value !== '') // Accept null and 0
-        ));
+/**
+ * Checks if the column is filtered.
+ *
+ * @param column
+ * The column to check.
+ */
+export function isFiltered(column) {
+    const { condition, value } = column.options.filtering || {};
+    return !!(condition && (['empty', 'notEmpty', 'true', 'false'].includes(condition) ||
+        (value !== void 0 && value !== '') // Accept null and 0
+    ));
+}
+/**
+ * Checks if the column is sorted.
+ *
+ * @param column
+ * The column to check.
+ *
+ * @param order
+ * Optional sorting order to check for.
+ *
+ * @returns
+ * True if the column is sorted. In case of `order` is provided, true
+ * only if the column is sorted in the provided order.
+ */
+export function isSorted(column, order) {
+    const { currentSorting } = column.viewport.grid.querying.sorting || {};
+    if (currentSorting?.columnId !== column.id) {
+        return false;
     }
-    StateHelpers.isFiltered = isFiltered;
-    /**
-     * Checks if the column is sorted.
-     *
-     * @param column
-     * The column to check.
-     *
-     * @param order
-     * Optional sorting order to check for.
-     *
-     * @returns
-     * True if the column is sorted. In case of `order` is provided, true
-     * only if the column is sorted in the provided order.
-     */
-    function isSorted(column, order) {
-        const { currentSorting } = column.viewport.grid.querying.sorting || {};
-        if (currentSorting?.columnId !== column.id) {
-            return false;
-        }
-        return order ?
-            currentSorting?.order === order :
-            !!currentSorting?.order;
-    }
-    StateHelpers.isSorted = isSorted;
-})(StateHelpers || (StateHelpers = {}));
+    return order ?
+        currentSorting?.order === order :
+        !!currentSorting?.order;
+}
 /* *
  *
  *  Default Export
  *
  * */
-export default StateHelpers;
+export default {
+    isFiltered,
+    isSorted
+};

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/FilterToolbarButton.d.ts

@@ -5,7 +5,7 @@ declare class FilterToolbarButton extends ToolbarButton {
     toolbar?: ColumnToolbar;
     popup?: FilterPopup;
     constructor();
-    protected refreshState(): void;
+    refreshState(): void;
     protected addEventListeners(): void;
     protected clickHandler(event: MouseEvent): void;
 }

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/MenuToolbarButton.d.ts

@@ -6,7 +6,7 @@ declare class MenuToolbarButton extends ToolbarButton {
     popup?: MenuPopup;
     constructor();
     protected clickHandler(event: MouseEvent): void;
-    protected refreshState(): void;
+    refreshState(): void;
     protected addEventListeners(): void;
 }
 export default MenuToolbarButton;

package/es-modules/Grid/Core/Table/Header/ColumnToolbar/ToolbarButtons/SortToolbarButton.d.ts

@@ -4,7 +4,7 @@ declare class SortToolbarButton extends ToolbarButton {
     toolbar?: ColumnToolbar;
     constructor();
     protected clickHandler(event: MouseEvent): void;
-    protected refreshState(): void;
+    refreshState(): void;
     protected addEventListeners(): void;
     protected renderActiveIndicator(): void;
 }

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

@@ -48,6 +48,4 @@ declare class HeaderRow extends Row {
      */
     private setRowAttributes;
 }
-declare namespace HeaderRow {
-}
 export default HeaderRow;

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

@@ -60,6 +60,4 @@ declare class TableHeader {
      */
     destroy(): void;
 }
-declare namespace TableHeader {
-}
 export default TableHeader;

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

@@ -135,7 +135,7 @@ declare class Table {
      * @returns
      * The viewport state metadata.
      */
-    getStateMeta(): Table.ViewportStateMetadata;
+    getStateMeta(): 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.
@@ -143,7 +143,7 @@ declare class Table {
      * @param meta
      * The viewport state metadata.
      */
-    applyStateMeta(meta: Table.ViewportStateMetadata): void;
+    applyStateMeta(meta: ViewportStateMetadata): void;
     /**
      * Sets the focus anchor cell.
      *
@@ -166,16 +166,14 @@ declare class Table {
      */
     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];
-    }
+/**
+ * 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.
+ */
+export interface ViewportStateMetadata {
+    scrollTop: number;
+    scrollLeft: number;
+    columnResizing: ColumnResizingMode;
+    focusCursor?: [number, number];
 }
 export default Table;