JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivot-container"></div>

CSS

.tooltip {
  position: relative;
  z-index: 100 !important;
  display: inline-block;
}

.title {
  font-family: "Arail", sans-serif;
  font-weight: 600;
  background: yellow;
}

.wrapped {
   white-space: normal !important;
   height: 80px !important;
}

JavaScript

let description = `Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Odio facilisis mauris sit amet massa vitae tortor
condimentum lacinia. Ullamcorper eget nulla facilisi
etiam dignissim diam. Urna porttitor rhoncus dolor
purus non enim. Augue neque gravida in fermentum
et sollicitudin ac orci phasellus.`


var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        Agent: {
          type: "string"
        },
        State: {
          type: "string"
        },
        Airline: {
          type: "string"
        },
        "2020 Sales TTV": {
          type: "number"
        },
        "2019 Sales TTV": {
          type: "number"
        },
        "Description Text": {
          type: "string"
        }
      }
    },
    "slice": {
      "rows": [{
          "uniqueName": "Airline"
        },
        {
          "uniqueName": "Description Text",
        }
      ],
      "columns": [{
        "uniqueName": "[Measures]"
      }, ],
      "measures": [{
        "uniqueName": "2020 Sales TTV",
        "aggregation": "sum"
      }],
    },
    "options": {
      "grid": {
        "type": "flat",
        "showTotals": "off",
        "showGrandTotals": "off"
      }
    },
    "formats": [{
      "name": "left",
      "textAlign": "left"
    }]
  },
});

function customizeCellFunction(cell, data) {
  console.log(data.hierarchy.caption);
  if (data.hierarchy && data.type != 'header') {
    if (data.hierarchy["caption"] == "Description Text") {
      cell.addClass("wrapped");
    }
  }
}

function getData() {
  return [{
      "Agent": "Agent A",
      "State": "MDG",
      "Airline": "QANTAS AIRWAYS-I",
      "2020 Sales TTV": 51685,
      "2019 Sales TTV": 49321,
      "Description Text": description
    },
 ...