@revolist/revogrid 4.4.0-next.2 → 4.4.0-next.20

package/custom-element/columnService.js

@@ -3,7 +3,7 @@
  */
 import { h } from '@stencil/core/internal/client';
 import { c as createStore, d as setStore, b as getVisibleSourceItem, g as getSourceItem, s as setSourceByVirtualIndex } from './data.store.js';
-import { G as GRID_INTERNALS, i as CELL_CLASS, j as DISABLED_CLASS } from './consts.js';
+import { G as GRID_INTERNALS, j as CELL_CLASS, k as DISABLED_CLASS } from './consts.js';
 import { l as lodash } from './lodash.js';
 
 const GROUP_DEPTH = `${GRID_INTERNALS}-depth`;

package/custom-element/consts.js

@@ -39,12 +39,13 @@ const DRAG_ICON_CLASS = 'revo-drag-icon';
 const DRAGGABLE_CLASS = 'revo-draggable';
 const FOCUS_CLASS = 'focused-cell';
 const SELECTION_BORDER_CLASS = 'selection-border-range';
+const MOBILE_CLASS = 'mobile-handler';
 const TMP_SELECTION_BG_CLASS = 'temp-bg-range';
 const CELL_HANDLER_CLASS = 'autofill-handle';
 const EDIT_INPUT_WR = 'edit-input-wrapper';
 const DRAGG_TEXT = 'Draggable item';
 const GRID_INTERNALS = '__rvgr';
 
-export { CELL_HANDLER_CLASS as C, DRAGGABLE_CLASS as D, EDIT_INPUT_WR as E, FOCUS_CLASS as F, GRID_INTERNALS as G, HEADER_CLASS as H, MIN_COL_SIZE as M, RESIZE_INTERVAL as R, SELECTION_BORDER_CLASS as S, TMP_SELECTION_BG_CLASS as T, UUID as U, _arrayMap as _, DRAG_ICON_CLASS as a, DATA_COL as b, DATA_ROW as c, HEADER_SORTABLE_CLASS as d, HEADER_ROW_CLASS as e, HEADER_ACTUAL_ROW_CLASS as f, DRAGG_TEXT as g, ROW_HEADER_TYPE as h, CELL_CLASS as i, DISABLED_CLASS as j };
+export { CELL_HANDLER_CLASS as C, DRAGGABLE_CLASS as D, EDIT_INPUT_WR as E, FOCUS_CLASS as F, GRID_INTERNALS as G, HEADER_CLASS as H, MIN_COL_SIZE as M, RESIZE_INTERVAL as R, SELECTION_BORDER_CLASS as S, TMP_SELECTION_BG_CLASS as T, UUID as U, _arrayMap as _, DRAG_ICON_CLASS as a, DATA_COL as b, DATA_ROW as c, HEADER_SORTABLE_CLASS as d, HEADER_ROW_CLASS as e, HEADER_ACTUAL_ROW_CLASS as f, DRAGG_TEXT as g, MOBILE_CLASS as h, ROW_HEADER_TYPE as i, CELL_CLASS as j, DISABLED_CLASS as k };
 
 //# sourceMappingURL=consts.js.map

package/custom-element/consts.js.map

@@ -1 +1 @@
-{"file":"consts.js","mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE;AACnC,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC;AAChB,MAAM,MAAM,GAAG,KAAK,IAAI,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM;AAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B;AACA,EAAE,OAAO,EAAE,KAAK,GAAG,MAAM,EAAE;AAC3B,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;AACzD,GAAG;AACH,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC;AACD;aACc,GAAG;;MCpBJ,YAAY,GAAG,GAAG;MAClB,eAAe,GAAG,GAAG;MAErB,QAAQ,GAAG,aAAa;MACxB,QAAQ,GAAG,aAAa;MAExB,IAAI,GAAG,YAAY;MAEnB,cAAc,GAAG,WAAW;MAC5B,UAAU,GAAG,SAAS;MACtB,eAAe,GAAG,aAAa;MAC/B,YAAY,GAAG,eAAe;MAC9B,qBAAqB,GAAG,WAAW;MACnC,gBAAgB,GAAG,eAAe;MAClC,uBAAuB,GAAG,eAAe;MAEzC,eAAe,GAAG,iBAAiB;MACnC,eAAe,GAAG,iBAAiB;MAEnC,WAAW,GAAG,eAAe;MAC7B,sBAAsB,GAAG,yBAAyB;MAClD,sBAAsB,GAAG,gBAAgB;MAEzC,kBAAkB,GAAG,kBAAkB;MAEvC,aAAa,GAAG,qBAAqB;MAErC,UAAU,GAAG,iBAAiB;MAC9B,cAAc,GAAG;;;;","names":[],"sources":["./node_modules/lodash/_arrayMap.js","./src/utils/consts.ts"],"sourcesContent":["/**\n * A specialized version of `_.map` for arrays without support for iteratee\n * shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns the new mapped array.\n */\nfunction arrayMap(array, iteratee) {\n  var index = -1,\n      length = array == null ? 0 : array.length,\n      result = Array(length);\n\n  while (++index < length) {\n    result[index] = iteratee(array[index], index, array);\n  }\n  return result;\n}\n\nmodule.exports = arrayMap;\n","export const MIN_COL_SIZE = 30;\nexport const RESIZE_INTERVAL = 40;\n\nexport const DATA_COL = 'data-rgCol';\nexport const DATA_ROW = 'data-rgRow';\n\nexport const UUID = 'grid-uuid';\n\nexport const DISABLED_CLASS = 'disabled';\nexport const CELL_CLASS = 'rgCell';\nexport const ROW_HEADER_TYPE = 'rowHeaders';\nexport const HEADER_CLASS = 'rgHeaderCell';\nexport const HEADER_SORTABLE_CLASS = 'sortable';\nexport const HEADER_ROW_CLASS = 'header-rgRow';\nexport const HEADER_ACTUAL_ROW_CLASS = 'actual-rgRow';\n\nexport const DRAG_ICON_CLASS = 'revo-drag-icon';\nexport const DRAGGABLE_CLASS = 'revo-draggable';\n\nexport const FOCUS_CLASS = 'focused-cell';\nexport const SELECTION_BORDER_CLASS = 'selection-border-range';\nexport const TMP_SELECTION_BG_CLASS = 'temp-bg-range';\n\nexport const CELL_HANDLER_CLASS = 'autofill-handle';\n\nexport const EDIT_INPUT_WR = 'edit-input-wrapper';\n\nexport const DRAGG_TEXT = 'Draggable item';\nexport const GRID_INTERNALS = '__rvgr';\n"],"version":3}
+{"file":"consts.js","mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE;AACnC,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC;AAChB,MAAM,MAAM,GAAG,KAAK,IAAI,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM;AAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC7B;AACA,EAAE,OAAO,EAAE,KAAK,GAAG,MAAM,EAAE;AAC3B,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;AACzD,GAAG;AACH,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC;AACD;aACc,GAAG;;MCpBJ,YAAY,GAAG,GAAG;MAClB,eAAe,GAAG,GAAG;MAErB,QAAQ,GAAG,aAAa;MACxB,QAAQ,GAAG,aAAa;MAExB,IAAI,GAAG,YAAY;MAEnB,cAAc,GAAG,WAAW;MAC5B,UAAU,GAAG,SAAS;MACtB,eAAe,GAAG,aAAa;MAC/B,YAAY,GAAG,eAAe;MAC9B,qBAAqB,GAAG,WAAW;MACnC,gBAAgB,GAAG,eAAe;MAClC,uBAAuB,GAAG,eAAe;MAEzC,eAAe,GAAG,iBAAiB;MACnC,eAAe,GAAG,iBAAiB;MAEnC,WAAW,GAAG,eAAe;MAC7B,sBAAsB,GAAG,yBAAyB;MAClD,YAAY,GAAG,iBAAiB;MAChC,sBAAsB,GAAG,gBAAgB;MAEzC,kBAAkB,GAAG,kBAAkB;MAEvC,aAAa,GAAG,qBAAqB;MAErC,UAAU,GAAG,iBAAiB;MAC9B,cAAc,GAAG;;;;","names":[],"sources":["./node_modules/lodash/_arrayMap.js","./src/utils/consts.ts"],"sourcesContent":["/**\n * A specialized version of `_.map` for arrays without support for iteratee\n * shorthands.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array} Returns the new mapped array.\n */\nfunction arrayMap(array, iteratee) {\n  var index = -1,\n      length = array == null ? 0 : array.length,\n      result = Array(length);\n\n  while (++index < length) {\n    result[index] = iteratee(array[index], index, array);\n  }\n  return result;\n}\n\nmodule.exports = arrayMap;\n","export const MIN_COL_SIZE = 30;\nexport const RESIZE_INTERVAL = 40;\n\nexport const DATA_COL = 'data-rgCol';\nexport const DATA_ROW = 'data-rgRow';\n\nexport const UUID = 'grid-uuid';\n\nexport const DISABLED_CLASS = 'disabled';\nexport const CELL_CLASS = 'rgCell';\nexport const ROW_HEADER_TYPE = 'rowHeaders';\nexport const HEADER_CLASS = 'rgHeaderCell';\nexport const HEADER_SORTABLE_CLASS = 'sortable';\nexport const HEADER_ROW_CLASS = 'header-rgRow';\nexport const HEADER_ACTUAL_ROW_CLASS = 'actual-rgRow';\n\nexport const DRAG_ICON_CLASS = 'revo-drag-icon';\nexport const DRAGGABLE_CLASS = 'revo-draggable';\n\nexport const FOCUS_CLASS = 'focused-cell';\nexport const SELECTION_BORDER_CLASS = 'selection-border-range';\nexport const MOBILE_CLASS = 'mobile-handler';\nexport const TMP_SELECTION_BG_CLASS = 'temp-bg-range';\n\nexport const CELL_HANDLER_CLASS = 'autofill-handle';\n\nexport const EDIT_INPUT_WR = 'edit-input-wrapper';\n\nexport const DRAGG_TEXT = 'Draggable item';\nexport const GRID_INTERNALS = '__rvgr';\n"],"version":3}

package/custom-element/localScrollService.js

@@ -30,7 +30,7 @@ class LocalScrollService {
     this.cancelScroll(e.dimension);
     const frameAnimation = new Promise((resolve, reject) => {
       const animationId = window.requestAnimationFrame(() => {
-        resolve(true);
+        resolve();
       });
       this.preventArtificialScroll[e.dimension] = reject.bind(null, animationId);
     });

package/custom-element/localScrollService.js.map

@@ -1 +1 @@
-{"file":"localScrollService.js","mappings":"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","names":[],"sources":["./src/services/localScrollService.ts"],"sourcesContent":["import { scaleValue } from '../utils';\nimport { RevoGrid } from '../interfaces';\n\ninterface Config {\n  beforeScroll(e: RevoGrid.ViewPortScrollEvent): void;\n  afterScroll(e: RevoGrid.ViewPortScrollEvent): void;\n}\n\ntype Params = {\n  contentSize: number;\n  virtualContentSize?: number;\n  clientSize: number;\n  virtualSize: number;\n  maxSize?: number;\n};\n\nconst initialParams: Params = {\n  contentSize: 0,\n  clientSize: 0,\n  virtualSize: 0,\n  maxSize: 0,\n};\nconst NO_COORDINATE = -1;\nexport default class LocalScrollService {\n  private preventArtificialScroll: Record<RevoGrid.DimensionType, () => void | null> = { rgRow: null, rgCol: null };\n  // to check if scroll changed\n  private previousScroll: Record<RevoGrid.DimensionType, number> = { rgRow: NO_COORDINATE, rgCol: NO_COORDINATE };\n  private params: Record<RevoGrid.DimensionType, Params> = { rgRow: { ...initialParams }, rgCol: { ...initialParams } };\n\n  constructor(private cfg: Config) {}\n\n  static getVirtualContentSize(contentSize: number, clientSize: number, virtualSize: number = 0): number {\n    return contentSize + (virtualSize ? clientSize - virtualSize : 0);\n  }\n\n  setParams(params: Params, dimension: RevoGrid.DimensionType) {\n    const virtualContentSize = LocalScrollService.getVirtualContentSize(params.contentSize, params.clientSize, params.virtualSize);\n    this.params[dimension] = {\n      ...params,\n      maxSize: virtualContentSize - params.clientSize,\n      virtualContentSize,\n    };\n  }\n\n  // apply scroll values after scroll done\n  async setScroll(e: RevoGrid.ViewPortScrollEvent) {\n    this.cancelScroll(e.dimension);\n\n    const frameAnimation = new Promise<boolean>((resolve, reject) => {\n      const animationId = window.requestAnimationFrame(() => {\n        resolve(true);\n      });\n      this.preventArtificialScroll[e.dimension] = reject.bind(null, animationId);\n    });\n    try {\n      await frameAnimation;\n      const params = this.getParams(e.dimension);\n      e.coordinate = Math.ceil(e.coordinate);\n      this.previousScroll[e.dimension] = this.wrapCoordinate(e.coordinate, params);\n      this.preventArtificialScroll[e.dimension] = null;\n      this.cfg.afterScroll({\n        ...e,\n        coordinate: params.virtualSize ? this.convert(e.coordinate, params, false) : e.coordinate,\n      });\n\n    } catch (id) {\n      window.cancelAnimationFrame(id);\n    }\n  }\n\n  // initiate scrolling event\n  scroll(\n    coordinate: number,\n    dimension: RevoGrid.DimensionType,\n    force = false,\n    delta?: number,\n    outside = false\n  ) {\n    this.cancelScroll(dimension);\n    if (!force && this.previousScroll[dimension] === coordinate) {\n      this.previousScroll[dimension] = NO_COORDINATE;\n      return;\n    }\n\n    const param = this.getParams(dimension);\n    this.cfg.beforeScroll({\n      dimension: dimension,\n      coordinate: param.virtualSize ? this.convert(coordinate, param) : coordinate,\n      delta,\n      outside\n    });\n  }\n\n  private getParams(dimension: RevoGrid.DimensionType): Params {\n    return this.params[dimension];\n  }\n\n  // check if scroll outside of region to avoid looping\n  private wrapCoordinate(c: number, param: Params): number {\n    if (c < 0) {\n      return NO_COORDINATE;\n    }\n\n    if (c > param.maxSize) {\n      return param.maxSize;\n    }\n    return c;\n  }\n\n  // prevent already started scroll, performance optimization\n  private cancelScroll(dimension: RevoGrid.DimensionType) {\n    const canceler = this.preventArtificialScroll[dimension];\n    if (canceler) {\n      canceler();\n      this.preventArtificialScroll[dimension] = null;\n    }\n  }\n\n  /* convert virtual to real and back, scale range */\n  private convert(pos: number, param: Params, toReal: boolean = true): number {\n    const minRange: number = param.clientSize;\n    const from: [number, number] = [0, param.virtualContentSize - minRange];\n    const to: [number, number] = [0, param.contentSize - param.virtualSize];\n    if (toReal) {\n      return scaleValue(pos, from, to);\n    }\n    return scaleValue(pos, to, from);\n  }\n}\n"],"version":3}
+{"file":"localScrollService.js","mappings":"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","names":[],"sources":["./src/services/localScrollService.ts"],"sourcesContent":["import { scaleValue } from '../utils';\nimport { RevoGrid } from '../interfaces';\n\ninterface Config {\n  beforeScroll(e: RevoGrid.ViewPortScrollEvent): void;\n  afterScroll(e: RevoGrid.ViewPortScrollEvent): void;\n}\n\ntype Params = {\n  contentSize: number;\n  virtualContentSize?: number;\n  clientSize: number;\n  virtualSize: number;\n  maxSize?: number;\n};\n\nconst initialParams: Params = {\n  contentSize: 0,\n  clientSize: 0,\n  virtualSize: 0,\n  maxSize: 0,\n};\nconst NO_COORDINATE = -1;\nexport default class LocalScrollService {\n  private preventArtificialScroll: Record<RevoGrid.DimensionType, () => void | null> = { rgRow: null, rgCol: null };\n  // to check if scroll changed\n  private previousScroll: Record<RevoGrid.DimensionType, number> = { rgRow: NO_COORDINATE, rgCol: NO_COORDINATE };\n  private params: Record<RevoGrid.DimensionType, Params> = { rgRow: { ...initialParams }, rgCol: { ...initialParams } };\n\n  constructor(private cfg: Config) {}\n\n  static getVirtualContentSize(contentSize: number, clientSize: number, virtualSize: number = 0): number {\n    return contentSize + (virtualSize ? clientSize - virtualSize : 0);\n  }\n\n  setParams(params: Params, dimension: RevoGrid.DimensionType) {\n    const virtualContentSize = LocalScrollService.getVirtualContentSize(params.contentSize, params.clientSize, params.virtualSize);\n    this.params[dimension] = {\n      ...params,\n      maxSize: virtualContentSize - params.clientSize,\n      virtualContentSize,\n    };\n  }\n\n  // apply scroll values after scroll done\n  async setScroll(e: RevoGrid.ViewPortScrollEvent) {\n    this.cancelScroll(e.dimension);\n\n    const frameAnimation = new Promise<void>((resolve, reject) => {\n      const animationId = window.requestAnimationFrame(() => {\n        resolve();\n      });\n      this.preventArtificialScroll[e.dimension] = reject.bind(null, animationId);\n    });\n    try {\n      await frameAnimation;\n      const params = this.getParams(e.dimension);\n      e.coordinate = Math.ceil(e.coordinate);\n      this.previousScroll[e.dimension] = this.wrapCoordinate(e.coordinate, params);\n      this.preventArtificialScroll[e.dimension] = null;\n      this.cfg.afterScroll({\n        ...e,\n        coordinate: params.virtualSize ? this.convert(e.coordinate, params, false) : e.coordinate,\n      });\n\n    } catch (id) {\n      window.cancelAnimationFrame(id);\n    }\n  }\n\n  // initiate scrolling event\n  scroll(\n    coordinate: number,\n    dimension: RevoGrid.DimensionType,\n    force = false,\n    delta?: number,\n    outside = false\n  ) {\n    this.cancelScroll(dimension);\n    if (!force && this.previousScroll[dimension] === coordinate) {\n      this.previousScroll[dimension] = NO_COORDINATE;\n      return;\n    }\n\n    const param = this.getParams(dimension);\n    this.cfg.beforeScroll({\n      dimension: dimension,\n      coordinate: param.virtualSize ? this.convert(coordinate, param) : coordinate,\n      delta,\n      outside\n    });\n  }\n\n  private getParams(dimension: RevoGrid.DimensionType): Params {\n    return this.params[dimension];\n  }\n\n  // check if scroll outside of region to avoid looping\n  private wrapCoordinate(c: number, param: Params): number {\n    if (c < 0) {\n      return NO_COORDINATE;\n    }\n\n    if (c > param.maxSize) {\n      return param.maxSize;\n    }\n    return c;\n  }\n\n  // prevent already started scroll, performance optimization\n  private cancelScroll(dimension: RevoGrid.DimensionType) {\n    const canceler = this.preventArtificialScroll[dimension];\n    if (canceler) {\n      canceler();\n      this.preventArtificialScroll[dimension] = null;\n    }\n  }\n\n  /* convert virtual to real and back, scale range */\n  private convert(pos: number, param: Params, toReal: boolean = true): number {\n    const minRange: number = param.clientSize;\n    const from: [number, number] = [0, param.virtualContentSize - minRange];\n    const to: [number, number] = [0, param.contentSize - param.virtualSize];\n    if (toReal) {\n      return scaleValue(pos, from, to);\n    }\n    return scaleValue(pos, to, from);\n  }\n}\n"],"version":3}

package/custom-element/revo-grid.js

@@ -14,10 +14,10 @@ import { t as timeout, g as getScrollbarWidth } from './index2.js';
 import { F as FILTER_PROP, i as isFilterBtn } from './filter.button.js';
 import { _ as _getTag } from './_stringToPath.js';
 import { i as isString_1, d as defineCustomElement$a } from './revogr-edit2.js';
+import { d as debounce_1 } from './debounce.js';
 import { t as toInteger_1 } from './toInteger.js';
 import { i as isGrouping, g as getGroupingName, G as GROUP_EXPANDED, a as getParsedGroup, b as isSameGroup, c as GROUP_DEPTH, P as PSEUDO_GROUP_ITEM_VALUE, d as PSEUDO_GROUP_ITEM_ID, e as GROUPING_ROW_TYPE, f as PSEUDO_GROUP_COLUMN, h as GROUP_EXPAND_EVENT, j as gatherGrouping, k as isGroupingColumn, E as EMPTY_INDEX, S as SelectionStoreConnector } from './columnService.js';
 import { g as getLastCell, H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT, D as DATA_SLOT, d as defineCustomElement$2 } from './revogr-viewport-scroll2.js';
-import { d as debounce_1 } from './debounce.js';
 import { d as dispatch, a as defineCustomElement$8 } from './revogr-header2.js';
 import { g as getFromEvent, d as defineCustomElement$6 } from './revogr-overlay-selection2.js';
 import { d as defineCustomElement$b } from './revogr-data2.js';
@@ -1595,45 +1595,40 @@ var size_1 = size;
 
 /**
  * lifecycle
- * 1) @event beforesorting - sorting just started, nothing happened yet
+ * 1) @event beforesorting - sorting just started, nothing happened yet, can be from column or from source, if type is from rows - column will be undefined
  * 2) @metod updateColumnSorting - column sorting icon applied to grid and column get updated, data still untiuched
- * 3) @event beforesortingapply - before we applied sorting data to data source, you can prevent data apply from here
- * 4) @event afterSortingApply - sorting applied, just finished event
+ * 3) @event beforesortingapply - before we applied sorting data to data source, you can prevent event and data will not be sorted. It's called only from column sorting click
+ * 4) @event afterSortingApply - sorting applied, just finished event, from rows and columns
  *
  * If you prevent event it'll not reach farther steps
  */
 class SortingPlugin extends BasePlugin {
-  get hasSorting() {
-    return !!this.sorting;
-  }
   constructor(revogrid) {
     super(revogrid);
     this.revogrid = revogrid;
+    // sorting order per column
     this.sorting = null;
+    // sorting function per column, multiple columns sorting supported
     this.sortingFunc = null;
-    const beforesourceset = ({ detail }) => {
-      if (this.hasSorting) {
-        // is sorting allowed
-        const event = this.emit('beforesourcesortingapply');
-        // sorting prevented
-        if (event.defaultPrevented) {
+    this.doSort = debounce_1((order, comparison) => this.sort(order, comparison), 50);
+    const aftersourceset = async ({ detail: { type } }) => {
+      // if sorting was provided - sort data
+      if (!!this.sorting && this.sortingFunc) {
+        const beforeEvent = this.emit('beforesorting', { type });
+        if (beforeEvent.defaultPrevented) {
           return;
         }
-      }
-      const data = this.setData(detail.source, detail.type);
-      if (data) {
-        detail.source = data;
+        this.doSort(this.sorting, this.sortingFunc);
       }
     };
     const aftercolumnsset = async ({ detail: { order } }) => {
       const columns = await this.revogrid.getColumns();
       const sortingFunc = {};
       for (let prop in order) {
-        const column = ColumnDataProvider.getColumnByProp(columns, prop);
-        const cmp = (column === null || column === void 0 ? void 0 : column.cellCompare) || this.defaultCellCompare;
-        sortingFunc[prop] = order[prop] == 'desc' ? this.descCellCompare(cmp) : cmp;
+        const cmp = this.getComparer(ColumnDataProvider.getColumnByProp(columns, prop), order[prop]);
+        sortingFunc[prop] = cmp;
       }
-      this.sort(order, sortingFunc);
+      this.doSort(order, sortingFunc);
     };
     const headerclick = async (e) => {
       var _a, _b;
@@ -1645,10 +1640,24 @@ class SortingPlugin extends BasePlugin {
       }
       this.headerclick(e.detail.column, e.detail.index, (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.originalEvent) === null || _b === void 0 ? void 0 : _b.shiftKey);
     };
-    this.addEventListener('beforesourceset', beforesourceset);
+    this.addEventListener('after-any-source', aftersourceset);
     this.addEventListener('aftercolumnsset', aftercolumnsset);
     this.addEventListener('initialHeaderClick', headerclick);
   }
+  getComparer(column, order) {
+    const cellCmp = (column === null || column === void 0 ? void 0 : column.cellCompare.bind({ order })) || this.defaultCellCompare;
+    if (order == 'asc') {
+      return cellCmp;
+    }
+    if (order == 'desc') {
+      return this.descCellCompare(cellCmp);
+    }
+    return undefined;
+  }
+  /**
+   * Apply sorting to data on header click
+   * If additive - add to existing sorting, multiple columns can be sorted
+   */
   async headerclick(column, index, additive) {
     let order = this.getNextOrder(column.order);
     const beforeEvent = this.emit('beforesorting', { column, order, additive });
@@ -1663,13 +1672,13 @@ class SortingPlugin extends BasePlugin {
       return;
     }
     order = beforeApplyEvent.detail.order;
-    const cellCmp = (column === null || column === void 0 ? void 0 : column.cellCompare) || this.defaultCellCompare;
-    const cmp = order == 'asc' ? cellCmp : order == 'desc' ? this.descCellCompare(cellCmp) : undefined;
+    const cmp = this.getComparer(column, order);
     if (additive && this.sorting) {
       const sorting = {};
       const sortingFunc = {};
-      Object.assign(sorting, this.sorting);
-      Object.assign(sortingFunc, this.sortingFunc);
+      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);
       if (column.prop in sorting && size_1(sorting) > 1 && order === undefined) {
         delete sorting[column.prop];
         delete sortingFunc[column.prop];
@@ -1678,38 +1687,46 @@ class SortingPlugin extends BasePlugin {
         sorting[column.prop] = order;
         sortingFunc[column.prop] = cmp;
       }
-      this.sort(sorting, sortingFunc);
     }
     else {
-      this.sort({ [column.prop]: order }, { [column.prop]: cmp });
-    }
-  }
-  setData(data, type) {
-    // sorting available for rgRow type only
-    if (type === 'rgRow' && this.sortingFunc) {
-      return this.sortItems(data, this.sortingFunc);
+      // reset sorting
+      this.sorting = { [column.prop]: order };
+      this.sortingFunc = { [column.prop]: cmp };
     }
+    this.doSort(this.sorting, this.sortingFunc);
   }
   /**
-   * Sorting apply, available for rgRow type only
+   * 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')
    */
-  async sort(sorting, sortingFunc) {
+  async sort(sorting, sortingFunc, types = ['rgRow', 'rowPinStart', 'rowPinEnd']) {
+    // if no sorting - reset
     if (!size_1(sorting)) {
       this.sorting = null;
       this.sortingFunc = null;
       return;
     }
+    // set sorting
     this.sorting = sorting;
     this.sortingFunc = sortingFunc;
-    const store = await this.revogrid.getSourceStore();
-    const source = store.get('source');
-    const proxyItems = this.sortIndexByItems([...store.get('proxyItems')], source, this.sortingFunc);
-    setStore(store, {
-      proxyItems,
-      source: [...source],
-    });
+    // by default it'll sort by rgRow store
+    // todo: support multiple stores
+    for (let type of types) {
+      const store = await this.revogrid.getSourceStore(type);
+      // row data
+      const source = store.get('source');
+      // row indexes
+      const proxyItems = store.get('proxyItems');
+      const data = this.sortIndexByItems([...proxyItems], source, sortingFunc);
+      setStore(store, {
+        proxyItems: data,
+        source: [...source],
+      });
+    }
     this.emit('afterSortingApply');
   }
   defaultCellCompare(prop, a, b) {
@@ -1724,41 +1741,30 @@ class SortingPlugin extends BasePlugin {
     };
   }
   sortIndexByItems(indexes, source, sortingFunc) {
-    // TODO - is there a situation where multiple kvps in the `sorting` object would cause this to break?
-    for (let prop in sortingFunc) {
-      if (typeof sortingFunc[prop] === 'undefined') {
-        // Unsort indexes
-        return [...Array(indexes.length).keys()];
-      }
+    // if no sorting - return unsorted indexes
+    if (Object.entries(sortingFunc).length === 0) {
+      // Unsort indexes
+      return [...Array(indexes.length).keys()];
     }
+    // 
+    /**
+     * go through all indexes and align in new order
+     * performs a multi-level sorting by applying multiple comparison functions to determine the order of the items based on different properties.
+     */
     return indexes.sort((a, b) => {
-      let sorted = 0;
-      for (let prop in sortingFunc) {
-        const cmp = sortingFunc[prop];
+      for (const [prop, cmp] of Object.entries(sortingFunc)) {
         const itemA = source[a];
         const itemB = source[b];
-        sorted = cmp(prop, itemA, itemB);
-        if (sorted) {
-          break;
-        }
-      }
-      return sorted;
-    });
-  }
-  sortItems(source, sortingFunc) {
-    return source.sort((a, b) => {
-      let sorted = 0;
-      for (let prop in sortingFunc) {
-        const cmp = sortingFunc[prop];
-        if (!cmp) {
-          continue;
-        }
-        sorted = cmp(prop, a, b);
+        /**
+         * If the comparison function returns a non-zero value (sorted), it means that the items should be sorted based on the given property. In such a case, the function immediately returns the sorted value, indicating the order in which the items should be arranged.
+         * If none of the comparison functions result in a non-zero value, indicating that the items are equal or should remain in the same order, the function eventually returns 0.
+         */
+        const sorted = cmp(prop, itemA, itemB);
         if (sorted) {
-          break;
+          return sorted;
         }
       }
-      return sorted;
+      return 0;
     });
   }
   getNextOrder(currentOrder) {
@@ -2593,6 +2599,7 @@ class ViewportService {
   }
   /**
    * Transform data from stores and apply it to different components
+   * Handle columns
    */
   getViewportColumnData(contentHeight) {
     const columns = [];
@@ -2627,7 +2634,12 @@ class ViewportService {
         segmentSelection.setLastCell(rgRow.lastCell);
         // register selection store for Row
         const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
-        const rowDef = Object.assign(Object.assign({}, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => this.sv.selectionStoreConnector.registerSection(e), onSetRange: e => segmentSelection.setRangeArea(e.detail), onSetTempRange: e => segmentSelection.setTempArea(e.detail), onFocusCell: e => {
+        const rowDef = Object.assign(Object.assign({}, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => this.sv.selectionStoreConnector.registerSection(e), onSetRange: e => {
+            segmentSelection.setRangeArea(e.detail);
+          }, onSetTempRange: e => {
+            segmentSelection.setTempArea(e.detail);
+          }, onFocusCell: e => {
+            // todo: multi focus
             segmentSelection.clearFocus();
             this.sv.selectionStoreConnector.focus(segmentSelection, e.detail);
           } });
@@ -2673,6 +2685,7 @@ class ViewportService {
       dimensionCol: data.dimensions[data.colType].store,
       groups: data.colStore.get('groups'),
       groupingDepth: data.colStore.get('groupingDepth'),
+      resizeHandler: data.colType === 'colPinEnd' ? ['l'] : undefined,
       onHeaderresize: data.onHeaderresize,
     };
     return {
@@ -2724,7 +2737,7 @@ class ViewportService {
   scrollToCell(cell) {
     for (let key in cell) {
       const coordinate = cell[key];
-      this.sv.scrollingService.onScroll({ dimension: key === 'x' ? 'rgCol' : 'rgRow', coordinate });
+      this.sv.scrollingService.scrollService({ dimension: key === 'x' ? 'rgCol' : 'rgRow', coordinate });
     }
   }
   /**
@@ -2736,14 +2749,19 @@ class ViewportService {
   clearEdit() {
     this.sv.selectionStoreConnector.setEdit(false);
   }
+  /**
+   * Collect focused element data
+   */
   getFocused() {
     const focused = this.sv.selectionStoreConnector.focusedStore;
     if (!focused) {
       return null;
     }
+    // get column data
     const colType = this.sv.selectionStoreConnector.storesXToType[focused.position.x];
     const column = this.sv.columnProvider.getColumn(focused.cell.x, colType);
-    const rowType = this.sv.selectionStoreConnector.storesYToType[focused.position.x];
+    // get row data
+    const rowType = this.sv.selectionStoreConnector.storesYToType[focused.position.y];
     const model = this.sv.dataProvider.getModel(focused.cell.y, rowType);
     return {
       column,
@@ -2774,27 +2792,34 @@ class ViewportService {
   }
 }
 
+function isMobileDevice() {
+  return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
+}
+
 /**
  * All render based on sections
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, applyEditorChangesOnClose, additionalData, onCancelEdit, registerElement, onEdit, onScroll, focusTemplate, onSelectAll, }) => {
+const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, applyEditorChangesOnClose, additionalData, onCancelEdit, registerElement, onEdit, scrollSection, focusTemplate, onSelectAll, scrollSectionSilent, }) => {
+  const isMobile = isMobileDevice();
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
     /** render viewports rows */
     const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: resize, columnFilter });
-    const dataViews = [h("revogr-header", Object.assign({}, headerProperties, { slot: HEADER_SLOT }))];
+    const dataViews = [
+      h("revogr-header", Object.assign({}, headerProperties, { slot: HEADER_SLOT })),
+    ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
-      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, onSelectall: () => onSelectAll(), editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), applyChangesOnClose: applyEditorChangesOnClose, onSetEdit: ({ detail }) => onEdit(detail) }),
+      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { isMobileDevice: isMobile, selectionStore: data.segmentSelectionStore, onSelectall: () => onSelectAll(), editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), applyChangesOnClose: applyEditorChangesOnClose, onSetEdit: ({ detail }) => onEdit(detail), additionalData: additionalData, slot: data.slot }),
         h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: additionalData, slot: DATA_SLOT })),
         h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
         h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
       dataViews.push(dataView);
     });
-    viewPortHtml.push(h("revogr-viewport-scroll", Object.assign({}, view.prop, { ref: el => registerElement(el, view.prop.key), onScrollViewport: e => onScroll(e.detail, view.prop.key) }), dataViews));
+    viewPortHtml.push(h("revogr-viewport-scroll", Object.assign({}, view.prop, { ref: el => registerElement(el, view.prop.key), onScrollViewport: e => scrollSection(e.detail, view.prop.key), onSilentScroll: e => scrollSectionSilent(e.detail, view.prop.key) }), dataViews));
   }
   return viewPortHtml;
 };
@@ -2804,32 +2829,57 @@ class GridScrollingService {
     this.setViewport = setViewport;
     this.elements = {};
   }
-  async onScroll(e, key) {
+  async scrollService(e, key) {
     let newEvent;
+    let event = e;
+    // skip negative scroll
+    if (e.coordinate < 0) {
+      return;
+    }
     for (let elKey in this.elements) {
       if (e.dimension === 'rgCol' && elKey === 'headerRow') {
         continue;
+        // pinned column only
       }
       else if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
         if (elKey === key || !e.delta) {
           continue;
         }
         for (let el of this.elements[elKey]) {
-          el.changeScroll && (newEvent = el.changeScroll(e));
+          if (el.changeScroll) {
+            newEvent = el.changeScroll(e);
+          }
         }
       }
       else {
         for (let el of this.elements[elKey]) {
-          el.setScroll(e);
+          await el.setScroll(e);
         }
       }
     }
-    let event = e;
     if (newEvent) {
       event = await newEvent;
     }
     this.setViewport(event);
   }
+  /**
+   * Silent scroll update for mobile devices when we have negative scroll top
+   */
+  async scrollSilentService(e, key) {
+    var _a;
+    for (let elKey in this.elements) {
+      // skip same element update
+      if (elKey === key) {
+        continue;
+      }
+      if (columnTypes.includes(key) && (elKey === 'headerRow' || columnTypes.includes(elKey))) {
+        for (let el of this.elements[elKey]) {
+          await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
+        }
+        continue;
+      }
+    }
+  }
   isPinnedColumn(key) {
     return ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
   }
@@ -3215,6 +3265,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
     this.beforesourceset = createEvent(this, "beforesourceset", 7);
     this.beforeAnySource = createEvent(this, "before-any-source", 7);
     this.aftersourceset = createEvent(this, "aftersourceset", 7);
+    this.afterAnySource = createEvent(this, "after-any-source", 7);
     this.beforecolumnsset = createEvent(this, "beforecolumnsset", 7);
     this.beforecolumnapplied = createEvent(this, "beforecolumnapplied", 7);
     this.aftercolumnsset = createEvent(this, "aftercolumnsset", 7);
@@ -3414,7 +3465,8 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
    * Clear current grid focus
    */
   async clearFocus() {
-    const focused = await this.getFocused();
+    var _a;
+    const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
     const event = this.beforefocuslost.emit(focused);
     if (event.defaultPrevented) {
       return;
@@ -3450,14 +3502,24 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
     return (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange();
   }
   mousedownHandle(event) {
-    this.clickTrackForFocusClear = getFromEvent(event, 'screenX') + getFromEvent(event, 'screenY');
+    const screenX = getFromEvent(event, 'screenX');
+    const screenY = getFromEvent(event, 'screenY');
+    if (screenX === null || screenY === null) {
+      return;
+    }
+    this.clickTrackForFocusClear = screenX + screenY;
   }
   mouseupHandle(event) {
+    const screenX = getFromEvent(event, 'screenX');
+    const screenY = getFromEvent(event, 'screenY');
+    if (screenX === null || screenY === null) {
+      return;
+    }
     if (event.defaultPrevented) {
       return;
     }
     const target = event.target;
-    const pos = getFromEvent(event, 'screenX') + getFromEvent(event, 'screenY');
+    const pos = screenX + screenY;
     // detect if mousemove then do nothing
     if (Math.abs(this.clickTrackForFocusClear - pos) > 10) {
       return;
@@ -3549,6 +3611,12 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
       e.preventDefault();
     }
   }
+  /**
+   * Column format change will trigger column structure update
+   */
+  columnTypesChanged() {
+    this.columnChanged(this.columns);
+  }
   columnChanged(newVal = []) {
     // clear existing data
     this.dimensionProvider.dropColumns();
@@ -3596,7 +3664,12 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         newVal = beforesourceset.detail.source;
         break;
     }
-    this.dataSourceApply(newVal, type);
+    const beforesourceset = this.beforeAnySource.emit({
+      type,
+      source: newVal,
+    });
+    const newSource = [...beforesourceset.detail.source];
+    this.dataProvider.setData(newSource, type);
     /** applied for source only for cross compatability between plugins */
     if (watchName === 'source') {
       this.aftersourceset.emit({
@@ -3604,6 +3677,10 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         source: newVal,
       });
     }
+    this.afterAnySource.emit({
+      type,
+      source: newVal,
+    });
   }
   rowDefChanged(after, before) {
     const { detail: { vals: newVal, oldVals: oldVal } } = this.beforerowdefinition.emit({
@@ -3676,14 +3753,6 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
   rowHeadersChange(rowHeaders) {
     this.rowheaderschanged.emit(rowHeaders);
   }
-  dataSourceApply(source = [], type = 'rgRow') {
-    const beforesourceset = this.beforeAnySource.emit({
-      type,
-      source,
-    });
-    const newSource = [...beforesourceset.detail.source];
-    return this.dataProvider.setData(newSource, type);
-  }
   connectedCallback() {
     this.viewportProvider = new ViewportProvider();
     this.themeService = new ThemeService({
@@ -3768,7 +3837,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
     const views = [];
     if (this.rowHeaders && this.viewport.columns.length) {
       const anyView = this.viewport.columns[0];
-      views.push(h("revogr-row-headers", { additionalData: this.additionalData, height: contentHeight, rowClass: this.rowClass, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.onScroll(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
+      views.push(h("revogr-row-headers", { additionalData: this.additionalData, height: contentHeight, rowClass: this.rowClass, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.scrollService(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
     }
     views.push(h(ViewPortSections, { additionalData: this.additionalData, columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, applyEditorChangesOnClose: this.applyOnClose, useClipboard: this.useClipboard, columns: this.viewport.columns, onSelectAll: () => {
         this.selectionStoreConnector.selectAll();
@@ -3779,11 +3848,12 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         }
       }, onCancelEdit: () => {
         this.selectionStoreConnector.setEdit(false);
-      }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: (details, k) => this.scrollingService.onScroll(details, k), focusTemplate: this.focusTemplate }));
-    return (h(Host, Object.assign({}, { [`${UUID}`]: this.uuid }), h(RevoViewPort, { viewports: this.viewportProvider.stores, dimensions: this.dimensionProvider.stores, orderRef: e => (this.orderService = e), registerElement: (e, k) => this.scrollingService.registerElement(e, k), nakedClick: () => this.viewport.clearEdit(), onScroll: details => this.scrollingService.onScroll(details) }, views), this.extraElements));
+      }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), scrollSection: (details, k) => this.scrollingService.scrollService(details, k), scrollSectionSilent: (details, k) => this.scrollingService.scrollSilentService(details, k), focusTemplate: this.focusTemplate }));
+    return (h(Host, Object.assign({}, { [`${UUID}`]: this.uuid }), h(RevoViewPort, { viewports: this.viewportProvider.stores, dimensions: this.dimensionProvider.stores, orderRef: e => (this.orderService = e), registerElement: (e, k) => this.scrollingService.registerElement(e, k), nakedClick: () => this.viewport.clearEdit(), onScroll: details => this.scrollingService.scrollService(details) }, views), this.extraElements));
   }
   get element() { return this; }
   static get watchers() { return {
+    "columnTypes": ["columnTypesChanged"],
     "columns": ["columnChanged"],
     "rowSize": ["rowSizeChanged"],
     "theme": ["themeChanged"],