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

.highlight > span {
  color: red !important;
}

.tooltip {
  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: {
    dataSource: {
      filename: "data/data.csv"
    }
  }
});

function customizeCellFunction(cell, data) {
  if (data.type == "header") {
    cell.text = "<span class='tooltip' title='" + data.label + "'>" + cell.text.replace(' – ', ' <br/>') + "</span>";

  } else {
    if (data.type == "value") {
      cell.text = "<span title='" + data.label + "'>" + cell.text + "</span>";
      cell.addClass("tooltip");
      //Add conditional formatting
      if (data.value < 300000 && data.measure.uniqueName === "Price")
        cell.addClass("highlight");
    }

  }
}