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/",
width: "100%",
height: 430,
toolbar: true,
report: {
"dataSource": {
"dataSourceType": "json",
"data": [
{
"Column1": {
"type": "number"
},
"Column2": {
"type": "number"
},
"Data value1": {
"type": "number"
},
"Data value2": {
"type": "number"
}
},
{
"Column1": 1003,
"Column2": 105303,
"Data value1": 122350.090075,
"Data value2": 120612350.090075
},
{
"Column1": 2345,
"Column2": 233345,
"Data value1": 12350.090075,
"Data value2": 75086883.8805883
}
]
},
"slice": {
"rows": [
{
"uniqueName": "Column1"
},
{
"uniqueName": "Column2",
"active": false
}
],
"columns": [
{
"uniqueName": "[Measures]"
}
],
"measures": [
{
"uniqueName": "Data value1",
"aggregation": "sum",
"grandTotalCaption": "Data value1"
},
{
"uniqueName": "Data value2",
"aggregation": "sum",
"grandTotalCaption": "Data value2",
"active": false
}
],
"expands": {
"expandAll": true
}
},
"options": {
"grid": {
"showHeaders": false,
"showTotals": "off",
"showGrandTotals": "off",
"grandTotalsPosition": "bottom",
...