Get Free Trial
List of all demos

Angular Pivot Table: classic view

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.