We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

Angular Pivot Table: classic (tabular) view

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.