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>
<link href="https://cdn.flexmonster.com/flexmonster.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


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

<div id="custom-filter" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="onClose()">Close</button>
        <button type="button" class="btn btn-primary" onclick="onApply()">Apply</button>
      </div>
    </div>
  </div>
</div>

CSS

.fm-ui-modal-overlay {
  display: none !important;
}

JavaScript

var pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    "dataSource": {
      "type": "api",
      "url": "https://olap.flexmonster.com:9500",
      "index": "fm-product-sales"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }, {
        uniqueName: "Category"
      }, {
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Color"
      }],
      measures: [{
        uniqueName: "Price"
      }, {
        uniqueName: "Quantity"
      }],
    },
    options: {
      configuratorActive: false
    }
  },
  width: "100%",
  height: 600,
  filteropen: onFilterOpen
});

var currentHierarchy = null;

function onFilterOpen(event) {
  let element = document.querySelector(".fm-filter-view");
  if (element) {
    element.remove();
  }

  currentHierarchy = event.hierarchy;

  $("#custom-filter").show();
  $("#custom-filter .modal-title").text(event.hierarchy.caption);

  let rows = pivot.getRows();
  let columns = pivot.getColumns();
  let reportFilters = pivot.getReportFilters();
  let slice = {
    rows,
    columns,
    reportFilters
  };

  $("#custom-filter .modal-body").html("");
  loadMembers(event.hierarchy.uniqueName, slice);
}

function loadMembers(hierarchy, slice) {
  // please send a post request with 
  // the hierarchy name and slice and 
  // return the members of the hierarchy that have values
  // for the other hierarchies of the slice
  let myData = {};
  myData.hierarchy = hierarchy;
  myData.slice = slice;

  $.ajax({
    type: "POST",
    url: '/echo/json/',
    data: myData,
    dataType: "json",
    success: function(data) {
      // pass loaded members that matches your criteria to render in filter 
      // onGetMembers(data);
    },
    error: function(err) {
      console.error(err);
    }
  });

  // for demo purposes, here we pass all members that was loaded from Flexmonster
  // it can be removed after...