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="pivotContainer"></div>

JavaScript

var pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 500,
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    options: {
      viewType: "charts",
      grid: {
        title: "Grid Title"
      },
      chart: {
        type: "column",
        showFilter: true,
        showMeasures: true
      },
      configuratorActive: false
    },
    "slice": {
      "rows": [{
        "uniqueName": "Order Date.Month"
      }],
      "columns": [{
          "uniqueName": "City",
          "filter": {
            "measure": {
              "uniqueName": "Orders",
              "aggregation": "sum"
            },
            "query": {
              "top": 5
            }
          }
        },
        {
          "uniqueName": "[Measures]"
        }
      ],
      "measures": [{
        "uniqueName": "Orders",
        "aggregation": "sum"
      }],
      "reportFilters": [{
        "uniqueName": "Name",
        "filter": {
          "exclude": [
            "name.[bernice]",
            "name.[bessie]",
            "name.[billy]",
            "name.[cecelia]",
            "name.[georgia]",
            "name.[georgie]",
            "name.[gilbert]"
          ]
        }
      }]
    }
  }
});

function getData() {
  return [{
      "Age": {
        "type": "number"
      },
      "Order Date": {
        "type": "date"
      },
      "City": {
        "type": "string"
      },
      "Amount": {
        "type": "number"
      },
      "Price": {
        "type": "number"
      },
      "Payment Type": {
        "type": "string"
      },
      "Referring Site": {
        "type": "string"
      },
      "Orders": {
        "type": "number"
      },
      "Name": {
        "type": "string"
      }
    },

    {
      "Age": 59,
      "Order Date": "9/28/2007",
      "City": "Prague",
      "Amount": 510,
      "Price": 60,
      "Payment Type": "Bitcoin",
     ...