Flexmonster - Pivot Table demo

Demos

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>

CSS

.fm-custom-cell {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
}

.fm-custom-cell .flag-icon {
  width: 21px !important;
  height: 16px !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
#fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
  top: -2px;
  height: 16px;
}

JavaScript

new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 550,
  customizeCell: customizeCell,
  toolbar: true,
  report: {
  "dataSource": {
    "data": [
      {
        "DateOfStop": {
          "type": "string"
        },
        "Make": {
          "type": "string"
        },
        "ChargeCOUNT": {
          "type": "number"
        },
        "AccidentCOUNT": {
          "type": "number"
        }
      },
      {
        "DateOfStop": "2013-03-29T00:00:00.000-0500",
        "Make": "NISSAN",
        "ChargeCOUNT": "1",
        "AccidentCOUNT": "1"
      }
    ]
  },
  "formats": [
    {
      "name": "",
      "thousandsSeparator": ","
    }
  ],
  "slice": {
    "rows": [
      {
        "uniqueName": "Make",
        "caption": "Make",
        "sort": "asc"
      }
    ],
    "columns": [
      {
        "uniqueName": "DateOfStop",
        "caption": "DateOfStop",
        "sort": "asc"
      }
    ],
    "measures": [
      {
        "uniqueName": "ChargeCOUNT",
        "aggregation": "sum",
        "caption": "Charge (Count)"
      },
      {
        "uniqueName": "AccidentCOUNT",
        "aggregation": "sum",
        "caption": "Accident (Count)"
      }
    ]
  },
  "options": {
    "grid": {
      "showFilter": false,
      "showHeaders": true,
      "showGrandTotals": "on"
    },
    "sorting": true,
    "drillThrough": false,
    "configuratorButton": false,
    "showAggregationLabels": false
  }
}
});

function customizeCell(cell, data) {
  if (data.hierarchy && data.type == "header") {
    if (data.hierarchy.caption == "Country" && data.member && data.member.properties) {
      let name = data.member.properties.CurrencyID;
      let flag = `<i class="fm-icon ${data.expanded?"fm-expanded-icon":"fm-collapsed-icon"}" 
        title="${data.expanded?"Click to collapse":"Click to expand"}"></i>
        <img class="flag-icon"...