JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/2.9.52/flexmonster.js"></script>
<button onclick="expandAll()">Expand all</button>
<button onclick="collapseAll()">Collapse all</button>
<div id="pivot-container"></div>

JavaScript

var data = [
  {
    Product: "Prod1-ITA",
    Country: "ITA",
    Quantity: 1.0,
    Month: "2025 - M11",
    ThreeMonth: "2025 - Q04",
    Year: 2025,
  },
  {
    Product: "Prod2-ITA",
    Country: "ITA",
    Quantity: 2,
    Month: "2025 - M11",
    ThreeMonth: "2025 - Q04",
    Year: 2025,
  },
  {
    Product: "Prod1-USA",
    Country: "US",
    Quantity: 3,
    Month: "2025 - M11",
    ThreeMonth: "2025 - Q04",
    Year: 2025,
  },
];

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/2.9.52/",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  width: "100%",
  height: 430,
  report: {
    dataSource: {
      type: "json",
      data: data,
      mapping: {
        Product: {
          type: "string",
          caption: "Product",
        },
        Country: {
          type: "string",
          caption: "Country",
        },
        Quantity: {
          type: "number",
          caption: "Quantity",
        },
        Year: {
          folder: "Bucket",
          filters: true,
          caption: "Year",
        },
        ThreeMonth: {
          folder: "Bucket",
          caption: "Three months",
        },
        Month: {
          folder: "Bucket",
          caption: "Month",
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "Product",
        },
      ],
      columns: [
        {
          uniqueName: "Year",
        },
        {
          uniqueName: "ThreeMonth",
        },
        {
          uniqueName: "Month",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Quantity",
          aggregation: "sum",
          grandTotalCaption: "Budget FY",
        },
      ],
    },
  },
});

function expandAll()...