The classic (tabular) form displays the data in an Excel-like layout of hierarchies. Using the classic Angular pivot table, you can see hierarchy sublevels in separate rows or columns next to each other.
import { Component, OnInit, ViewChild } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";
@Component({
selector: "pivotComponent",
templateUrl: "./pivot.component.html",
styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
@ViewChild("pivot") pivot!: FlexmonsterPivot;
public report: Object = {
dataSource: {
type: "csv",
filename: "https://cdn.flexmonster.com/data/data.csv",
},
options: {
grid: {
type: "classic",
},
},
slice: {
rows: [
{
uniqueName: "Country",
},
{
uniqueName: "Business Type",
},
],
columns: [
{
uniqueName: "Color",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Price",
format: "currency",
},
],
expandAll: true,
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
},
{
name: "currency",
currencySymbol: "$",
},
],
};
constructor() {}
ngOnInit(): void {}
changeLayout(layoutType: string) {
this.pivot.flexmonster.setOptions({
grid: {
type: layoutType,
},
});
this.pivot.flexmonster.refresh();
}
customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
if (
data &&
data.type == "header" &&
data.member &&
data.member.caption != "All" &&
data.label == ""
) {
cell.text = " " + data.member.caption;
}
}
setRepeatLabels(enabled: boolean) {
this.pivot.flexmonster.customizeCell(
enabled ? this.customizeCellFunction : () => {}
);
}
}
<button (click)="changeLayout('compact')">Use compact form</button>
<button (click)="changeLayout('classic')">Use classic form</button>
<button (click)="setRepeatLabels(true)">Repeat labels on</button>
<button (click)="setRepeatLabels(false)">Repeat labels off</button>
<fm-pivot
#pivot
[componentFolder]="'https://cdn.flexmonster.com/'"
[height]="450"
[report]="report">
</fm-pivot>
With a tabular layout, you have access to the same data visualization functionality as in compact form. All Excel features work the same: via a comfy Angular UI grid, you can sort and filter rows and columns, drill through the data, and expand or collapse the hierarchies.
If the data on your Angular pivot grid has a deep hierarchy with many sublevels, we recommend switching to the compact form, which shows multilevel hierarchies more neatly and saves space on the table.