Value sorting in React Pivot Table

10 Aug 20264 minutes to read

Value sorting allows you to sort an individual column based on its values either in ascending or descending order. It can be enabled by setting the enableValueSorting property to true (default false). You can sort the column values at runtime by clicking the column header, or configure the sort order at initial render through valueSortSettings.

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

  • headerText: Sets the column header names (delimiter-separated) used to identify which column to sort.
  • headerDelimiter: Sets the delimiter string that separates the levels in headerText. Defaults to '.'.
  • sortOrder: Sets the sort direction. Accepts 'Ascending' or 'Descending'.
import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import { pivotData } from './datasource';
function App() {
    let 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' }]
    };
    let pivotObj;
    return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} enableValueSorting={true} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
};
export default App;
import { IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import * as React from 'react';
import { pivotData } from './datasource';

function App() {

  let dataSourceSettings: DataSourceSettingsModel = {
    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' }]
  }
  let pivotObj: PivotViewComponent;

  return (<PivotViewComponent  ref={ (d: PivotViewComponent) => pivotObj = d } id='PivotView' height={350} enableValueSorting={true} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
};

export default App;

See Also