CLIN Hierarchy Tables

This is a sample widget for CLIN 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://cdn.datatables.net/1.10.24/css/jquery.dataTables.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>
<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>
<table id="clinTable"></table>
<img src="https://datatables.net/examples/resources/details_open.png"/>

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 clinData = [{
    "type": "checkbox",
    "selected": false,
    "image": "",
    "imageDesc": "",
    "clin": "000XYZ",
    "description": "",
    "id": "",
    "quantity": 0,
    "measurement": "",
    "contract": "0008-2345-0012",
    "mrc": "",
    "nrc": "",
    "usage": "",
    "kids": []
  },
  {
    "type": "checkbox",
    "selected": false,
    "image": "Test",
    "imageDesc": "",
    "clin": "004XYZ",
    "description": "",
    "id": "",
    "quantity": 0,
    "measurement": "",
    "contract": "0008-2345-0012",
    "mrc": "",
    "nrc": "",
    "usage": "",
    "kids": [{
      "type": "radio",
      "selected": false,
      "image": "Test",
      "imageDesc": "",
      "clin": "000REF",
      "description": "",
      "id": "",
      "quantity": 0,
      "measurement": "",
      "contract": "0008-2345-0012",
      "mrc": "",
      "nrc": "",
      "usage": "",
      "kids": []
    }]
  },
  {
    "type": "checkbox",
    "selected": false,
    "image": "",
    "imageDesc": "",
    "clin": "000XNE",
    "description": "",
    "id": "",
    "quantity": 0,
    "measurement": "",
    "contract": "0008-2345-0012",
    "mrc": "",
    "nrc": "",
    "usage": "",
    "kids": []
  },
  {
    "type": "checkbox",
    "selected": false,
    "image": "",
    "imageDesc": "",
    "clin": "000XXD",
    "description": "",
    "id": "",
    "quantity": 0,
    "measurement": "",
    "contract": "0008-2345-0012",
    "mrc": "",
    "nrc": "",
    "usage": "",
    "kids": []
  },
  {
    "type": "checkbox",
    "selected": false,
    "image": "",
    "imageDesc": "",
    "clin": "000XPG",
    "description": "",
    "id": "",
    "quantity": 0,
    "measurement": "",
    "contract": "0008-2345-0012",
    "mrc": "",
    "nrc": "",
    "usage": "",
    "kids": []
  }
];

var dataColumns = [{
    "title": "",
    "data": "id",
    //"className": (window.location.href.indexOf("faq") > -1) ? 1 : 0,
    "render": function(data, type, row, meta) {
      console.log('row: ',...