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>
<button onclick="applyFilter(pivot)">
  Apply Filter
</button>
<div id="pivot-container"></div>

CSS

.link {
  text-decoration: underline !important;
  color: tomato !important;
  cursor: pointer;
}

.highlight {
  background-color: yellow !important;
}

JavaScript

//The filter data:
var fieldToFilter = "Customer";
var member = "Customer5";
var pivot = null;

function createFlexmonster() {

  pivot = new Flexmonster({
    container: "#pivot-container",
    componentFolder: "https://cdn.flexmonster.com/",
    width: "100%",
    height: 430,
    toolbar: true,
    global: {
      localization: {
        messages: {
          "noDataAvailable": "No data found, please try again."
        }
      }
    },
    report: {
      dataSource: {
        data: getData(),
        mapping: {
          "Tracking No": {
            type: "string"
          },
          "Customer": {
            type: "string"
          },
          "Requested Ship Date": {
            type: "date string"
          }
        }
      },
      slice: {
        columns: [{
            uniqueName: "Customer",
            sort: "unsorted"
          },
          {
            uniqueName: "Requested Ship Date",
            sort: "unsorted"
          },
          {
            uniqueName: "Tracking No",
            sort: "unsorted"
          },
          {
            uniqueName: "[Measures]"
          }
        ],
        measures: [{
          uniqueName: "Requested Ship Date",
          aggregation: "max",
          active: false,
          format: "leftAlign"
        }]
      },
      options: {
        grid: {
          type: "flat",
          title: "Orders",
          showTotals: "off",
          showGrandTotals: "off"
        },
        datePattern: "MM/dd/yyyy"
      },
      formats: [{
        name: "leftAlign",
        textAlign: "left"
      }],
    },
    customizeCell: customizeCellFunction,
  });

  return pivot;
}

function applyFilter(pivot) {
  if (pivot == undefined) {
    pivot = createFlexmonster();
    pivot.on("reportcomplete", filter);
  } else {
    filter();
  }
}

function filter() {
  pivot.off("reportcomplete", filter);
  pivot.setFilter(fieldToFilter, {
    "query": {
      "equal": member
    }
  });

  // check if member exists in...