Get Free Trial
List of all demos

Angular Pivot Table: custom cells

You have full control over your Angular pivot table component: define how rows, columns, or specific cells will be displayed on the grid.


    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: "https://cdn.flexmonster.com/data/data.csv",
        },
        slice: {
          rows: [
            {
              uniqueName: "Country",
            },
            {
              uniqueName: "Business Type",
            },
          ],
          columns: [
            {
              uniqueName: "Color",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Quantity",
              aggregation: "percentofcolumn",
            },
          ],
          expands: {
            expandAll: true,
          },
          drills: {
            drillAll: true,
          },
        },
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      onReady() {
        this.pivot.flexmonster.setReport(this.report);
      }
    
      customizeCellFunction(
        cell: Flexmonster.CellBuilder,
        data: Flexmonster.CellData
      ) {
        if (data.type == "value" && !data.isDrillThrough) {
          if (data.value < 5) {
            cell.text = `<img src='https://cdn.flexmonster.com/i/empty_pie.svg'
    srcset='https://cdn.flexmonster.com/i/empty_pie.svg 1x' class='centered'>`;
          } else if (data.value >= 5 && data.value < 10) {
            cell.text = `<img src='https://cdn.flexmonster.com/i/quarter_pie.svg'
    srcset='https://cdn.flexmonster.com/i/quarter_pie.svg 1x' class='centered'>`;
          } else if (data.value >= 10 && data.value < 25) {
            cell.text = `<img src='https://cdn.flexmonster.com/i/half_pie.svg'
    srcset='https://cdn.flexmonster.com/i/half_pie.svg 1x' class='centered'>`;
          } else if (data.value >= 25 && data.value < 50) {
            cell.text = `<img src='https://cdn.flexmonster.com/i/three_quarters_pie.svg'
    srcset='https://cdn.flexmonster.com/i/three_quarters_pie.svg 1x' class='centered'>`;
          } else if (data.value >= 50) {
            cell.text = `<img src='https://cdn.flexmonster.com/i/full_pie.svg'
    srcset='https://cdn.flexmonster.com/i/full_pie.svg 1x' class='centered'>`;
          }
        }
      }
    }
    
    <fm-pivot #pivot [toolbar]="true" 
        [height]="430" [width]="'100%'"
        (ready)="onReady()"[customizeCell]="customizeCellFunction"></fm-pivot>
    
    img.centered {
      display: block !important;
      margin: auto !important;
      color: transparent !important;
    }
    
    #fm-pivot-view .fm-grid-row {
      min-height: 47px;
    }
    

    Flexmonster has one of the largest lists of customization options among other Angular data visualization components. Not only can you localize the component, change report themes, customize the Toolbar and context menu but also replace cell values with any visual content (e.g., with icons), highlight cells based on their semantics and values, add hyperlinks, and more.

    In this Angular pivot grid example, you can see how to substitute numbers with icons based on cell values. Change the configurations of the pivot table and see how the formatting is applied on the fly.