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

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

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

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

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%",
  toolbar: true,
  report: {
    "dataSource": {
        "type": "json",
        "data": [
            {
                "amount": {
                    "type": "number"
                },
                "nonHierarchy": {
                    "type": "string",
                    "dimensionUniqueName": "Folder"
                },
                "hierarchy": {
                    "type": "level",
                    "level": "hierarchy",
                    "hierarchy": "hierarchy",
                    "dimensionUniqueName": "Folder"
                },
                "hierarchyLevel2": {
                    "type": "level",
                    "level": "hierarchyLevel2",
                    "parent": "hierarchy",
                    "hierarchy": "hierarchy",
                    "dimensionUniqueName": "Folder"
                }
            },
            {
                "amount": 1200,
                "hierarchy": "level1",
                "hierarchyLevel2": "level2",
                "nonHierarchy": "nonHierarchy"
            }
        ]
    },
    "version": "2.7.22",
    "creationDate": "2020-04-06T08:40:08.157Z"
}
})