The classic 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", }, configuratorActive: false, }, slice: { rows: [ { uniqueName: "Country", }, { uniqueName: "Business Type", }, ], columns: [ { uniqueName: "Color", }, { uniqueName: "[Measures]", }, ], measures: [ { uniqueName: "Price", }, ], expandAll: true, }, }; constructor() {} ngOnInit(): void {} onReady() { this.pivot.flexmonster.setReport(this.report); } toggleView(checked: boolean) { this.pivot.flexmonster.setOptions({ grid: { type: checked ? "compact" : "classic", }, }); this.pivot.flexmonster.refresh(); } }
<div class="description-blocks"> <app-toggle-switch [_id]="'modeToggle'" (clicked)="toggleView($event)" [labenOn]="'Using classic form'" [labenOff]="'Using compact form'"> </app-toggle-switch> </div> <div> <fm-pivot #pivot [height]="600" [width]="'100%'" [componentFolder]="'https://cdn.flexmonster.com/'"(ready)="onReady()"> </fm-pivot> </div>
.inp-inner { position: relative; } .switch { position: relative; display: inline-block; width: 60px; height: 32px; } .inp-inner input { height: 32px; border: 1px solid #D5D5D5; padding: 0 12px; font-size: 12px; font-family: "Open Sans", sans-serif; font-weight: 600; border-radius: 2px; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; width: 100%; } .switch input { display: none; } .inp-inner input { border: none; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; outline: none; color: #232323; font-family: "Open Sans", sans-serif; } .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #DF3800; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; border-radius: 20px; } .switch .slider:hover { background-color: #eb4913; } .switch input:checked+.slider:hover { background-color: #00c06a; } .switch .slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; border-radius: 50%; } .switch .slider:after { content: attr(data-off); display: block; position: absolute; left: 100%; margin-left: 8px; font-weight: 600; font-size: 16px; line-height: 1.66667; min-width: 300px; } .switch .slider:after { display: block; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); } .switch input:checked+.slider { background-color: #00A45A; } .switch input:checked+.slider:before { -webkit-transform: translateX(28px); -ms-transform: translateX(28px); transform: translateX(28px); } .switch input:checked+.slider:after { content: attr(data-on); } .lbl-left .inp-lbl { padding-right: 10px; margin-bottom: 0; } .inp-lbl { font-size: 12px; line-height: 1.33333; display: block; margin-bottom: 4px; } .lbl-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .switch-input-container { padding: 24px; }
With a classic 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.