JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://rawgit.com/AndrejGajdos/nested-datatables/master/dist/nested.tables.min.js"></script>
<div id="example" class='container'></div>
<br>
<br>
<br>
<br>

<div id="example2" class='container'></div>

JavaScript

var dataInJson = 
[
{
  "data": {
     "name": "b1",
     "street": "s1",
     "city": "c1",
     "departments": 10,
     "offices": 15
  },
  "kids": [{
     "data": {
        "department": "HR",
        "supervisor": "Isidor Bristol",
        "floor": 1,
        "employees": 15
     },
     "kids": [{
           "data": {
              "name": "Klement Nikodemos",
              "phone": "+938462",
              "hire_date": "January 1, 2010",
              "id": 3456
           },
           "kids": []
        }, {
           "data": {
              "name": "Madhava Helmuth",
              "phone": "+348902",
              "hire_date": "May 23, 2002",
              "id": 1234
           },
           "kids": []
        }, {
           "data": {
              "name": "Andria Jesse",
              "phone": "456123",
              "hire_date": "October 23, 2011",
              "id": 9821
           },
           "kids": []
        }

     ]
  }, {
     "data": {
        "department": "development",
        "supervisor": "Jim Linwood",
        "floor": 2,
        "employees": 18
     },
     "kids": [{
           "data": {
              "name": "Origenes Maxwell",
              "phone": "345892",
              "hire_date": "February 1, 2004",
              "id": 6234
           },
           "kids": []
        }

     ]
  }, {
     "data": {
        "department": "testing",
        "supervisor": "Zekeriya Seok",
        "floor": 4,
        "employees": 11
     },
     "kids": []

  }]
}, {
  "data": {
     "name": "b2",
     "street": "s10",
     "city": "c2",
     "departments": 3,
     "offices": 10
  },
  "kids": [{
     "data": {
        "department": "development",
        "supervisor": "Gallagher Howie",
        "floor": 8,
        "employees": 24
     },
     "kids": [{
           "data": {
              "name": "Wat Dakota"
           },
           "kids": []
        }

     ]
  }, {
     "data": {
        "department": "testing",
        "supervisor":...