How to sort the field members in a case-insensitive manner within an Angular Pivot Table?

Introduction

By default, field members (aka headers) are sorted based on ASCII values in an Angular Pivot Table. This means that when sorting is applied in ascending order, capital letters (A-Z) are sorted before lowercase letters (a-z), and vice versa for descending order. This default behavior might not be suitable for all use cases, especially when you prefer case-insensitive sorting. This article demonstrates how to implement this functionality by overriding the default ASCII value-based sorting in the pivot table.

Sorting in a case-insensitive manner through the onHeadersSort event.

To achieve case-insensitive sorting, you can utilize the onHeaderSort event of the pivot table. This event is triggered before the sorting is performed, allowing you to customize the default sorting behavior based on your requirements. Below is an example that demonstrates how to achieve case-insensitive sorting:

[app.component.html]

<ejs-pivotview #pivotview id='PivotView' (onHeadersSort)="onHeaderSort($event)" showGroupingBar='true' showFieldList='true' >
</ejs-pivotview>

[app.component.ts]

import { PivotView } from '@syncfusion/ej2-pivotview';

export class AppComponent {
    public pivotObj: PivotView;

    @ViewChild('pivotview')
    public pivotObj: PivotView;

    onHeaderSort(args: any) {
      var customSortedMembers;
      if(args.sortOrder == "Ascending") {
        // Case-insensitive sorting for the specified field in ascending order.
        customSortedMembers = args.members.slice().sort(function (a, b) {
          return a.toLowerCase().localeCompare(b.toLowerCase());
        });
      } else if(args.sortOrder == "Descending") {
        // Case-insensitive sorting for the specified field in descending order.
        customSortedMembers = args.members.slice().sort(function (b, a) {
          return a.toLowerCase().localeCompare(b.toLowerCase());
        });
      } else if(args.sortOrder == "None") {
        // Retains the original order (useful when resetting the sort order).
        customSortedMembers = args.members;
      }
      // Assign the custom sorted members back to the args object.
      args.members = customSortedMembers;
      // Set IsOrderChanged to true to apply the custom sort order.
      args.IsOrderChanged = true;
    }

Here’s a breakdown of how the code works:

1. First, within the onHeaderSort, we check the current sort order by using the args.sortOrder property.
2. If the sorting order is set to ascending, we create a shallow copy of the args.members array by using JavaScript’s slice() method to prevent modifying the original dataset.
3. Following this, we perform case-insensitive sorting for the specified field using the sort method. Inside this method, we convert all the member names to lowercase using the toLowerCase() method and then compare them using the localeCompare() method. This approach ensures that the field members are sorted in ascending order without considering case sensitivity.
4. If the sorting order is set to descending, a similar process is carried out but in reverse order to achieve a descending sort. When the sortOrder is None, the original order of members is retained without any changes.
5. Finally, the sorted members are assigned back to args.members, and args.IsOrderChanged is set to true to indicate that the order has been customized. This action ensures that the pivot table is displayed in the customized sorting order.

The following screenshots portray the difference between before and after implementing the above workaround solution:

screenshots

Before implementing the workaround solution,

After implementing the workaround solution,

For a practical demonstration, refer to the sample of stackblitz.

Conclusion

By overriding the default ASCII value-based sorting behavior with a custom case-insensitive sorting logic, you can achieve a more intuitive sorting order in an Angular Pivot Table.

You can refer to our Angular Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!