JSFiddle - React, Tailwind, and code Playground

by jordan_josh3184

HTML

<html>
<head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

 <script type="text/javascript" src="script.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
</head>
<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                
                <th>OrderNum</th>
                <th>CSSNumber</th>
                <th>applNumber</th>
                <th>pname</th>
                <th>title</th>
                <th>score</th>
                <th>Child Table</th>
            </tr>
        </thead>
    </table>

</div>
</body>

JavaScript 1.7

var dataSet = [
    {"orderNum":"1","cssNumber":"CSS123","applNumber":"A-1111","pname":"Jack MAA","title":'AliBaba',"score":"25","ChildTable": [
{"Name": "R-Madhavan","Role": "1 - advanced","score":"24","date":"01/01/2022"},
{"Name": "R-Kumar","Role": "1 - advanced","score":"24","date":"01/01/2022"},
{"Name": "R-Test","Role": "1 - advanced","score":"24","date":"01/01/2022"}
        ]},
    {"orderNum":"2","cssNumber":"CSS234","applNumber":"A-2222","pname":"Alex","title":'Beyond',"score":"35","ChildTable": [
{"Name": "R-Robert","Role": "1 - advanced","score":"1","date":"01/01/2022"},
{"Name": "R-Mark","Role": "1 - advanced","score":"4","date":"01/01/2022"},
{"Name": "R-Chuck","Role": "1 - advanced","score":"10","date":"01/01/2022"}
        ] },
    {"orderNum":"3","cssNumber":"CSS345","applNumber":"A-3333","pname":"Simon","title":'X Capital',"score":"45","ChildTable": [
{"Name": "R-Anthony","Role": "1 - advanced","score":"1","date":"01/01/2022"},
{"Name": "R-Jim","Role": "1 - advanced","score":"4","date":"01/01/2022"},
{"Name": "R-Marsha","Role": "1 - advanced","score":"10","date":"01/01/2022"}
        ] }];
        
 var childData=  [
{"Name": "R-Madhavan","Role": "ABC","score":"11","date":"01/01/2022"},
{"Name": "R-Kumar","Role": "PQW","score":"2","date":"01/01/2022"},
{"Name": "R-Test","Role": "Josj","score":"31","date":"01/01/2022"}
        ]      
 function formatChildTable(data) {
  var table_string =  '<table class="childTable display dataTable cell-border"><thead>' +
    '<tr>' +
      '<th>Name</th>' +
      '<th>Role</th>' +
       '<th>Score</th>' +
        '<th>date</th>' +
    '</tr></thead><tbody>';
     data.forEach(function(row) {
    var row_string = '';
    row_string = row_string + 
      '<tr>' + 
        '<td>' + row.Name + '</td>' +
        '<td>' + row.Role + '</td>' +
        '<td>' + row.score + '</td>' +
        '<td>' + row.date + '</td>' +
      '</tr>';
    table_string = table_string + row_string;
  });

  table_string = table_string...