JSFiddle - React, Tailwind, and code Playground
by aubz88
HTML
<div id="myDynamicTable"></div>
JavaScript
var data = [{
"dayindex": 0,
"date": "2020-10-12",
"locked": false,
"recalc": false,
"shiftid": 8,
"shortDay": "Mon",
"longDay": "Monday",
"dayFlags": "",
"canInsert": true,
"canEdit": true,
"readOnly": false,
"correctionsAllowed": true,
"worked": 451,
"employed": true,
"hasNotes": false,
"notes": "",
"flags": [],
"clockings": [{
"absclocktime": 63527610,
"seconds": 0,
"date": "2020-10-12",
"day": 0,
"time": 570,
"effective": "2020-10-12",
"clocktype": 0,
"twuser": false,
"edited": true,
"callin": false,
"calcinsert": false,
"infringe": false,
"previous": false,
"problem": false,
"source": 0,
"readonly": false,
"flags": [
"e"
],
"longflags": "Edited",
"decision": 8,
"deleted": false,
"delCode": 0,
"reasonid": -2,
"commentid": 0,
"comment": "",
"duration": 207,
"clockid": "",
"row": 0,
"prevabstime": 0,
"location": "51.37.112.155",
"timeZone": "",
"timeZoneCode": 0
},
{
"absclocktime": 63527817,
"seconds": 52,
"date": "2020-10-12",
"day": 0,
"time": 777,
"effective": "2020-10-12",
"clocktype": 0,
"twuser": false,
"edited": false,
"callin": false,
"calcinsert": false,
"infringe": false,
"previous": false,
"problem": false,
"source": 4,
"readonly": false,
"flags": [],
"longflags": "",
"decision": 3,
"deleted": false,
"delCode": 0,
"reasonid": -2,
"commentid": 0,
"comment": "",
"duration": 58,
"clockid": "MD",
"row": 1,
"prevabstime": 0,
"location": "SM-G960F",
"timeZone": "60",
...