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: "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();
}
}
<button (click)="changeLayout('compact')">Use compact form</button>
<button (click)="changeLayout('classic')">Use classic form</button>
<fm-pivot
#pivot
[componentFolder]="'https://cdn.flexmonster.com/'"
[height]="450"
[report]="report">
</fm-pivot>
With a tabular layout, you have the 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, expand and collapse the hierarchies.
If data in your Angular pivot grid has a deep hierarchy with a lot of sublevels, we recommend switching to the compact form which shows multi-level hierarchies more neatly and saves space in the table.