Get Free Trial
List of all demos

Custom cells

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

    new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      width: "100%",
      height: 430,
      toolbar: true,
      customizeCell: customizeCellFunction,
      report: {
        "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
          }
        }
      }
    });
    
    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'
    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'>`;
    		}
    	}
    }
    
    <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.