HighLight the Grand Total row

Flexmonster example to highlight grand total row in the FLAT layout Grit

by Ian Sadovy

HTML

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

<div id="pivot-container">The component will appear here</div>

CSS

#pivot-container #fm-grid-view div.fm-cell.fm-grand-total {
  background-color: rgba(128, 194, 242, 0.5);
}

JavaScript

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 500,
  report: {
    dataSource: {
    	data: getData()
    },
    slice: {
        rows: [
            {uniqueName: "Color"}
        ],
        columns: [
            {uniqueName: "[Measures]"}
        ],
        measures: [
            {
                uniqueName: "Price",
                format: "currency"
            },
            {
                uniqueName: "Quantity",
            }
        ]
    },
    options: {
      //grandTotalsPosition: "bottom",
 grid: {
           type: "flat"
        },
    },
    formats: [
         {
                    "name": "",
                    "thousandsSeparator": ",",
                },
                {
                    "name": "currency",
                    "thousandsSeparator": ",",
                    "decimalSeparator": ".",
                    "decimalPlaces": 2,
                    "currencySymbol": "$",
                    "currencySymbolAlign": "left",
                    "nullValue": "$0.00",
                    "textAlign": "right",
                    "isPercent": false
                },
    ]
  }
});

function getData() {
  return [{
    "Color": "green",
    "M": "September",
    "W": "Wed",
    "Country": "Canada",
    "State": "Ontario",
    "City": "Toronto",
    "Price": 174,
    "Quantity": 22
  }, {
    "Color": "red",
    "M": "March",
    "W": "Mon",
    "Time": "1000",
    "Country": "USA",
    "State": "California",
    "City": "Los Angeles",
    "Price": 1664,
    "Quantity": 19
  }, {
    "Color": "red",
    "M": "January",
    "W": "Mon",
    "Country": "Canada",
    "State": "Quebec",
    "City": "Montreal",
    "Price": 1190,
    "Quantity": 292
  }, {
    "Color": "green",
    "D": "04/08/2014",
    "M": "August",
    "W": "Fri",
    "Time": "1000",
    "Country": "USA",
    "State": "California",
    "City": "Los Angeles",
    "Price": 1222,
   ...