JSFiddle - React, Tailwind, and code Playground
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>
JavaScript
var pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
dataSource: {
type: "json",
data: getData(),
"mapping": {
"Org_key_name": {
"type": "string"
},
"ScenarioName": {
"type": "string"
},
"Year": {
"type": "number"
},
"Actual": {
"type": "number"
},
"Actual-1": {
"type": "number"
},
"month": {
"type": "number"
},
"Amount": {
"type": "number"
},
"Firstlevel": {
"type": "string",
"hierarchy": "FirstlevelHierarchy"
},
"SecondLevel": {
"type": "string",
"hierarchy": "FirstlevelHierarchy",
"parent": "Firstlevel"
},
"Child_desc": {
"type": "string",
"hierarchy": "FirstlevelHierarchy",
"parent": "SecondLevel"
},
"accoPLANNINGId": {
"type": "id"
}
}
},
"options": {
"showEmptyValues": false
},
"localization": {
"grid": {
"dateInvalidCaption": "",
"blankMember": ""
}
},
"slice": {
"rows": [{
"uniqueName": "FirstlevelHierarchy",
"levelName": "Firstlevel",
"filter": {
"exclude": [
"firstlevelhierarchy.[47_net income].[48_operating profit].[]"
]
}
}],
"drills": {
"drillAll": true
},
"expands": {
"expandAll": true
},
"columns": [{
"uniqueName": "Year"
},
{
"uniqueName": "month"
}
],
"measures": [{
"uniqueName": "Amount",
"format": "Amount"
}]
}
}
});
function getData() {
return [{
"Org_key_name": "8_Canadian Division",
"ScenarioName": "Budget",
"Year":...