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='filtersArea'>

</div>


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

CSS

#filtersArea {
  padding: 5px 7px;
  border: 1px solid #e5e5e5;
}

#filtersArea button {
  padding: 7px 15px 7px 10px;
  border: none;
  color: #111;
  background-color: #e9e9e9;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  margin: 5px;
}

#filtersArea button:hover {
  background-color: #dcdcdc;
  color: #111;
}

.fm-page-filter {
  display: none !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    options: {
      showFilter: false
    },
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Category"
      }],
      columns: [{
        uniqueName: "Country"
      }, {
        uniqueName: '[Measures]'
      }],
      measures: [{
        uniqueName: "Price"
      }, {
        uniqueName: "Quantity"
      }],
      reportFilters: [{
        uniqueName: "Business Type"
      }, {
        uniqueName: "Size"
      }]
    }
  }
});

flexmonster.on("reportchange", () => {
  showFilters();

})

function openFilter(field) {
  console.log("open filter for", field);
  pivot.openFilter(field);
}


function showFilters() {
  pivot.on("reportcomplete", () => {
    const filters = [...pivot.getReportFilters(), ...pivot.getRows(), ...pivot.getColumns()].map(f => f.uniqueName).filter(f => f !== "[Measures]")
    console.log(filters);
    const filtersArea = document.getElementById("filtersArea");

    filtersArea.innerHTML = "";
    for (const filter of filters) {
      const button = document.createElement("button");
      button.onclick = function() {
        openFilter(filter)
      };
      button.textContent = filter;
      filtersArea.appendChild(button);
      //innerHTML += `<button onclick="openFilter(${filter})">${filter}</button>`;
    }
  })
}

showFilters();