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>

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

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      "type": "json",
      "data": getData(),
      "mapping": {
        "Batch_Number": {
          "type": "string"
        },
        "Test_Criteria": {
          "type": "string"
        },
        "Acceptance_Criteria": {
          "type": "string"
        },
        "Value_1": {
          type: "number"
        },
        "Value_2": {
          "type": "id"
        }
      }
    },
    slice: {
      rows: [{
        uniqueName: "Test_Criteria"
      }, {
        uniqueName: "Acceptance_Criteria"
      }],
      columns: [{
        uniqueName: "Batch_Number"
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Value_1",
        "aggregation": "max",
        "format": "left"
      }],
      expands: {
        expandAll: true
      }
    },
    options: {
      grid: {
        type: "classic",
        showTotals: "off",
        showGrandTotals: "off"
      }
    },
    formats: [{
      name: "left",
      textAlign: "left"
    }]
  }
});

function customizeCellFunction(cell, data) {
  if (data.type == "value") {
    cell.text = cell.text + " " + data.recordId
  }
}

function getData() {
  return [{
    "Batch_Number": "SB-87932",
    "Test_Criteria": "Identification",
    "Acceptance_Criteria": "Confirms to Standard",
    "Value_2": "",
    "Value_1": "2.09"
  }, {
    "Batch_Number": "SB-87932",
    "Test_Criteria": "Assay",
    "Acceptance_Criteria": "90.0 to 110.0",
    "Value_2": "",
    "Value_1": "2.3"
  }, {
    "Batch_Number": "SB-87932",
    "Test_Criteria": "3379620 (m/z 1067)e",
    "Acceptance_Criteria": "≤ 1.5",
    "Value_2": "",
    "Value_1": "1.5"
  }, {
    "Batch_Number": "SB-87932",
    "Test_Criteria": "3379613 (Beta-Chloride)a",
    "Acceptance_Criteria": "≤ 2.0",
    "Value_2": "",
    "Value_1":...