We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
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 } from "@angular/core";
    
    @Component({
      selector: "pivotComponent",
      templateUrl: "./pivot.component.html",
      styleUrls: ["./pivot.component.css"],
    })
    export class PivotComponent implements OnInit {
      public report: Object = {
        dataSource: {
          type: "csv",
          filename: "data/data.csv",
        },
        slice: {
          rows: [
            {
              uniqueName: "Country",
            },
            {
              uniqueName: "Business Type",
            },
          ],
          columns: [
            {
              uniqueName: "Color",
            },
            {
              uniqueName: "[Measures]",
            },
          ],
          measures: [
            {
              uniqueName: "Quantity",
              aggregation: "percentofcolumn",
            },
          ],
          expands: {
            expandAll: true,
          },
        },
        formats: [
          {
            decimalPlaces: 2,
          },
        ],
      };
    
      constructor() {}
    
      ngOnInit(): void {}
    
      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" class="centered">`;
          } else if (data.value! >= 5 && data.value! < 10) {
            cell.text = `<img src="https://cdn.flexmonster.com/i/quarter_pie.svg" class="centered">`;
          } else if (data.value! >= 10 && data.value! < 25) {
            cell.text = `<img src="https://cdn.flexmonster.com/i/half_pie.svg" class="centered">`;
          } else if (data.value! >= 25 && data.value! < 50) {
            cell.text = `<img src="https://cdn.flexmonster.com/i/three_quarters_pie.svg" class="centered">`;
          } else if (data.value! >= 50) {
            cell.text = `<img src="https://cdn.flexmonster.com/i/full_pie.svg" class="centered">`;
          }
        }
      }
    
      customizeToolbar(toolbar: Flexmonster.Toolbar) {
        toolbar.showShareReportTab = true;
        const tabs = toolbar.getTabs();
        toolbar.getTabs = () => {
          const exportTab = tabs.find(tab => tab.id == "fm-tab-export");
          if (!exportTab) return tabs;
          const exportToTabs = exportTab.menu?.filter(
            tab => tab.id == "fm-tab-export-html" || 
            tab.id == "fm-tab-export-csv" || 
            tab.id == "fm-tab-export-excel" || 
            tab.id == "fm-tab-export-pdf");
          if (!exportToTabs) return tabs;
          exportToTabs.map(exportToTab => exportToTab.handler = () => {
            const exportType = exportToTab.id.substring(14);
            this.pivot.flexmonster.exportTo(exportType, {
              useCustomizeCellForData: false
            });
          });
          return tabs;
        }
      }
    }
    
    <fm-pivot
      [componentFolder]="'https://cdn.flexmonster.com/'"
      [height]="600"
      [toolbar]="true"
      [report]="report"
      [customizeCell]="customizeCellFunction"
      [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
      (beforetoolbarcreated)="customizeToolbar($event)">
    </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.