@revolist/revogrid 4.24.0 → 4.24.2

package/dist/cjs/{cell-renderer-DfUCisis.js → cell-renderer-DnOCJ9ge.js}

@@ -4,8 +4,8 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
-var column_service = require('./column.service-BNWNiJW3.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
+var column_service = require('./column.service-CD70rNL2.js');
 
 /**
  * Renders sorting direction and optional additive sorting rank.
@@ -55,8 +55,58 @@ function expandEvent(e, model, virtualIndex) {
     });
     (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
 }
+function renderGroupCells(props, { name, expanded, depth, }) {
+    const { additionalData, columnItems, groupingCellRenderer, hasExpand, itemIndex, model, providers, size, start, end, } = props;
+    if (!groupingCellRenderer) {
+        return [];
+    }
+    const renderOffset = providers.viewport.get('renderOffset') || 0;
+    const data = providers.data.get('source');
+    const rowItem = { itemIndex, size, start, end };
+    const onExpand = (event) => expandEvent(event, model, itemIndex);
+    return columnItems.map(columnItem => {
+        const column = dimension_helpers.getSourceItem(providers.columns, columnItem.itemIndex);
+        if (!column) {
+            return null;
+        }
+        const isLabelColumn = column_service.isGroupingColumn(column);
+        const templateProps = {
+            prop: column.prop,
+            model,
+            data,
+            column,
+            rowIndex: itemIndex,
+            colIndex: columnItem.itemIndex,
+            colType: providers.colType,
+            type: providers.type,
+            value: column_service.getCellRaw(model, column),
+            providers,
+            columnItem,
+            rowItem,
+            group: {
+                name,
+                depth,
+                expanded,
+                prop: model[column_service.GROUP_COLUMN_PROP],
+                isLabelColumn,
+                canExpand: hasExpand,
+                onExpand,
+            },
+        };
+        return (index.h("div", { key: columnItem.itemIndex, class: {
+                [dimension_helpers.CELL_CLASS]: true,
+                groupingCell: true,
+                groupingLabelCell: isLabelColumn,
+            }, [dimension_helpers.DATA_COL]: columnItem.itemIndex,
+            [dimension_helpers.DATA_ROW]: itemIndex, style: {
+                width: `${columnItem.size}px`,
+                transform: `translateX(${columnItem.start - renderOffset}px)`,
+                height: size ? `${size}px` : undefined,
+            } }, groupingCellRenderer(index.h, templateProps, additionalData)));
+    });
+}
 const GroupingRowRenderer = (props) => {
-    const { model, itemIndex, hasExpand, groupingCustomRenderer } = props;
+    const { model, itemIndex, hasExpand, groupingCustomRenderer, groupingCellRenderer, } = props;
     const name = model[column_service.PSEUDO_GROUP_ITEM];
     const expanded = model[column_service.GROUP_EXPANDED];
     const depth = parseInt(model[column_service.GROUP_DEPTH], 10) || 0;
@@ -65,6 +115,9 @@ const GroupingRowRenderer = (props) => {
         depth,
         expanded,
     };
+    if (groupingCellRenderer) {
+        return (index.h(RowRenderer, Object.assign({ index: props.index, size: props.size, start: props.start }, groupRowAttrs), renderGroupCells(props, { name, expanded, depth })));
+    }
     if (groupingCustomRenderer) {
         return (index.h(RowRenderer, Object.assign({}, props, groupRowAttrs), index.h("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(index.h, Object.assign(Object.assign({}, props), { colType: props.providers.colType, name,
             expanded,
@@ -72,7 +125,7 @@ const GroupingRowRenderer = (props) => {
     }
     return (index.h(RowRenderer, Object.assign({}, props, groupRowAttrs), hasExpand && [
         index.h("button", { class: { [column_service.GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
-        name,
+        String(name),
     ]));
 };
 const expandSvgIconVNode = (expanded = false) => {
@@ -124,3 +177,4 @@ exports.RowRenderer = RowRenderer;
 exports.SortingSign = SortingSign;
 exports.expandEvent = expandEvent;
 exports.expandSvgIconVNode = expandSvgIconVNode;
+exports.renderGroupCells = renderGroupCells;

package/dist/cjs/{column.drag.plugin-Cz-T4y3M.js → column.drag.plugin-DSiFObaj.js}

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var column_service = require('./column.service-BNWNiJW3.js');
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
-var viewport_store = require('./viewport.store-BscUCiUk.js');
-var index$1 = require('./index-DxaSE5uZ.js');
+var column_service = require('./column.service-CD70rNL2.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
+var viewport_store = require('./viewport.store-Ci8H1bI9.js');
+var index$1 = require('./index-BF6JDcMr.js');
 var index = require('./index-Dq8Xzj5l.js');
 var filter_button = require('./filter.button-C4xpvyyE.js');
 var debounce = require('./debounce-CcpHiH2p.js');
-var headerCellRenderer = require('./header-cell-renderer-DyjOxArm.js');
+var headerCellRenderer = require('./header-cell-renderer-JXYFwayd.js');
 
 function calculateRealSize({ count, originItemSize, sizes, }) {
     const safeCount = Math.max(0, count);
@@ -2454,7 +2454,7 @@ class GroupingRowPlugin extends BasePlugin {
      * Initiated when need to reapply grouping
      */
     doSourceUpdate(options) {
-        var _a;
+        var _a, _b;
         /**
          * Get source without grouping
          * @param newOldIndexMap - provides us mapping with new indexes vs old indexes, we would use it for trimmed mapping
@@ -2466,10 +2466,11 @@ class GroupingRowPlugin extends BasePlugin {
          * Group again
          * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
          */
-        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = column_service.gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], expanded);
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = column_service.gatherGrouping(source, (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : [], expanded);
         const customRenderer = options === null || options === void 0 ? void 0 : options.groupLabelTemplate;
+        const cellRenderer = options === null || options === void 0 ? void 0 : options.groupCellTemplate;
         // setup source
-        this.providers.data.setData(sourceWithGroups, column_service.GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer }, true);
+        this.providers.data.setData(sourceWithGroups, column_service.GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer, cellRenderer }, true);
         this.updateTrimmed(trimmed, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap, sourceWithGroups);
     }
     /**
@@ -2478,17 +2479,21 @@ class GroupingRowPlugin extends BasePlugin {
      * If source came from other plugin
      */
     onDataSet(data) {
-        var _a, _b;
+        var _a, _b, _c;
         let preservedExpanded = {};
         if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.preserveGroupingOnUpdate) !== false) {
             let { prevExpanded } = column_service.getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
             preservedExpanded = prevExpanded;
         }
         const source = data.source.filter(s => !column_service.isGrouping(s));
-        const options = Object.assign(Object.assign({}, (this.revogrid.grouping || {})), { prevExpanded: preservedExpanded });
-        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = column_service.gatherGrouping(source, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.props) || [], options);
+        const options = Object.assign(Object.assign({}, this.options), { prevExpanded: preservedExpanded });
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = column_service.gatherGrouping(source, (_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : [], options);
         data.source = sourceWithGroups;
-        this.providers.data.setGrouping({ depth });
+        this.providers.data.setGrouping({
+            depth,
+            customRenderer: options.groupLabelTemplate,
+            cellRenderer: options.groupCellTemplate,
+        });
         this.updateTrimmed(trimmed, oldNewIndexMap, undefined, sourceWithGroups);
     }
     /**

package/dist/cjs/{column.service-BNWNiJW3.js → column.service-CD70rNL2.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
 
 /**
  * Converts `value` to an integer.
@@ -436,8 +436,9 @@ const GROUP_EXPAND_BTN = `group-expand`;
 const GROUP_EXPAND_EVENT = `groupexpandclick`;
 const GROUPING_ROW_TYPE = 'rgRow';
 
-function getGroupValueDefault(item, prop) {
-    return item[prop] || null;
+function getGroupValueDefault(item, prop, emptyGroupValue) {
+    var _a;
+    return (_a = item[prop]) !== null && _a !== void 0 ? _a : emptyGroupValue;
 }
 function isDataRow(item) {
     return item != null;
@@ -543,13 +544,15 @@ function flattenGroupMaps({ groupedValues, parentIds, isExpanded, itemIndex, exp
  * @param columnProps - ids of groups
  * @param expanded - potentially expanded items if present
  */
-function gatherGrouping(array, columnProps, { prevExpanded = {}, expandedAll = false, getGroupValue = getGroupValueDefault, }) {
+function gatherGrouping(array, columnProps, { prevExpanded = {}, expandedAll = false, getGroupValue, emptyGroupValue = '', }) {
     const groupedItems = new Map();
     array.forEach((item, originalIndex) => {
         if (!isDataRow(item)) {
             return;
         }
-        const groupLevelValues = columnProps.map(groupId => getGroupValue(item, groupId));
+        const groupLevelValues = columnProps.map(groupId => getGroupValue
+            ? getGroupValue(item, groupId)
+            : getGroupValueDefault(item, groupId, emptyGroupValue));
         const lastLevelValue = groupLevelValues.pop();
         let currentGroupLevel = groupedItems;
         groupLevelValues.forEach(value => {

package/dist/cjs/{dimension.helpers-B9HgANnM.js → dimension.helpers-CB5sNw5J.js}

@@ -3143,7 +3143,7 @@ class DataStore {
         return this.dataStore;
     }
     constructor(type, storeData) {
-        const store = (this.dataStore = createStore(Object.assign({ items: [], proxyItems: [], source: [], groupingDepth: 0, groups: {}, type, trimmed: {}, groupingCustomRenderer: undefined }, storeData)));
+        const store = (this.dataStore = createStore(Object.assign({ items: [], proxyItems: [], source: [], groupingDepth: 0, groups: {}, type, trimmed: {}, groupingCustomRenderer: undefined, groupingCellRenderer: undefined }, storeData)));
         store.use(proxyPlugin(store));
         store.use(trimmedPlugin(store));
     }
@@ -3183,6 +3183,7 @@ class DataStore {
                 // if groups are not provided, we will consider that there is only one group with all items
                 groups: grouping.groups,
                 groupingCustomRenderer: grouping.customRenderer,
+                groupingCellRenderer: grouping.cellRenderer,
             });
         }
     }

package/dist/cjs/{edit.utils-pKeiYFLJ.js → edit.utils-DDxnq9lw.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
 
 function isMetaKey(code) {
     const keys = [

package/dist/cjs/{header-cell-renderer-DyjOxArm.js → header-cell-renderer-JXYFwayd.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var column_service = require('./column.service-BNWNiJW3.js');
+var column_service = require('./column.service-CD70rNL2.js');
 
 /**
  * Dispatches a custom event to a specified target element.

package/dist/cjs/{index-DxaSE5uZ.js → index-BF6JDcMr.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./dimension.helpers-B9HgANnM.js');
+require('./dimension.helpers-CB5sNw5J.js');
 
 /* Generate range on size
  */

package/dist/cjs/index.cjs.js

@@ -3,16 +3,16 @@
  */
 'use strict';
 
-var column_service = require('./column.service-BNWNiJW3.js');
-var column_drag_plugin = require('./column.drag.plugin-Cz-T4y3M.js');
-var headerCellRenderer = require('./header-cell-renderer-DyjOxArm.js');
-var cellRenderer = require('./cell-renderer-DfUCisis.js');
-var index$1 = require('./index-DxaSE5uZ.js');
-var textEditor = require('./text-editor-B4W-m-r-.js');
-var edit_utils = require('./edit.utils-pKeiYFLJ.js');
+var column_service = require('./column.service-CD70rNL2.js');
+var column_drag_plugin = require('./column.drag.plugin-DSiFObaj.js');
+var headerCellRenderer = require('./header-cell-renderer-JXYFwayd.js');
+var cellRenderer = require('./cell-renderer-DnOCJ9ge.js');
+var index$1 = require('./index-BF6JDcMr.js');
+var textEditor = require('./text-editor-CvgloQdG.js');
+var edit_utils = require('./edit.utils-DDxnq9lw.js');
 var index = require('./index-Dq8Xzj5l.js');
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
-var viewport_store = require('./viewport.store-BscUCiUk.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
+var viewport_store = require('./viewport.store-Ci8H1bI9.js');
 var filter_button = require('./filter.button-C4xpvyyE.js');
 require('./debounce-CcpHiH2p.js');
 
@@ -249,6 +249,7 @@ exports.GroupingRowRenderer = cellRenderer.GroupingRowRenderer;
 exports.SortingSign = cellRenderer.SortingSign;
 exports.expandEvent = cellRenderer.expandEvent;
 exports.expandSvgIconVNode = cellRenderer.expandSvgIconVNode;
+exports.renderGroupCells = cellRenderer.renderGroupCells;
 exports.applyMixins = index$1.applyMixins;
 exports.findPositionInArray = index$1.findPositionInArray;
 exports.getScrollbarSize = index$1.getScrollbarSize;

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

@@ -4,17 +4,17 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var column_service = require('./column.service-BNWNiJW3.js');
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var column_service = require('./column.service-CD70rNL2.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
 var debounce = require('./debounce-CcpHiH2p.js');
 var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
-var column_drag_plugin = require('./column.drag.plugin-Cz-T4y3M.js');
-var viewport_store = require('./viewport.store-BscUCiUk.js');
+var column_drag_plugin = require('./column.drag.plugin-DSiFObaj.js');
+var viewport_store = require('./viewport.store-Ci8H1bI9.js');
 var theme_service = require('./theme.service-BgnxGIjK.js');
-var index$1 = require('./index-DxaSE5uZ.js');
+var index$1 = require('./index-BF6JDcMr.js');
 var events = require('./events-DeLDyZlb.js');
 require('./filter.button-C4xpvyyE.js');
-require('./header-cell-renderer-DyjOxArm.js');
+require('./header-cell-renderer-JXYFwayd.js');
 
 class ColumnDataProvider {
     get stores() {
@@ -219,8 +219,12 @@ class DataProvider {
         const items = this.stores[type].store.get('items');
         this.stores[type].setData({ items: [...items] });
     }
-    setGrouping({ depth }, type = 'rgRow') {
-        this.stores[type].setData({ groupingDepth: depth });
+    setGrouping({ depth, customRenderer, cellRenderer, }, type = 'rgRow') {
+        this.stores[type].setData({
+            groupingDepth: depth,
+            groupingCustomRenderer: customRenderer,
+            groupingCellRenderer: cellRenderer,
+        });
     }
     setTrimmed(trimmed, type = 'rgRow') {
         const store = this.stores[type];

package/dist/cjs/revogr-attribution_7.cjs.entry.js

@@ -4,13 +4,13 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
 var events = require('./events-DeLDyZlb.js');
-var column_service = require('./column.service-BNWNiJW3.js');
-var edit_utils = require('./edit.utils-pKeiYFLJ.js');
-var index$1 = require('./index-DxaSE5uZ.js');
+var column_service = require('./column.service-CD70rNL2.js');
+var edit_utils = require('./edit.utils-DDxnq9lw.js');
+var index$1 = require('./index-BF6JDcMr.js');
 var debounce = require('./debounce-CcpHiH2p.js');
-var viewport_store = require('./viewport.store-BscUCiUk.js');
+var viewport_store = require('./viewport.store-Ci8H1bI9.js');
 var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
 var throttle = require('./throttle-fV6BUmM7.js');
 

package/dist/cjs/revogr-clipboard_3.cjs.entry.js

@@ -4,11 +4,11 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
-var textEditor = require('./text-editor-B4W-m-r-.js');
-var edit_utils = require('./edit.utils-pKeiYFLJ.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
+var textEditor = require('./text-editor-CvgloQdG.js');
+var edit_utils = require('./edit.utils-DDxnq9lw.js');
 var debounce = require('./debounce-CcpHiH2p.js');
-require('./index-DxaSE5uZ.js');
+require('./index-BF6JDcMr.js');
 
 const Clipboard = class {
     constructor(hostRef) {

package/dist/cjs/revogr-data_4.cjs.entry.js

@@ -4,11 +4,11 @@
 'use strict';
 
 var index = require('./index-Dq8Xzj5l.js');
-var column_service = require('./column.service-BNWNiJW3.js');
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
-var cellRenderer = require('./cell-renderer-DfUCisis.js');
+var column_service = require('./column.service-CD70rNL2.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
+var cellRenderer = require('./cell-renderer-DnOCJ9ge.js');
 var filter_button = require('./filter.button-C4xpvyyE.js');
-var headerCellRenderer = require('./header-cell-renderer-DyjOxArm.js');
+var headerCellRenderer = require('./header-cell-renderer-JXYFwayd.js');
 var throttle = require('./throttle-fV6BUmM7.js');
 var viewport_helpers = require('./viewport.helpers-BND76K2j.js');
 require('./debounce-CcpHiH2p.js');
@@ -169,6 +169,7 @@ const RevogrData = class {
         const rowsEls = [];
         const depth = this.dataStore.get('groupingDepth');
         const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');
+        const groupingCellRenderer = this.dataStore.get('groupingCellRenderer');
         const groupDepth = this.columnService.hasGrouping ? depth : 0;
         const rowRenderOffset = this.viewportRow.get('renderOffset') || 0;
         const colRenderOffset = this.viewportCol.get('renderOffset') || 0;
@@ -177,6 +178,7 @@ const RevogrData = class {
             // #region Grouping
             if (column_service.isGrouping(dataItem)) {
                 const gmodel = Object.assign(Object.assign({}, rgRow), { start: rgRow.start - rowRenderOffset, index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer,
+                    groupingCellRenderer, additionalData: this.additionalData,
                     // Only show expand button if grouping is enabled and not in row headers
                     hasExpand: this.columnService.hasGrouping && this.colType !== 'rowHeaders', columnItems: cols, providers: this.providers });
                 rowsEls.push(index.h(cellRenderer.GroupingRowRenderer, Object.assign({}, gmodel)));

package/dist/cjs/{text-editor-B4W-m-r-.js → text-editor-CvgloQdG.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var edit_utils = require('./edit.utils-pKeiYFLJ.js');
-var index = require('./index-DxaSE5uZ.js');
+var edit_utils = require('./edit.utils-DDxnq9lw.js');
+var index = require('./index-BF6JDcMr.js');
 
 class TextEditor {
     constructor(data, saveCallback) {

package/dist/cjs/{viewport.store-BscUCiUk.js → viewport.store-Ci8H1bI9.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dimension_helpers = require('./dimension.helpers-B9HgANnM.js');
+var dimension_helpers = require('./dimension.helpers-CB5sNw5J.js');
 
 const LETTER_BLOCK_SIZE = 10;
 const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) => {

package/dist/collection/components/data/revogr-data.js

@@ -101,6 +101,7 @@ export class RevogrData {
         const rowsEls = [];
         const depth = this.dataStore.get('groupingDepth');
         const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');
+        const groupingCellRenderer = this.dataStore.get('groupingCellRenderer');
         const groupDepth = this.columnService.hasGrouping ? depth : 0;
         const rowRenderOffset = this.viewportRow.get('renderOffset') || 0;
         const colRenderOffset = this.viewportCol.get('renderOffset') || 0;
@@ -109,6 +110,7 @@ export class RevogrData {
             // #region Grouping
             if (isGrouping(dataItem)) {
                 const gmodel = Object.assign(Object.assign({}, rgRow), { start: rgRow.start - rowRenderOffset, index: rgRow.itemIndex, model: dataItem, groupingCustomRenderer,
+                    groupingCellRenderer, additionalData: this.additionalData,
                     // Only show expand button if grouping is enabled and not in row headers
                     hasExpand: this.columnService.hasGrouping && this.colType !== 'rowHeaders', columnItems: cols, providers: this.providers });
                 rowsEls.push(h(GroupingRowRenderer, Object.assign({}, gmodel)));

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

@@ -1776,7 +1776,7 @@ export class RevoGridComponent {
                 "mutable": false,
                 "complexType": {
                     "original": "GroupingOptions",
-                    "resolved": "{ props?: ColumnProp[] | undefined; preserveGroupingOnUpdate?: boolean | undefined; groupLabelTemplate?: GroupLabelTemplateFunc | undefined; } & ExpandedOptions",
+                    "resolved": "{ props?: ColumnProp[] | undefined; preserveGroupingOnUpdate?: boolean | undefined; groupLabelTemplate?: GroupLabelTemplateFunc | undefined; groupCellTemplate?: GroupCellTemplateFunc | undefined; } & ExpandedOptions",
                     "references": {
                         "GroupingOptions": {
                             "location": "import",

package/dist/collection/plugins/groupingRow/grouping.row.plugin.js

@@ -126,7 +126,7 @@ export class GroupingRowPlugin extends BasePlugin {
      * Initiated when need to reapply grouping
      */
     doSourceUpdate(options) {
-        var _a;
+        var _a, _b;
         /**
          * Get source without grouping
          * @param newOldIndexMap - provides us mapping with new indexes vs old indexes, we would use it for trimmed mapping
@@ -138,10 +138,11 @@ export class GroupingRowPlugin extends BasePlugin {
          * Group again
          * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
          */
-        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], expanded);
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = gatherGrouping(source, (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : [], expanded);
         const customRenderer = options === null || options === void 0 ? void 0 : options.groupLabelTemplate;
+        const cellRenderer = options === null || options === void 0 ? void 0 : options.groupCellTemplate;
         // setup source
-        this.providers.data.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer }, true);
+        this.providers.data.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer, cellRenderer }, true);
         this.updateTrimmed(trimmed, oldNewIndexes !== null && oldNewIndexes !== void 0 ? oldNewIndexes : {}, oldNewIndexMap, sourceWithGroups);
     }
     /**
@@ -150,17 +151,21 @@ export class GroupingRowPlugin extends BasePlugin {
      * If source came from other plugin
      */
     onDataSet(data) {
-        var _a, _b;
+        var _a, _b, _c;
         let preservedExpanded = {};
         if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.preserveGroupingOnUpdate) !== false) {
             let { prevExpanded } = getSource(this.getStore().get('source'), this.getStore().get('proxyItems'), true);
             preservedExpanded = prevExpanded;
         }
         const source = data.source.filter(s => !isGrouping(s));
-        const options = Object.assign(Object.assign({}, (this.revogrid.grouping || {})), { prevExpanded: preservedExpanded });
-        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = gatherGrouping(source, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.props) || [], options);
+        const options = Object.assign(Object.assign({}, this.options), { prevExpanded: preservedExpanded });
+        const { sourceWithGroups, depth, trimmed, oldNewIndexMap, } = gatherGrouping(source, (_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : [], options);
         data.source = sourceWithGroups;
-        this.providers.data.setGrouping({ depth });
+        this.providers.data.setGrouping({
+            depth,
+            customRenderer: options.groupLabelTemplate,
+            cellRenderer: options.groupCellTemplate,
+        });
         this.updateTrimmed(trimmed, oldNewIndexMap, undefined, sourceWithGroups);
     }
     /**

package/dist/collection/plugins/groupingRow/grouping.row.renderer.js

@@ -3,7 +3,10 @@
  */
 import { h } from "@stencil/core";
 import RowRenderer from "../../components/data/row-renderer";
-import { GROUP_DEPTH, GROUP_EXPANDED, GROUP_EXPAND_BTN, PSEUDO_GROUP_ITEM, GROUP_EXPAND_EVENT, } from "./grouping.const";
+import { GROUP_DEPTH, GROUP_EXPANDED, GROUP_EXPAND_BTN, PSEUDO_GROUP_ITEM, GROUP_EXPAND_EVENT, GROUP_COLUMN_PROP, } from "./grouping.const";
+import { getSourceItem } from "../../store/index";
+import { CELL_CLASS, DATA_COL, DATA_ROW, getCellRaw } from "../../utils";
+import { isGroupingColumn } from "./grouping.service";
 export function expandEvent(e, model, virtualIndex) {
     var _a;
     const event = new CustomEvent(GROUP_EXPAND_EVENT, {
@@ -16,8 +19,58 @@ export function expandEvent(e, model, virtualIndex) {
     });
     (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
 }
+export function renderGroupCells(props, { name, expanded, depth, }) {
+    const { additionalData, columnItems, groupingCellRenderer, hasExpand, itemIndex, model, providers, size, start, end, } = props;
+    if (!groupingCellRenderer) {
+        return [];
+    }
+    const renderOffset = providers.viewport.get('renderOffset') || 0;
+    const data = providers.data.get('source');
+    const rowItem = { itemIndex, size, start, end };
+    const onExpand = (event) => expandEvent(event, model, itemIndex);
+    return columnItems.map(columnItem => {
+        const column = getSourceItem(providers.columns, columnItem.itemIndex);
+        if (!column) {
+            return null;
+        }
+        const isLabelColumn = isGroupingColumn(column);
+        const templateProps = {
+            prop: column.prop,
+            model,
+            data,
+            column,
+            rowIndex: itemIndex,
+            colIndex: columnItem.itemIndex,
+            colType: providers.colType,
+            type: providers.type,
+            value: getCellRaw(model, column),
+            providers,
+            columnItem,
+            rowItem,
+            group: {
+                name,
+                depth,
+                expanded,
+                prop: model[GROUP_COLUMN_PROP],
+                isLabelColumn,
+                canExpand: hasExpand,
+                onExpand,
+            },
+        };
+        return (h("div", { key: columnItem.itemIndex, class: {
+                [CELL_CLASS]: true,
+                groupingCell: true,
+                groupingLabelCell: isLabelColumn,
+            }, [DATA_COL]: columnItem.itemIndex,
+            [DATA_ROW]: itemIndex, style: {
+                width: `${columnItem.size}px`,
+                transform: `translateX(${columnItem.start - renderOffset}px)`,
+                height: size ? `${size}px` : undefined,
+            } }, groupingCellRenderer(h, templateProps, additionalData)));
+    });
+}
 export const GroupingRowRenderer = (props) => {
-    const { model, itemIndex, hasExpand, groupingCustomRenderer } = props;
+    const { model, itemIndex, hasExpand, groupingCustomRenderer, groupingCellRenderer, } = props;
     const name = model[PSEUDO_GROUP_ITEM];
     const expanded = model[GROUP_EXPANDED];
     const depth = parseInt(model[GROUP_DEPTH], 10) || 0;
@@ -26,6 +79,9 @@ export const GroupingRowRenderer = (props) => {
         depth,
         expanded,
     };
+    if (groupingCellRenderer) {
+        return (h(RowRenderer, Object.assign({ index: props.index, size: props.size, start: props.start }, groupRowAttrs), renderGroupCells(props, { name, expanded, depth })));
+    }
     if (groupingCustomRenderer) {
         return (h(RowRenderer, Object.assign({}, props, groupRowAttrs), h("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(h, Object.assign(Object.assign({}, props), { colType: props.providers.colType, name,
             expanded,
@@ -33,7 +89,7 @@ export const GroupingRowRenderer = (props) => {
     }
     return (h(RowRenderer, Object.assign({}, props, groupRowAttrs), hasExpand && [
         h("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
-        name,
+        String(name),
     ]));
 };
 export const expandSvgIconVNode = (expanded = false) => {

package/dist/collection/plugins/groupingRow/grouping.service.js

@@ -2,8 +2,9 @@
  * Built by Revolist OU ❤️
  */
 import { GROUP_DEPTH, GROUP_EXPANDED, PSEUDO_GROUP_COLUMN, PSEUDO_GROUP_ITEM, PSEUDO_GROUP_ITEM_ID, PSEUDO_GROUP_ITEM_VALUE, GROUP_ORIGINAL_INDEX, GROUP_COLUMN_PROP, } from "./grouping.const";
-function getGroupValueDefault(item, prop) {
-    return item[prop] || null;
+function getGroupValueDefault(item, prop, emptyGroupValue) {
+    var _a;
+    return (_a = item[prop]) !== null && _a !== void 0 ? _a : emptyGroupValue;
 }
 function isDataRow(item) {
     return item != null;
@@ -109,13 +110,15 @@ function flattenGroupMaps({ groupedValues, parentIds, isExpanded, itemIndex, exp
  * @param columnProps - ids of groups
  * @param expanded - potentially expanded items if present
  */
-export function gatherGrouping(array, columnProps, { prevExpanded = {}, expandedAll = false, getGroupValue = getGroupValueDefault, }) {
+export function gatherGrouping(array, columnProps, { prevExpanded = {}, expandedAll = false, getGroupValue, emptyGroupValue = '', }) {
     const groupedItems = new Map();
     array.forEach((item, originalIndex) => {
         if (!isDataRow(item)) {
             return;
         }
-        const groupLevelValues = columnProps.map(groupId => getGroupValue(item, groupId));
+        const groupLevelValues = columnProps.map(groupId => getGroupValue
+            ? getGroupValue(item, groupId)
+            : getGroupValueDefault(item, groupId, emptyGroupValue));
         const lastLevelValue = groupLevelValues.pop();
         let currentGroupLevel = groupedItems;
         groupLevelValues.forEach(value => {

package/dist/collection/services/data.provider.js

@@ -93,8 +93,12 @@ export class DataProvider {
         const items = this.stores[type].store.get('items');
         this.stores[type].setData({ items: [...items] });
     }
-    setGrouping({ depth }, type = 'rgRow') {
-        this.stores[type].setData({ groupingDepth: depth });
+    setGrouping({ depth, customRenderer, cellRenderer, }, type = 'rgRow') {
+        this.stores[type].setData({
+            groupingDepth: depth,
+            groupingCustomRenderer: customRenderer,
+            groupingCellRenderer: cellRenderer,
+        });
     }
     setTrimmed(trimmed, type = 'rgRow') {
         const store = this.stores[type];