JSFiddle - React, Tailwind, and code Playground

by neneaaglaia

HTML

<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/",
   height: 430,
   toolbar: true,
   customizeCell: customizeCellFunction
 });


 fetch('https://services.odata.org/TripPinRESTierService/(S(mexv0e2pvoftpnsvxtjz2h1t))/Airports')
   .then((response) => {
     return response.json();
   })
   .then((data) => {
     data = jsonPath(data, "$..value[1:]");
     pivot.setReport({
     dataSource: {
       type: 'json',
       data: data,
       mapping: {
            "Name": {
                "type": "string"
            },
            "IataCode": {
            		"caption": "IATA Code",
                "type": "string"
            },
            "IcaoCode": {
            		"caption": "ICAO Code",
                "type": "string"
            },
            "Location": {
                "type": "property",
                "hierarchy": "Name"
            },
            "Address": {
            	"type": "string"
            }
			}       
     },
    slice: {
        rows: [
            {
                "uniqueName": "Name"
            },
            {
                "uniqueName": "IataCode"
            },
            {
                "uniqueName": "IcaoCode"
            },
            {
                "uniqueName": "Address"
            }
        ],
        "columns": [
            {
                "uniqueName": "[Measures]"
            }
        ],
        "measures": [
            {
                "uniqueName": "Name",
                "aggregation": "count"
            }
        ]
    },
    "options": {
        "grid": {
            "type": "flat"
        }
    }
   })
   });

function customizeCellFunction(cell, data) {
  if (data && data.type === "value" && !data.isDrillThrough) {
		if (isNaN(data.value)) {
    	console.log(data);
    } else {
      console.log(data.hierarchy.uniqueName,": ", typeof data.label, ": ", data.label," | properties:" ,data.member.properties); 
      if...