@revolist/revogrid 4.24.1 → 4.24.3

package/dist/types/plugins/groupingRow/grouping.row.types.d.ts

@@ -1,5 +1,5 @@
 import type { VNode } from '../../stencil-public-runtime';
-import type { HyperFunc, ColumnProp, DimensionRows, DataType, Providers, VirtualPositionItem, PositionItem, DimensionCols } from "../../types/index";
+import type { HyperFunc, ColumnProp, DimensionRows, DataType, Providers, VirtualPositionItem, PositionItem, DimensionCols, CellTemplateProp } from "../../types/index";
 import type { RowProps } from '../../components/data/row-renderer';
 import { GROUP_EXPAND_EVENT } from './grouping.const';
 /**
@@ -47,8 +47,38 @@ export interface GroupRowPros extends RowProps {
     hasExpand: boolean;
     providers: Providers;
     groupingCustomRenderer?: GroupLabelTemplateFunc | null;
+    groupingCellRenderer?: GroupCellTemplateFunc | null;
+    additionalData?: any;
 }
 export type GroupLabelTemplateFunc = (createElement: HyperFunc<VNode>, props: GroupTemplateProp & RowGroupingProps, ...args: any[]) => any;
+export interface GroupCellTemplateProp extends Omit<CellTemplateProp, 'colType'> {
+    /**
+     * Column viewport type that owns the cell.
+     */
+    colType: DimensionCols | 'rowHeaders';
+    /**
+     * Current virtual column position. Only columns rendered by the viewport are
+     * passed to the group cell template.
+     */
+    columnItem: VirtualPositionItem;
+    /**
+     * Current virtual row position.
+     */
+    rowItem: VirtualPositionItem;
+    /**
+     * Semantic information about the synthetic group row.
+     */
+    group: {
+        name: string;
+        depth: number;
+        expanded: boolean;
+        prop: ColumnProp;
+        isLabelColumn: boolean;
+        canExpand: boolean;
+        onExpand(event: MouseEvent): void;
+    };
+}
+export type GroupCellTemplateFunc = (createElement: HyperFunc<VNode>, props: GroupCellTemplateProp, additionalData?: any) => any;
 export type GroupingOptions = {
     /**
      * Column props to which grouping will be applied
@@ -63,6 +93,12 @@ export type GroupingOptions = {
      * Custom group label template
      */
     groupLabelTemplate?: GroupLabelTemplateFunc;
+    /**
+     * Custom template for cells in synthetic group rows.
+     * When provided, group rows render only the columns in the current horizontal
+     * viewport and this template takes precedence over `groupLabelTemplate`.
+     */
+    groupCellTemplate?: GroupCellTemplateFunc;
 } & ExpandedOptions;
 export type BeforeSourceSetEvent = {
     type: DimensionRows;
@@ -85,10 +121,20 @@ export type ExpandedOptions = {
      * Custom group label value parser
      */
     getGroupValue?(item: DataType, prop: string | number): any;
+    /**
+     * Replacement group value for `null` and `undefined` keys.
+     * Used by the default group value resolver.
+     * @default ''
+     */
+    emptyGroupValue?: any;
     /**
      * Custom group label template
      */
     groupLabelTemplate?: GroupLabelTemplateFunc;
+    /**
+     * Custom template for virtualized cells in synthetic group rows.
+     */
+    groupCellTemplate?: GroupCellTemplateFunc;
 };
 declare global {
     /**

package/dist/types/plugins/groupingRow/grouping.service.d.ts

@@ -14,7 +14,7 @@ export declare function getExpanded(model?: DataType): any;
  * @param columnProps - ids of groups
  * @param expanded - potentially expanded items if present
  */
-export declare function gatherGrouping(array: DataType[], columnProps: ColumnProp[], { prevExpanded, expandedAll, getGroupValue, }: ExpandedOptions): {
+export declare function gatherGrouping(array: DataType[], columnProps: ColumnProp[], { prevExpanded, expandedAll, getGroupValue, emptyGroupValue, }: ExpandedOptions): {
     sourceWithGroups: DataType[];
     depth: number;
     trimmed: Record<number, boolean>;

package/dist/types/services/data.provider.d.ts

@@ -1,6 +1,6 @@
 import { DataStore, Groups, Trimmed } from "../store/index";
 import DimensionProvider from './dimension.provider';
-import type { GroupLabelTemplateFunc } from '../plugins/groupingRow/grouping.row.types';
+import type { GroupCellTemplateFunc, GroupLabelTemplateFunc } from '../plugins/groupingRow/grouping.row.types';
 import type { DataLookup, DimensionRows, DataType, BeforeSaveDataDetails } from "../types/index";
 export type RowDataSources = {
     [T in DimensionRows]: DataStore<DataType, DimensionRows>;
@@ -32,6 +32,7 @@ export declare class DataProvider {
         depth: number;
         groups?: Groups;
         customRenderer?: GroupLabelTemplateFunc;
+        cellRenderer?: GroupCellTemplateFunc;
     }, silent?: boolean, preserveTrimmed?: boolean): DataType[];
     getModel(virtualIndex: number, type?: DimensionRows): DataType;
     changeOrder({ rowType, from, to }: {
@@ -43,8 +44,10 @@ export declare class DataProvider {
     setRangeData(data: DataLookup, type: DimensionRows): void;
     refresh(type?: DimensionRows | 'all'): void;
     refreshItems(type?: DimensionRows): void;
-    setGrouping({ depth }: {
+    setGrouping({ depth, customRenderer, cellRenderer, }: {
         depth: number;
+        customRenderer?: GroupLabelTemplateFunc;
+        cellRenderer?: GroupCellTemplateFunc;
     }, type?: DimensionRows): void;
     setTrimmed(trimmed: Trimmed, type?: DimensionRows): void;
 }

package/dist/types/store/dataSource/data.store.d.ts

@@ -1,6 +1,6 @@
 import { Trimmed } from './trimmed.plugin';
 import { Observable } from '../../utils';
-import type { GroupLabelTemplateFunc } from '../../plugins/groupingRow/grouping.row.types';
+import type { GroupCellTemplateFunc, GroupLabelTemplateFunc } from '../../plugins/groupingRow/grouping.row.types';
 import type { DimensionRows, DimensionCols, ColumnProperties, ColumnGrouping, ColumnRegular, DataType, DataSourceState, ColumnProp } from "../../types/index";
 export interface Group extends ColumnProperties {
     name: string;
@@ -12,6 +12,7 @@ export type GDataType = DataType | ColumnRegular;
 export type GDimension = DimensionRows | DimensionCols;
 export type DSourceState<T1 extends GDataType, T2 extends GDimension> = DataSourceState<T1, T2> & {
     groupingCustomRenderer?: GroupLabelTemplateFunc | null;
+    groupingCellRenderer?: GroupCellTemplateFunc | null;
 };
 /**
  * Data store
@@ -32,6 +33,7 @@ export declare class DataStore<T extends GDataType, ST extends GDimension> {
         depth: number;
         groups?: Groups;
         customRenderer?: GroupLabelTemplateFunc;
+        cellRenderer?: GroupCellTemplateFunc;
     }, silent?: boolean, preserveTrimmed?: boolean): void;
     addTrimmed(some: Partial<Trimmed>): void;
     setSourceData(items: Record<number, any>, mutate?: boolean): void;

package/hydrate/index.js

@@ -7495,6 +7495,10 @@ class FilterPanel {
          * If true, closes the filter panel when clicking outside
          */
         this.closeOnOutsideClick = true;
+        /**
+         * Whether the filter panel allows the same operator more than once per column.
+         */
+        this.allowDuplicateOperators = true;
         this.debouncedApplyFilter = debounce$1(() => {
             this.filterChange.emit(this.filterItems);
         }, 400);
@@ -7808,11 +7812,15 @@ class FilterPanel {
         }
     }
     renderSelectOptions(type, isDefaultTypeRemoved = false) {
+        var _a;
         if (!this.changes) {
             return;
         }
         const options = [];
         const prop = this.changes.prop;
+        if (prop === undefined) {
+            return;
+        }
         const hidden = new Set();
         Object.keys(this.filterItems).forEach((prop) => {
             const values = this.filterItems[prop];
@@ -7822,6 +7830,9 @@ class FilterPanel {
                 }
             });
         });
+        const selectedTypes = new Set(((_a = this.filterItems[prop]) !== null && _a !== void 0 ? _a : [])
+            .filter(filter => !filter.hidden)
+            .map(filter => filter.type));
         if (!isDefaultTypeRemoved) {
             const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
             options.push(hAsync("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0
@@ -7829,7 +7840,9 @@ class FilterPanel {
                 : this.filterNames[defaultType]));
         }
         for (let gIndex in this.changes.filterTypes) {
-            const group = this.changes.filterTypes[gIndex].filter(k => !hidden.has(k));
+            const group = this.changes.filterTypes[gIndex].filter(k => !hidden.has(k) && (this.allowDuplicateOperators ||
+                !selectedTypes.has(k) ||
+                (isDefaultTypeRemoved && type === k)));
             if (group.length) {
                 options.push(...group.map(k => (hAsync("option", { value: k, selected: type === k }, this.filterNames[k]))));
                 options.push(hAsync("option", { disabled: true }));
@@ -7924,7 +7937,7 @@ class FilterPanel {
             top: `${(_d = (_c = this.changes) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0}px`,
         };
         const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
-        return (hAsync(Host, { key: '2a19b35adb56fb7d23385fffebc768838edee162' }, hAsync("dialog", { key: '94386d7cbc4bd9c631f72928938b1d1550a3de82', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+        return (hAsync(Host, { key: '8859c452eb08838f65f18efecbdde7f65fda2b49' }, hAsync("dialog", { key: 'f603067ff0986a9f344cbbf816388d2bbac198bb', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
             } }, this.changes && [
@@ -7933,7 +7946,7 @@ class FilterPanel {
             ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
                 hAsync("label", { key: "filter-title" }, capts.title),
                 hAsync("div", { key: "filter-holder", class: "filter-holder" }, this.getFilterItemsList()),
-                hAsync("div", { key: "add-filter", class: "add-filter" }, hAsync("select", { key: '4f7354e39d8e5cf9ae7b735290eff18d105ab87e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+                hAsync("div", { key: "add-filter", class: "add-filter" }, hAsync("select", { key: '2ec0a66918edf91bdde3962b6ec84c89f6f1c8f1', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
             ],
             hAsync("slot", { key: "default-slot" }),
             ((_j = (_h = this.changes).extraBottomContent) === null || _j === void 0 ? void 0 : _j.call(_h, this.changes)) || '',
@@ -7958,6 +7971,7 @@ class FilterPanel {
             "filterCaptions": [16],
             "disableDynamicFiltering": [4, "disable-dynamic-filtering"],
             "closeOnOutsideClick": [4, "close-on-outside-click"],
+            "allowDuplicateOperators": [4, "allow-duplicate-operators"],
             "isFilterIdSet": [32],
             "filterId": [32],
             "currentFilterId": [32],
@@ -11556,7 +11570,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$1(store));
     }
@@ -11596,6 +11610,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,
             });
         }
     }
@@ -12864,8 +12879,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;
@@ -12971,13 +12987,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 => {
@@ -15006,8 +15024,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];
@@ -15861,13 +15883,14 @@ class FilterPlugin extends BasePlugin {
         this.filterNameIndexByType = Object.assign({}, filterNames);
         this.filterFunctionsIndexedByType = Object.assign({}, filterCoreFunctionsIndexedByType);
         this.filterProp = FILTER_PROP;
+        this.allowDuplicateOperators = true;
         if (config) {
             this.initConfig(config);
         }
         const existingNodes = this.revogrid.registerVNode.filter(n => typeof n === 'object' && n.$tag$ !== FILTE_PANEL);
         this.revogrid.registerVNode = [
             ...existingNodes,
-            hAsync("revogr-filter-panel", { filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, closeOnOutsideClick: config === null || config === void 0 ? void 0 : config.closeFilterPanelOnOutsideClick, ref: e => (this.pop = e) }, ' ', this.extraContent()),
+            hAsync("revogr-filter-panel", { filterNames: this.filterNameIndexByType, filterEntities: this.filterFunctionsIndexedByType, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), onResetChange: e => this.onFilterReset(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, closeOnOutsideClick: config === null || config === void 0 ? void 0 : config.closeFilterPanelOnOutsideClick, allowDuplicateOperators: this.allowDuplicateOperators, ref: e => (this.pop = e) }, ' ', this.extraContent()),
         ];
         const aftersourceset = async () => {
             const filterCollectionProps = Object.keys(this.filterCollection);
@@ -15894,15 +15917,24 @@ class FilterPlugin extends BasePlugin {
         };
         this.addEventListener('headerclick', e => this.headerclick(e));
         this.addEventListener(FILTER_CONFIG_CHANGED_EVENT, ({ detail }) => {
-            if (!detail ||
-                (typeof detail === 'object' &&
-                    (!detail.multiFilterItems ||
-                        !Object.keys(detail.multiFilterItems).length))) {
+            if (!detail) {
                 this.clearFiltering();
                 return;
             }
             if (typeof detail === 'object') {
-                this.initConfig(detail);
+                const detailKeys = Object.keys(detail);
+                const preserveCurrentFilters = !detailKeys.includes('multiFilterItems') &&
+                    detailKeys.includes('allowDuplicateOperators');
+                this.initConfig(preserveCurrentFilters
+                    ? Object.assign(Object.assign({}, detail), { multiFilterItems: this.multiFilterItems }) : detail);
+                if (!detail.multiFilterItems || !Object.keys(detail.multiFilterItems).length) {
+                    if (preserveCurrentFilters) {
+                        aftersourceset();
+                        return;
+                    }
+                    this.clearFiltering();
+                    return;
+                }
             }
             aftersourceset();
         });
@@ -15916,6 +15948,11 @@ class FilterPlugin extends BasePlugin {
         return null;
     }
     initConfig(config) {
+        var _a;
+        this.allowDuplicateOperators = (_a = config.allowDuplicateOperators) !== null && _a !== void 0 ? _a : true;
+        if (this.pop) {
+            this.pop.allowDuplicateOperators = this.allowDuplicateOperators;
+        }
         if (config.multiFilterItems) {
             this.multiFilterItems = Object.assign({}, config.multiFilterItems);
         }
@@ -17310,8 +17347,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 = 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 (hAsync("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(hAsync, templateProps, additionalData)));
+    });
+}
 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;
@@ -17320,6 +17407,9 @@ const GroupingRowRenderer = (props) => {
         depth,
         expanded,
     };
+    if (groupingCellRenderer) {
+        return (hAsync(RowRenderer, Object.assign({ index: props.index, size: props.size, start: props.start }, groupRowAttrs), renderGroupCells(props, { name, expanded, depth })));
+    }
     if (groupingCustomRenderer) {
         return (hAsync(RowRenderer, Object.assign({}, props, groupRowAttrs), hAsync("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(hAsync, Object.assign(Object.assign({}, props), { colType: props.providers.colType, name,
             expanded,
@@ -17327,7 +17417,7 @@ const GroupingRowRenderer = (props) => {
     }
     return (hAsync(RowRenderer, Object.assign({}, props, groupRowAttrs), hasExpand && [
         hAsync("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
-        name,
+        String(name),
     ]));
 };
 const expandSvgIconVNode = (expanded = false) => {
@@ -17446,7 +17536,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
@@ -17458,10 +17548,11 @@ 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);
     }
     /**
@@ -17470,17 +17561,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 } = 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);
     }
     /**
@@ -20784,6 +20879,7 @@ 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;
@@ -20792,6 +20888,7 @@ 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(hAsync(GroupingRowRenderer, Object.assign({}, gmodel)));