JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="table"></div>

JavaScript

function buildTable() {
  data = [{
    "a": "Otto Clay",
    "b": "25"
  }, {
    "a": "Otto Clay",
    "b": "25"
  }]
  col = [{
    name: "a",
    type: "text"
  }, {
    name: "b",
    type: "text"
  }]
  $("#table").jsGrid({
    width: "100%",
    height: "auto",
    editing: false,

    data: data,
    fields: col,

    rowRenderer: function(item) {
      var row = $("<tr>");
      var addressesGrid = $('<tr>').hide();
      addressesGrid.jsGrid({
        width: "100%",
        height: "auto",
        data: data,
        fields: col
      })
      items = Object.keys(item)
      items.forEach(function(key) {
        if (key != items[items.length - 1]) {
          var cell = $("<td>").addClass("jsgrid-cell").append(item[key])
          row.append(cell)
        }
      })
      row.click(function() {
        addressesGrid.toggle();
      })
      return row.add(addressesGrid);
    }
  });
}
buildTable()