JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

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

<div id="pivot-container"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    "dataSource": {
      "dataSourceType": "csv",
      "filename": "https://cdn.flexmonster.com/data/data.csv"
    },
    "slice": {
      "rows": [{
          "uniqueName": "Destination"
        },
        {
          "uniqueName": "Color"
        }
      ],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "Price",
        "aggregation": "sum",
      }]
    }
  },
  reportcomplete: function() {
    report = flexmonster.getReport();
    flexmonster.off("reportcomplete");
  },
  reportchange: function() {
    validateChanges();
  }
});

let report = {};

function validateChanges() {
  //Save old report
  let oldReport = report;
  //Get new report
  report = flexmonster.getReport();
  //Check if user cnahged the columns
  if (report.slice.columns[0].uniqueName !== "[Measures]" || report.slice.columns.length !== 1) {
    //Revert changes
    report = oldReport;
    flexmonster.setReport(report);
    //Notify users about validation
    flexmonster.alert({
      title: "Report Validation Failed",
      message: "Changes in columns are not allowed. Report reverted to previous state.",
      type: "info"
    })
  }

}