@revolist/revogrid 4.22.0 → 4.23.0

package/dist/collection/plugins/sorting/sorting.plugin.js

@@ -1,15 +1,30 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import size from "lodash/size";
 import debounce from "lodash/debounce";
 import { BasePlugin } from "../base.plugin";
 import { getColumnByProp } from "../../utils/column.utils";
 import { columnTypes, rowTypes } from "../../store/index";
-import { getComparer, getNextOrder, sortIndexByItems } from "./sorting.func";
+import { isGrouping } from "../groupingRow/grouping.service";
+import { getComparer, getNextOrder, getSortingIndex, hasActiveSorting, sortIndexByItems, } from "./sorting.func";
 export * from './sorting.types';
 export * from './sorting.func';
 export * from './sorting.sign';
+function getSortableRowIndexes(indexes, source) {
+    return indexes.filter(index => !isGrouping(source[index]));
+}
+function mergeSortedRowsWithGroups(indexes, source, sortedRows) {
+    if (sortedRows.length === indexes.length) {
+        return sortedRows;
+    }
+    let rowIndex = 0;
+    return indexes.map(index => {
+        if (isGrouping(source[index])) {
+            return index;
+        }
+        return sortedRows[rowIndex++];
+    });
+}
 /**
  * Lifecycle
  * 1. @event `beforesorting` - Triggered when sorting just starts. Nothing has happened yet. This can be triggered from a column or from the source. If the type is from rows, the column will be undefined.
@@ -24,54 +39,37 @@ export class SortingPlugin extends BasePlugin {
         super(revogrid, providers);
         this.revogrid = revogrid;
         /**
-         * Delayed sorting promise
+         * Delayed sorting promise registered in the grid render job queue.
          */
         this.sortingPromise = null;
         /**
-         * We need to sort only so often
+         * Debounced sorting entry point.
+         *
+         * Sorting can be requested by column changes, source changes, and header
+         * clicks in quick succession, so the actual sort is delayed and coalesced.
          */
-        this.postponeSort = debounce((order, comparison, ignoreViewportUpdate) => this.runSorting(order, comparison, ignoreViewportUpdate), 50);
-        const setConfig = (cfg) => {
-            var _a;
-            if (cfg) {
-                const sortingFunc = {};
-                const order = {};
-                (_a = cfg.columns) === null || _a === void 0 ? void 0 : _a.forEach(col => {
-                    sortingFunc[col.prop] = getComparer(col, col.order);
-                    order[col.prop] = col.order;
-                });
-                if (cfg.additive) {
-                    this.sorting = Object.assign(Object.assign({}, this.sorting), order);
-                    this.sortingFunc = Object.assign(Object.assign({}, this.sortingFunc), sortingFunc);
-                }
-                else {
-                    // // set sorting
-                    this.sorting = order;
-                    this.sortingFunc = sortingFunc;
-                }
-            }
-        };
-        setConfig(config);
+        this.postponeSort = debounce((order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate) => this.runSorting(order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate), 50);
+        this.applySortingConfig(config);
         this.addEventListener('sortingconfigchanged', ({ detail }) => {
             config = detail;
-            setConfig(detail);
-            this.startSorting(this.sorting, this.sortingFunc);
+            this.applySortingConfig(detail);
+            this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
         });
         this.addEventListener('beforeheaderrender', ({ detail, }) => {
             var _a;
             const { data: column } = detail;
             if (column.sortable) {
-                detail.data = Object.assign(Object.assign({}, column), { order: (_a = this.sorting) === null || _a === void 0 ? void 0 : _a[column.prop] });
+                detail.data = Object.assign(Object.assign({}, column), { order: (_a = this.sorting) === null || _a === void 0 ? void 0 : _a[column.prop], sortIndex: getSortingIndex(this.sorting, column.prop, this.sortingOrder) });
             }
         });
         this.addEventListener('beforeanysource', ({ detail: { type }, }) => {
             // if sorting was provided - sort data
-            if (!!this.sorting && this.sortingFunc) {
+            if (hasActiveSorting(this.sorting) && this.sortingFunc) {
                 const event = this.emit('beforesourcesortingapply', { type, sorting: this.sorting });
                 if (event.defaultPrevented) {
                     return;
                 }
-                this.startSorting(this.sorting, this.sortingFunc);
+                this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
             }
         });
         this.addEventListener('aftercolumnsset', ({ detail: { order }, }) => {
@@ -81,13 +79,24 @@ export class SortingPlugin extends BasePlugin {
             }
             const columns = this.providers.column.getColumns();
             const sortingFunc = {};
+            const sortingColumns = {};
+            const sortingOrder = [];
+            const sorting = {};
             for (let prop in order) {
-                const cmp = getComparer(getColumnByProp(columns, prop), order[prop]);
-                sortingFunc[prop] = cmp;
+                if (order[prop]) {
+                    const column = getColumnByProp(columns, prop);
+                    const cmp = getComparer(column, order[prop]);
+                    sorting[prop] = order[prop];
+                    sortingFunc[prop] = cmp;
+                    sortingColumns[prop] = column;
+                    sortingOrder.push(prop);
+                }
             }
             // set sorting
-            this.sorting = order;
-            this.sortingFunc = order && sortingFunc;
+            this.sorting = hasActiveSorting(sorting) ? sorting : undefined;
+            this.sortingFunc = this.sorting ? sortingFunc : undefined;
+            this.sortingColumns = this.sorting ? sortingColumns : undefined;
+            this.sortingOrder = this.sorting ? sortingOrder : undefined;
         });
         this.addEventListener('beforeheaderclick', (e) => {
             var _a, _b, _c, _d;
@@ -101,23 +110,89 @@ export class SortingPlugin extends BasePlugin {
         });
     }
     /**
-     * Entry point for sorting, waits for all delays, registers jobs
+     * Creates mutable sorting maps from current state when additive sorting is requested.
+     */
+    createSortingState(additive) {
+        var _a;
+        return {
+            sorting: additive ? Object.assign({}, this.sorting) : {},
+            sortingFunc: additive ? Object.assign({}, this.sortingFunc) : {},
+            sortingColumns: additive ? Object.assign({}, this.sortingColumns) : {},
+            sortingOrder: additive ? [...((_a = this.sortingOrder) !== null && _a !== void 0 ? _a : [])] : [],
+        };
+    }
+    /**
+     * Stores normalized sorting state, clearing inactive empty maps.
+     */
+    setSortingState({ sorting, sortingFunc, sortingColumns, sortingOrder, }) {
+        this.sorting = hasActiveSorting(sorting) ? sorting : undefined;
+        this.sortingFunc = this.sorting ? sortingFunc : undefined;
+        this.sortingColumns = this.sorting ? sortingColumns : undefined;
+        this.sortingOrder = this.sorting ? sortingOrder : undefined;
+    }
+    /**
+     * Adds or replaces a column in a sorting state.
      */
-    startSorting(order, sortingFunc, ignoreViewportUpdate) {
+    setColumnSorting(state, prop, order, cmp, column) {
+        state.sorting[prop] = order;
+        state.sortingFunc[prop] = cmp;
+        state.sortingColumns[prop] = column;
+        if (!state.sortingOrder.some(sortingProp => String(sortingProp) === String(prop))) {
+            state.sortingOrder.push(prop);
+        }
+    }
+    /**
+     * Removes a column from a sorting state.
+     */
+    clearColumnSorting(state, prop) {
+        delete state.sorting[prop];
+        delete state.sortingFunc[prop];
+        delete state.sortingColumns[prop];
+        const index = state.sortingOrder.findIndex(sortingProp => String(sortingProp) === String(prop));
+        if (index >= 0) {
+            state.sortingOrder.splice(index, 1);
+        }
+    }
+    /**
+     * Normalizes external sorting configuration into internal order,
+     * comparator, and column metadata maps.
+     */
+    applySortingConfig(cfg) {
+        var _a;
+        if (!cfg) {
+            return;
+        }
+        const state = this.createSortingState(cfg.additive);
+        (_a = cfg.columns) === null || _a === void 0 ? void 0 : _a.forEach(col => {
+            if (col.order) {
+                this.setColumnSorting(state, col.prop, col.order, getComparer(col, col.order), col);
+                return;
+            }
+            this.clearColumnSorting(state, col.prop);
+        });
+        this.setSortingState(state);
+    }
+    startSorting(order, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate) {
         if (!this.sortingPromise) {
             // add job before render
             this.revogrid.jobsBeforeRender.push(new Promise(resolve => {
                 this.sortingPromise = resolve;
             }));
         }
-        this.postponeSort(order, sortingFunc, ignoreViewportUpdate);
+        if (typeof sortingColumns === 'boolean') {
+            this.postponeSort(order, sortingFunc, undefined, undefined, sortingColumns);
+            return;
+        }
+        this.postponeSort(order, sortingFunc, sortingColumns, sortingOrder, ignoreViewportUpdate);
     }
     /**
-     * Apply sorting to data on header click
-     * If additive - add to existing sorting, multiple columns can be sorted
+     * Applies sorting requested by a sortable header click.
+     *
+     * @param column - Column that initiated sorting.
+     * @param additive - If true, add/remove this column from the current multi-sort state.
      */
     headerclick(column, additive) {
-        var _a, _b, _c;
+        var _a;
         const columnProp = column.prop;
         let order = getNextOrder((_a = this.sorting) === null || _a === void 0 ? void 0 : _a[columnProp]);
         const beforeEvent = this.emit('beforesorting', { column, order, additive });
@@ -135,52 +210,59 @@ export class SortingPlugin extends BasePlugin {
             return;
         }
         const cmp = getComparer(beforeApplyEvent.detail.column, beforeApplyEvent.detail.order);
-        if (beforeApplyEvent.detail.additive && this.sorting) {
-            const sorting = {};
-            const sortingFunc = {};
-            if (columnProp in sorting && size(sorting) > 1 && order === undefined) {
-                delete sorting[columnProp];
-                delete sortingFunc[columnProp];
-            }
-            else {
-                sorting[columnProp] = order;
-                sortingFunc[columnProp] = cmp;
-            }
-            this.sorting = Object.assign(Object.assign({}, this.sorting), sorting);
-            // extend sorting function with new sorting for multiple columns sorting
-            this.sortingFunc = Object.assign(Object.assign({}, this.sortingFunc), sortingFunc);
+        this.applyHeaderSorting(beforeApplyEvent.detail.column, beforeApplyEvent.detail.additive, order, cmp);
+        this.startSorting(this.sorting, this.sortingFunc, this.sortingColumns, this.sortingOrder);
+    }
+    /**
+     * Applies sorting state produced by a header click.
+     */
+    applyHeaderSorting(column, additive, order, cmp) {
+        if (!additive) {
+            this.setSortingState(order ? {
+                sorting: { [column.prop]: order },
+                sortingFunc: { [column.prop]: cmp },
+                sortingColumns: { [column.prop]: column },
+                sortingOrder: [column.prop],
+            } : this.createSortingState());
+            return;
+        }
+        const state = this.createSortingState(true);
+        if (order) {
+            this.setColumnSorting(state, column.prop, order, cmp, column);
         }
         else {
-            if (order) {
-                // reset sorting
-                this.sorting = { [columnProp]: order };
-                this.sortingFunc = { [columnProp]: cmp };
-            }
-            else {
-                (_b = this.sorting) === null || _b === void 0 ? true : delete _b[columnProp];
-                (_c = this.sortingFunc) === null || _c === void 0 ? true : delete _c[columnProp];
-            }
+            this.clearColumnSorting(state, column.prop);
         }
-        this.startSorting(this.sorting, this.sortingFunc);
+        this.setSortingState(state);
     }
-    runSorting(order, comparison, ignoreViewportUpdate) {
-        var _a;
-        this.sort(order, comparison, undefined, ignoreViewportUpdate);
-        (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
+    runSorting(order, comparison, sortingColumns, sortingOrder, ignoreViewportUpdate) {
+        var _a, _b;
+        if (typeof sortingColumns === 'boolean') {
+            this.sort(order, comparison, undefined, undefined, undefined, sortingColumns);
+            (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.sortingPromise = null;
+            return;
+        }
+        this.sort(order, comparison, sortingColumns, sortingOrder, undefined, ignoreViewportUpdate);
+        (_b = this.sortingPromise) === null || _b === void 0 ? void 0 : _b.call(this);
         this.sortingPromise = null;
     }
-    /**
-     * Sort items by sorting function
-     * @requires proxyItems applied to row store
-     * @requires source applied to row store
-     *
-     * @param sorting - per column sorting
-     * @param data - this.stores['rgRow'].store.get('source')
-     */
-    sort(sorting, sortingFunc, types = rowTypes, ignoreViewportUpdate = false) {
+    sort(sorting, sortingFunc, sortingColumns, sortingOrder, types = rowTypes, ignoreViewportUpdate = false) {
+        let activeSortingColumns;
+        let activeSortingOrder;
+        let activeTypes = types;
+        let activeIgnoreViewportUpdate = ignoreViewportUpdate;
+        if (Array.isArray(sortingColumns)) {
+            activeTypes = sortingColumns;
+            activeIgnoreViewportUpdate = typeof sortingOrder === 'boolean' ? sortingOrder : false;
+        }
+        else {
+            activeSortingColumns = sortingColumns;
+            activeSortingOrder = Array.isArray(sortingOrder) ? sortingOrder : undefined;
+        }
         // if no sorting - reset
         if (!Object.keys(sorting || {}).length) {
-            for (let type of types) {
+            for (let type of activeTypes) {
                 const storeService = this.providers.data.stores[type];
                 // row data
                 const source = storeService.store.get('source');
@@ -189,26 +271,27 @@ export class SortingPlugin extends BasePlugin {
                 // row indexes
                 const newItemsOrder = Array.from({ length: source.length }, (_, i) => i); // recover indexes range(0, source.length)
                 this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
-                storeService.setData({ proxyItems: newItemsOrder, source: [...source], });
+                storeService.setData({ proxyItems: newItemsOrder });
             }
         }
         else {
-            for (let type of types) {
+            for (let type of activeTypes) {
                 const storeService = this.providers.data.stores[type];
                 // row data
                 const source = storeService.store.get('source');
                 // row indexes
                 const proxyItems = storeService.store.get('proxyItems');
-                const newItemsOrder = sortIndexByItems([...proxyItems], source, sortingFunc);
+                const sortItems = getSortableRowIndexes(proxyItems, source);
+                const sortedItems = sortIndexByItems([...sortItems], source, sortingFunc, sorting, activeSortingColumns, activeSortingOrder);
+                const newItemsOrder = mergeSortedRowsWithGroups(proxyItems, source, sortedItems);
                 // take row indexes before trim applied and proxy items
                 const prevItems = storeService.store.get('items');
                 storeService.setData({
                     proxyItems: newItemsOrder,
-                    source: [...source],
                 });
                 // take currently visible row indexes
                 const newItems = storeService.store.get('items');
-                if (!ignoreViewportUpdate) {
+                if (!activeIgnoreViewportUpdate) {
                     this.providers.dimension
                         .updateSizesPositionByNewDataIndexes(type, newItems, prevItems);
                 }

package/dist/collection/plugins/sorting/sorting.sign.js

@@ -2,7 +2,13 @@
  * Built by Revolist OU ❤️
  */
 import { h } from "@stencil/core";
+/**
+ * Renders sorting direction and optional additive sorting rank.
+ */
 export const SortingSign = ({ column }) => {
     var _a;
-    return h("i", { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' });
+    const indicatorAttrs = { class: 'sort-indicator' };
+    const iconAttrs = { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' };
+    const orderIndexAttrs = { class: 'sort-order-index' };
+    return (h("span", Object.assign({}, indicatorAttrs), h("i", Object.assign({}, iconAttrs)), (column === null || column === void 0 ? void 0 : column.sortIndex) ? (h("sup", Object.assign({}, orderIndexAttrs), column.sortIndex)) : null));
 };

package/dist/collection/serve/controller.js

@@ -1,15 +1,15 @@
-import { generateFakeDataObject } from './data.js';
+import { generateFakeDataObjectAsync } from './data.js';
 
 /**
  * Map of prevented events
  */
-window.eventsPrevented = {};
+globalThis.eventsPrevented = {};
 
 /**
  * Toggle row headers visibility
  * @param {boolean} isShow - Show row headers if true, hide otherwise
  */
-window.showRowHeaders = function (isShow) {
+globalThis.showRowHeaders = function (isShow) {
   const grid = document.querySelector('revo-grid');
   grid.rowHeaders = isShow;
 };
@@ -18,8 +18,8 @@ window.showRowHeaders = function (isShow) {
  * Toggle column grouping visibility
  * @param {boolean} isShow - Show column grouping if true, hide otherwise
  */
-window.showColGrouping = function (isShow) {
-  setData({
+globalThis.showColGrouping = function (isShow) {
+  globalThis.setData({
     groupedHeader: isShow,
   });
 };
@@ -28,17 +28,30 @@ window.showColGrouping = function (isShow) {
  * Set row size
  * @param {number} s - Row size
  */
-window.setRowSize = function (s) {
+globalThis.setRowSize = function (s) {
   const grid = document.querySelector('revo-grid');
   grid.rowSize = s;
 };
 
+/**
+ * Apply several custom row sizes.
+ */
+globalThis.setCustomRowSizes = function () {
+  const grid = document.querySelector('revo-grid');
+  grid.rowDefinitions = [
+    { type: 'rgRow', index: 1, size: 64 },
+    { type: 'rgRow', index: 3, size: 96 },
+    { type: 'rgRow', index: 6, size: 48 },
+    { type: 'rgRow', index: 10, size: 120 },
+  ];
+};
+
 /**
  * Start editing cell
  * @param {number} rgRow - Row index
  * @param {string} prop - Column property
  */
-window.setEdit = function (rgRow, prop) {
+globalThis.setEdit = function (rgRow, prop) {
   const grid = document.querySelector('revo-grid');
   grid.setCellEdit(rgRow, prop);
 };
@@ -47,7 +60,7 @@ window.setEdit = function (rgRow, prop) {
  * Scroll to column
  * @param {number} [x=30] - Column index
  */
-window.scrollToCol = function (x = 30) {
+globalThis.scrollToCol = function (x = 30) {
   const grid = document.querySelector('revo-grid');
   grid.scrollToColumnProp(x);
 };
@@ -55,7 +68,7 @@ window.scrollToCol = function (x = 30) {
 /**
  * Clear grouping
  */
-window.clearGrouping = function () {
+globalThis.clearGrouping = function () {
   const grid = document.querySelector('revo-grid');
   grid.grouping = {};
 };
@@ -65,7 +78,7 @@ window.clearGrouping = function () {
  * @param {Array} props - Array of properties to group by
  * @param {boolean} expandedAll - Expand all groups if true, collapse otherwise
  */
-window.setGrouping = function (props = [], expandedAll = false) {
+globalThis.setGrouping = function (props = [], expandedAll = false) {
   const grid = document.querySelector('revo-grid');
   grid.grouping = {
     props,
@@ -82,7 +95,7 @@ window.setGrouping = function (props = [], expandedAll = false) {
  * Set trimmed rows
  * @param {Array} rows - Array of row indexes to trim
  */
-window.setTrimmed = function (rows = []) {
+globalThis.setTrimmed = function (rows = []) {
   const grid = document.querySelector('revo-grid');
   grid.trimmedRows = rows.reduce((r, v) => {
     r[v] = true;
@@ -94,7 +107,7 @@ window.setTrimmed = function (rows = []) {
  * Export grid
  * @param {string} [filename='new file'] - File name
  */
-window.exportGrid = function (filename = 'new file') {
+globalThis.exportGrid = function (filename = 'new file') {
   const grid = document.querySelector('revo-grid');
   grid.getPlugins().then(plugins => {
     plugins.forEach(p => {
@@ -116,31 +129,78 @@ let defaultData = {
   colPinStart: [],
 };
 
+let dataGenerationId = 0;
+
+function formatNumber(value) {
+  return new Intl.NumberFormat('en').format(value);
+}
+
+function setLoader(text, visible = true) {
+  const $loader = document.querySelector('.loader');
+  if (!$loader) {
+    return;
+  }
+  $loader.textContent = text;
+  $loader.style.display = visible ? 'block' : 'none';
+}
+
+function cancelDataGeneration() {
+  dataGenerationId++;
+  setLoader('', false);
+}
+
 /**
  * Set data
  * @param {Object} [config={}] - Data configuration
  */
-window.setData = function (config = {}) {
+globalThis.setData = async function (config = {}) {
   defaultData = { ...defaultData, ...config };
-  const $loader = document.querySelector('.loader');
-  $loader.style.display = 'block';
-  setTimeout(() => {
+  const generationId = ++dataGenerationId;
+  const totalCells = defaultData.rows * defaultData.cols;
+  setLoader(`Preparing ${formatNumber(defaultData.rows)} rows x ${formatNumber(defaultData.cols)} columns...`);
+
+  try {
+    // Let the loader paint before data generation starts.
+    await new Promise(resolve => setTimeout(resolve, 0));
+    const data = await generateFakeDataObjectAsync(defaultData, {
+      isCanceled: () => generationId !== dataGenerationId,
+      onProgress: ({ rows, totalRows }) => {
+        if (generationId !== dataGenerationId) {
+          return;
+        }
+        setLoader(
+          `Generated ${formatNumber(rows)} / ${formatNumber(totalRows)} rows (${formatNumber(totalCells)} cells)...`,
+        );
+      },
+    });
+
+    if (generationId !== dataGenerationId || !data) {
+      return;
+    }
+
     const grid = document.querySelector('revo-grid');
-    const data = generateFakeDataObject(defaultData);
+    if (!grid) {
+      return;
+    }
 
     grid.columns = data.headers;
     grid.source = data.rows;
 
     grid.pinnedTopSource = data.pinnedTopRows;
     grid.pinnedBottomSource = data.pinnedBottomRows;
-    $loader.style.display = 'none';
-  }, 0);
+    setLoader('', false);
+  } catch (error) {
+    if (generationId === dataGenerationId) {
+      setLoader(`Data generation failed: ${error?.message || error}`);
+      throw error;
+    }
+  }
 };
 
-window.setRtl = function (checked) {
+globalThis.setRtl = function (checked) {
   const grid = document.querySelector('revo-grid');
   grid.rtl = checked;
-  window.document.dir = checked ? 'rtl' : 'ltr';
+  globalThis.document.dir = checked ? 'rtl' : 'ltr';
 };
 
 /**
@@ -148,7 +208,7 @@ window.setRtl = function (checked) {
  * @param {string} type - Type of pinned rows/columns
  * @param {boolean} checked - True if rows/columns are pinned, false otherwise
  */
-window.setPinned = function (type, checked) {
+globalThis.setPinned = function (type, checked) {
   const val = [];
   if (checked) {
     switch (type) {
@@ -166,7 +226,7 @@ window.setPinned = function (type, checked) {
         break;
     }
   }
-  setData({
+  globalThis.setData({
     [type]: val,
   });
 };
@@ -176,8 +236,8 @@ window.setPinned = function (type, checked) {
  * @param {string} name - Event name
  * @param {boolean} checked - True if event should be prevented, false otherwise
  */
-window.preventEvent = function (name, checked) {
-  eventsPrevented[name] = checked;
+globalThis.preventEvent = function (name, checked) {
+  globalThis.eventsPrevented[name] = checked;
 };
 
 let keys = 2;
@@ -187,7 +247,7 @@ let attrs = {};
  * Toggle visibility of grid
  * @param {boolean} checked - True if grid is visible, false otherwise
  */
-window.toggleVisibility = function (checked) {
+globalThis.toggleVisibility = function (checked) {
   if (!checked) {
     const grid = document.querySelector('revo-grid');
     attrs = {};
@@ -209,7 +269,7 @@ window.toggleVisibility = function (checked) {
     });
     grid.setAttribute('key', keys++);
     holder.appendChild(grid);
-    setData();
+    globalThis.setData();
   }
 };
 
@@ -220,7 +280,7 @@ let timerUpdateInterval;
  * @param {boolean} checked - True if timer should be updated, false otherwise
  * @param {number} [inteval=3] - Update interval in seconds
  */
-window.timerUpdate = function (checked, inteval = 3) {
+globalThis.timerUpdate = function (checked, inteval = 3) {
   clearInterval(timerUpdateInterval);
   if (checked) {
     timerUpdateInterval = setInterval(() => {
@@ -234,9 +294,9 @@ window.timerUpdate = function (checked, inteval = 3) {
  * Set theme
  * @param {string} theme - Theme name
  */
-window.theme = function (theme) {
+globalThis.theme = function (theme) {
   const grid = document.querySelector('revo-grid');
-  if (theme && theme.indexOf('dark') > -1) {
+  if (theme?.includes('dark')) {
     document.documentElement.setAttribute('data-bs-theme', 'dark');
   } else {
     document.documentElement.removeAttribute('data-bs-theme');
@@ -244,26 +304,26 @@ window.theme = function (theme) {
   grid.theme = theme || 'default';
 };
 
-window.onload = onLoad;
+globalThis.onload = onLoad;
 
-window.clearFilter = () => {
+globalThis.clearFilter = () => {
   const grid = document.querySelector('revo-grid');
   grid.filter = {};
 };
 
-window.sortColumn = (columnProp= 0, additive = false) => {
+globalThis.sortColumn = (columnProp= 0, additive = false) => {
   const grid = document.querySelector('revo-grid');
   grid.updateColumnSorting({
     prop: columnProp,
   }, 'asc', additive);
 };
 
-window.clearSorting = () => {
+globalThis.clearSorting = () => {
   const grid = document.querySelector('revo-grid');
   grid.clearSorting();
 };
 
-window.setFilter = () => {
+globalThis.setFilter = () => {
   const grid = document.querySelector('revo-grid');
   const filterFunc = (cellValue, extraValue) => {
     if (!cellValue) {
@@ -304,7 +364,8 @@ window.setFilter = () => {
  * Deep groups should align with a1/a2/a3/b1/b2/b3.
  * https://github.com/revolist/revogrid/issues/828
  */
-window.setColumnGroupOffsetBugDemo = () => {
+globalThis.setColumnGroupOffsetBugDemo = () => {
+  cancelDataGeneration();
   const grid = document.querySelector('revo-grid');
 
   grid.columns = [
@@ -390,7 +451,7 @@ function onLoad() {
   const events = ['aftercolumnresize'];
   events.forEach(e => {
     grid.addEventListener(e, $e => {
-      if (window.eventsPrevented[e]) {
+      if (globalThis.eventsPrevented[e]) {
         $e.preventDefault();
       }
       console.log(