JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
<p>
    This is an example of how you can use Datatables to setup a master/detail relationship and nest details views which can be completely different tables.         
</p>
 <br />    
<h4>Starcraft 2 Progamers | 2014</h4>
<table id="exampleTable">
    <thead> 
        <tr>
            <th>Race</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
    
<div style="display:none">    
    <table id="detailsTable">
    </table>
</div>

JavaScript

function fnFormatDetails(table_id, html) {
    var sOut = "<table id=\"exampleTable_" + table_id + "\">";
    sOut += html;
    sOut += "</table>";
    return sOut;
}

//////////////////////////////////////////////////////////// EXTERNAL DATA - Array of Objects 
var inputContent = {
  "2016105hZTp3/91TtO4CX/HlNdIvw": {
    "entities": [
      "CRITERIA NAME",
      "HEIGHT_MAX",
      "HEIGHT_MIN",
      "LENGTH_MAX",
      "LENGTH_MIN",
      "WEIGHT_MAX",
      "WEIGHT_MIN",
      "WIDTH_MAX",
      "WIDTH_MIN"
    ],
      "elements": [
        [
          "Small",
          "2",
          "0",
          "2",
          "0",
          "2",
          "0",
          "2",
          "0"
        ],
        [
          "Large",
          "100",
          "2",
          "100",
          "2",
          "100",
          "2",
          "100",
          "2"
        ]
      ],
        "categoryName": "Short Haul",
          "categoryId": "2016105hZTp3/91TtO4CX/HlNdIvw"
  },
    "201610442p9AV6kQlSAwaaUIMHUeg": {
      "entities": [
        "CRITERIA NAME",
        "HEIGHT_MAX",
        "HEIGHT_MIN",
        "LENGTH_MAX",
        "LENGTH_MIN",
        "WEIGHT_MAX",
        "WEIGHT_MIN",
        "WIDTH_MAX",
        "WIDTH_MIN"
      ],
        "elements": [
          [
            "Small",
            "3",
            "0",
            "3",
            "0",
            "3",
            "0",
            "3",
            "0"
          ],
          [
            "Large",
            "100",
            "3",
            "100",
            "3",
            "100",
            "3",
            "100",
            "3"
          ]
        ],
          "categoryName": "Long haul",
            "categoryId": "201610442p9AV6kQlSAwaaUIMHUeg"
    }
}

var categoryIdNameMap  = {
	"longhaul":{
  	"id":"201610442p9AV6kQlSAwaaUIMHUeg",
    "name":"Long Haul",
    "details": inputContent
  }.
  "shorthaul":{
  	"id":"2016105hZTp3/91TtO4CX/HlNdIvw",
    "name":"Shot Haul"
  }
}
var...