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-view div.fm-cell.alter {
color:#ff0000 !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    options: {
      grid: {
        type: "flat"
      }
    }
  },
  beforegriddraw: function(e) {
    smoothDraw = e.smooth;
    if (e.smooth == false) {
      cleanStyles = true;
    }
  },
  aftergriddraw: function(e) {
    addExtraStyles();
  }
});

let cleanStyles = false;
let addStyles = false;
let smoothDraw = false;
let viewType;
let styleTag;

function cleanExtraStyles() {
  let prevStyleTag = document.head.getElementsByTagName("style");
  for (let i = 0; i < prevStyleTag.length; i++) {
    if (prevStyleTag[i].innerHTML.indexOf(".fm-grid-layout.fm-flat-view div.fm-cell") == 0) {
      if (window.ActiveXObject || "ActiveXObject" in window) {
        prevStyleTag[i].removeNode(true);
      } else {
        prevStyleTag[i].remove();
      }
    }
  }
}

function addExtraStyles() {
  if (styleTag && addStyles) {
    addStyles = false;
    cleanExtraStyles();
    document.head.appendChild(styleTag);
  }
}

function customizeCellFunction(cell, data) {
  if (cleanStyles) {
    cleanStyles = false;
    viewType = flexmonster.getOptions().grid.type;
    styleTag = null;
  }


  if (viewType != "flat") return;

  if (smoothDraw == false && data.hierarchy && data.hierarchy.uniqueName == "Country" && data.member && data.member.caption == "Canada") {

    if (!styleTag) {
      addStyles = true;
      styleTag = document.createElement('style');
    }

    style = ".fm-grid-layout.fm-flat-view div.fm-cell[data-r='" + data.rowIndex + "']:not(.fm-empty) ";
    style += "{ background-color: #B2DBBF !important; }";
    styleTag.innerHTML += style;

  }
  if (smoothDraw == false && data.hierarchy && data.hierarchy.uniqueName == "Country" && data.member && data.member.caption == "France") {

    if (!styleTag) {
      addStyles = true;
...