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-custom-cell {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "Image"
      },
      ],
      columns: [{
      uniqueName: "Color"
      },{
      uniqueName: "[Measures]"}],
      measures: [
      {
      uniqueName: "Price"
      }
      ]
      },
      
  }
});

function customizeCellFunction(cell, data) {
  if (!(data.hierarchy && data.hierarchy.uniqueName == "Image")) return;
  
  if (data && data.type == "header" && data.label != "") {
  let base64Img;
    cell.addClass("fm-custom-cell");
    if (data.expanded) {
      base64Img = `<i class="fm-icon fm-expanded-icon" title="Click to collapse"></i>
<img src='data:image/png;base64, ${data.label}'/>`;
    } else {
      base64Img = `<i class="fm-icon fm-collapsed-icon" title="Click to expand"></i>
<img src='data:image/png;base64, ${data.label}'/>`;
    }
    cell.text = `<div style="display:flex; align-items:center; font-size:12px; position:relative;">
${base64Img}</div>`;
  }
  
}


function getData() {
  return [ {
      "Color": "red",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGL5HWjLgBsw4ZEbwdKAAAAA///qlQGg09SuCQAAAABJRU5ErkJggg==",
      "Price": 20
    },
    {
      "Color": "orange",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGL5WanIgBsw4ZEbwdKAAAAA///2twGqbCcpIQAAAABJRU5ErkJggg==",
      "Price": 40
    },
    {
      "Color": "yellow",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGL5cTiVATdgwiM3gqUBAQAA//+gJQI3KXpNtgAAAABJRU5ErkJggg==",
      "Price": 30
    },
    {
      "Color": "green",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGJh3mXGgBsw4ZEbwdKAAAAA//81LAEKMgBhAgAAAABJRU5ErkJggg==",
      "Price": 50
    },
    {
      "Color": "light blue",
      "Image":...