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>

<button onclick="createInstance()">
Create Flexmonster instance
</button>

<button onclick="getReport()">
Get report of the last Flexmonster instance
</button>

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

JavaScript

let pivot = [];
let x = 0;
let wrapper = document.getElementById("wrapper");

function createInstance() {
  let container = document.createElement("div");
  container.setAttribute("id", `pivot-container${x}`);
  wrapper.appendChild(container);
  pivot[x] = new Flexmonster({
    componentFolder: "https://cdn.flexmonster.com/",
    container: `pivot-container${x}`,
    width: "100%",
    height: 430,
    toolbar: true
  });
  var flex = {
    "dataSource": {
      "filename": "https://cdn.flexmonster.com/data/data.json"
    }
  };
  pivot[x].setReport(
    flex
  );
  x++;
}

function getReport() {
  if (pivot.length > 0) {
    console.log(pivot[pivot.length - 1].getReport());
  } else {
    console.log("No instances exist")
  }
}