JSFiddle - React, Tailwind, and code Playground

Other

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<style id="drillthroughtoggle">
  .fm-drillthrough-view,
  .fm-ui-modal-overlay {
    z-index: -1000 !important;
  }
</style>

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

CSS

.fm-drillthrough-view,
  .fm-ui-modal-overlay {
    z-index: -1000 !important;
  }

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  report: {
    dataSource: {
      data: getData(),
    },
    slice: {
      rows: [
        {
          uniqueName: "status",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "purchases",
        },
      ],
    },
  },
  customizeContextMenu: customizeContextMenuFunction,
  celldoubleclick: showDrillThrough,
  drillthroughclose: hideDrillThrough,
})

function showDrillThrough(cell) {
  if (
    !(
      cell &&
      cell.rows[0] &&
      cell.rows[0].uniqueName &&
      cell.rows[0].uniqueName == "status.[inactive]"
    ) && cell.value
  ) {
    let styleTag = document.querySelector("#drillthroughtoggle")
    styleTag.textContent = `.fm-drillthrough-view,
  .fm-ui-modal-overlay {
    z-index: 10 !important;
  }`
  }
}

function hideDrillThrough() {
  let styleTag = document.querySelector("#drillthroughtoggle")
  styleTag.textContent = `.fm-drillthrough-view,
  .fm-ui-modal-overlay {
    z-index: -1000 !important;
  }`
}

function customizeContextMenuFunction(items, data, viewType) {
  if (
    data.rows[0] &&
    data.rows[0].uniqueName &&
    data.rows[0].uniqueName == "status.[inactive]"
  ) {
    items = items.filter(function (item) {
      return item.label !== "Drill through"
    })
  }
  return items
}

function getData() {
  return [
    {
      accountId: 23,
      name: "My test acccount XYZ",
      status: "Active",
      address: "321 Michigan Sq., #55",
      purchases: 210,
    },
    {
      accountId: 32,
      name: "My test acccount ABC",
      status: "Inactive",
      address: "123 Oxford Av., #23",
      purchases: 932,
    },
    {
      accountId: 33,
      name: "My test acccount DEF",
      status: "Active",
     ...