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

let isExpanded = false;

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: getReport(),
});

function getReport() {
  const report = {
    dataSource: {
      data: [
        {
          FirstLeveCategory: "02 First Level Category B",
          SecondLevelCategory: "Second Level Category B",
          FinanceCategory: "Finance Category 2",
          Sales: 700,
          Date: "2025-07-01",
        },
      ],
      mapping: {
        FirstLeveCategory: {
          hierarchy: "Category",
        },
        SecondLevelCategory: {
          parent: "FirstLeveCategory",
          hierarchy: "Category",
        },
        FinanceCategory: {
          type: "string",
        },
        Sales: {
          type: "number",
        },
        Date: [
          {
            type: "date string",
            format: "MMM/yyyy",
            uniqueName: "Month",
            interval: "M",
            hierarchy: null,
          },
        ],
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Category",
        },
        {
          uniqueName: "FinanceCategory",
        },
      ],
      columns: [
        {
          uniqueName: "Month",
        },
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          aggregation: "sum",
          uniqueName: "Sales",
        },
      ],
      expands: {
        expandAll: true,
      },
      drills: {
        drillAll: true,
      },
    },
    options: {
      grid: {
        showGrandTotals: "rows",
        showHierarchies: false,
      },
    },
  };

  return report;
}