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/1.10.12/css/jquery.dataTables.min.css">
<table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
            </tr>
        </thead>
    </table>

CSS

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

var dataArray = {
  "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  = [{
  	"id":"201610442p9AV6kQlSAwaaUIMHUeg",
    "name":"Long Haul"
  },{
  	"id":"2016105hZTp3/91TtO4CX/HlNdIvw",
    "name":"Shot Haul"
  }
]
   
   /* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row   
    //return table2;
    var table = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
    var headerRows="";
    var hRows = "";
    var bRows = "";
    var bodyRows="";
     $.each(d.entities, function(key, value) {
     		hRows+= '<th>'+value+'</th>'
     });
    var headerRows = "<tr>"+hRows+"</tr>";
    $.each(d.elements[1], function(key, value) {
  ...