You have full control over your Angular pivot table component — define how rows, columns, or specific cells will be displayed on the grid.
import { Component, OnInit } from "@angular/core";
@Component({
selector: "pivotComponent",
templateUrl: "./pivot.component.html",
styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
public report: Object = {
dataSource: {
type: "csv",
filename: "https://cdn.flexmonster.com/data/data.csv",
},
slice: {
rows: [
{
uniqueName: "Country",
},
{
uniqueName: "Business Type",
},
],
columns: [
{
uniqueName: "Color",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Quantity",
aggregation: "percentofcolumn",
},
],
expands: {
expandAll: true,
},
},
formats: [
{
decimalPlaces: 2,
},
],
};
constructor() {}
ngOnInit(): void {}
customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
if (data?.type === "value" && !data?.isDrillThrough) {
if (data.value! < 5) {
cell.text = `<img src="https://cdn.flexmonster.com/i/empty_pie.svg" class="centered">`;
} else if (data.value! >= 5 && data.value! < 10) {
cell.text = `<img src="https://cdn.flexmonster.com/i/quarter_pie.svg" class="centered">`;
} else if (data.value! >= 10 && data.value! < 25) {
cell.text = `<img src="https://cdn.flexmonster.com/i/half_pie.svg" class="centered">`;
} else if (data.value! >= 25 && data.value! < 50) {
cell.text = `<img src="https://cdn.flexmonster.com/i/three_quarters_pie.svg" class="centered">`;
} else if (data.value! >= 50) {
cell.text = `<img src="https://cdn.flexmonster.com/i/full_pie.svg" class="centered">`;
}
}
}
}
<fm-pivot [componentFolder]="'https://cdn.flexmonster.com/'" [height]="600" [report]="report" [customizeCell]="customizeCellFunction"> </fm-pivot>
img.centered {
display: block !important;
margin: auto !important;
color: transparent !important;
}
#fm-pivot-view .fm-grid-row {
min-height: 47px;
}
Flexmonster has one of the largest list of customization options among other Angular data visualization components. Not only can you localize the component, change component themes, customize the Toolbar and the context menu, but also replace cell values with any visual content (e.g., with icons), highlight cells based on their data, add hyperlinks, and more.
In this Angular pivot grid example, you can see how to substitute numbers with icons based on cell values. Change the configurations of the pivot table and see how the formatting is applied on the fly.