JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

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

<span class='title'>Try hovering over a cell in the "Description" hierarchy.</span>

<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;
}

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. Integer feugiat
scelerisque varius morbi enim. Dui vivamus arcu felis
bibendum ut tristique et. Cursus turpis massa tincidunt
dui ut ornare lectus sit amet. Quam quisque id diam vel.
Quisque non tellus orci ac auctor augue mauris.
Massa placerat duis ultricies lacus sed turpis tincidunt.
Eu turpis egestas pretium aenean. Lectus arcu bibendum at
varius vel pharetra vel turpis.
Mauris pharetra et ultrices neque ornare aenean euismod.`


var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  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: {
          type: "string"
        },
        "Description Text": {
          type: "property",
          hierarchy: "Airline"
        }
      }
    },
    "slice": {
      "rows": [
        {
          "uniqueName": "Airline"
        }
      ],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "2020 Sales TTV",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Description",
          "aggregation": "sum",
          "format": 'left',
          "grandTotalCaption": 'Description'
        }
      ],
    },
    "options": {
      "grid": {
        "type": "compact",
       ...