Sorting in Vue PivotView component
13 Oct 202524 minutes to read
To quickly learn how to sort data in the Vue Pivot Table, watch this video:
Member Sorting
Allows to order field members in rows and columns either in ascending or descending order. By default, field members in rows and columns are in ascending order.
Member sorting can be enabled by setting theenableSorting property indataSourceSettings totrue. After enabling this API, click the sort icon besides each field in row or column axis, available in field list or grouping bar UI for re-arranging members either in ascending or descending order.
By default the
enableSortingproperty indataSourceSettingsset astrue. If we set it asfalse, then the field members arrange in pivot table as its data source order. And, the sort icons in grouping bar and field list buttons will be removed.
Member sorting can also be configured using thesortSettings 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 either to ascending or descending of the respective field.
By default the
orderproperty in thesortSettingsset asAscending. Meanwhile, we can arrange the field members as its order in data source by setting it asNone where the sort icons in grouping bar and field list buttons for the corresponding field will be removed.
<template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":showGroupingBar="showGroupingBar"></ejs-pivotview></div></template><scriptsetup>import{provide}from"vue";import{PivotViewComponentasEjsPivotview,GroupingBar}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';constdataSourceSettings={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:[]};constheight=350;constshowGroupingBar=true;provide('pivotview',[GroupingBar]);</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":showGroupingBar="showGroupingBar"></ejs-pivotview></div></template><script>import{PivotViewComponent,GroupingBar}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},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,showGroupingBar:true}},provide:{pivotview:[GroupingBar]}}</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style>Alphanumeric Sorting
Usually string sorting is applied to field members even if it starts with numbers. But this kind of field members can also be sorted on the basis of numbers that are placed at the beginning of the member name. This can be achieved by setting thedataType property asnumber to the desired field.
<template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":showGroupingBar="showGroupingBar"></ejs-pivotview></div></template><scriptsetup>import{provide}from"vue";import{PivotViewComponentasEjsPivotview,GroupingBar}from"@syncfusion/ej2-vue-pivotview";import{alphanumeric_data}from'./alphanumeric_data.js';constdataSourceSettings={dataSource:alphanumeric_data,rows:[{name:'ProductID',dataType:'number'}],columns:[{name:'Country'}],values:[{name:'Sold',caption:'Units Sold'},{name:'Amount',caption:'Sold Amount'}],formatSettings:[{name:'Amount',format:'C0'}],filters:[]};constheight=350;constshowGroupingBar=true;provide('pivotview',[GroupingBar]);</script><style>@import"@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":showGroupingBar="showGroupingBar"></ejs-pivotview></div></template><script>import{PivotViewComponent,GroupingBar}from"@syncfusion/ej2-vue-pivotview";import{alphanumeric_data}from'./alphanumeric_data.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},data(){return{dataSourceSettings:{dataSource:alphanumeric_data,rows:[{name:'ProductID',dataType:'number'}],columns:[{name:'Country'}],values:[{name:'Sold',caption:'Units Sold'},{name:'Amount',caption:'Sold Amount'}],formatSettings:[{name:'Amount',format:'C0'}],filters:[]},height:350,showGroupingBar:true}},provide:{pivotview:[GroupingBar]}}</script><style>@import"@syncfusion/ej2-vue-pivotview/styles/material.css";</style>Custom Sorting
Allows to sort field headers (aka, members) in rows and columns based on user-defined order. This can be configured mainly using themembersOrder in thesortSettings through code behind, during initial rendering. The other settings required to sort are:
name: It allows to set the field name.membersOrder: It holds an array of headers in the order specified by the user.order: It allows to specify whether the array of headers should be sorted ascending or descending.
<template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":showGroupingBar="showGroupingBar"></ejs-pivotview></div></template><scriptsetup>import{provide}from"vue";import{PivotViewComponentasEjsPivotview,GroupingBar}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';constdataSourceSettings={dataSource:pivotData,expandAll:false,enableSorting:true,sortSettings:[{name:'Country',order:'Ascending',membersOrder:['United Kingdom','France']},{name:'Year',order:'Descending',membersOrder:['FY 2015','FY 2017']}],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:[]};constheight=350;constshowGroupingBar=true;provide('pivotview',[GroupingBar]);</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":showGroupingBar="showGroupingBar"></ejs-pivotview></div></template><script>import{PivotViewComponent,GroupingBar}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},data(){return{dataSourceSettings:{dataSource:pivotData,expandAll:false,enableSorting:true,sortSettings:[{name:'Country',order:'Ascending',membersOrder:['United Kingdom','France']},{name:'Year',order:'Descending',membersOrder:['FY 2015','FY 2017']}],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:[]},height:350,showGroupingBar:true}},provide:{pivotview:[GroupingBar]}}</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style>Value Sorting
Allows to sort individual value field and its aggregated values either in row or column axis in both ascending and descending order. It can been enabled by setting theenableValueSorting property in pivot table totrue. On enabling, end user can sort the values by directly clicking the value field header positioned either in row or column axis of the pivot table component.
The value sorting can also be configured using thevalueSortSettings option through code behind. The settings required to sort value fields are:
headerText: It allows to set the header names with delimiters, that is used for value sorting. The header names are arranged from Level 1 to Level N, down the hierarchy with a delimiter for better specification.headerDelimiter: It allows to set the delimiters string to separate the header text between levels.sortOrder: It allows to set the sort direction of the value field.
Value fields are set to the column axis by default. In such cases, the value sorting applied will have an effect on the column alone. You need to place the value fields in the row axis to do so in row wise. For more information, please
refer here.
<template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":enableValueSorting="enableValueSorting"></ejs-pivotview></div></template><scriptsetup>import{PivotViewComponentasEjsPivotview}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';constdataSourceSettings={dataSource:pivotData,expandAll:false,valueSortSettings:{headerText:'FY 2015##Sold Amount',headerDelimiter:'##',sortOrder:'Descending'},drilledMembers:[{name:'Country',items:['France']}],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:[]};constheight=350;constenableValueSorting=true;</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":enableValueSorting="enableValueSorting"></ejs-pivotview></div></template><script>import{PivotViewComponent}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},data(){return{dataSourceSettings:{dataSource:pivotData,expandAll:false,valueSortSettings:{headerText:'FY 2015##Sold Amount',headerDelimiter:'##',sortOrder:'Descending'},drilledMembers:[{name:'Country',items:['France']}],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,enableValueSorting:true}}}</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style>Multiple Axis Sorting
Multiple axis sorting allows simultaneous sorting of value fields in both row and column axes for more flexible and precise data analysis. Apply this functionality using the following settings invalueSortSettings:
columnHeaderText: Specifies the column header hierarchy for value sorting. Header levels are defined from Level 1 to N using a delimiter for clarity.headerDelimiter: It allows to set the delimiters string to separate the header text between levels.columnSortOrder: Determines the sorting direction for the specified column header.rowHeaderText: Defines the specific row header for which the value sorting should be applied.rowSortOrder: Determines the sorting direction for the specified row header.
Note: This feature is applicable only to relational data sources and operates exclusively with client-side engine.
<template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":enableValueSorting="enableValueSorting"></ejs-pivotview></div></template><scriptsetup>import{PivotViewComponentasEjsPivotview}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';constdataSourceSettings={dataSource:pivotData,expandAll:false,valueSortSettings:{columnHeaderText:'FY 2015##Sold Amount',headerDelimiter:'##',columnSortOrder:'Descending',rowHeaderText:'France',rowSortOrder:'Ascending'},drilledMembers:[{name:'Country',items:['France']}],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:[]};constheight=350;constenableValueSorting=true;</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:height="height":dataSourceSettings="dataSourceSettings":enableValueSorting="enableValueSorting"></ejs-pivotview></div></template><script>import{PivotViewComponent}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},data(){return{dataSourceSettings:{dataSource:pivotData,expandAll:false,valueSortSettings:{columnHeaderText:'FY 2015##Sold Amount',headerDelimiter:'##',columnSortOrder:'Descending',rowHeaderText:'France',rowSortOrder:'Ascending'},drilledMembers:[{name:'Country',items:['France']}],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,enableValueSorting:true}}}</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style>Event
OnHeadersSort
When sorting is applied, the eventonHeadersSort triggers every time while rendering each row and column header cell. This allows the user to re-arrange the order in which the pivot table’s headers appear. It has the following parameters:
fieldName: It holds the field name where the sort settings applied.sortOrder: It holds the current sort order of the field.members: It holds the sorted headers according to the specified sort order.levelName: It holds the specific field’s unique level name.Note: This option is applicable only for OLAP data.isOrderChanged: By setting this boolean property to true, it allows to display the modified members order.
<template><divid="app"><ejs-pivotview:dataSourceSettings="dataSourceSettings":height="height":showGroupingBar="showGroupingBar":onHeadersSort="onHeadersSort"></ejs-pivotview></div></template><scriptsetup>import{provide}from"vue";import{PivotViewComponentasEjsPivotview,GroupingBar}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';constdataSourceSettings={dataSource:pivotData,expandAll:false,enableSorting:true,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:[]};constheight=350;constshowGroupingBar=true;provide('pivotview',[GroupingBar]);constonHeadersSort=(args)=>{if(args.fieldName=='Country'){args.members=['United Kingdom','Germany'];args.IsOrderChanged=true;}if(args.fieldName=='Year'){args.members=['FY 2017','FY 2015'];args.IsOrderChanged=true;}};</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:dataSourceSettings="dataSourceSettings":height="height":showGroupingBar="showGroupingBar":onHeadersSort="onHeadersSort"></ejs-pivotview></div></template><script>import{PivotViewComponent,GroupingBar}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},data(){return{dataSourceSettings:{dataSource:pivotData,expandAll:false,enableSorting:true,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:[]},height:350,showGroupingBar:true}},provide:{pivotview:[GroupingBar]},methods:{onHeadersSort:function(args){if(args.fieldName=='Country'){args.members=['United Kingdom','Germany'];args.IsOrderChanged=true;}if(args.fieldName=='Year'){args.members=['FY 2017','FY 2015'];args.IsOrderChanged=true;}},}}</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style>ActionBegin
The eventactionBegin triggers when clicking the value sort icon or the sort icon in the field button, which is present in both grouping bar and field list UI. This allows user to identify the current action being performed at runtime. It has the following parameters:
dataSourceSettings: It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on.actionName: It holds the name of the current action began. The following are the UI actions and their names:Action Action Name Sort fieldSort field Value sort iconSort value fieldInfo: It holds the selected field information.
Note: This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change.
cancel: It allows user to restrict the current action.
In the below sample, sort action can be restricted by setting theargs.cancel option totrue in theactionBegin event.
<template><divid="app"><ejs-pivotview:dataSourceSettings="dataSourceSettings":height="height":showGroupingBar="showGroupingBar":showFieldList="showFieldList":actionBegin="actionBegin"></ejs-pivotview></div></template><scriptsetup>import{provide}from"vue";import{PivotViewComponentasEjsPivotview,GroupingBar,FieldList}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';constdataSourceSettings={dataSource:pivotData,expandAll:false,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:[]}constheight=350;constshowGroupingBar=true;constshowFieldList=true;constactionBegin=(args)=>{if(args.actionName=='Sort field'||args.actionName=='Sort value'){args.cancel=true;}};provide('pivotview',[GroupingBar,FieldList]);</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:dataSourceSettings="dataSourceSettings":height="height":showGroupingBar="showGroupingBar":showFieldList="showFieldList":actionBegin="actionBegin"></ejs-pivotview></div></template><script>import{PivotViewComponent,GroupingBar,FieldList}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},data(){return{dataSourceSettings:{dataSource:pivotData,expandAll:false,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,showGroupingBar:true,showFieldList:true}},methods:{actionBegin:function(args){if(args.actionName=='Sort field'||args.actionName=='Sort value'){args.cancel=true;}}},provide:{pivotview:[GroupingBar,FieldList]}}</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style>ActionComplete
The eventactionComplete triggers when the UI actions such as value sorting or sorting via the field button, which is present in both grouping bar and field list UI, is completed. This allows user to identify the current UI actions being completed at runtime. It has the following parameters:
dataSourceSettings: It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on.actionName: It holds the name of the current action completed. The following are the UI actions and their names:Action Action Name Sort fieldField sorted Value sort iconValue sorted fieldInfo: It holds the selected field information.
Note: This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change.
actionInfo: It holds the unique information about the current UI action. For example, if sorting is completed, the event argument contains information such as sort order and the field name.
<template><divid="app"><ejs-pivotview:dataSourceSettings="dataSourceSettings":height="height":showGroupingBar="showGroupingBar":showFieldList="showFieldList":actionComplete="actionComplete"></ejs-pivotview></div></template><scriptsetup>import{provide}from"vue";import{PivotViewComponentasEjsPivotview,GroupingBar,FieldList}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';constdataSourceSettings={dataSource:pivotData,expandAll:false,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:[]};constheight=350;constshowGroupingBar=true;constshowFieldList=true;constactionComplete=(args)=>{if(args.actionName=='Field sorted'||args.actionName=='Value sorted'){// Triggers when the sort action is completed.}};provide('pivotview',[GroupingBar,FieldList]);</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:dataSourceSettings="dataSourceSettings":height="height":showGroupingBar="showGroupingBar":showFieldList="showFieldList":actionComplete="actionComplete"></ejs-pivotview></div></template><script>import{PivotViewComponent,GroupingBar,FieldList}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},data(){return{dataSourceSettings:{dataSource:pivotData,expandAll:false,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,showGroupingBar:true,showFieldList:true}},methods:{actionComplete:function(args){if(args.actionName=='Field sorted'||args.actionName=='Value sorted'){// Triggers when the sort action is completed.}}},provide:{pivotview:[GroupingBar,FieldList]}}</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style>ActionFailure
The eventactionFailure triggers when the current UI action fails to achieve the desired result. It has the following parameters:
actionName: It holds the name of the current action failed. The following are the UI actions and their names:Action Action Name Sort fieldSort field Value sort iconSort value errorInfo: It holds the error information of the current UI action.
<template><divid="app"><ejs-pivotview:dataSourceSettings="dataSourceSettings":height="height":showGroupingBar="showGroupingBar":showFieldList="showFieldList":actionFailure="actionFailure"></ejs-pivotview></div></template><scriptsetup>import{provide}from"vue";import{PivotViewComponentasEjsPivotview,GroupingBar,FieldList}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';constdataSourceSettings={dataSource:pivotData,expandAll:false,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:[]};constheight=350;constshowGroupingBar=true;constshowFieldList=true;constactionFailure=(args)=>{if(args.actionName=='Sort field'||args.actionName=='Sort value'){// Triggers when the current UI action fails to achieve the desired result.}};provide('pivotview',[GroupingBar,FieldList]);</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style><template><divid="app"><ejs-pivotview:dataSourceSettings="dataSourceSettings":height="height":showGroupingBar="showGroupingBar":showFieldList="showFieldList":actionFailure="actionFailure"></ejs-pivotview></div></template><script>import{PivotViewComponent,GroupingBar,FieldList}from"@syncfusion/ej2-vue-pivotview";import{pivotData}from'./pivotData.js';exportdefault{name:"App",components:{"ejs-pivotview":PivotViewComponent},data(){return{dataSourceSettings:{dataSource:pivotData,expandAll:false,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,showGroupingBar:true,showFieldList:true}},methods:{actionFailure:function(args){if(args.actionName=='Sort field'||args.actionName=='Sort value'){// Triggers when the current UI action fails to achieve the desired result.}}},provide:{pivotview:[GroupingBar,FieldList]}}</script><style>@import"../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";</style>[8]ページ先頭