JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button id="toggle">Toggle collapses</button>

<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(),
});

document.getElementById('toggle').addEventListener('click', () => {
  if (isExpanded) {
    pivot.collapseAllData();
  } else {
    pivot.expandAllData();
  }

  isExpanded = !isExpanded;
});

function getReport() {
  const report = {
    dataSource: {
      data: [
        {
          State: "California",
          City: "",
          Product: "Laptop",
          Sales: 1000
        },
        {
          State: "Texas",
          City: "Houston",
          Product: "Smartphone",
          Sales: 700
        }
      ],
      mapping: {
        State: {
          hierarchy: "Geography"
        },
        City: {
          parent: "State",
          hierarchy: "Geography"
        },
        Product: {
          type: "string"
        },
        Sales: {
          type: "number"
        }
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Geography"
        },
        {
          uniqueName: "Product"
        }
      ],
      measures: [
        {
          uniqueName: "Sales",
          aggregation: "sum"
        }
      ]
    },
    options: {
      grid: {
        showGrandTotals: "rows",
        showHierarchies: false,
      },
    },
  };

  return report;
}