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="pivotContainer"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    }
  }
});

flexmonster.on("beforetoolbarcreated", (toolbar) => {
  toolbar.showOpenRemoteReportDialog = function() {
    var self = this;
    var Labels = this.Labels;
    var applyHandler = function() {
      if (textInput.value.length > 0) {
        self.pivot.load(textInput.value);
      }
    }
    var dialog = this.popupManager.createPopup();
    dialog.content.classList.add("fm-popup-w500");
    dialog.setTitle(Labels.open_remote_report);
    dialog.setToolbar([{
        id: "fm-btn-open",
        label: Labels.open,
        handler: applyHandler,
        isPositive: true
      },
      {
        id: "fm-btn-cancel",
        label: Labels.cancel
      }
    ]);
    var content = document.createElement("div");
    var textInput = document.createElement("input");
    textInput.type = "text";
    var options = self.pivot.getOptions() || {};
    var isFlatTable = (options.grid && options.grid.type == "flat");
    textInput.value = "URL to your report";
    content.appendChild(textInput);

    dialog.setContent(content);
    this.popupManager.addPopup(dialog.content);
  }
});