Category / Section
How to customize the text in Pivot Table
3 mins read
You can customize the actual data text in the Pivot Table like, SSRS using load event. Refer to the following code snippet.
Typescript:
let pivotGridObj: PivotView = new PivotView({
dataSource: {
enableSorting: true,
columns: [{ name: 'Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
data: getPivotData(),
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
expandAll: false,
filters: []
},
load: (): void => {
for (let i: number = 0; i < pivotGridObj.dataSource.data.length; i++) {
pivotGridObj.dataSource.data[i]["Year"] = pivotGridObj.dataSource.data[i]["Year"].slice(3);
}
},
showFieldList: true,
width: '100%',
height: 300,
gridSettings: { columnWidth: 140 }
});
pivotGridObj.appendTo('#PivotView1');
Here, the first three characters of Year field data have been trimmed.
Actual Pivot Table:
After Customization:
Stackblitz Example: https://stackblitz.com/edit/g3mg92-acndjg
Github Example: How-to-customize-the-data-in-PivotGrid
