JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

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,
      },
      showEmptyLevels: true 
    },
  };

  return report;
}