JSFiddle - React, Tailwind, and code Playground

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivotContainer"></div>

JavaScript

let pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    "dataSource": {
      "type": "json",
      "filename": "https://cdn.flexmonster.com/data/data.json"
    },
    slice: {
      "rows": [{
        "uniqueName": "Category",
        "filter": {
          "measure": {
            "uniqueName": "Price",
            "aggregation": "sum"
          },
          "query": {
            "bottom": 10
          }
        }
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
          "uniqueName": "Price",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Discount",
          "aggregation": "sum"
        },
        {
          "uniqueName": "Color",
          "aggregation": "count"
        },
        {
          "uniqueName": "Quantity",
          "aggregation": "sum"
        },
      ],
      "sorting": {
        "column": {
          "type": "asc",
          "tuple": [],
          "measure": {
            "uniqueName": "Price",
            "aggregation": "sum"
          }
        }
      }
    },
    "options": {
      "viewType": "charts",
      "chart": {
        "type": "bar_h",
        "multipleMeasures": true
      }
    },
  }
});