JSFiddle - React, Tailwind, and code Playground

Other

by Flexmonster Pivot Table

HTML

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

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

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: customDrillThrough,
})

function customDrillThrough(cell) {
  if (
    cell &&
    cell.rows[0] &&
    cell.rows[0].uniqueName &&
    cell.rows[0].uniqueName == "status.[inactive]"
  ) {
    document.querySelector(".fm-drillthrough-view").style.display = "none"
    document
      .querySelectorAll(".fm-ui-modal-overlay")
      .forEach((element) => (element.style.display = "none"))
  }
}

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",
      address: "456 Capitol Str., #46",
      purchases: 1504,
    },
    {
      accountId: 12,
      name: "My test acccount GHI",
      status: "Inactive",
      address: "789 Seattle Blvd., #90",
      purchases: 568,
    },
  ]
}