JSFiddle - React, Tailwind, and code Playground
Data source
by Flexmonster Pivot Table
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
const rows = [{ uniqueName: "Product" }];
const columns = [{ uniqueName: "Period" }, { uniqueName: "[Measures]" }];
const measures = [
{
uniqueName: "Total Units [BOBWA]",
aggregation: "sum",
caption: "Total Units [BOBWA]",
},
];
const pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
dataSource: {
type: "json",
data: getData(),
},
slice: { rows, columns, measures },
options: {
showEmptyValues: false,
drillThrough: false,
configuratorButton: false,
showAggregationLabels: true,
grid: {
title: measures[0].uniqueName,
showGrandTotals: "off",
showTotals: "off",
showFilter: false,
showHeaders: false,
showHierarchies: false,
showHierarchyCaptions: false,
type: "compact",
showReportFiltersArea: false,
},
},
},
});
function getData() {
return [
{
Product:
"G010004498092U-Sarah Barrios, Marc E. Bassy-Bedroom Floor Feelings (feat. Marc E. Bassy)[]",
Period: "202309",
"Total Units [BOBWA]": 4419,
},
{
Product:
"G010004498092U-Sarah Barrios, Marc E. Bassy-Bedroom Floor Feelings (feat. Marc E. Bassy)[]",
Period: "202310",
"Total Units [BOBWA]": 3780,
},
{
Product:
"G010004498092U-Sarah Barrios, Marc E. Bassy-Bedroom Floor Feelings (feat. Marc E. Bassy)[]",
Period: "202312",
"Total Units [BOBWA]": 3456,
},
{
Product: "G010004509714H-Vassline-Black forest [Memoir version]",
Period: "202309",
"Total Units [BOBWA]": 2,
},
{
Product: "G010004509714H-Vassline-Black forest [Memoir version]",
Period: "202310",
"Total Units [BOBWA]": 2,
},
{
Product: "G010004509714H-Vassline-Black forest [Memoir...