JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://cdn.flexmonster.com/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>

CSS

#fm-pivot-view .fm-grid-column,
#fm-pivot-view .fm-grid-column-mobile {
  width: 200px !important;
  min-width: 200px;
}

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      type: "json",
      data: getData(),
      mapping: {
        Product: {
          type: "string",
        },
        Month: {
          type: "string",
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Product",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      columns: [
        {
          uniqueName: "Month",
          sort: "asc",
        },
      ],
      measures: [
        {
          uniqueName: "Quantity",
        },
      ],
      expands: {
        expandAll: true,
      },
      drills: {
        drillAll: true,
      },
    },
  },
})

function getData() {
  return [
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_01_01",
    },
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_02_01",
    },
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_03_01",
    },
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_04_01",
    },
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_05_01",
    },
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_06_01",
    },
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_07_01",
    },
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_08_01",
    },
    {
      Product: "Product 1",
      Quantity: 1787878.24545245252525252525,
      Month: "Month_2025_09_01",
    },
    {
      Product: "Product 1",
      Quantity:...