JSFiddle - React, Tailwind, and code Playground
by Flexmonster Pivot Table
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<button onclick="removeColumn()">Hide column 3</button>
<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": {
"Discount": {
"type": "number"
},
"Country": {
"type": "string"
},
"Color": {
"type": "string"
}
}
},
"tableSizes": {
"columns": [{
"idx": 2,
"width": 0
}]
},
"slice": {
"rows": [{
"uniqueName": "Country"
}],
"columns": [{
"uniqueName": "Color"
},
{
"uniqueName": "[Measures]"
}
],
"measures": [{
"uniqueName": "Discount",
"aggregation": "average"
},
{
"uniqueName": "Discount",
"aggregation": "differenceofrow"
}
]
}
},
width: "100%",
height: 500
});
function getData() {
return [{
"Category": "Accessories",
"Size": "262 oz",
"Color": "white",
"Destination": "Australia",
"Business Type": "Specialty Bike Shop",
"Country": "Australia",
"Price": 174,
"Quantity": 225,
"Discount": 30
},
{
"Category": "Accessories",
"Size": "262 oz",
"Color": "white",
"Destination": "Australia",
"Business Type": "Specialty Bike Shop",
"Country": "Australia",
"Price": 174,
"Quantity": 225,
"Discount": 32
},
{
"Category": "Accessories",
"Size": "262 oz",
"Color": "red",
"Destination": "Australia",
"Business Type": "Specialty Bike Shop",
"Country": "Australia",
"Price": 174,
"Quantity": 225,
"Discount": 23
},
{
"Category": "Accessories",
"Size": "262 oz",
"Color": "red",
"Destination": "Australia",
"Business Type": "Specialty Bike Shop",
"Country": "Australia",
...