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

CSS

.link {
  text-decoration: underline !important;
  cursor: pointer;
  color: #00a45a !important;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 400,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }],
      columns: [{
        uniqueName: "Color"
      }],
      measures: [{
        uniqueName: "Price"
      }]
    }
  }
});



var selectedCells = {};

function customizeCellFunction(cell, data) {
  if (data.type !== "header" && data.measure && data.measure.uniqueName === "Price") {
    cell.style['z-index'] = 2;
    cell.text = `<input type="checkbox" name="fm-checkbox" style="height: 15px; width: 15px;" onchange="onCheck(event, '${data.rowIndex}-${data.columnIndex}')"
            ${selectedCells[data.rowIndex+'-'+data.columnIndex] ? 'checked' : ''}>
  		<span> ${data.escapedLabel}</span>`;
  }
  return;

}

onCheck = function(e, name) {
  selectedCells[name] = e.target.checked;
}