Search results

Value sorting

Value sorting allows you to sort individual column based on it’s values either in ascending or descending order. It can been enabled by setting the enableValueSorting property to true. You can sort the column values by clicking the column header.

Value sorting can be configured using the valueSortSettings option through code behind. The settings required to sort value fields at initial rendering are:

  • headerText: It allows to set the column header names with delimiters, that is used for value sorting.
  • headerDelimiter: It allows to set the delimiters string to separate the given header text.
  • sortOrder: It allows to set the sort direction of the value field.
Source
Preview
index.tsx
index.jsx
import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
    columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
    dataSource: pivotData as IDataSet[],
    expandAll: false,
    valueSortSettings: {
      headerText: 'FY 2015##Sold Amount',
      headerDelimiter: '##',
      sortOrder: 'Descending'
    },
    filters: [],
    drilledMembers: [{ name: 'Country', items: ['France'] }],
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    rows: [{ name: 'Country' }, { name: 'Products' }],
    values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
  }
  public pivotObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} enableValueSorting={true} dataSourceSettings={this.dataSourceSettings}></PivotViewComponent>
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));
import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            dataSource: pivotData,
            expandAll: false,
            valueSortSettings: {
                headerText: 'FY 2015##Sold Amount',
                headerDelimiter: '##',
                sortOrder: 'Descending'
            },
            filters: [],
            drilledMembers: [{ name: 'Country', items: ['France'] }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} enableValueSorting={true} dataSourceSettings={this.dataSourceSettings}></PivotViewComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

See Also