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

Custom cells

Manage how entire rows, columns, or specific cells are styled within the pivot table component.

    const pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 600,
      toolbar: true,
      report: {
        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,
          },
        ],
      },
      customizeCell: customizeCellFunction,
      shareReportConnection: {
        url: "https://olap.flexmonster.com:9500",
      },
      beforetoolbarcreated: customizeToolbar,
    });
    
    function customizeCellFunction(cell, data) {
      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">`;
        }
      }
    }
    
    function customizeToolbar(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);
          pivot.exportTo(exportType, {
            useCustomizeCellForData: false
          });
        });
        return tabs;
      }
    }
    
    <div id="pivot-container"></div>
    
    img.centered {
      display: block !important;
      margin: auto !important;
      color: transparent !important;
    }
    
    #fm-pivot-view .fm-grid-row {
      min-height: 47px;
    }
    

    What makes Flexmonster different from the other solutions on the market is its high customizability. Not only can you change report themes, customize the Toolbar but also replace cell values with any visual content (e.g., with icons), highlight cells based on their semantics, add hyperlinks, style totals and grand totals, and more.

    In this demo, you can see how to substitute numbers with icons based on cell values. Play with the demo's code to learn how you can achieve this with one hook.