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>
<button onclick="applyFilter();">
  Apply Filter
</button>
<div id="pivot-container"></div>

CSS

.link {
  text-decoration: underline !important;
  color: tomato !important;
  cursor: pointer;
}

.highlight {
  background-color: yellow !important;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  global: {
    localization: {
      messages: {
        "noDataAvailable": "No data found, please try again."
      }
    }
  },
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Tracking No": {
          type: "string"
        },
        "Customer": {
          type: "string"
        },
        "Requested Ship Date": {
          type: "date string"
        }
      }
    },
    slice: {
      columns: [{
          uniqueName: "Customer",
          sort: "unsorted"
        },
        {
          uniqueName: "Requested Ship Date",
          sort: "unsorted"
        },
        {
          uniqueName: "Tracking No",
          sort: "unsorted"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Requested Ship Date",
        aggregation: "max",
        active: false,
        format: "leftAlign"
      }]
    },
    options: {
      grid: {
        type: "flat",
        title: "Orders",
        showTotals: "off",
        showGrandTotals: "off"
      },
      datePattern: "MM/dd/yyyy"
    },
    formats: [{
      name: "leftAlign",
      textAlign: "left"
    }],
  },
  customizeCell: customizeCellFunction
});


function customizeCellFunction(cell, data) {
  if (data.hierarchy && data.hierarchy.uniqueName == "Tracking No" && data.member) {
    var el = document.createElement('div');
    el.innerHTML = cell.text;
    var parts = cell.text.split(el.innerText);
    if (parts.length == 2) {
      cell.text = parts[0] + "<a href='https://en.wikipedia.org/wiki/Tracking_number" + "' target='_blank' class='link' onclick='preventExpand(event)'>" + el.innerText + "</a>" + parts[1];

      cell.style['z-index'] = 1;
      cell.addClass("highlight");

    } else {
      cell.text = "<a...