This sample shows grouping support in the FlexGrid. Most of the work is done by the CollectionView class used as a data source for the grid. To add grouping, add one or more GroupDescription objects to the CollectionView.groupDescriptions property, exactly as you would do in .NET, and ensure that the grid's showGroups property is set to true.
You can customize the text that is displayed in group header rows using the grid's groupHeaderFormat property. By default, this displays the name of the group, for example, Country, followed by the current group and the number of items in the group. Use the format property on each Column object to format aggregated data displayed in the group header for that column. Notice how we use the column's aggregate property to specify how to aggregate the data for each column.
This sample uses the WjFlexGrid, WjFlexGridColumn, and WjCollectionViewNavigator components for Angular 2.