JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

HTML

<script src="//jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="//jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="//jqwidgets.com/public/jqwidgets/styles/jqx.bootstrap.css">
<div>

  <button id="jqxRefreshButton">Click to refresh</button>
  
  <button id="jqxExportButton">Click to export</button>
  
  <div id="treeGrid"></div>
  
</div>

JavaScript

var dataFields = [
    {
        "name": "questions",
        "type": "string"
    },
    {
        "name": "score",
        "type": "number"
    },
    {
        "name": "questionParent",
        "type": "questionParent"
    },
    {
        "name": "2001",
        "type": "number"
    },
    {
        "name": "2002",
        "type": "number"
    },
    {
        "name": "2003",
        "type": "number"
    },
    {
        "name": "2004",
        "type": "number"
    },
    {
        "name": "2005",
        "type": "number"
    },
    {
        "name": "2006",
        "type": "number"
    },
    {
        "name": "2007",
        "type": "number"
    },
    {
        "name": "2008",
        "type": "number"
    },
    {
        "name": "2009",
        "type": "number"
    },
    {
        "name": "2010",
        "type": "number"
    },
    {
        "name": "2011",
        "type": "number"
    },
    {
        "name": "2012",
        "type": "number"
    },
    {
        "name": "2013",
        "type": "number"
    }
];

var sourceData = [
    {
        "2001": 3.56,
        "2002": 3.58,
        "2003": 3.66,
        "2004": 3.67,
        "2005": 3.74,
        "2006": 3.75,
        "2007": 3.78,
        "2008": 3.89,
        "2009": 3.92,
        "2010": 3.94,
        "2011": 3.95,
        "2012": 3.98,
        "2013": 4.04,
        "questions": "Overall",
        "questionParent": null
    },
    {
        "2001": null,
        "2002": null,
        "2003": null,
        "2004": null,
        "2005": null,
        "2006": null,
        "2007": null,
        "2008": null,
        "2009": null,
        "2010": null,
        "2011": null,
        "2012": null,
        "2013": null,
        "questions": "1. ABCD",
        "questionParent": null
    },
    {
        "2001": null,
        "2002": null,
        "2003": null,
        "2004": null,
        "2005": null,
        "2006": null,
        "2007": null,
        "2008": null,
        "2009": null,
       ...