Hierarchy Tables

by Shawn Wood

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>


<div id="example"></div>

JavaScript

var clinData = [];

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",
       ...