JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<script src="http://gdixon.co.uk/Dashboard2.n/modules/RIY/rawbin/jquery.resizableColumns.js"></script>
<link rel="stylesheet" href="http://gdixon.co.uk/Dashboard2.n/modules/RIY/rawbin/jquery.resizableColumns.css">
<table id='table' class="noSelect" border="0">
<table>

CSS

table th {
    cursor: col-resize;
}

table th.resizing {
    cursor: col-resize;
}

.noCrsr {
    cursor: default;   
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#table, tr, td{ 
     border-collapse:collapse;
     border: 1px dashed #bdbdbd;
}
#table th{ 
     border: 1px solid #bdbdbd;
     padding:5px;
}

JavaScript

var data = {
              "selector":"#table",
              "jsondata":[                {
                    "parent":"Test",
                    "rowspan":2,
                    "label":"",
                    "data":[
                            ['1',110157],
                            ['2',199055],
                            ['3',362996],
                            ['4',302],
                            ['5',169],
                            ['6',88],
                            ['7',49]
                            ],
                    "points":{
                       "fillColor":"#ed7a53"
                    }
                 },
                 {
                    "parent":"Test2",
                    "rowspan":2,
                    "label":"",
                    "data":[
                            ['1',110157],
                            ['2',199055],
                            ['3',362996],
                            ['4',302],
                            ['5',169],
                            ['6',88],
                            ['7',49]
                            ],
                    "points":{
                       "fillColor":"#ed7a53"
                    }
                 },
                  
                 {
                    "parent":"Dormant",
                    "label":"Fund Value",
                    "data":[
                            ['1',110157],
                            ['2',199055],
                            ['3',362996],
                            ['4',302],
                            ['5',169],
                            ['6',88],
                            ['7',49]
                            ],
                    "points":{
                       "fillColor":"#88bbc8"
                    }
                 },
                 {
                    "parent":"Dormant",
                    "label":"RIY",
                    "data":[
                            ['1',110157],
                         ...