Search results

Sorting in Vue Pivot Grid component

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.
    <div id="app">
        <ejs-pivotview :height="height" :dataSourceSettings="dataSourceSettings"> </ejs-pivotview>

import Vue from "vue";
import { PivotViewPlugin } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './datasource.js';


export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        enableSorting: true,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        sortSettings: [{ name: 'Country', 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' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
      height: 350
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";

{% endraw %}

See Also