JSFiddle - React, Tailwind, and code Playground
by Flexmonster Pivot Table
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
options: {
showGrandTotals: false,
showAggregationLabels: false
},
dataSource: {
data: [{
"Category": "Accessories",
"Sep 2020": 8234,
"Sep 2021": 5656,
"Oct 2020": 6746,
"Oct 2021": 6735,
},
{
"Category": "Shoes",
"Sep 2020": 7634,
"Sep 2021": 3313,
"Oct 2020": 4568,
"Oct 2021": 14675,
},
{
"Category": "T-Shirts",
"Sep 2020": 6688,
"Sep 2021": 8753,
"Oct 2020": 5455,
"Oct 2021": 5454,
}
]
},
slice: {
rows: [{
uniqueName: "Category"
}, ],
columns: [{
uniqueName: "[Measures]"
}, ],
measures: [
//TOTALS
{
uniqueName: "Sep 2020",
aggregation: "sum",
},
{
uniqueName: "Sep 2021",
aggregation: "sum",
},
{
formula: 'sum("Sep 2020") - sum("Sep 2021")',
uniqueName: "September Var."
},
//OCTOBER
{
uniqueName: "Oct 2020",
aggregation: "sum",
},
{
uniqueName: "Oct 2021",
aggregation: "sum",
},
{
formula: 'sum("Oct 2020") - sum("Oct 2021")',
uniqueName: "October Var."
},
//TOTALS
{
formula: 'sum("Sep 2020") + sum("Oct 2020")',
uniqueName: "2020 TTL"
},
{
formula: 'sum("Sep 2021") + sum("Oct 2021")',
uniqueName: "2021 TTL"
},
{
formula: '"2021 TTL" - "2020 TTL"',
uniqueName: "Var. 2021-2020"
}
]
}
}
});