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>

<div class="output" id="output">Output will appear here</div>

CSS

.output {
  width: 80%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background: rgba(242, 242, 242, 1);
  font-family: Menlo, Monaco, "Courier New", Courier, monospace;
  white-space: pre;
  font-size: 16px;
  font-weight: 400;
  overflow-y: scroll;
  margin-top: 20px;
}

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  height: 300,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Price": {
          type: "number"
        },
        "Country": {
          hierarchy: "Hierarchy",
        },
        "field1": {
          hierarchy: "Hierarchy",
          parent: "Country"
        },
      }
    },
    options: {
      showEmptyValues: true,
      caseSensitiveMembers: true,
    },
    slice: {
      rows: [{
        uniqueName: "Hierarchy"
      }, ],
      columns: [{
        uniqueName: "Month"
      }, ],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }],
      "drills": {
        "rows": [{
          "tuple": [
            "Hierarchy.[US]"
          ]
        }]
      }
    }
  }
});

//"hierarchy.[US].[Reps]" -> ["country.[US]", "field1.[Reps]"]

flexmonster.on('cellclick', function(cell) {
  if (cell.rows[0].uniqueName) {
    let levelName = cell.rows[0].uniqueName;
    let hierarchyName = levelName.substring(0, levelName.indexOf("."))
    let fieldNamesArray = levelName.match(/\[.*?\]/g);

    let rowArray = [];
    let res = flexmonster.getAllHierarchies().find(obj => {
      if (obj.dimensionUniqueName == hierarchyName) {
        return obj;
      }
    })

    for (var i = 0; i < res.levels.length; i++) {
      if (res.levels[i].uniqueName) rowArray.push(res.levels[i].uniqueName);
    }
    let finalArray = rowArray.map((item, index) => {
      if (fieldNamesArray[index] !== undefined) {
        return item + "." + fieldNamesArray[index];
      }
    }).filter(item => item !== undefined);
    showOutput(JSON.stringify(finalArray, null, 2));
  }
});

function showOutput(content) {
  document.getElementById("output").innerText = content;
}

function getData() {
  return [{
      "Country": "US",
      "field1": "Reps",
      "Price": null,
      "Month": "January"
    },
    {
  ...