Flexmonster - Pivot Table demo

Demos

by Dongor7

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 .flag-icon{
  width: 21px !important;
  height: 16px !important;
  margin-top: 4px !important;
  margin-left: 0 !important;
  margin-right: 2px !important;
}

.fm-custom-cell .fm-expanded-icon, 
.fm-custom-cell .fm-collapsed-icon {
  margin-left: -2px !important;
  margin-right: 0 !important;
  margin-bottom: 4px !important;
  margin-top: 4px !important;
}

.fm-custom-cell i.fm-expanded-icon:before {
  font-size: 12px !important;
  margin-top: 2px !important;
}

.fm-custom-cell i.fm-collapsed-icon:before {
  font-size: 12px !important;
  margin-top: 2px !important;
}

JavaScript

new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 550,
  customizeCell: customizeCell,
  toolbar: true,
  report: {
    "dataSource": {
      "type": "json",
      "filename": "https://cdn.flexmonster.com/data/retail-data.json",
      "mapping": {
        "Quantity": {
          "type": "number"
        },
        "Price": {
          "type": "number"
        },
        "Retail Category": {
          "type": "string"
        },
        "Sales": {
          "type": "number"
        },
        "Order Date": {
          "type": "year/quarter/month/day"
        },
        "Date": {
          "type": "date"
        },
        "Status": {
          "type": "string"
        },
        "Product Code": {
          "type": "string"
        },
        "Phone": {
          "type": "string"
        },
        "Country": {
          "hierarchy": "Location"
        },
        "City": {
          "hierarchy": "Location",
          "parent": "Country"
        },
        "CurrencyID": {
          "type": "property",
          "hierarchy": "Country"
        },
        "Contact Last Name": {
          "type": "string"
        },
        "Contact First Name": {
          "type": "string"
        },
        "Deal Size": {
          "type": "string"
        }
      }
    },
    "slice": {
      "reportFilters": [{
          "uniqueName": "Date.Year",
          "filter": {
            "members": [
              "date.year.[2019]"
            ]
          }
        },
        {
          "uniqueName": "Date.Month"
        }
      ],
      "rows": [{
          "uniqueName": "Location",
          "filter": {
            "members": [
              "location.[australia]",
              "location.[switzerland]",
              "location.[norway]",
              "location.[uk]",
              "location.[sweden]",
              "location.[ukraine]",
              "location.[israel]",
             ...