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

JavaScript

//lets assume this is the JSON that came from the server
const jsonFromServer = {"name": "Prueba reporte HSEQ", "type": "json", "report": {"slice": {"rows": [{"uniqueName": "f"}, {"uniqueName": "p"}], "columns": [{"uniqueName": "a"}, {"uniqueName": "q"}, {"uniqueName": "m"}, {"uniqueName": "[Measures]"}], "measures": [{"uniqueName": "dis", "aggregation": "sum"}, {"uniqueName": "hw", "aggregation": "sum"}, {"uniqueName": "cm", "aggregation": "sum"}, {"uniqueName": "mv", "aggregation": "max"}]}, "options": {"grid": {"showTotals": "off", "showGrandTotals": "off"}}, "version": "2.9.79", "conditions": [{"format": {"color": "#FFFFFF", "fontSize": "12px", "fontFamily": "Arial", "backgroundColor": "#DA3230"}, "formula": "#value > 80", "measure": "mv"}, {"format": {"color": "#FFFFFF", "fontSize": "12px", "fontFamily": "Arial", "backgroundColor": "#799E0F"}, "formula": "#value <= 80", "measure": "mv"}], "dataSource": {"type": "json", "mapping": {"a": {"caption": "Año"}, "d": {"caption": "Fecha y hora"}, "f": {"type": "string", "caption": "Flota"}, "m": {"caption": "Mes"}, "p": {"type": "string", "caption": "Placa"}, "q": {"caption": "Trimestre"}, "ac": {"type": "number", "caption": "Aceleraciones bruscas"}, "cm": {"type": "number", "caption": "Combustible consumido"}, "co": {"caption": "Conductor"}, "di": {"caption": "Dia"}, "ev": {"type": "number", "caption": "Excesos de velocidad"}, "fr": {"type": "number", "caption": "Frenadas bruscas"}, "gr": {"caption": "Grupo"}, "hw": {"type": "number", "caption": "Horas trabajadas"}, "id": {"type": "false"}, "mv": {"type": "number", "caption": "Máxima velocidad"}, "ra": {"type": "number", "caption": "Ralenti"}, "ri": {"type": "number", "caption": "Trayectos"}, "dis": {"type": "number", "caption": "Distancia"}, "idl": {"type": "number", "caption": "IDLE"}}, "filename": "https://web1.co/DOC/PivotTable/basic.json"}, "creationDate": "2024-06-20T13:41:21.138Z"}};


//defining flexmonster instance without a report
let pivot = new...