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="pivotContainer"></div>

CSS

.link {
   z-index: 1;
   text-decoration: underline;
}

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        Country: {
          type: "string"
        },
        "Cases per year": {
          type: "number"
        },
        Link: {
          type: "id"
        }
      }
    },
    options: {
      grid: {
        type: "flat"
      }
    }
  }
});

flexmonster.customizeCell((cell, data) => {
  if (data.hierarchy && data.hierarchy.uniqueName == "Country" && data.type == "value") {
    cell.text = `<a href="${data.recordId}">${cell.text}</a>`;
    cell.addClass("link");
  }
});

function getData() {
  return [{
      "Country": "Australia",
      "Cases per year": 8756,
      "Link": "https://en.wikipedia.org/wiki/Australia"
    },
    {
      "Country": "USA",
      "Cases per year": 3578,
      "Link": "https://en.wikipedia.org/wiki/United_States"
    },
    {
      "Country": "Germany",
      "Cases per year": 2953,
      "Link": "https://en.wikipedia.org/wiki/Germany"
    }
  ]
}