Flexmonster Software License Agreement (“Agreement”) has been revised and is effective as of January 8, 2025.
The following modifications were made:
The modified version of Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after January 8, 2025, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license or maintenance after the effective date of these modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
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.