igx-grid grouping implementation results in stack overflow when grouping a large dataset

[nkerr]

Description

I am trying to group-by one of the columns in my grid with a little over 1 million rows, and the grouping fails with a stack overflow:

• igniteui-angular version: 17.1.7
• browser: Chrome 131.0.6778.140 (Official Build) (64-bit)

Steps to reproduce

1. Render a grid with over 1 million rows
2. Attempt to group-by one of the columns

Result

• Grouping is not applied
• A stack overflow exception is logged

Uncaught RangeError: Maximum call stack size exceeded
    at IgxGrouping.groupDataRecursive (infragistics-igniteui-angular.mjs:876:30)
    at IgxGrouping.groupBy (infragistics-igniteui-angular.mjs:993:31)
    at DataUtil.group (infragistics-igniteui-angular.mjs:1099:25)
    at IgxGridGroupingPipe.transform (infragistics-igniteui-angular.mjs:68421:31)
    at pureFunctionVInternal (core.mjs:28109:66)
    at Module.ɵɵpipeBindV (core.mjs:28328:9)
    at IgxGridComponent_Template (infragistics-igniteui-angular.mjs:55:103)
    at executeTemplate (core.mjs:10766:9)
    at refreshView (core.mjs:12336:13)
    at detectChangesInView$1 (core.mjs:12560:9)

Expected result

• Grouping should be applied successfully without causing a stack overflow

Attachments

Attach a sample if available, and screenshots, if applicable.

[ChronosSF]

Hello @nkerr ,

The 17.1 branch of igniteui-angular is not in support for some time now. Could you please try this with a more recent version like 17.2.27?

[nitrousdigital]

Same problem with version 17.2.27:

[nitrousdigital]

FYI: The failure occurs during execution of the following line of code in groupDataRecursive:

metadata.push(...fullResult.metadata.slice(fullResult.metadata.length - group.length));

In my failing scenario, fullResult.metadata.length is 241003 and group.length is 241002