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://www.w3schools.com/w3css/4/w3.css">
<div id="pivot-container"></div>

CSS

.tooltip {
  position: relative;
  z-index: 100 !important;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.title {
  font-family: "Arail", sans-serif;
  font-weight: 600;
  background: yellow;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      type: "json",
      data: getData()
    },
    slice: {
      rows: [{
          uniqueName: "Category"
        },
        {
          uniqueName: "Color"
        }
      ],
      columns: [{
          uniqueName: "Business Type"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Value",
        aggregation: "sum",
        format: "percent"
      }],
      expands: {
        rows: [{
          tuple: [
            "category.[accessories]"
          ]
        }]
      }
    },
    formats: [{
      name: "percent",
      currencySymbol: "%",
      positiveCurrencyFormat: "1$",
      negativeCurrencyFormat: "-1$"
    }],
  },
  customizeCell: customizeCellFunction,
  width: "100%",
  height: 500
});

function customizeCellFunction(cell, data) {
  if (data && data.hierarchy && data.hierarchy.uniqueName == "Value" && data.type == "value") {
    if (data.isTotal) {
      cell.style["background-color"] = getColorFromRange(data.value);
      cell.text = `<div class="tooltip" title="Value: ${(data.value)?data.label:'empty'}">${cell.text}</div>`
    } else {
      cell.text = `<div class="tooltip" title="Value: ${(data.value)?data.label:'empty'}"><div class="w3-container">
      	<div class="w3-dark-grey">
      		<div class="w3-container w3-green w3-center" style="width:${(data.value && data.value > 100)?'100%':cell.text}">${cell.text}</div>
      	</div>
      </div></div>`
    }
  }
}

function getColorFromRange(value) {
  if (value) {
    if (value >= 25 && value < 75) {
      return "#92D050";
    } else if (value >= 75 && value < 100) {
      return "#FFC000";
    } else if (value >= 100) {
      return "#FF5050";
    }
  }
  return "#9BC2E6"
}

function getData() {
  return [{
    "Category": "Accessories",
    "Size": "262 oz",
   ...