Styling subtotals and grand totals
Customize cells
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 500,
toolbar: true,
customizeCell: customizeCellFunction,
report: {
"dataSource": {
"data": getData()
}
}
});
function cleanExtraStyles() {
var prevStyleTag = document.head.getElementsByTagName("style");
for (var i = 0; i < prevStyleTag.length; i++) {
if (prevStyleTag[i].innerHTML.indexOf("#fm-pivot-view #fm-grid-view div") == 0) {
if(window.ActiveXObject || "ActiveXObject" in window) {
prevStyleTag[i].removeNode(true);
} else {
prevStyleTag[i].remove();
}
}
}
}
function customizeCellFunction(cell, data) {
if (data.isGrandTotalRow && cell.attr['data-c'] == 0) {
cleanExtraStyles();
var styleTag = document.createElement('style');
var style = "#fm-pivot-view #fm-grid-view div[data-r='" + data.rowIndex + "']";
style += "{ background-color: #B2DBBF; }";
styleTag.innerHTML += style;
document.head.appendChild(styleTag);
}
}
function getData() {
return [{
"Category": "Accessories",
"Size": "262 oz",
"Color": "red",
"Destination": "Australia",
"Business Type": "Specialty Bike Shop",
"Country": "Australia",
"Price": 174,
"Quantity": 225,
"Discount": 23
}, {
"Category": "Accessories",
"Size": "214 oz",
"Color": "yellow",
"Destination": "Canada",
"Business Type": "Specialty Bike Shop",
"Country": "Canada",
"Price": 502,
"Quantity": 90,
"Discount": 17
}, {
"Category": "Components",
"Size": "235 oz",
"Color": "green",
"Destination": "Australia",
"Business Type": "Warehouse",
"Country": "Australia",
"Price": 551,
"Quantity": 1950,
"Discount": 51
}, {
"Category": "Components",
"Size": "307 oz",
"Color": "white",
"Destination": "United Kingdom",
"Business Type": "Warehouse",
"Country": "Canada",
"Price":...