JSFiddle - React, Tailwind, and code Playground
HTML
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<div id="pivot"></div>
JavaScript
new WebDataRocks({
container: "#pivot",
toolbar: true,
report: {
"dataSource": {
"dataSourceType": "csv",
"filename": "https://cdn.webdatarocks.com/data/data.csv"
},
"options": {
"grid": {
"showReportFiltersArea": false
}
},
"slice": {
"reportFilters": [{
"uniqueName": "Business Type"
},
{
"uniqueName": "Size"
},
{
"uniqueName": "Quantity"
},
{
"uniqueName": "Color"
},
{
"uniqueName": "Discount"
},
{
"uniqueName": "Country"
},
{
"uniqueName": "Destination"
}
],
"rows": [{
"uniqueName": "Category"
}],
"columns": [{
"uniqueName": "Measures"
}],
"measures": [{
"uniqueName": "Price",
"aggregation": "sum"
}]
}
}
})