How to customize the text in Pivot Table
This article explains how to customize the text in the Pivot Table. You can customize the actual data text in the Pivot Table, like SSRS, using the 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 the 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
