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 rel="stylesheet" href="https://cdn.flexmonster.com/flexmonster.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button onclick="clearCustomizing()">Clear Customizing</button>
<button onclick="startCustomizing()">Start Customizing</button>
<div id="pivot-container"></div>

CSS

#fm-pivot-view .fa{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    "dataSource": {
      "data": getData()
    },
    "options": {
        "grid": {
            "type": "flat"
        }
    }
  }
});

function customizeCellFunction(cell, data) {
  if (data.hierarchy && 
      data.hierarchy.uniqueName == "Follow up" && 
      data.type == "value") {
    if(data.label === "2"){
       cell.text = "<i class='fa fa-calendar'></i>"
    }else if(data.label === "1"){
       cell.text = "<i class='fa fa-check'></i>";
    }
  }

}

function preventExpand(e) {
  e.stopImmediatePropagation();
}

function clearCustomizing() {
  pivot.customizeCell(null);
}

function startCustomizing() {
  pivot.customizeCell(customizeCellFunction);
}

function getData() {
  return [
  {
    "Category": {"type": "string"},
    "Size": {"type": "string"},
    "Color": {"type": "string"},
    "Destination": {"type": "string"},
    "Business Type": {"type": "string"},
    "Country": {"type": "string"},
    "Customer": {"type": "string"},
    "Follow up": {"type": "string"},
    "Quantity": {"type": "number"}
  },
  {
    "Category": "Accessories",
    "Size": "262 oz",
    "Color": "red",
    "Destination": "Australia",
    "Business Type": "Specialty Bike Shop",
    "Country": "Australia",
    "Customer": "Susan",
    "Follow up": "1",
    "Quantity": 225
  }, {
    "Category": "Accessories",
    "Size": "214 oz",
    "Color": "yellow",
    "Destination": "Canada",
    "Business Type": "Specialty Bike Shop",
    "Country": "Canada",
    "Customer": "Juliana",
    "Follow up": "2",
    "Quantity": 90
  }, {
    "Category": "Components",
    "Size": "235 oz",
    "Color": "green",
    "Destination": "Australia",
    "Business Type": "Warehouse",
    "Country": "Australia",
    "Customer": "Dan",
    "Follow up": "1",
    "Quantity": 1950
  }, {
  ...