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="clearCustomizing()">Clear Customizing</button>
<button onclick="startCustomizing()">Start Customizing</button>

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

CSS

.notexpandable {
  cursor: initial;
}

JavaScript

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

const nonExpandable = ["Canada", "Germany"];

function customizeCellFunction(cell, data) {
  if (data.hierarchy &&
    data.hierarchy.uniqueName == "Country" &&
    data.member &&
    nonExpandable.includes(data.member.caption)) {
    var parts = cell.text.split(data.escapedLabel);
    if (parts.length == 2) {
      cell.text = `<div onclick="preventExpand(event)"><div class='notexpandable' onclick='clickHandler()'>${data.escapedLabel}</div>${parts[1]}</div>`;
    }
  }
}

function preventExpand(e) {
  e.stopImmediatePropagation();
}

function clearCustomizing() {
  pivot.customizeCell();
}

function startCustomizing() {
  pivot.customizeCell(customizeCellFunction);
}

function clickHandler() {
	alert('click happened');
}