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>

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  customizeCell: customizeCellFunction,
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    options: {
      grid: {
        type: "flat"
      }
    },
    dataSource: {
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "product"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "price"
      }]
    }
  }
});

function getData() {
  return [{
      "product": {
        type: "string"
      },
      "bgColor": {
        type: "property",
        hierarchy: "product"
      },
      "category": {
        type: "property",
        hierarchy: "product"
      },
      "price": {
        type: "number"
      }
    },
    {
      "product": "Banana",
      "bgColor": "#fac96d",
      "category": "fruit",
      "price": 24
    },
    {
      "product": "Chocolate",
      "bgColor": "#e28743",
      "category": "product",
      "price": 31
    },
    {
      "product": "Chocolate",
      "bgColor": "#e28743",
      "category": "product",
      "price": 56
    }
  ];
}

function customizeCellFunction(cell, data) {
  if (!(data.hierarchy && data.hierarchy.uniqueName == "product")) return;
  if (data.member) {
    let newText = `<p style='background-color:${data.member.properties.bgColor}'>${data.escapedLabel}  (${data.member.properties.category})</p>`;
    let parts = cell.text.split(data.escapedLabel);
    if (parts.length == 2) {
      newText = parts[0] + newText + parts[1];
    }
    cell.text = newText;
  }
}