@revolist/revogrid 3.2.17 → 3.3.0

package/custom-element/columnService.js

@@ -11,123 +11,91 @@ const PSEUDO_GROUP_ITEM_ID = `${GRID_INTERNALS}-id`;
 const PSEUDO_GROUP_ITEM_VALUE = `${GRID_INTERNALS}-value`;
 const PSEUDO_GROUP_COLUMN = `${GRID_INTERNALS}-column`;
 const GROUP_EXPANDED = `${GRID_INTERNALS}-expanded`;
+const GROUP_ORIGINAL_INDEX = `${GRID_INTERNALS}-original-index`;
 const GROUP_EXPAND_BTN = `group-expand`;
 const GROUP_EXPAND_EVENT = `groupExpandClick`;
 const GROUPING_ROW_TYPE = 'rgRow';
 
-/**
- * Do actual grouping
- * @param array - items to group
- * @param f - function responsible for grouping, returns property to group by
- */
-function groupBy(array, f) {
-  const groupsOrder = [];
-  const itemsByGroup = {};
-  array.forEach((item, i) => {
-    // get grouping values
-    const groupKeys = JSON.stringify(f(item));
-    // new group identification
-    if (!itemsByGroup[groupKeys]) {
-      itemsByGroup[groupKeys] = new Map();
-      // create group parents
-      groupsOrder.push({
-        children: itemsByGroup[groupKeys],
-        id: groupKeys,
-      });
-    }
-    // save to group with previous index
-    itemsByGroup[groupKeys].set(i, item);
-  });
-  return groupsOrder;
-}
 /**
  * Gather data for grouping
  * @param array - flat data array
- * @param mapFunc - mapping function for stringify
+ * @param groupIds - ids of groups
  * @param expanded - potentially expanded items if present
  */
-function gatherGrouping(array, mapFunc, { prevExpanded, expandedAll }) {
-  // build groups
-  const groupsOrder = groupBy(array, mapFunc);
-  const itemsMirror = []; // grouped source
-  const pseudoGroupTest = {}; // check if group header exists
-  // item index in source
-  let itemIndex = 0;
-  // to save max group depth
-  let groupingDepth = 0;
+function gatherGrouping(array, groupIds, { prevExpanded, expandedAll }) {
+  const groupedItems = new Map();
+  array.forEach((item, originalIndex) => {
+    const groupLevelValues = groupIds.map((groupId) => item[groupId] || null);
+    const lastLevelValue = groupLevelValues.pop();
+    let currentGroupLevel = groupedItems;
+    groupLevelValues.forEach((value) => {
+      if (!currentGroupLevel.has(value)) {
+        currentGroupLevel.set(value, new Map());
+      }
+      currentGroupLevel = currentGroupLevel.get(value);
+    });
+    if (!currentGroupLevel.has(lastLevelValue)) {
+      currentGroupLevel.set(lastLevelValue, []);
+    }
+    item[GROUP_ORIGINAL_INDEX] = originalIndex;
+    const lastLevelItems = currentGroupLevel.get(lastLevelValue);
+    lastLevelItems.push(item);
+  });
+  let itemIndex = -1;
+  const groupingDepth = groupIds.length;
   // collapse all groups in the beginning
   const trimmed = {};
   // index mapping
   const oldNewIndexMap = {};
-  // go through groups
-  groupsOrder.forEach(group => {
-    const parseGroup = getParsedGroup(group.id);
-    // extra precaution and type safe guard
-    if (!parseGroup) {
-      return;
-    }
-    let depth = 0;
-    let skipTrim = !!expandedAll;
-    let isExpanded = skipTrim;
-    const children = [];
-    // add group headers
-    parseGroup.reduce((prevVal, groupValue) => {
-      prevVal.push(groupValue);
-      const newVal = prevVal.join(',');
-      // if header not added, add new header
-      if (!pseudoGroupTest[newVal]) {
-        isExpanded = expandedAll || (prevExpanded && prevExpanded[newVal]);
-        itemsMirror.push(getPseudoGroup(groupValue, newVal, depth, group.id, isExpanded));
-        // if not first level auto collapse
-        if (depth && !isExpanded && !skipTrim) {
-          // check if parent expanded, expand this layer too
-          const parent = prevVal.slice(0, prevVal.length - 1);
-          if (!(prevExpanded && parent.length && prevExpanded[parent.join(',')])) {
+  // check if group header exists
+  const pseudoGroupTest = {};
+  const sourceWithGroups = [];
+  function flattenGroupMaps(groupedValues, parentIds, isExpanded) {
+    const depth = parentIds.length;
+    groupedValues.forEach((innerGroupedValues, groupId) => {
+      const levelIds = [...parentIds, groupId];
+      const mergedIds = levelIds.join(',');
+      const isGroupExpanded = isExpanded && (!!expandedAll || !!(prevExpanded === null || prevExpanded === void 0 ? void 0 : prevExpanded[mergedIds]));
+      sourceWithGroups.push({
+        [PSEUDO_GROUP_ITEM]: groupId,
+        [GROUP_DEPTH]: depth,
+        [PSEUDO_GROUP_ITEM_ID]: JSON.stringify(levelIds),
+        [PSEUDO_GROUP_ITEM_VALUE]: mergedIds,
+        [GROUP_EXPANDED]: isGroupExpanded,
+      });
+      itemIndex += 1;
+      if (!isGroupExpanded && depth) {
+        trimmed[itemIndex] = true;
+      }
+      if (Array.isArray(innerGroupedValues)) {
+        innerGroupedValues.forEach((value) => {
+          itemIndex += 1;
+          if (!isGroupExpanded) {
             trimmed[itemIndex] = true;
           }
-        }
-        itemIndex++;
-        pseudoGroupTest[newVal] = children;
+          oldNewIndexMap[value[GROUP_ORIGINAL_INDEX]] = itemIndex;
+          const pseudoGroupTestIds = levelIds.map((_value, index) => levelIds.slice(0, index + 1).join(','));
+          pseudoGroupTestIds.forEach((pseudoGroupTestId) => {
+            if (!pseudoGroupTest[pseudoGroupTestId]) {
+              pseudoGroupTest[pseudoGroupTestId] = [];
+            }
+            pseudoGroupTest[pseudoGroupTestId].push(itemIndex);
+          });
+        });
+        sourceWithGroups.push(...innerGroupedValues);
       }
-      // calculate depth
-      depth++;
-      groupingDepth = depth;
-      return prevVal;
-    }, []);
-    // add regular items
-    group.children.forEach((item, oldIndex) => {
-      // hide items if group colapsed
-      if (!isExpanded && !skipTrim) {
-        // collapse rgRow
-        trimmed[itemIndex] = true;
+      else {
+        flattenGroupMaps(innerGroupedValues, levelIds, isGroupExpanded);
       }
-      // add items to new source
-      itemsMirror.push(item);
-      oldNewIndexMap[oldIndex] = itemIndex;
-      children.push(itemIndex);
-      itemIndex++;
     });
-  });
+  }
+  flattenGroupMaps(groupedItems, [], true);
   return {
-    // updates source mirror
-    sourceWithGroups: itemsMirror,
-    // largest depth for grouping
+    sourceWithGroups,
     depth: groupingDepth,
-    // used for expand/collapse grouping values
     trimmed,
-    // used for mapping old values to new
     oldNewIndexMap,
-    // used to get child items in group
-    childrenByGroup: pseudoGroupTest,
-  };
-}
-function getPseudoGroup(groupValue, value, depth, id, isExpanded = false) {
-  return {
-    [PSEUDO_GROUP_ITEM]: groupValue,
-    [GROUP_DEPTH]: depth,
-    [PSEUDO_GROUP_ITEM_ID]: id,
-    [PSEUDO_GROUP_ITEM_VALUE]: value,
-    [GROUP_EXPANDED]: isExpanded,
+    childrenByGroup: pseudoGroupTest, // used to get child items in group
   };
 }
 function getGroupingName(rgRow) {
@@ -139,9 +107,6 @@ function isGrouping(rgRow) {
 function isGroupingColumn(column) {
   return column && typeof column[PSEUDO_GROUP_COLUMN] !== 'undefined';
 }
-function isArray(data) {
-  return typeof data.push !== 'undefined';
-}
 function measureEqualDepth(groupA, groupB) {
   const ln = groupA.length;
   let i = 0;
@@ -155,7 +120,7 @@ function measureEqualDepth(groupA, groupB) {
 function getParsedGroup(id) {
   const parseGroup = JSON.parse(id);
   // extra precaution and type safe guard
-  if (!isArray(parseGroup)) {
+  if (!Array.isArray(parseGroup)) {
     return null;
   }
   return parseGroup;
@@ -740,4 +705,4 @@ class ColumnService {
   }
 }
 
-export { ColumnService as C, EMPTY_INDEX as E, GROUP_EXPANDED as G, PSEUDO_GROUP_ITEM_ID as P, SelectionStoreConnector as S, getParsedGroup as a, isSameGroup as b, GROUP_DEPTH as c, GROUPING_ROW_TYPE as d, PSEUDO_GROUP_ITEM_VALUE as e, PSEUDO_GROUP_COLUMN as f, getGroupingName as g, GROUP_EXPAND_EVENT as h, isGrouping as i, gatherGrouping as j, isGroupingColumn as k, GROUP_EXPAND_BTN as l, PSEUDO_GROUP_ITEM as m, getRange as n, isRangeSingleCell as o };
+export { ColumnService as C, EMPTY_INDEX as E, GROUP_EXPANDED as G, PSEUDO_GROUP_ITEM_VALUE as P, SelectionStoreConnector as S, getParsedGroup as a, isSameGroup as b, GROUP_DEPTH as c, PSEUDO_GROUP_ITEM_ID as d, GROUPING_ROW_TYPE as e, PSEUDO_GROUP_COLUMN as f, getGroupingName as g, GROUP_EXPAND_EVENT as h, isGrouping as i, gatherGrouping as j, isGroupingColumn as k, GROUP_EXPAND_BTN as l, PSEUDO_GROUP_ITEM as m, getRange as n, isRangeSingleCell as o };

package/custom-element/data.store.js

@@ -474,6 +474,7 @@ class DataStore {
       setStore(this.store, {
         groupingDepth: grouping.depth,
         groups: grouping.groups,
+        groupingCustomRenderer: grouping.customRenderer,
       });
     }
   }

package/custom-element/revo-grid.js

@@ -13,7 +13,7 @@ import { t as timeout, g as getScrollbarWidth } from './utils.js';
 import { i as isFilterBtn, F as FILTER_PROP } from './filter.button.js';
 import { i as isString_1, d as defineCustomElement$a } from './revogr-edit2.js';
 import { t as toInteger_1 } from './toInteger.js';
-import { i as isGrouping, g as getGroupingName, P as PSEUDO_GROUP_ITEM_ID, G as GROUP_EXPANDED, a as getParsedGroup, b as isSameGroup, c as GROUP_DEPTH, d as GROUPING_ROW_TYPE, e as PSEUDO_GROUP_ITEM_VALUE, 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 { 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 { l as lodash, d as defineCustomElement$3 } from './revogr-temp-range2.js';
 import { d as debounce_1 } from './debounce.js';
@@ -1936,19 +1936,18 @@ class ExportFilePlugin extends BasePlugin {
 // provide collapse data
 function doCollapse(pIndex, source) {
   const model = source[pIndex];
-  const currentId = model[PSEUDO_GROUP_ITEM_ID];
+  const collapseValue = model[PSEUDO_GROUP_ITEM_VALUE];
   const trimmed = {};
   let i = pIndex + 1;
   const total = source.length;
   while (i < total) {
     const currentModel = source[i];
     if (isGrouping(currentModel)) {
-      if (currentId !== currentModel[PSEUDO_GROUP_ITEM_ID]) {
+      const currentValue = currentModel[PSEUDO_GROUP_ITEM_VALUE];
+      if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
         break;
       }
-      else {
-        currentModel[GROUP_EXPANDED] = false;
-      }
+      currentModel[GROUP_EXPANDED] = false;
     }
     trimmed[i++] = true;
   }
@@ -2188,7 +2187,7 @@ class GroupingRowPlugin extends BasePlugin {
      * sorting applied need to clear grouping and apply again
      * based on new results whole grouping order will changed
      */
-    this.addEventListener('afterSortingApply', () => this.doSourceUpdate());
+    this.addEventListener('afterSortingApply', () => this.doSourceUpdate(Object.assign({}, this.options)));
     /**
      * Apply logic for focus inside of grouping
      * We can't focus on grouping rows, navigation only inside of groups for now
@@ -2208,6 +2207,7 @@ class GroupingRowPlugin extends BasePlugin {
    * Initiated when need to reapply grouping
    */
   doSourceUpdate(options) {
+    var _a;
     if (!this.hasProps) {
       return;
     }
@@ -2220,11 +2220,9 @@ class GroupingRowPlugin extends BasePlugin {
      * Group again
      * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
      */
-    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, 
-    // filter
-    item => { var _a; return (_a = this.options) === null || _a === void 0 ? void 0 : _a.props.map(key => item[key]); }, Object.assign({ prevExpanded }, options));
+    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({ prevExpanded }, options));
     // setup source
-    this.providers.dataProvider.setData(sourceWithGroups, GROUPING_ROW_TYPE, { depth }, true);
+    this.providers.dataProvider.setData(sourceWithGroups, GROUPING_ROW_TYPE, { depth, customRenderer: options === null || options === void 0 ? void 0 : options.groupLabelTemplate }, true);
     this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes, oldNewIndexMap);
   }
   /**
@@ -2233,14 +2231,13 @@ class GroupingRowPlugin extends BasePlugin {
    * If source came from other plugin
    */
   onDataSet(data) {
+    var _a;
     if (!this.hasProps || !(data === null || data === void 0 ? void 0 : data.source) || !data.source.length) {
       return;
     }
     const source = data.source.filter(s => !isGrouping(s));
     const expanded = this.revogrid.grouping || {};
-    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, 
-    // filter
-    item => { var _a; return (_a = this.options) === null || _a === void 0 ? void 0 : _a.props.map(key => item[key]); }, Object.assign({}, (expanded || {})));
+    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({}, (expanded || {})));
     data.source = sourceWithGroups;
     this.providers.dataProvider.setGrouping({ depth });
     this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);

package/custom-element/revogr-data2.js

@@ -44,13 +44,17 @@ function expandEvent(e, model, virtualIndex) {
   e.target.dispatchEvent(event);
 }
 const GroupingRowRenderer = (props) => {
-  const { model, itemIndex, hasExpand } = props;
+  const { model, itemIndex, hasExpand, groupingCustomRenderer } = props;
   const name = model[PSEUDO_GROUP_ITEM];
   const expanded = model[GROUP_EXPANDED];
   const depth = parseInt(model[GROUP_DEPTH], 10) || 0;
   if (!hasExpand) {
     return h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }));
   }
+  if (groupingCustomRenderer) {
+    return (h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
+      h("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(h, { name, itemIndex, expanded, depth }))));
+  }
   return (h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
     h("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) },
       h("svg", { "aria-hidden": "true", style: { transform: `rotate(${!expanded ? -90 : 0}deg)` }, focusable: "false", viewBox: "0 0 448 512" },
@@ -88,11 +92,12 @@ const RevogrData = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const range = (_a = this.rowSelectionStore) === null || _a === void 0 ? void 0 : _a.get('range');
     const rowsEls = [];
     const depth = this.dataStore.get('groupingDepth');
+    const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');
     for (let rgRow of rows) {
       const dataRow = getSourceItem(this.dataStore, rgRow.itemIndex);
       /** grouping */
       if (isGrouping(dataRow)) {
-        rowsEls.push(h(GroupingRowRenderer, Object.assign({}, rgRow, { model: dataRow, hasExpand: this.columnService.hasGrouping })));
+        rowsEls.push(h(GroupingRowRenderer, Object.assign({}, rgRow, { model: dataRow, groupingCustomRenderer: groupingCustomRenderer, hasExpand: this.columnService.hasGrouping })));
         continue;
       }
       /** grouping end */

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

@@ -229,9 +229,9 @@ var isArguments_1 = isArguments;
  * _.isArray(_.noop);
  * // => false
  */
-var isArray$1 = Array.isArray;
+var isArray = Array.isArray;
 
-var isArray_1 = isArray$1;
+var isArray_1 = isArray;
 
 /**
  * This method returns `false`.
@@ -3627,6 +3627,7 @@ class DataStore {
       setStore(this.store, {
         groupingDepth: grouping.depth,
         groups: grouping.groups,
+        groupingCustomRenderer: grouping.customRenderer,
       });
     }
   }
@@ -5903,123 +5904,91 @@ const PSEUDO_GROUP_ITEM_ID = `${GRID_INTERNALS}-id`;
 const PSEUDO_GROUP_ITEM_VALUE = `${GRID_INTERNALS}-value`;
 const PSEUDO_GROUP_COLUMN = `${GRID_INTERNALS}-column`;
 const GROUP_EXPANDED = `${GRID_INTERNALS}-expanded`;
+const GROUP_ORIGINAL_INDEX = `${GRID_INTERNALS}-original-index`;
 const GROUP_EXPAND_BTN = `group-expand`;
 const GROUP_EXPAND_EVENT = `groupExpandClick`;
 const GROUPING_ROW_TYPE = 'rgRow';
 
-/**
- * Do actual grouping
- * @param array - items to group
- * @param f - function responsible for grouping, returns property to group by
- */
-function groupBy(array, f) {
-  const groupsOrder = [];
-  const itemsByGroup = {};
-  array.forEach((item, i) => {
-    // get grouping values
-    const groupKeys = JSON.stringify(f(item));
-    // new group identification
-    if (!itemsByGroup[groupKeys]) {
-      itemsByGroup[groupKeys] = new Map();
-      // create group parents
-      groupsOrder.push({
-        children: itemsByGroup[groupKeys],
-        id: groupKeys,
-      });
-    }
-    // save to group with previous index
-    itemsByGroup[groupKeys].set(i, item);
-  });
-  return groupsOrder;
-}
 /**
  * Gather data for grouping
  * @param array - flat data array
- * @param mapFunc - mapping function for stringify
+ * @param groupIds - ids of groups
  * @param expanded - potentially expanded items if present
  */
-function gatherGrouping(array, mapFunc, { prevExpanded, expandedAll }) {
-  // build groups
-  const groupsOrder = groupBy(array, mapFunc);
-  const itemsMirror = []; // grouped source
-  const pseudoGroupTest = {}; // check if group header exists
-  // item index in source
-  let itemIndex = 0;
-  // to save max group depth
-  let groupingDepth = 0;
+function gatherGrouping(array, groupIds, { prevExpanded, expandedAll }) {
+  const groupedItems = new Map();
+  array.forEach((item, originalIndex) => {
+    const groupLevelValues = groupIds.map((groupId) => item[groupId] || null);
+    const lastLevelValue = groupLevelValues.pop();
+    let currentGroupLevel = groupedItems;
+    groupLevelValues.forEach((value) => {
+      if (!currentGroupLevel.has(value)) {
+        currentGroupLevel.set(value, new Map());
+      }
+      currentGroupLevel = currentGroupLevel.get(value);
+    });
+    if (!currentGroupLevel.has(lastLevelValue)) {
+      currentGroupLevel.set(lastLevelValue, []);
+    }
+    item[GROUP_ORIGINAL_INDEX] = originalIndex;
+    const lastLevelItems = currentGroupLevel.get(lastLevelValue);
+    lastLevelItems.push(item);
+  });
+  let itemIndex = -1;
+  const groupingDepth = groupIds.length;
   // collapse all groups in the beginning
   const trimmed = {};
   // index mapping
   const oldNewIndexMap = {};
-  // go through groups
-  groupsOrder.forEach(group => {
-    const parseGroup = getParsedGroup(group.id);
-    // extra precaution and type safe guard
-    if (!parseGroup) {
-      return;
-    }
-    let depth = 0;
-    let skipTrim = !!expandedAll;
-    let isExpanded = skipTrim;
-    const children = [];
-    // add group headers
-    parseGroup.reduce((prevVal, groupValue) => {
-      prevVal.push(groupValue);
-      const newVal = prevVal.join(',');
-      // if header not added, add new header
-      if (!pseudoGroupTest[newVal]) {
-        isExpanded = expandedAll || (prevExpanded && prevExpanded[newVal]);
-        itemsMirror.push(getPseudoGroup(groupValue, newVal, depth, group.id, isExpanded));
-        // if not first level auto collapse
-        if (depth && !isExpanded && !skipTrim) {
-          // check if parent expanded, expand this layer too
-          const parent = prevVal.slice(0, prevVal.length - 1);
-          if (!(prevExpanded && parent.length && prevExpanded[parent.join(',')])) {
+  // check if group header exists
+  const pseudoGroupTest = {};
+  const sourceWithGroups = [];
+  function flattenGroupMaps(groupedValues, parentIds, isExpanded) {
+    const depth = parentIds.length;
+    groupedValues.forEach((innerGroupedValues, groupId) => {
+      const levelIds = [...parentIds, groupId];
+      const mergedIds = levelIds.join(',');
+      const isGroupExpanded = isExpanded && (!!expandedAll || !!(prevExpanded === null || prevExpanded === void 0 ? void 0 : prevExpanded[mergedIds]));
+      sourceWithGroups.push({
+        [PSEUDO_GROUP_ITEM]: groupId,
+        [GROUP_DEPTH]: depth,
+        [PSEUDO_GROUP_ITEM_ID]: JSON.stringify(levelIds),
+        [PSEUDO_GROUP_ITEM_VALUE]: mergedIds,
+        [GROUP_EXPANDED]: isGroupExpanded,
+      });
+      itemIndex += 1;
+      if (!isGroupExpanded && depth) {
+        trimmed[itemIndex] = true;
+      }
+      if (Array.isArray(innerGroupedValues)) {
+        innerGroupedValues.forEach((value) => {
+          itemIndex += 1;
+          if (!isGroupExpanded) {
             trimmed[itemIndex] = true;
           }
-        }
-        itemIndex++;
-        pseudoGroupTest[newVal] = children;
+          oldNewIndexMap[value[GROUP_ORIGINAL_INDEX]] = itemIndex;
+          const pseudoGroupTestIds = levelIds.map((_value, index) => levelIds.slice(0, index + 1).join(','));
+          pseudoGroupTestIds.forEach((pseudoGroupTestId) => {
+            if (!pseudoGroupTest[pseudoGroupTestId]) {
+              pseudoGroupTest[pseudoGroupTestId] = [];
+            }
+            pseudoGroupTest[pseudoGroupTestId].push(itemIndex);
+          });
+        });
+        sourceWithGroups.push(...innerGroupedValues);
       }
-      // calculate depth
-      depth++;
-      groupingDepth = depth;
-      return prevVal;
-    }, []);
-    // add regular items
-    group.children.forEach((item, oldIndex) => {
-      // hide items if group colapsed
-      if (!isExpanded && !skipTrim) {
-        // collapse rgRow
-        trimmed[itemIndex] = true;
+      else {
+        flattenGroupMaps(innerGroupedValues, levelIds, isGroupExpanded);
       }
-      // add items to new source
-      itemsMirror.push(item);
-      oldNewIndexMap[oldIndex] = itemIndex;
-      children.push(itemIndex);
-      itemIndex++;
     });
-  });
+  }
+  flattenGroupMaps(groupedItems, [], true);
   return {
-    // updates source mirror
-    sourceWithGroups: itemsMirror,
-    // largest depth for grouping
+    sourceWithGroups,
     depth: groupingDepth,
-    // used for expand/collapse grouping values
     trimmed,
-    // used for mapping old values to new
     oldNewIndexMap,
-    // used to get child items in group
-    childrenByGroup: pseudoGroupTest,
-  };
-}
-function getPseudoGroup(groupValue, value, depth, id, isExpanded = false) {
-  return {
-    [PSEUDO_GROUP_ITEM]: groupValue,
-    [GROUP_DEPTH]: depth,
-    [PSEUDO_GROUP_ITEM_ID]: id,
-    [PSEUDO_GROUP_ITEM_VALUE]: value,
-    [GROUP_EXPANDED]: isExpanded,
+    childrenByGroup: pseudoGroupTest, // used to get child items in group
   };
 }
 function getGroupingName(rgRow) {
@@ -6031,9 +6000,6 @@ function isGrouping(rgRow) {
 function isGroupingColumn(column) {
   return column && typeof column[PSEUDO_GROUP_COLUMN] !== 'undefined';
 }
-function isArray(data) {
-  return typeof data.push !== 'undefined';
-}
 function measureEqualDepth(groupA, groupB) {
   const ln = groupA.length;
   let i = 0;
@@ -6047,7 +6013,7 @@ function measureEqualDepth(groupA, groupB) {
 function getParsedGroup(id) {
   const parseGroup = JSON.parse(id);
   // extra precaution and type safe guard
-  if (!isArray(parseGroup)) {
+  if (!Array.isArray(parseGroup)) {
     return null;
   }
   return parseGroup;
@@ -6294,19 +6260,18 @@ class ExportFilePlugin extends BasePlugin {
 // provide collapse data
 function doCollapse(pIndex, source) {
   const model = source[pIndex];
-  const currentId = model[PSEUDO_GROUP_ITEM_ID];
+  const collapseValue = model[PSEUDO_GROUP_ITEM_VALUE];
   const trimmed = {};
   let i = pIndex + 1;
   const total = source.length;
   while (i < total) {
     const currentModel = source[i];
     if (isGrouping(currentModel)) {
-      if (currentId !== currentModel[PSEUDO_GROUP_ITEM_ID]) {
+      const currentValue = currentModel[PSEUDO_GROUP_ITEM_VALUE];
+      if (!currentValue.length || !currentValue.startsWith(collapseValue + ',')) {
         break;
       }
-      else {
-        currentModel[GROUP_EXPANDED] = false;
-      }
+      currentModel[GROUP_EXPANDED] = false;
     }
     trimmed[i++] = true;
   }
@@ -6546,7 +6511,7 @@ class GroupingRowPlugin extends BasePlugin {
      * sorting applied need to clear grouping and apply again
      * based on new results whole grouping order will changed
      */
-    this.addEventListener('afterSortingApply', () => this.doSourceUpdate());
+    this.addEventListener('afterSortingApply', () => this.doSourceUpdate(Object.assign({}, this.options)));
     /**
      * Apply logic for focus inside of grouping
      * We can't focus on grouping rows, navigation only inside of groups for now
@@ -6566,6 +6531,7 @@ class GroupingRowPlugin extends BasePlugin {
    * Initiated when need to reapply grouping
    */
   doSourceUpdate(options) {
+    var _a;
     if (!this.hasProps) {
       return;
     }
@@ -6578,11 +6544,9 @@ class GroupingRowPlugin extends BasePlugin {
      * Group again
      * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
      */
-    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, 
-    // filter
-    item => { var _a; return (_a = this.options) === null || _a === void 0 ? void 0 : _a.props.map(key => item[key]); }, Object.assign({ prevExpanded }, options));
+    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({ prevExpanded }, options));
     // setup source
-    this.providers.dataProvider.setData(sourceWithGroups, GROUPING_ROW_TYPE, { depth }, true);
+    this.providers.dataProvider.setData(sourceWithGroups, GROUPING_ROW_TYPE, { depth, customRenderer: options === null || options === void 0 ? void 0 : options.groupLabelTemplate }, true);
     this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes, oldNewIndexMap);
   }
   /**
@@ -6591,14 +6555,13 @@ class GroupingRowPlugin extends BasePlugin {
    * If source came from other plugin
    */
   onDataSet(data) {
+    var _a;
     if (!this.hasProps || !(data === null || data === void 0 ? void 0 : data.source) || !data.source.length) {
       return;
     }
     const source = data.source.filter(s => !isGrouping(s));
     const expanded = this.revogrid.grouping || {};
-    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, 
-    // filter
-    item => { var _a; return (_a = this.options) === null || _a === void 0 ? void 0 : _a.props.map(key => item[key]); }, Object.assign({}, (expanded || {})));
+    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({}, (expanded || {})));
     data.source = sourceWithGroups;
     this.providers.dataProvider.setGrouping({ depth });
     this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);
@@ -25724,13 +25687,17 @@ function expandEvent(e, model, virtualIndex) {
   e.target.dispatchEvent(event);
 }
 const GroupingRowRenderer = (props) => {
-  const { model, itemIndex, hasExpand } = props;
+  const { model, itemIndex, hasExpand, groupingCustomRenderer } = props;
   const name = model[PSEUDO_GROUP_ITEM];
   const expanded = model[GROUP_EXPANDED];
   const depth = parseInt(model[GROUP_DEPTH], 10) || 0;
   if (!hasExpand) {
     return index.h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }));
   }
+  if (groupingCustomRenderer) {
+    return (index.h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
+      index.h("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(index.h, { name, itemIndex, expanded, depth }))));
+  }
   return (index.h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
     index.h("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) },
       index.h("svg", { "aria-hidden": "true", style: { transform: `rotate(${!expanded ? -90 : 0}deg)` }, focusable: "false", viewBox: "0 0 448 512" },
@@ -25767,11 +25734,12 @@ const RevogrData = class {
     const range = (_a = this.rowSelectionStore) === null || _a === void 0 ? void 0 : _a.get('range');
     const rowsEls = [];
     const depth = this.dataStore.get('groupingDepth');
+    const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');
     for (let rgRow of rows) {
       const dataRow = getSourceItem(this.dataStore, rgRow.itemIndex);
       /** grouping */
       if (isGrouping(dataRow)) {
-        rowsEls.push(index.h(GroupingRowRenderer, Object.assign({}, rgRow, { model: dataRow, hasExpand: this.columnService.hasGrouping })));
+        rowsEls.push(index.h(GroupingRowRenderer, Object.assign({}, rgRow, { model: dataRow, groupingCustomRenderer: groupingCustomRenderer, hasExpand: this.columnService.hasGrouping })));
         continue;
       }
       /** grouping end */