JSFiddle - React, Tailwind, and code Playground

Mapping configuration

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

.tooltip {
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: pre-wrap !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 340,
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      type: "csv",
      filename: "data/data.csv",
      mapping: {
        Color: {
          type: "id",
        },
      },
    },
    options: {
      grid: {
        type: "flat",
      },
    },
  },
})

function customizeCellFunction(cell, data) {
  if (data) {
    cell.text =
      cell.text + `<div class='tooltip' title='${data.recordId}'></div>`
  }
}