Angular Data Grid Sorting Groups

By default, groups are sorted in ascending order. The Grid allows you to modify the default sort order or implement your custom sorting logic.

To configure the group order, set the dir property of the GroupDescriptor to either ascending or descending order.

Copy Codepublic group: GroupDescriptor[]= [{field: 'UnitPrice', dir: 'desc'}];

To sort groups by another field or implement custom sorting logic, refer to the custom group sorting section.

The following example demonstrates how to sort groups in descending order.

Custom Group Sorting

To sort groups based on a specific order, set the compare property of the GroupDescriptor to a custom callback.

Copy Codepublic group: GroupDescriptor[] = [
    {
        field: 'UnitPrice',
        compare: (a, b) =>  b.ProductID - a.ProductID,
    },
];

The returned value must be a number that indicates the relative order of the two elements:

• Negative if a < b.
• Positive if a > b.
• Zero if they are equal. NaN is treated as 0.

The following example demonstrates how to sort groups by the ProductID field while the data is grouped by the UnitPrice field.

Suggested Links

• Group Templates
• Overview of Data Query
• API Reference of the GridComponent
• API Index of the Grid