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

Angular Pivot Table demo

A high-performance Angular Pivot Table component for efficient data organization and summarization.


    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: "currency",
            },
          ],
          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: "",
            thousandsSeparator: ",",
            decimalSeparator: ".",
            decimalPlaces: 2,
            nullValue: "-"
          },
          {
            name: "currency",
            currencySymbol: "$"
          }
        ]
      };
    
      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 an angular pivot grid component that offers a rich set of features for data analysis and reporting. With our pivot table control, you can easily create interactive and insightful pivot tables and charts in Angular applications.

    Displaying data from different data sources

    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.

    Analyze your data with core pivot table features via the comfy Toolbar:

    • group, filter and sort to get new insights,
    • drill through your data to have a look from different sides,
    • drag & drop rows and columns to manipulate the data,
    • highlight the important points with number and conditional formatting,
    • switch between compact, tabular, and flat view.

    After, just export the report to the most common formats such as PDF, CSV, Excel, HTML, and PNG or save and share your report with colleagues.

    Embed Angular Pivot Grid into your application

    Effortlessly add the pivot grid library to your Angular project by following our comprehensive how-to guide or watching our Angular pivot table integration video tutorial.