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>
<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()
},
"slice": {
"rows": [{
"uniqueName": "Category",
"filter": {
"measure": {
"uniqueName": "My Calculation",
"aggregation": "none"
},
"query": {
"greater": 1000000
}
}
}],
"columns": [{
"uniqueName": "[Measures]"
}],
"measures": [{
"uniqueName": "Price",
"aggregation": "sum"
},
{
"uniqueName": "Quantity",
"aggregation": "sum"
},
{
"uniqueName": "My Calculation",
"formula": "sum(\"Price\") * sum(\"Quantity\")",
"caption": "My Calculation"
}
],
"sorting": {
"column": {
"type": "asc",
"tuple": [],
"measure": {
"uniqueName": "My Calculation",
"aggregation": "none"
}
}
}
},
},
width: "100%",
height: 500
});
function getData() {
return [{
"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": "214 oz",
"Color": "yellow",
"Destination": "Canada",
"Business Type": "Specialty Bike Shop",
"Country": "Canada",
"Price": 502,
"Quantity": 90,
"Discount": 17
}, {
"Category": "Components",
"Size": "235 oz",
"Color": "green",
"Destination": "Australia",
"Business Type": "Warehouse",
"Country": "Australia",
"Price": 551,
"Quantity": 1950,
"Discount": 51
}, {
"Category": "Components",
"Size": "307 oz",
"Color":...