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: {
"formats": [
{
"name": "",
"thousandsSeparator": ","
}
],
dataSource: {
dataSourceType: "json",
data: jsonData()
},
"slice": {
"rows": [
{
"uniqueName": "Order Year"
}
],
"columns": [
{
"uniqueName": "[Measures]"
}
],
"measures": [
{
"uniqueName": "Sale Price",
"aggregation": "sum"
}
]
}
},
width: "100%",
height: 400
});
function jsonData(){
var data = [
{
"Customername": "Signal Gift Stores",
"Order Year": 2003,
"Sale Price": 2441.04,
"Status": "Shipped",
"Customernumber": 112
},
{
"Customername": "Signal Gift Stores",
"Order Year": 2003,
"Sale Price": 4698.54,
"Status": "Shipped",
"Customernumber": 112
},
{
"Customername": "Signal Gift Stores",
"Order Year": 2003,
"Sale Price": 2716.56,
"Status": "Shipped",
"Customernumber": 112
},
{
"Customername": "Signal Gift Stores",
"Order Year": 2003,
"Sale Price": 1524.44,
"Status": "Shipped",
"Customernumber": 112
},
{
"Customername": "Signal Gift Stores",
"Order Year": 2003,
"Sale Price": 1374.34,
"Status": "Shipped",
"Customernumber": 112
},
{
"Customername": "Signal Gift Stores",
"Order Year": 2003,
"Sale Price": 1373.85,
"Status": "Shipped",
"Customernumber": 112
},
{
...