Styling subtotals and grand totals

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);

/********************* Styles for totals *********************/

#fm-pivot-view .fm-grid-view div.fm-cell.fm-total-classic-r,
#fm-pivot-view .fm-grid-view div.fm-cell.fm-header.fm-total-classic-r {
  background-color: #B2DBBF;
}

#fm-pivot-view .fm-grid-view div.fm-cell.fm-grand-total-r,
#fm-pivot-view .fm-grid-view div.fm-cell.fm-header.fm-grand-total-r {
  background-color: #70C1B3;
}

#fm-pivot-view .fm-grid-view div.fm-cell.fm-grand-total-c,
#fm-pivot-view .fm-grid-view div.fm-cell.fm-grand-total.fm-grand-total-c {
  background-color: #247BA0;
  color: white;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  customizeCell: customizeCellFunction,
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [
      	{
        	uniqueName: "Country"
      	}, 
        {
        	uniqueName: "Business Type"
      	},
        {
        	uniqueName: "[Measures]"
      	}
      ],
      columns: [{
        uniqueName: "Color",
        filter: {
        	members: [ "blue", "red", "green" ]
        }
      }],
      measures: [{
        uniqueName: "Price"
      }],
      expands: {
        rows: [
        	{
        		tuple: [ "country.[australia]" ]
          }
        ]
      }
    },
    options: {
      grid: {
        type: "classic"
      }
    }
  }
});

function customizeCellFunction(cell, data) {
  if (data.isClassicTotalRow) 
  	cell.addClass("fm-total-classic-r");
}