JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="wrapper">
  <div id="pivotContainer"></div>
</div>

CSS

#wrapper {
  width: 500px;
  height: 700px;
  overflow: scroll;
}

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  width: "100%",
  height: "100%",
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    options: {
      grid: {
        type: "classic"
      }
    }
  }
});

let container = document.getElementById("pivotContainer");
let defaultWidth = container.getBoundingClientRect().width;
let fallbackWidth = 5000;
let minWidth = 500;
let widthMargin = 150;

flexmonster.on("reportcomplete", () => {
  flexmonster.off("reportcomplete");
  flexmonster.on("update", () => {
    container.style.width = `${fallbackWidth}px`;
    flexmonster.refresh();
    flexmonster.on("aftergriddraw", () => {
      flexmonster.off("aftergriddraw");
      let resWidth = 0;
      let widthCountFlag = true;
      let cellX = 0;
      while (widthCountFlag) {
        flexmonster.setSelectedCell(0, cellX);
        if (flexmonster.getSelectedCell().type == "header") {
          flexmonster.setSelectedCell(-1, cellX);
          resWidth += flexmonster.getSelectedCell().width;
          cellX++;
        } else {
          widthCountFlag = false;
          continue;
        }
      }
      if (resWidth < minWidth) {
        resWidth = defaultWidth;
      }
      container.style.width = `${resWidth + widthMargin}px`;
      flexmonster.refresh();
    })
  });

  //to restrict manual switch to compact
  flexmonster.on("reportchange", () => {
    if (flexmonster.getOptions().grid.type == "compact") {
      flexmonster.setOptions({
        grid: {
          type: "classic"
        }
      });
      flexmonster.refresh();
    }
  })
});