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>
<link href="https://cdn.flexmonster.com/flexmonster.css" rel="stylesheet">


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

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    "dataSource": {
      "type": "api",
      "url": "https://olap.flexmonster.com:9500",
      "index": "fm-product-sales",
      mapping: {
        "Size": {
          filters: false
        }
      }
    },
    "slice": {
      "rows": [{
        "uniqueName": "Country"
      }, {
        "uniqueName": "Size"
      }],
      "columns": [{
        "uniqueName": "Category"
      }, {
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "Price",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Quantity",
          "aggregation": "average"
        }
      ]
    },
    "formats": [{
      "name": "",
      "maxDecimalPlaces": 2
    }]
  },
  width: "100%"
});

pivot.on("reportcomplete", () => {
  const headers = document.querySelectorAll('#pivot-container .fm-draggable');
  headers.forEach(header => {
    header.classList.add('fm-filter-header');
    if (!header.querySelector('i')) {
      header.innerHTML += '<i aria-hidden="true" class="fm-icon fm-filter-icon"></i>';
      header.addEventListener('click', () => {
        alert('non-filterable header clicked')
      })
    }
  })
})