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>
<h4>
Some JSON records might contain undefined or empty values, but due to the JSON containing a meta object, the keys will still be visible in the Field List. <br>
Those values, however, will not be drawn in the pivot table.
</h4>
<div id="pivot-container"></div>

JavaScript

var hotelData = [
	{
  	"Name": {type: "string"},
    "City": {type: "string"},
    "Stars": {type: "number"},
    "Rating": {type: "number"},
    "Price-per-night": {type: "number"}
  },
  {
  	"Name": "Good Resort",
    "City": "Palma",
    "Stars": 4,
    "Price-per-night": 254.99
  },
  {
  	"Name": "Best Resort",
    "City": "San Diego",
    "Stars": 5,
    "Rating": 4.9,
    "Price-per-night": 399.99 
  },
  {
  	"Name": "OK Resort",
    "City": "Nice",
    "Stars": 3,
    "Rating": 4.2,
    "Price-per-night": 149.99    
  }   
];

var pivot = new Flexmonster({
	container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
        data: hotelData
    },
    slice: {
        rows: [
            {
                "uniqueName": "Name"
            }
        ],
        columns: [
            {
                "uniqueName": "[Measures]"
            }
        ],
        measures: [
            {
                "uniqueName": "Rating",
                "aggregation": "average"
            }
        ]
    },
	}
});