Search results


Sorting allows you to order the field header in rows and columns either in ascending or descending. Sorting can been enabled by setting the enableSorting property to true.

By default, field headers in rows and columns are in ascending order.

Sorting through UI

Sorting can also be performed through UI option available in grouping bar and field list at run time.

Sorting through code

Sorting can be configured using the sortSettings option through code behind, during initial rendering. The settings required to sort are:

  • name: It allows to set the field name.
  • order: It allows to set the sort direction of the respective field.
import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource.ts';

  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings width=width></ejs-pivotview>`
export class AppComponent implements OnInit {
    public width: string;
    public dataSourceSettings: IDataOptions;

    ngOnInit(): void {

        this.width = "100%";
        this.dataSourceSettings = {
            dataSource: Pivot_Data,
            expandAll: true,
            enableSorting: true,
            sortSettings: [{ name: 'Year', order: 'Descending' }],
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            filters: [],
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';

 * Module
    imports: [
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }

See Also