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 class='container'>
  <h2>
    FILTER BY STATUS
  </h2>
  <select id='status'>
  </select>
</div>
<div id="pivot-container"></div>

CSS

select {
  border: 2px solid #333;
  background: #fff;
  color: #333;
  margin: 5px 0;
  display: inline-block;
  transition: all .3s;
  font-weight: normal;
  padding: 10px 10px;
  font-size: 14px;
  width: 100%;
}

select,
button {
  text-transform: uppercase;
  cursor: pointer;
}

option {
  cursor: pointer;
}

.container{
  width: max-content;
  padding: 15px 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 500,
  report: {
    dataSource: {
      type: "json",
      filename: "data/retail-data.json",
    },
    options: {
      grid: {
        showFilter: false
      },
      showTotals: false
    },
    slice: {
      rows: [{
        "uniqueName": "Retail Category"
      }, ],
      columns: [{
        "uniqueName": "Status"
      }, {
        "uniqueName": "Order Date.Year"
      }, {
        "uniqueName": "[Measures]"
      }],
      measures: [{
        "uniqueName": "Price",
        "aggregation": "sum"
      }, ],
      expands: {
        expandAll: true
      }
    },
    formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
      currencySymbol: "$"
    }]
  }
});

pivot.on("reportcomplete", () => {

  const selectElement = document.getElementById('status');
  const members = pivot.getMembers("Status");
  selectElement.innerHTML = '';
  members.forEach(member => {
    const option = document.createElement('option');
    option.value = member.uniqueName;
    option.textContent = member.caption;
    selectElement.appendChild(option);
  });
  filter("Status", selectElement.value);
  selectElement.addEventListener('change', function() {
    filter("Status", this.value);
  });
})

function filter(hierarchyName, memberName) {
  pivot.setFilter(hierarchyName, {
    members: [memberName]
  })
}