Get Free Trial
List of all demos

Angular Pivot Table demo

Fast and powerful data visualization and reporting tool for Angular.


    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 reportPivot1: Object = {
        dataSource: {
          type: "json",
          filename: "https://cdn.flexmonster.com/data/retail-data.json",
          mapping: {
            Quantity: {
              type: "number",
            },
            Price: {
              type: "number",
            },
            "Retail Category": {
              type: "string",
            },
            Sales: {
              type: "number",
            },
            "Order Date": {
              type: "year/quarter/month/day",
            },
            Date: {
              type: "date",
            },
            Status: {
              type: "string",
            },
            "Product Code": {
              type: "string",
            },
            Phone: {
              type: "string",
            },
            Country: {
              type: "string",
              folder: "Location",
            },
            City: {
              type: "string",
              folder: "Location",
            },
            CurrencyID: {
              type: "property",
              hierarchy: "Country",
            },
            "Contact Last Name": {
              type: "string",
            },
            "Contact First Name": {
              type: "string",
            },
            "Deal Size": {
              type: "string",
            },
          },
        },
        slice: {
          rows: [
            {
              uniqueName: "Country",
              filter: {
                members: [
                  "country.[australia]",
                  "country.[usa]",
                  "country.[japan]",
                ],
              },
            },
            {
              uniqueName: "Status",
            },
          ],
          columns: [
            {
              uniqueName: "Order Date",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Price",
              aggregation: "sum",
              format: "-13w0a1w1c23j00",
            },
          ],
          sorting: {
            column: {
              type: "desc",
              tuple: [],
              measure: {
                uniqueName: "Price",
                aggregation: "sum",
              },
            },
          },
          expands: {
            rows: [
              {
                tuple: ["country.[japan]"],
              },
            ],
          },
          drills: {
            columns: [
              {
                tuple: ["order date.[2019]"],
              },
            ],
          },
          flatSort: [
            {
              uniqueName: "Price",
              sort: "desc",
            },
          ],
        },
    
        conditions: [
          {
            formula: "#value > 35000",
            measure: "Price",
            aggregation: "sum",
            format: {
              backgroundColor: "#00A45A",
              color: "#FFFFFF",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
          {
            formula: "#value < 2000",
            measure: "Price",
            aggregation: "sum",
            format: {
              backgroundColor: "#df3800",
              color: "#FFFFFF",
              fontFamily: "Arial",
              fontSize: "12px",
            },
          },
        ],
        formats: [
          {
            name: "-13w0a1w1c23j00",
            thousandsSeparator: " ",
            decimalSeparator: ".",
            decimalPlaces: 0,
            currencySymbol: "$",
            positiveCurrencyFormat: "$1",
            nullValue: "-",
            textAlign: "right",
            isPercent: false,
          },
        ],
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      customizeToolbar(toolbar: Flexmonster.Toolbar) {
        toolbar.showShareReportTab = true;
      }
    
      onReady() {
        this.pivot.flexmonster.setReport(this.reportPivot1);
      }
    
      customizeCellFunction(
        cell: Flexmonster.CellBuilder,
        data: Flexmonster.CellData
      ) {
        if (data.hierarchy) {
          if (data.type == "header") {
            if (data.hierarchy.caption == "Country") {
              if (data.member) {
                if (data.member.properties) {
                  var name = data.member.properties.CurrencyID;
                  cell.addClass("fm-custom-cell");
                  if (data.expanded) {
                    var flag =
                      '<i class="fm-icon fm-expanded-icon" title="Click to collapse">' +
                      "<" +
                      "/i>" +
                      '<img class="flag-icon" src="https://cdn.flexmonster.com/flags/' +
                      name.toLowerCase() +
                      '.svg">';
                  } else {
                    var flag =
                      '<i class="fm-icon fm-collapsed-icon" title="Click to expand">' +
                      "<" +
                      "/i>" +
                      '<img class="flag-icon" src="https://cdn.flexmonster.com/flags/' +
                      name.toLowerCase() +
                      '.svg">';
                  }
                  cell.text =
                    '<div style="display:flex; align-items:center; font-size:12px;
                    position:relative;">' +
                    flag +
                    '<span style="margin-left: 2px; line-height: 16px;">' +
                    data.member.caption +
                    "<" +
                    "/span>" +
                    "<" +
                    "/div>";
                }
              }
            }
          }
        }
      }
    }
    
    <fm-pivot #pivot [toolbar]="true" [componentFolder]="'https://cdn.flexmonster.com/'"     
          [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
          [height]="550" (ready)="onReady()" [customizeCell]="customizeCellFunction"
          (beforetoolbarcreated)="customizeToolbar($event)"></fm-pivot>
    
    .fm-custom-cell {
      display: flex !important;
      align-items: center !important;
      font-size: 12px !important;
    }
    
    .fm-custom-cell .flag-icon {
      width: 21px !important;
      height: 16px !important;
      margin-left: 0 !important;
      margin-right: 2px !important;
    }
    
    #fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded
     .fm-expanded-icon::before,
    #fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed 
    .fm-collapsed-icon::before {
      top: -2px;
      height: 16px;
    }
    

    Flexmonster Pivot is a rich feature Angular UI table that provides you with all the necessary functionality for data analysis and insightful reporting.

    Simply and quickly upload your data to the pivot table, wherever it is stored: no matter CSV or JSON, SQL (MySQL, PostgreSQL, Oracle, etc) databases or no SQL (MongoDB), or such services as Elasticsearch or Microsoft Analysis Services.

    Connect to your data source through the comfy Toolbar and start analyzing your data:

    • group, filter and sort to get new insights;
    • create new values based on the uploaded data;
    • switch between compact, classic, and flat view or drill through your data to look at it from different sides;
    • highlight the important points with number and conditional formatting.

    Export the report in the most common formats such as PDF, CSV, Excel, HTML, and PNG or save and share your report with colleagues. Explore the abilities of our Angular pivot library to the fullest!