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="pivot-container"></div>

CSS

#fm-pivot-view .fm-grid-row {
  max-height: 300px;
}

.list-element {
  text-align: center !important;
  padding: 3px !important;
  border-radius: 4px !important;
  margin-bottom: 3px !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
  z-index: 100 !important;
}

#fm-pivot-view #fm-grid-view .fm-filters .fm-header-r {
  background-color: #E6C7D5;
}

#fm-pivot-view #fm-grid-view #fm-cols-filter .fm-header {
  background-color: #C6C6C6;
}

#fm-pivot-view #fm-grid-view #fm-cols-filter {
  background-color: #ECECEC;
}

#fm-pivot-view #fm-grid-view .fm-header-r {
  background-color: #F0DDE6;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 700,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
  }
});

function customizeCellFunction(cell, data) {
  if (data && data.type == "header" && data.label != "") {
    cell.text = cell.text + " (edited)"

  }
}