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,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      "rows": [{
        "uniqueName": "CompoundID"
      }],
      "columns": [{
          "uniqueName": "AssayType"
        },
        {
          "uniqueName": "ColumnName"
        },
        {
          "uniqueName": "ProtocolName"
        },
        {
          "uniqueName": "ValueText"
        },
        {
          "uniqueName": "[Measures]"
        }
      ],
      "measures": [{
        "uniqueName": "Price",
        "aggregation": "sum"
      }]
    }
  }
});


function getData() {
  return [{
      "CompoundID": "SCI-001000570-NX-001",
      "AssayType": "ADME Assay",
      "ProtocolName": "L1",
      "ColumnName": "Cell Line",
      "ValueText": "Cell Line",
      "Price": 12.99
    },
    {
      "CompoundID": "SCI-001000570-NX-001",
      "AssayType": "ADME Assay",
      "ProtocolName": "L2",
      "ColumnName": "Cell Line",
      "ValueText": "Cell Line",
      "Price": 19.99
    },
    {
      "CompoundID": "SCI-001000570-NX-001",
      "AssayType": "ADME Assay",
      "ProtocolName": "L3",
      "ColumnName": "EC50",
      "ValueText": "22",
      "Price": 25.99
    },
    {
      "CompoundID": "SCI-001000570-NX-001",
      "AssayType": "ADME Assay",
      "ProtocolName": "EC50",
      "ColumnName": "EC50",
      "ValueText": "32",
      "Price": 15.99
    },
    {
      "CompoundID": "SCI-001000570-NX-001",
      "AssayType": "ADME Assay",
      "ProtocolName": "EC50",
      "ColumnName": "EC50",
      "ValueText": "34",
      "Price": 29.99
    },
    {
      "CompoundID": "SCI-001000570-NX-001",
      "AssayType": "ADME Assay",
      "ProtocolName": "EC50",
      "ColumnName": "EC50",
      "ValueText": "42",
      "Price": 22.99
    },
    {
      "CompoundID": "SCI-001000570-NX-001",
      "AssayType": "ADME Assay",
      "ProtocolName":...