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

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

function customizeCellFunction(cell, data) {
  if (!(data.hierarchy && data.hierarchy.uniqueName == "Image")) return;
  let newText =
    `<img src='data:image/png;base64, ${cell.text}'/>`;

  if (data && data.type == "value" && data.label != "") {
    cell.text = newText;
  }
}


function getData() {
  return [ {
      "Color": "red",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGL5HWjLgBsw4ZEbwdKAAAAA///qlQGg09SuCQAAAABJRU5ErkJggg==",
    },
    {
      "Color": "orange",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGL5WanIgBsw4ZEbwdKAAAAA///2twGqbCcpIQAAAABJRU5ErkJggg==",
    },
    {
      "Color": "yellow",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGL5cTiVATdgwiM3gqUBAQAA//+gJQI3KXpNtgAAAABJRU5ErkJggg==",
    },
    {
      "Color": "green",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGJh3mXGgBsw4ZEbwdKAAAAA//81LAEKMgBhAgAAAABJRU5ErkJggg==",
    },
    {
      "Color": "light blue",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGLR3nOOATdgwiM3gqUBAQAA//8eMwHMq7PLVAAAAABJRU5ErkJggg==",
    },
    {
      "Color": "blue",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGIxYvnNgBsw4ZEbwdKAAAAA//9/LgFIFSSumwAAAABJRU5ErkJggg==",
    },
    {
      "Color": "purple",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGKZJfyWATdgwiM3gqUBAQAA///9+AGx5iUuFAAAAABJRU5ErkJggg==",
    },
   
  ]
}