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>

CSS

#fm-custom-button {
  text-rendering: optimizeLegibility !important;
  -webkit-text-size-adjust: none;
  user-select: none;
  font: inherit;
  vertical-align: baseline;
  transition: none;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: Arial, sans-serif;
  text-align: left;
  margin: 0;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  text-shadow: none;
  float: none;
  color: inherit;
  font-weight: 400;
  background: 0 0;
  font-size: 12px;
  text-decoration: underline !important;
  line-height: 1;
  width: initial;
  height: initial;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-left: 0;
  display: inline-block;
}

#fm-custom-button:hover {
  text-decoration: none !important;
}

JavaScript

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

let selectedAll = false;

flexmonster.on('fieldslistopen', function() {
  if (document.getElementById("fm-custom-button")) return;
  let fieldListHeader = document.querySelector("#pivotContainer > #fm-pivot-view .fm-fields-view .fm-list-header .fm-list-header-label-wrap");
  let button = document.createElement("a");
  button.setAttribute("onclick", "toggleSelectAll()");
  button.id = "fm-custom-button";
  button.innerText = "Select All";
  fieldListHeader.appendChild(button);
});


function toggleSelectAll() {
  let fieldList = document.querySelector("#pivotContainer > #fm-pivot-view .fm-fields-view .fm-lst-hierarchies");
  let selectAllButton = document.querySelector("#pivotContainer > #fm-pivot-view .fm-fields-view .fm-list-header .fm-list-header-label-wrap #fm-custom-button")
  if (!selectedAll) {
    if (fieldList) {
      for (let elem of fieldList.children) {
        if (elem.classList.contains("fm-unchecked")) {
          elem.children[0].click();
        }
      }
    }
    selectedAll = true;
    selectAllButton.innerText = "Deselect all"
  } else {
    if (fieldList) {
      for (let elem of fieldList.children) {
        if (elem.classList.contains("fm-checked")) {
          elem.children[0].click();
        }
      }
    }
    selectedAll = false;
    selectAllButton.textContent = "Select all"
  }

}