How to sort specific field members based on another field in Angular Pivot Table?

This article explains how to sort specific field members based on another field in the Angular Pivot Table.

Sort specific field members based on another field in Pivot Table

When working with a pivot table, you may want to sort specific field members based on the values of another field in the data source that is not bound in the report. There isn’t a direct option to accomplish this within the pivot table. However, you can achieve this through a workaround by manipulating the data source during the load event and modifying the sortSettings property.

Here is a code example that shows how to sort specific field members based on other field values in a pivot table:

[app.component.html]

<ejs-pivotview #pivotview id="PivotView" (load)="onLoad($event)"></ejs-pivotview>

[app.component.ts]

import { PivotViewAllModule, LoadEventArgs } from '@syncfusion/ej2-angular-pivotview';

@Component({
    imports: [PivotViewAllModule], 
})

export class AppComponent {
    public dataSourceSettings: IDataOptions;


    onLoad(args: LoadEventArgs): void {
        (args.dataSourceSettings.dataSource as any).sort((a, b) => {
        // Here, we sort the data source based on "Quantity" field values
          return a.Quantity - b.Quantity; 
        });
    }

    ngOnInit(): void {

        this.dataSourceSettings = {
	    // Here, we sort the product field members
            sortSettings: [{ name: 'Products', order: 'None' }]
        };
    }
}

In the above code example, we used the load event to sort the data source based on the values in the “Quantity” field. This field is not bound in the report but is present in the data source. Following this, we set the sort order for the “Products” field to None by using the sortSettings property. This allows the members of this field to be sorted based on the values in the “Quantity” field.

The following screenshot, which portrays the difference between before and after sort the “Products” field members,

Screenshot

Before sort the field members

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

Conclusion

I hope you enjoyed learning how to sort specific field members based on another field value in 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!