JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>

<b>Add filter by 'Category'</b>
<div id="filter-form"></div>
<button onclick="applyFilter('Category')">Apply filter</button>

<div id="pivotContainer1"></div>

JavaScript

let endpointUrl = "https://olap.flexmonster.com:9500/";
let index = "fm-product-sales";
let cache = {};

//Add Flexmonster instance
var pivot = new Flexmonster({
  container: "pivotContainer1",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      type: "api",
      url: pivotEndpoint,
      index: index,
    },
    slice: {
      measures: [{ uniqueName: "Price" }],
    },
  },
});

//Fetch members from API
function getMembers(fieldName, callback) {
  let request = {
    index: index,
    type: "members",
    field: { uniqueName: fieldName },
    page: 0,
  };

  let reqStr = JSON.stringify(request);

  pivotEndpoint(reqStr, (response) => {
    cache[reqStr] = response; 
    if (callback) callback(response.members.map((m) => m.value));
  });
}

// Fetch distinct members for the field and render filter checkboxes
function loadFilterForm(fieldName) {
  getMembers(fieldName, (members) => {
    const form = document.getElementById("filter-form");
    form.innerHTML = ""; // clear old filters

    members.forEach((memberValue) => {
      const label = document.createElement("label");
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.value = memberValue;
      label.appendChild(checkbox);
      label.appendChild(document.createTextNode(memberValue));
      form.appendChild(label);
      form.appendChild(document.createElement("br"));
    });
  });
}

//Set filters
function applyFilter(fieldName) {
  const checkboxes = document.querySelectorAll(
    "#filter-form input[type=checkbox]:checked",
  );
  const selectedValues = Array.from(checkboxes).map((cb) => cb.value);

  let slice = {
    rows: [
      {
        uniqueName: fieldName,
        filter: {
          members: selectedValues.map(
            (v) => `${fieldName.toLowerCase()}.[${v.toLowerCase()}]`,
          ),
        },
      },
 ...