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: "Country",
         }, {
           uniqueName: "Image"
         }, ],
         columns: [{
             uniqueName: "[Measures]"
           },
           {
             uniqueName: "Name"
           },
           {
             uniqueName: "Color"
           }
         ], */
      rows: [{
          uniqueName: "Name"
        },
        {
          uniqueName: "Color"
        }
      ],
      columns: [
        {
          uniqueName: "Country",
        }, {
          uniqueName: "Image"
        },
      {
          uniqueName: "[Measures]"
        },
      ],
      measures: [{
          uniqueName: "Price"
        },
        {
          uniqueName: "Discount"
        }
      ]
    },

  }
});

function customizeCellFunction(cell, data) {
  if (!(data.hierarchy && data.hierarchy.uniqueName == "Image")|| data.measure) 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>`;
  }

}

pivot.on("cellclick", function(cell) {
  console.log(cell)
})


function getData() {
  return [{
      "Color": "red",
      "Country": "USA",
      "Name": "a",
      "Image": "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGUlEQVR4nGL5HWjLgBsw4ZEbwdKAAAAA///qlQGg09SuCQAAAABJRU5ErkJggg==",
      "Price":...