JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

CSS

.tooltip {
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: pre-wrap !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  customizeCell: customizeCellFunction,
  toolbar: true,
  report: {
    conditions: [{
      formula: "#value > 300000",
      format: {
        backgroundColor: "#FFEEEE",
        color: "#F44336",
        fontFamily: "Arial",
        fontSize: "12px"
      }
    }],
    dataSource: {
      filename: "data/data.csv"
    }
  }
});

function customizeCellFunction(cell, data) {
  if (data.type == "header") {
    cell.text = cell.text + `<div class='tooltip' title='${data.label}'></div>`;
  } else {
    if (data.type == "value") {
      cell.text = cell.text + `<div class='tooltip' title='${data.label}'></div>`;
    }

  }
}