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

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 550,
  toolbar: true,
  report: {
    dataSource: {
      type: "api",
      url: "https://olap.flexmonster.com:9500",
      index: "fm-product-sales",

    },
     options: {
        grid: {
            "showTotals": "off",
            "showGrandTotals": "off"
        }
    },
    slice: {
      rows: [{
          "uniqueName": "Business Type"
        },
        {
          "uniqueName": "Country"
        },
        {
          "uniqueName": "Category"
        },
        {
          "uniqueName": "Color"
        },
        {
          "uniqueName": "Size"
        }
      ],
      "columns": [{
          "uniqueName": "[Measures]"
        },
        {
          "uniqueName": "Destination",
          "filter": {
            "members": [
              "France"
            ]
          }
        }
      ],
      "measures": [{
          "uniqueName": "Formula #1",
          "formula": "sum(\"Price\")/sum(\"Quantity\")",
          "caption": "Formula #1"
        },
        {
          "uniqueName": "Formula #2",
          "formula": "sum(\"Price\")-sum(\"Discount\")",
          "caption": "Formula #2"
        },
        {
          "uniqueName": "Formula #3",
          "formula": "count(\"Country\")",
          "caption": "Formula #3"
        },
        {
          "uniqueName": "Formula #4",
          "formula": "count(\"Size\")",
          "caption": "Formula #4"
        }
      ],
    }
  }
});