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>
<script src="https://cdn.flexmonster.com/lib/flexmonster.highcharts.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

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

<div class="title">
Output of the getData() method.<br>
Updates every time the slice is changed.<br>
Always contains the "Color" hierarchy absent on the grid and in the Field List.
</div>
<div class="wrapper">
  <pre id="get-data-info"></pre>
</div>

CSS

.wrapper {
  max-height: 400px;
  overflow-y: scroll;
  width: 385px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 1px 3px 1px rgba(60, 64, 67, 0.149);
}

.title {
  margin-top: 30px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

JavaScript

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

let hiddenFields = ["Color"];

flexmonster.on("reportcomplete", () => {
  flexmonster.getData({
    slice: getSlice()
  }, function(data) {
    document.querySelector("#get-data-info").innerText = JSON.stringify(data.data, null, 4);
  }, function(data) {
    document.querySelector("#get-data-info").innerText = JSON.stringify(data.data, null, 4);
  })
})

function getSlice() {
  slice = flexmonster.getReport().slice
  slice.columns.push({
    uniqueName: "Color"
  });
  return slice
}

pivot.on("fieldslistopen", () => {
  let temporary = [];
  setTimeout(() => {
    let fieldList = document.querySelector("#fm-lst-hierarchies");
    for (let i = 0; i < fieldList.childNodes.length; i++)
      if (hiddenFields.includes(fieldList.childNodes[i].childNodes[1].innerText))
        fieldList.removeChild(fieldList.childNodes[i]);
    for (let field of temporary)
      fieldList.appendChild(field);
  }, 1);
});