@revolist/revogrid 4.2.0-next.1 → 4.2.0-next.2

package/custom-element/revo-grid.js

@@ -2645,7 +2645,7 @@ class ViewportService {
  * 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, registerElement, onEdit, onScroll }) => {
+const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, applyEditorChangesOnClose, registerElement, onEdit, onScroll, focusTemplate }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -2657,7 +2657,7 @@ const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns,
       const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, applyChangesOnClose: applyEditorChangesOnClose, onSetEdit: ({ detail }) => onEdit(detail) }),
         h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
-        h("revogr-focus", { rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
+        h("revogr-focus", { 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));
@@ -3076,6 +3076,7 @@ let RevoGridComponent = class extends HTMLElement {
     this.beforerowdefinition = createEvent(this, "beforerowdefinition", 7);
     this.filterconfigchanged = createEvent(this, "filterconfigchanged", 7);
     this.mergechanged = createEvent(this, "mergechanged", 7);
+    this.rowheaderschanged = createEvent(this, "rowheaderschanged", 7);
     /**
      * Defines how many rows/columns should be rendered outside visible area.
      */
@@ -3575,6 +3576,9 @@ let RevoGridComponent = class extends HTMLElement {
   mergeChange(mergeVal) {
     this.mergechanged.emit(mergeVal);
   }
+  rowHeadersChange(rowHeaders) {
+    this.rowheaderschanged.emit(rowHeaders);
+  }
   dataSourceApply(source = [], type = 'rgRow') {
     const beforesourceset = this.beforeAnySource.emit({
       type,
@@ -3683,7 +3687,7 @@ let RevoGridComponent = class extends HTMLElement {
         if (!event.defaultPrevented) {
           this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
         }
-      }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: (details, k) => this.scrollingService.onScroll(details, k) }));
+      }, 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));
   }
   get element() { return this; }
@@ -3698,7 +3702,8 @@ let RevoGridComponent = class extends HTMLElement {
     "grouping": ["groupingChanged"],
     "stretch": ["applyStretch"],
     "filter": ["applyFilter"],
-    "merged": ["mergeChange"]
+    "merged": ["mergeChange"],
+    "rowHeaders": ["rowHeadersChange"]
   }; }
   static get style() { return revoGridStyleCss; }
 };
@@ -3725,6 +3730,7 @@ RevoGridComponent = /*@__PURE__*/ proxyCustomElement(RevoGridComponent, [0, "rev
     "rowClass": [513, "row-class"],
     "autoSizeColumn": [4, "auto-size-column"],
     "filter": [4],
+    "focusTemplate": [16],
     "canMoveColumns": [4, "can-move-columns"],
     "trimmedRows": [16],
     "exporting": [4],

package/custom-element/revogr-focus2.js

@@ -20,6 +20,10 @@ let RevogrFocus = class extends HTMLElement {
     this.el && this.changed(this.el);
   }
   render() {
+    const editCell = this.selectionStore.get('edit');
+    if (editCell) {
+      return;
+    }
     const data = this.selectionStore.get('focus');
     if (data) {
       const event = this.beforeFocusRender.emit({
@@ -32,7 +36,8 @@ let RevogrFocus = class extends HTMLElement {
       }
       const { detail } = event;
       const style = getElStyle(detail.range, this.dimensionRow.state, this.dimensionCol.state);
-      return h(Host, { class: FOCUS_CLASS, style: style });
+      const extra = this.focusTemplate && this.focusTemplate(h, detail);
+      return h(Host, { class: FOCUS_CLASS, style: style }, extra);
     }
   }
   get el() { return this; }
@@ -43,7 +48,8 @@ RevogrFocus = /*@__PURE__*/ proxyCustomElement(RevogrFocus, [0, "revogr-focus",
     "dimensionRow": [16],
     "dimensionCol": [16],
     "colType": [1, "col-type"],
-    "rowType": [1, "row-type"]
+    "rowType": [1, "row-type"],
+    "focusTemplate": [16]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/custom-element/revogr-overlay-selection2.js

@@ -560,13 +560,13 @@ let OverlaySelection = class extends HTMLElement {
     // if can edit
     const editCell = this.selectionStore.get('edit');
     if (this.readonly || !editCell) {
-      return;
+      return null;
     }
     const val = editCell.val || this.columnService.getCellData(editCell.y, editCell.x);
     const editable = Object.assign(Object.assign({}, editCell), this.columnService.getSaveData(editCell.y, editCell.x, val));
     const renderEvent = this.beforeEditRender.emit(Object.assign({ range: Object.assign(Object.assign({}, editCell), { x1: editCell.x, y1: editCell.y }) }, this.types));
     if (renderEvent.defaultPrevented) {
-      return;
+      return null;
     }
     const { detail: { range } } = renderEvent;
     const style = getElStyle(range, this.dimensionRow.state, this.dimensionCol.state);
@@ -584,24 +584,26 @@ let OverlaySelection = class extends HTMLElement {
       }, editCell: editable, saveOnClose: this.applyChangesOnClose, column: this.columnService.columns[editCell.x], editor: this.columnService.getCellEditor(editCell.y, editCell.x, this.editors), style: style }));
   }
   render() {
-    const range = this.selectionStoreService.ranged;
-    const selectionFocus = this.selectionStoreService.focused;
     const els = [];
     const editCell = this.renderEditCell();
-    if ((range || selectionFocus) && !editCell && this.useClipboard) {
-      els.push(this.clipboardService.renderClipboard());
-    }
-    if (range) {
-      els.push(...this.renderRange(range));
-    }
     if (editCell) {
       els.push(editCell);
     }
-    if (selectionFocus && !this.readonly && !editCell && this.range) {
-      els.push(this.autoFillService.renderAutofill(range, selectionFocus));
-    }
-    if (this.canDrag) {
-      els.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onInternalRowDragStart: e => this.onRowDragStart(e) }));
+    else {
+      const range = this.selectionStoreService.ranged;
+      const selectionFocus = this.selectionStoreService.focused;
+      if ((range || selectionFocus) && this.useClipboard) {
+        els.push(this.clipboardService.renderClipboard());
+      }
+      if (range) {
+        els.push(...this.renderRange(range));
+      }
+      if (selectionFocus && !this.readonly && this.range) {
+        els.push(this.autoFillService.renderAutofill(range, selectionFocus));
+      }
+      if (this.canDrag) {
+        els.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onInternalRowDragStart: e => this.onRowDragStart(e) }));
+      }
     }
     return (h(Host, { onDblClick: () => this.doEdit(), onMouseDown: (e) => this.onElementMouseDown(e) }, els, h("slot", { name: "data" })));
   }

package/custom-element/revogr-row-headers2.js

@@ -280,11 +280,13 @@ class ViewportStore {
       }
       // change size
       const size = sizes[item.itemIndex];
+      // size found
       if (size) {
         const changedSize = size - item.size;
         changedCoordinate += changedSize;
         item.size = size;
         item.end = item.start + size;
+        // size lost
       }
       // loop by start index
       start++;

package/dist/cjs/loader.cjs.js

@@ -28,7 +28,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["revogr-clipboard.cjs",[[0,"revogr-clipboard",{"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]]],["revogr-filter-panel.cjs",[[0,"revogr-filter-panel",{"uuid":[1537],"filterItems":[16],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revo-grid_11.cjs",[[0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"applyEditorChangesOnClose":[4,"apply-editor-changes-on-close"],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"merged":[16],"extraElements":[32],"refresh":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"setCellsFocus":[64],"registerVNode":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getContentSize":[64],"getSelectedRange":[64]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"beforeFocusCell","onCellFocus"]]],[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"rowClass":[1,"row-class"],"resize":[4],"rowHeaderColumn":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16],"applyChangesOnClose":[4,"apply-changes-on-close"]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]],[0,"revogr-focus",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"colType":[1,"col-type"],"rowType":[1,"row-type"]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[1]}],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16],"saveOnClose":[4,"save-on-close"],"cancel":[64]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"dragStart":[64],"endOrder":[64],"clearOrder":[64]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]],[4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"setScroll":[64],"changeScroll":[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]]]]], options);
+  return index.bootstrapLazy([["revogr-clipboard.cjs",[[0,"revogr-clipboard",{"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]]],["revogr-filter-panel.cjs",[[0,"revogr-filter-panel",{"uuid":[1537],"filterItems":[16],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revo-grid_11.cjs",[[0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"applyEditorChangesOnClose":[4,"apply-editor-changes-on-close"],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"focusTemplate":[16],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"merged":[16],"extraElements":[32],"refresh":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"setCellsFocus":[64],"registerVNode":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getContentSize":[64],"getSelectedRange":[64]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"beforeFocusCell","onCellFocus"]]],[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"rowClass":[1,"row-class"],"resize":[4],"rowHeaderColumn":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16],"applyChangesOnClose":[4,"apply-changes-on-close"]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]],[0,"revogr-focus",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"colType":[1,"col-type"],"rowType":[1,"row-type"],"focusTemplate":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[1]}],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16],"saveOnClose":[4,"save-on-close"],"cancel":[64]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"dragStart":[64],"endOrder":[64],"clearOrder":[64]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]],[4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"setScroll":[64],"changeScroll":[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]]]]], options);
   });
 };
 

package/dist/cjs/revo-grid.cjs.js

@@ -72,5 +72,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["revogr-clipboard.cjs",[[0,"revogr-clipboard",{"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]]],["revogr-filter-panel.cjs",[[0,"revogr-filter-panel",{"uuid":[1537],"filterItems":[16],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revo-grid_11.cjs",[[0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"applyEditorChangesOnClose":[4,"apply-editor-changes-on-close"],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"merged":[16],"extraElements":[32],"refresh":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"setCellsFocus":[64],"registerVNode":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getContentSize":[64],"getSelectedRange":[64]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"beforeFocusCell","onCellFocus"]]],[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"rowClass":[1,"row-class"],"resize":[4],"rowHeaderColumn":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16],"applyChangesOnClose":[4,"apply-changes-on-close"]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]],[0,"revogr-focus",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"colType":[1,"col-type"],"rowType":[1,"row-type"]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[1]}],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16],"saveOnClose":[4,"save-on-close"],"cancel":[64]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"dragStart":[64],"endOrder":[64],"clearOrder":[64]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]],[4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"setScroll":[64],"changeScroll":[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]]]]], options);
+  return index.bootstrapLazy([["revogr-clipboard.cjs",[[0,"revogr-clipboard",{"doCopy":[64]},[[4,"paste","onPaste"],[4,"copy","copyStarted"]]]]],["revogr-filter-panel.cjs",[[0,"revogr-filter-panel",{"uuid":[1537],"filterItems":[16],"filterTypes":[16],"filterNames":[16],"filterEntities":[16],"filterCaptions":[16],"disableDynamicFiltering":[4,"disable-dynamic-filtering"],"isFilterIdSet":[32],"filterId":[32],"currentFilterId":[32],"currentFilterType":[32],"changes":[32],"show":[64],"getChanges":[64]},[[5,"mousedown","onMouseDown"]]]]],["revo-grid_11.cjs",[[0,"revo-grid",{"rowHeaders":[4,"row-headers"],"frameSize":[2,"frame-size"],"rowSize":[2,"row-size"],"colSize":[2,"col-size"],"range":[4],"readonly":[4],"resize":[4],"canFocus":[4,"can-focus"],"useClipboard":[4,"use-clipboard"],"columns":[16],"source":[16],"pinnedTopSource":[16],"pinnedBottomSource":[16],"rowDefinitions":[16],"editors":[16],"applyEditorChangesOnClose":[4,"apply-editor-changes-on-close"],"plugins":[16],"columnTypes":[16],"theme":[1537],"rowClass":[513,"row-class"],"autoSizeColumn":[4,"auto-size-column"],"filter":[4],"focusTemplate":[16],"canMoveColumns":[4,"can-move-columns"],"trimmedRows":[16],"exporting":[4],"grouping":[16],"stretch":[8],"merged":[16],"extraElements":[32],"refresh":[64],"scrollToRow":[64],"scrollToColumnIndex":[64],"scrollToColumnProp":[64],"updateColumns":[64],"addTrimmed":[64],"scrollToCoordinate":[64],"setCellEdit":[64],"setCellsFocus":[64],"registerVNode":[64],"getSource":[64],"getVisibleSource":[64],"getSourceStore":[64],"getColumnStore":[64],"updateColumnSorting":[64],"clearSorting":[64],"getColumns":[64],"clearFocus":[64],"getPlugins":[64],"getFocused":[64],"getContentSize":[64],"getSelectedRange":[64]},[[0,"internalRowDragStart","onRowDragStarted"],[0,"internalRowDragEnd","onRowDragEnd"],[0,"internalRowDrag","onRowDrag"],[0,"internalRowMouseMove","onRowMouseMove"],[0,"internalCellEdit","onBeforeEdit"],[0,"internalRangeDataApply","onBeforeRangeEdit"],[0,"internalSelectionChanged","onRangeChanged"],[0,"initialRowDropped","onRowDropped"],[0,"initialHeaderClick","onHeaderClick"],[0,"beforeFocusCell","onCellFocus"]]],[0,"revogr-row-headers",{"height":[2],"dataPorts":[16],"headerProp":[16],"uiid":[1],"rowClass":[1,"row-class"],"resize":[4],"rowHeaderColumn":[16]}],[4,"revogr-overlay-selection",{"readonly":[4],"range":[4],"canDrag":[4,"can-drag"],"useClipboard":[4,"use-clipboard"],"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"colData":[16],"lastCell":[16],"editors":[16],"applyChangesOnClose":[4,"apply-changes-on-close"]},[[5,"mousemove","onMouseMove"],[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"],[0,"dragStartCell","onCellDrag"],[4,"keyup","onKeyUp"],[4,"keydown","onKeyDown"]]],[0,"revogr-focus",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16],"colType":[1,"col-type"],"rowType":[1,"row-type"],"focusTemplate":[16]}],[0,"revogr-scroll-virtual",{"dimension":[1],"viewportStore":[16],"dimensionStore":[16],"setScroll":[64],"changeScroll":[64]}],[0,"revogr-temp-range",{"selectionStore":[16],"dimensionRow":[16],"dimensionCol":[16]}],[0,"revogr-data",{"readonly":[4],"range":[4],"rowClass":[1,"row-class"],"rowSelectionStore":[16],"viewportRow":[16],"viewportCol":[16],"dimensionRow":[16],"colData":[16],"dataStore":[16],"type":[1]}],[0,"revogr-edit",{"editCell":[16],"column":[16],"editor":[16],"saveOnClose":[4,"save-on-close"],"cancel":[64]}],[0,"revogr-header",{"viewportCol":[16],"dimensionCol":[16],"selectionStore":[16],"parent":[1],"groups":[16],"groupingDepth":[2,"grouping-depth"],"canResize":[4,"can-resize"],"colData":[16],"columnFilter":[4,"column-filter"],"type":[1]}],[0,"revogr-order-editor",{"parent":[16],"dimensionRow":[16],"dimensionCol":[16],"dataStore":[16],"dragStart":[64],"endOrder":[64],"clearOrder":[64]},[[5,"mouseleave","onMouseOut"],[5,"mouseup","onMouseUp"]]],[4,"revogr-viewport-scroll",{"contentWidth":[2,"content-width"],"contentHeight":[2,"content-height"],"setScroll":[64],"changeScroll":[64]},[[0,"mousewheel-vertical","mousewheelVertical"],[0,"mousewheel-horizontal","mousewheelHorizontal"],[0,"scroll-coordinate","scrollApply"]]]]]], options);
 });

package/dist/cjs/revo-grid_11.cjs.entry.js

@@ -22007,11 +22007,13 @@ class ViewportStore {
       }
       // change size
       const size = sizes[item.itemIndex];
+      // size found
       if (size) {
         const changedSize = size - item.size;
         changedCoordinate += changedSize;
         item.size = size;
         item.end = item.start + size;
+        // size lost
       }
       // loop by start index
       start++;
@@ -24641,7 +24643,7 @@ class ViewportService {
  * 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, registerElement, onEdit, onScroll }) => {
+const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, applyEditorChangesOnClose, registerElement, onEdit, onScroll, focusTemplate }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -24653,7 +24655,7 @@ const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns,
       const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, applyChangesOnClose: applyEditorChangesOnClose, onSetEdit: ({ detail }) => onEdit(detail) }),
         index.h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         index.h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
-        index.h("revogr-focus", { rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
+        index.h("revogr-focus", { focusTemplate: focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
       dataViews.push(dataView);
     });
     viewPortHtml.push(index.h("revogr-viewport-scroll", Object.assign({}, view.prop, { ref: el => registerElement(el, view.prop.key), onScrollViewport: e => onScroll(e.detail, view.prop.key) }), dataViews));
@@ -25089,6 +25091,7 @@ let RevoGridComponent = class {
     this.beforerowdefinition = index.createEvent(this, "beforerowdefinition", 7);
     this.filterconfigchanged = index.createEvent(this, "filterconfigchanged", 7);
     this.mergechanged = index.createEvent(this, "mergechanged", 7);
+    this.rowheaderschanged = index.createEvent(this, "rowheaderschanged", 7);
     /**
      * Defines how many rows/columns should be rendered outside visible area.
      */
@@ -25588,6 +25591,9 @@ let RevoGridComponent = class {
   mergeChange(mergeVal) {
     this.mergechanged.emit(mergeVal);
   }
+  rowHeadersChange(rowHeaders) {
+    this.rowheaderschanged.emit(rowHeaders);
+  }
   dataSourceApply(source = [], type = 'rgRow') {
     const beforesourceset = this.beforeAnySource.emit({
       type,
@@ -25696,7 +25702,7 @@ let RevoGridComponent = class {
         if (!event.defaultPrevented) {
           this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
         }
-      }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: (details, k) => this.scrollingService.onScroll(details, k) }));
+      }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: (details, k) => this.scrollingService.onScroll(details, k), focusTemplate: this.focusTemplate }));
     return (index.h(index.Host, Object.assign({}, { [`${UUID}`]: this.uuid }), index.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));
   }
   get element() { return index.getElement(this); }
@@ -25711,7 +25717,8 @@ let RevoGridComponent = class {
     "grouping": ["groupingChanged"],
     "stretch": ["applyStretch"],
     "filter": ["applyFilter"],
-    "merged": ["mergeChange"]
+    "merged": ["mergeChange"],
+    "rowHeaders": ["rowHeadersChange"]
   }; }
 };
 RevoGridComponent.style = revoGridStyleCss;
@@ -26666,6 +26673,10 @@ let RevogrFocus$1 = class {
     this.el && this.changed(this.el);
   }
   render() {
+    const editCell = this.selectionStore.get('edit');
+    if (editCell) {
+      return;
+    }
     const data = this.selectionStore.get('focus');
     if (data) {
       const event = this.beforeFocusRender.emit({
@@ -26678,7 +26689,8 @@ let RevogrFocus$1 = class {
       }
       const { detail } = event;
       const style = getElStyle(detail.range, this.dimensionRow.state, this.dimensionCol.state);
-      return index.h(index.Host, { class: FOCUS_CLASS, style: style });
+      const extra = this.focusTemplate && this.focusTemplate(index.h, detail);
+      return index.h(index.Host, { class: FOCUS_CLASS, style: style }, extra);
     }
   }
   get el() { return index.getElement(this); }
@@ -27944,13 +27956,13 @@ let OverlaySelection = class {
     // if can edit
     const editCell = this.selectionStore.get('edit');
     if (this.readonly || !editCell) {
-      return;
+      return null;
     }
     const val = editCell.val || this.columnService.getCellData(editCell.y, editCell.x);
     const editable = Object.assign(Object.assign({}, editCell), this.columnService.getSaveData(editCell.y, editCell.x, val));
     const renderEvent = this.beforeEditRender.emit(Object.assign({ range: Object.assign(Object.assign({}, editCell), { x1: editCell.x, y1: editCell.y }) }, this.types));
     if (renderEvent.defaultPrevented) {
-      return;
+      return null;
     }
     const { detail: { range } } = renderEvent;
     const style = getElStyle(range, this.dimensionRow.state, this.dimensionCol.state);
@@ -27968,24 +27980,26 @@ let OverlaySelection = class {
       }, editCell: editable, saveOnClose: this.applyChangesOnClose, column: this.columnService.columns[editCell.x], editor: this.columnService.getCellEditor(editCell.y, editCell.x, this.editors), style: style }));
   }
   render() {
-    const range = this.selectionStoreService.ranged;
-    const selectionFocus = this.selectionStoreService.focused;
     const els = [];
     const editCell = this.renderEditCell();
-    if ((range || selectionFocus) && !editCell && this.useClipboard) {
-      els.push(this.clipboardService.renderClipboard());
-    }
-    if (range) {
-      els.push(...this.renderRange(range));
-    }
     if (editCell) {
       els.push(editCell);
     }
-    if (selectionFocus && !this.readonly && !editCell && this.range) {
-      els.push(this.autoFillService.renderAutofill(range, selectionFocus));
-    }
-    if (this.canDrag) {
-      els.push(index.h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onInternalRowDragStart: e => this.onRowDragStart(e) }));
+    else {
+      const range = this.selectionStoreService.ranged;
+      const selectionFocus = this.selectionStoreService.focused;
+      if ((range || selectionFocus) && this.useClipboard) {
+        els.push(this.clipboardService.renderClipboard());
+      }
+      if (range) {
+        els.push(...this.renderRange(range));
+      }
+      if (selectionFocus && !this.readonly && this.range) {
+        els.push(this.autoFillService.renderAutofill(range, selectionFocus));
+      }
+      if (this.canDrag) {
+        els.push(index.h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onInternalRowDragStart: e => this.onRowDragStart(e) }));
+      }
     }
     return (index.h(index.Host, { onDblClick: () => this.doEdit(), onMouseDown: (e) => this.onElementMouseDown(e) }, els, index.h("slot", { name: "data" })));
   }

package/dist/collection/components/overlay/revogr-overlay-selection.js

@@ -145,13 +145,13 @@ export class OverlaySelection {
     // if can edit
     const editCell = this.selectionStore.get('edit');
     if (this.readonly || !editCell) {
-      return;
+      return null;
     }
     const val = editCell.val || this.columnService.getCellData(editCell.y, editCell.x);
     const editable = Object.assign(Object.assign({}, editCell), this.columnService.getSaveData(editCell.y, editCell.x, val));
     const renderEvent = this.beforeEditRender.emit(Object.assign({ range: Object.assign(Object.assign({}, editCell), { x1: editCell.x, y1: editCell.y }) }, this.types));
     if (renderEvent.defaultPrevented) {
-      return;
+      return null;
     }
     const { detail: { range } } = renderEvent;
     const style = getElStyle(range, this.dimensionRow.state, this.dimensionCol.state);
@@ -169,24 +169,26 @@ export class OverlaySelection {
       }, editCell: editable, saveOnClose: this.applyChangesOnClose, column: this.columnService.columns[editCell.x], editor: this.columnService.getCellEditor(editCell.y, editCell.x, this.editors), style: style }));
   }
   render() {
-    const range = this.selectionStoreService.ranged;
-    const selectionFocus = this.selectionStoreService.focused;
     const els = [];
     const editCell = this.renderEditCell();
-    if ((range || selectionFocus) && !editCell && this.useClipboard) {
-      els.push(this.clipboardService.renderClipboard());
-    }
-    if (range) {
-      els.push(...this.renderRange(range));
-    }
     if (editCell) {
       els.push(editCell);
     }
-    if (selectionFocus && !this.readonly && !editCell && this.range) {
-      els.push(this.autoFillService.renderAutofill(range, selectionFocus));
-    }
-    if (this.canDrag) {
-      els.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onInternalRowDragStart: e => this.onRowDragStart(e) }));
+    else {
+      const range = this.selectionStoreService.ranged;
+      const selectionFocus = this.selectionStoreService.focused;
+      if ((range || selectionFocus) && this.useClipboard) {
+        els.push(this.clipboardService.renderClipboard());
+      }
+      if (range) {
+        els.push(...this.renderRange(range));
+      }
+      if (selectionFocus && !this.readonly && this.range) {
+        els.push(this.autoFillService.renderAutofill(range, selectionFocus));
+      }
+      if (this.canDrag) {
+        els.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onInternalRowDragStart: e => this.onRowDragStart(e) }));
+      }
     }
     return (h(Host, { onDblClick: () => this.doEdit(), onMouseDown: (e) => this.onElementMouseDown(e) },
       els,

package/dist/collection/components/revoGrid/revo-grid.d.ts

@@ -93,6 +93,12 @@ export declare class RevoGridComponent {
    * Can be filter collection
    */
   filter: boolean | ColumnFilterConfig;
+  /**
+   * Apply changes typed in editor on editor close except Escape cases
+   * If custom editor in use @method getValue required
+   * Check interfaces.d.ts @EditorBase for more info
+   */
+  focusTemplate: RevoGrid.FocusTemplateFunc;
   /**
    * Enables column move plugin
    * Can be boolean
@@ -450,6 +456,8 @@ export declare class RevoGridComponent {
   /** External subscribe */
   mergechanged: EventEmitter<any[] | undefined>;
   mergeChange(mergeVal: any[] | undefined): void;
+  rowheaderschanged: EventEmitter;
+  rowHeadersChange(rowHeaders?: RevoGrid.RowHeaders | boolean): void;
   private dataSourceApply;
   connectedCallback(): void;
   disconnectedCallback(): void;

package/dist/collection/components/revoGrid/revo-grid.js

@@ -523,6 +523,9 @@ export class RevoGridComponent {
   mergeChange(mergeVal) {
     this.mergechanged.emit(mergeVal);
   }
+  rowHeadersChange(rowHeaders) {
+    this.rowheaderschanged.emit(rowHeaders);
+  }
   dataSourceApply(source = [], type = 'rgRow') {
     const beforesourceset = this.beforeAnySource.emit({
       type,
@@ -631,7 +634,7 @@ export class RevoGridComponent {
         if (!event.defaultPrevented) {
           this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
         }
-      }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: (details, k) => this.scrollingService.onScroll(details, k) }));
+      }, 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));
@@ -1082,6 +1085,26 @@ export class RevoGridComponent {
       "reflect": false,
       "defaultValue": "false"
     },
+    "focusTemplate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RevoGrid.FocusTemplateFunc",
+        "resolved": "(createElement: HyperFunc<VNode>, detail: FocusRenderEvent) => any",
+        "references": {
+          "RevoGrid": {
+            "location": "import",
+            "path": "../../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Apply changes typed in editor on editor close except Escape cases\nIf custom editor in use @method getValue required\nCheck interfaces.d.ts @EditorBase for more info"
+      }
+    },
     "canMoveColumns": {
       "type": "boolean",
       "mutable": false,
@@ -1797,6 +1820,21 @@ export class RevoGridComponent {
         "resolved": "any[]",
         "references": {}
       }
+    }, {
+      "method": "rowheaderschanged",
+      "name": "rowheaderschanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "refresh": {
@@ -2386,6 +2424,9 @@ export class RevoGridComponent {
     }, {
       "propName": "merged",
       "methodName": "mergeChange"
+    }, {
+      "propName": "rowHeaders",
+      "methodName": "rowHeadersChange"
     }]; }
   static get listeners() { return [{
       "name": "internalRowDragStart",

package/dist/collection/components/revoGrid/viewport.section.d.ts

@@ -12,6 +12,7 @@ declare type Props = {
   resize: boolean;
   columns: ViewportProps[];
   columnFilter: boolean;
+  focusTemplate: RevoGrid.FocusTemplateFunc;
   onScroll(e: RevoGrid.ViewPortScrollEvent, key?: RevoGrid.DimensionColPin | string): void;
   onEdit(edit: Edition.BeforeEdit): void;
   registerElement(el: ElementScroll | null, key: string): void;
@@ -21,5 +22,5 @@ declare type Props = {
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-export declare const ViewPortSections: ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, applyEditorChangesOnClose, registerElement, onEdit, onScroll }: Props) => VNode[];
+export declare const ViewPortSections: ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, applyEditorChangesOnClose, registerElement, onEdit, onScroll, focusTemplate }: Props) => VNode[];
 export {};

package/dist/collection/components/revoGrid/viewport.section.js

@@ -6,7 +6,7 @@ import { DATA_SLOT, HEADER_SLOT } from './viewport.helpers';
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, applyEditorChangesOnClose, registerElement, onEdit, onScroll }) => {
+export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, applyEditorChangesOnClose, registerElement, onEdit, onScroll, focusTemplate }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -18,7 +18,7 @@ export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, c
       const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, applyChangesOnClose: applyEditorChangesOnClose, onSetEdit: ({ detail }) => onEdit(detail) }),
         h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
-        h("revogr-focus", { rowType: data.type, colType: view.type, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
+        h("revogr-focus", { 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));

package/dist/collection/components/rowHeaders/revogr-row-headers.js

@@ -4,7 +4,7 @@ import DataStore from '../../store/dataSource/data.store';
 import ViewportStore from '../../store/viewPort/viewport.store';
 import { ROW_HEADER_TYPE, UUID } from '../../utils/consts';
 import { RowHeaderRender } from './row-header-render';
-import { calculateRowHeaderSize } from './row-header-utils';
+import { calculateRowHeaderSize } from '../../utils/row-header-utils';
 import { HEADER_SLOT } from '../revoGrid/viewport.helpers';
 /**
  * Row headers component

package/dist/collection/components/selectionFocus/revogr-focus.d.ts

@@ -8,6 +8,7 @@ export declare class RevogrFocus {
   dimensionCol: Observable<RevoGrid.DimensionSettingsState>;
   colType: RevoGrid.DimensionCols;
   rowType: RevoGrid.DimensionRows;
+  focusTemplate: RevoGrid.FocusTemplateFunc | null;
   beforeFocusRender: EventEmitter<FocusRenderEvent>;
   private changed;
   componentDidRender(): void;

package/dist/collection/components/selectionFocus/revogr-focus.js

@@ -12,6 +12,10 @@ export class RevogrFocus {
     this.el && this.changed(this.el);
   }
   render() {
+    const editCell = this.selectionStore.get('edit');
+    if (editCell) {
+      return;
+    }
     const data = this.selectionStore.get('focus');
     if (data) {
       const event = this.beforeFocusRender.emit({
@@ -24,7 +28,8 @@ export class RevogrFocus {
       }
       const { detail } = event;
       const style = getElStyle(detail.range, this.dimensionRow.state, this.dimensionCol.state);
-      return h(Host, { class: FOCUS_CLASS, style: style });
+      const extra = this.focusTemplate && this.focusTemplate(h, detail);
+      return h(Host, { class: FOCUS_CLASS, style: style }, extra);
     }
   }
   static get is() { return "revogr-focus"; }
@@ -150,6 +155,26 @@ export class RevogrFocus {
       },
       "attribute": "row-type",
       "reflect": false
+    },
+    "focusTemplate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RevoGrid.FocusTemplateFunc | null",
+        "resolved": "(createElement: HyperFunc<VNode>, detail: FocusRenderEvent) => any",
+        "references": {
+          "RevoGrid": {
+            "location": "import",
+            "path": "../../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
     }
   }; }
   static get events() { return [{