Add custom HTML to value cells

Customizing the grid

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

#fm-pivot-view .fm-grid-row {
  max-height: 300px;
}

.list-element {
  text-align: center !important;
  padding: 3px !important;
  border-radius: 4px !important;
  margin-bottom: 3px !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  z-index: 100 !important;
}

#fm-pivot-view #fm-grid-view .fm-filters .fm-header-r {
  background-color: #E6C7D5;
}

#fm-pivot-view #fm-grid-view #fm-cols-filter .fm-header {
  background-color: #C6C6C6;
}

#fm-pivot-view #fm-grid-view #fm-cols-filter {
  background-color: #ECECEC;
}

#fm-pivot-view #fm-grid-view .fm-header-r {
  background-color: #F0DDE6;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 700,
  customizeCell: applyCustomLayout,
  report: {
    dataSource: {
    	data: getData()
    },
    options: {
      drillThrough: false,
      grid: {
        type: "classic",
        showTotals: "off",
        showGrandTotals: "off"
      }
    },
    slice: {
      rows: [{
        uniqueName: "Appearance"
      }],
      columns: [
      	{
      		uniqueName: "[Measures]"
      	},
        {
          uniqueName: "Silicon"
        },
        {
          uniqueName: "Sulfate"
        }
      ],
      measures: [
      	{
        	uniqueName: "key_id",
        	aggregation: "count",
        	availableAggregations: ["sum", "count"]
      	}
      ],
      expands: {
        expandAll: true
      }
    }
  }
});

function applyCustomLayout(cell, data) {
  if (data && data.type == "value" && data.label != "") {
    cell.text = "";
    
    if (data.recordId) {
      for (let i = 0; i < data.recordId.length; i++) {
        let title = `SBWA Category: ${data.recordId[i].header.sbwa.en}\nVersion: ${data.recordId[i].header.version}`
        cell.text += `<div class='list-element' style="background-color:${data.recordId[i].status.color} !important;" title="${title}">`;
        cell.text += `${data.recordId[i].key_cd} <br/> 
        							${data.recordId[i].header.label} <br/> 
                      V${data.recordId[i].header.version} </div>`;
      }
      let height = (data.recordId.length * (48 /*item height*/ + 3 /*margin*/ )) - 3 /*last item margin*/ + 14 /*paddings*/ ;
      cell.style["min-height"] = height + "px";
    }
  }
}

function getData() {
	return [
    {
      "key_id": {
        "type": "number"
      },
      "properties": {
        "type": "id"
      }
    },
    {
      "key_id": "1019",
      "Damage Level": "Damaged",
     ...