Need a special offer?Find out if your project fits.
+
List of all demos

Angular Pivot Table demo

Fast and powerful data visualization and reporting tool for Angular.


    import { Component, OnInit } from "@angular/core";
    
    @Component({
      selector: "pivotComponent",
      templateUrl: "./pivot.component.html",
      styleUrls: ["./pivot.component.css"],
    })
    export class PivotComponent implements OnInit {
      public report: Object = {
        dataSource: {
          type: "json",
          filename: "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;
      }
    
      customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
        if (data.type === "header" && data.hierarchy?.caption === "Country" &&  data.member?.properties) {
          const name = data.member.properties.CurrencyID;
          cell.addClass("fm-custom-cell");
          let flag;
          if (data.expanded) {
            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 {
            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
      [componentFolder]="'https://cdn.flexmonster.com/'"
      [height]="550"
      [toolbar]="true"
      [report]="report"
      [customizeCell]="customizeCellFunction"
      [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
      (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!

    Check out the video tutorial on creating your first Angular pivot grid.