JSFiddle - React, Tailwind, and code Playground

by Manav326

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>

CSS

.link {
  text-decoration: underline !important;
  cursor: pointer;
  color: #726b04 !important;

}

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    "dataSource": {
      "data": getData(),
      type: 'json',
      mapping: {
        member: {
          type: 'string',
        },
        book: {
          type: 'string',
        },
        review: {
          type: 'string',
        },
        uuid: {
          type: 'id',
        },
      }
    },
    "slice": {
      expands: {
        expandAll: true,
      },
      "rows": [{
          "uniqueName": "member"
        },
        {
          "uniqueName": "book"
        },
        {
          "uniqueName": "review"
        },
      ],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "book"
      }]
    },
    options: {
      grid: {
        type: 'classic',
        showHeaders: false,
        showTotals: false,
        showGrandTotals: 'off',
        showReportFiltersArea: false,
        dragging: false,
        showAutoCalculationBar: false,
      },
      configuratorButton: false,
      sorting: false,
      showAggregationLabels: false,
      drillThrough: false,
      allowBrowsersCache: false,
      showAggregations: false,
    }
  }
});

function customizeCellFunction(cell, data) {
  if (data.type !== 'value') {
    if (data.member && data.member.dimensionName === 'review') {
      cell.text = 
      `${cell.text}  <div
  style="display: inline-block;
  padding: 5px;
  height: 25px;
  font-size: 16px;
  line-height: 5px;
  border-radius: 5px;
  background-color: blue;"
  onclick="ChipClicked('${data.rowIndex}')">Click</div>
<a style="text-decoration: underline !important;
  cursor: pointer;
  color: #726b04 !important;" onclick="LinkClicked('${data.rowIndex}')">click</a>

 `

      return
    }
  }
}

function getRandomArbitrary() {
  return Math.random() * (1000 - 1) +...