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/",
  toolbar: false,
  height: 700,
  report: {
    "dataSource": {
      "data": getData()
    },
    "slice": {
      "rows": [{
        "uniqueName": "Layot code"
      }],
      "columns": [{
        "uniqueName": "[Measures]"
      }],
      "measures": [{
        "uniqueName": "Zone area",
        "aggregation": "sum",
        "format": "format1"
      }]
    },
    "formats": [{
      "name": "format1",
      "currencySymbol": "ft²",
      "positiveCurrencyFormat": "1$"
    }],
    "options": {
    	"viewType": "grid_charts",
      "chart": {
      	"showFilter": false,
        "showMeasures": false
      }
    }
  }
});

function getData() {
  return [{
      "Layot code": 0,
      "Zone area": "22096.87"
    },
    {
      "Layot code": 1,
      "Zone area": "5081.1"
    },
    {
      "Layot code": 2,
      "Zone area": "9488.88"
    },
    {
      "Layot code": 3,
      "Zone area": "6631.1"
    },
    {
      "Layot code": 4,
      "Zone area": "9190.08"
    },
    {
      "Layot code": 5,
      "Zone area": "2888.05"
    },
    {
      "Layot code": 6,
      "Zone area": "3318.99"
    },
    {
      "Layot code": 7,
      "Zone area": "4951.38"
    },
    {
      "Layot code": 8,
      "Zone area": "7451.8"
    },
    {
      "Layot code": 9,
      "Zone area": "1941.5"
    }
  ]
}