How to sort drill through grid columns in Pivot Table

This article explains how to sort drill-through grid columns in the Vue pivot table.

Sort drill-through grid columns in pivot table

In certain scenarios, you might want to sort the columns in the drill-through dialog for improved data presentation or analysis. This can be achieved by using the beginDrillThrough event. This event is triggered before the drill-through dialog is rendered, allowing you to customize the settings of the drill through grid columns.

Note: In order to use the beginDrillThrough event, it is important to set the allowDrillThrough property to true.

Here is a code snippet that guides how to sort drill through grid columns in a pivot table.

[App.Vue]

<template>
    <ejs-pivotview id="pivotview" :beginDrillThrough="beginDrillThrough" :allowDrillThrough="allowDrillThrough">
	</ejs-pivotview>
</template>

<script lang="ts">
import { PivotViewComponent} from "@syncfusion/ej2-vue-pivotview";

export default {
  components: {
    'ejs-pivotview': PivotViewComponent
  },
  data: () => {
    return {
        allowDrillThrough: true,
    };
  },
  methods: {
      beginDrillThrough: function(args){
          args.gridObj.allowSorting = true;
          args.gridObj.sortSettings.columns = [{ field: 'Amount', direction: 'Descending' }] 
     }
  }
}
</script>

In the example given above, the gridObj.allowSorting property is set to true, which enables sorting in the pivot table. The gridObj.sortSettings.columns property is then specified with an array of objects that define the field to be sorted and the direction of sorting. In this case, the Amount field is set to be sorted in descending order.

The following screenshot portrays the results of the code snippet mentioned above.

Screenshot

For a practical demonstration, refer to the sample of stackblitz

Conclusion:

I hope you enjoyed learning how to sort drill through grid columns in Vue pivot table.

You can also refer to our Vue 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 Vue Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from 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!