JSFiddle - React, Tailwind, and code Playground
HTML
<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/",
report: {
dataSource: {
dataSourceType: "json",
data: getData()
},
"slice": {
"rows": [
{
"uniqueName": "Customer"
}
],
"columns": [
{
"uniqueName": "Product"
},
{
"uniqueName": "[Measures]"
}
],
"measures": [
{
"uniqueName": "Curr Vol"
},
{
"uniqueName": "Prev Vol"
},
{
"uniqueName": "Vol Chg"
}
]
},
"options": {
"grid": {
"showGrandTotals": "rows"
}
}
},
width: "100%",
height: 500,
toolbar: true
});
function getData() {
return [{
"Customer": "A",
"Product": "P1",
"Curr Vol": 10,
"Prev Vol": 40,
"Vol Chg": -0.75
}, {
"Customer": "A",
"Product": "P2",
"Curr Vol": 20,
"Prev Vol": 30,
"Vol Chg": -0.33333333
}, {
"Customer": "B",
"Product": "P1",
"Curr Vol": 30,
"Prev Vol": 20,
"Vol Chg": 0.5
}, {
"Customer": "B",
"Product": "P2",
"Curr Vol": 40,
"Prev Vol": 10,
"Vol Chg": 3
}];
};