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/2.8.13/flexmonster.js"></script>

<div id="pivot-container"></div>

CSS

}

#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": {
      "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": {
          "type": "string",
          "dimensionUniqueName": "Location"
        },
        "City": {
          "type": "string",
          "dimensionUniqueName": "Location"
        },
        "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": "Country",
          "filter": {
            "members": [
              "Country.[australia]",
              "Country.[switzerland]",
              "Country.[norway]",
              "Country.[uk]",
              "Country.[sweden]",
              "Country.[ukraine]",
             ...