JSFiddle - React, Tailwind, and code Playground

HTML

<table id="example" class="table table-striped table-bordered" style="width:100%" border ="1">

    <thead>
            <tr>
            <th>S.NO</th>
            <th>Project Details</th>
            <th>Job Details</th>
            <th>Page Split</th>
            <th>Total Pages</th>
            <th>Remaining Pages</th>
            <th>Project Type</th>
            <th>Project Process Type</th>
            <th>Project Work Flow</th>
            <th>TAT</th>
        
            <th>Assignee</th>
            
            <th>Upload Time</th>
            <th>Split Remarks</th>
            
            <th>Split Date</th>
            <th>Status </th>
            <th>worklog details</th>//i am inserting child table inside this 
            </tr>               
            
    </thead>
<tbody>

$job_id =$dep_row["job_id"];

$qry_rep = "SELECT  *, a.created_date split_date,a.remarks
                FROM bi_job_split_details AS a
                LEFT JOIN bi_job_creation AS j ON j.job_id = a.job_id
                LEFT JOIN bi_job_rounds AS r ON r.RoundID = j.RoundID
                LEFT JOIN bi_projects AS p ON p.project_id = j.project_id
                LEFT JOIN bi_project_process_type AS t ON t.p_process_type_id=p.p_process_type_id
                LEFT JOIN bi_process_info as b on b.process_id=a.process_id  
                LEFT JOIN bi_job_status as c on c.status_id=a.status_id 
                LEFT JOIN bi_user_info as d on d.user_id = a.user_id 
                where date(a.created_date)BETWEEN '".$fromdate."' AND  '".$todate."' ORDER BY j.job_id DESC";
        //echo $qry_rep;        
    $dep_row=[];

    $dep_result =mysqli_query($conn,$qry_rep);?>
    
       <?php
			while($dep_row= mysqli_fetch_array($dep_result,MYSQLI_ASSOC))
			{ 
			?> 
					<tr>
				<td><?=$i?></td>
				<td>[<?=$dep_row["bi_project_name"] ?>] <?=$dep_row["project_name"]?></td>
				<td>[<?= $dep_row["bi_job_name"] ?>] [<?= $dep_row["RoundLevel"] ?>] <?= $dep_row["job_name"]...

JavaScript

<script>

    $(document).ready(function () {

        $('#example').DataTable({
			"scrollY": 460, "scrollCollapse": true, "fixedHeader": true,"scrollX": true,
			"order": [],
			'colReorder': true,
			'pageLength': 10,
			'responsive': true,
			'dom': 'Rlfrtip',
			
			
		});
		 $('#example').DataTable({
			
			row.child.show();
			
		});
		
		
				
		   $("#jobExportExcel").click(function(){	   
			var table1 =$('#example').DataTable();
			var stable = document.createElement("table");
			var sthead = $(table1.table().header()).clone()[0].outerHTML;
			var sbody ="";
			table1.$('tr').clone().each(function(){
				sbody += this.outerHTML;
			});	 
			var d = new Date();
			var output = d.getDate() +"_"+d.getMonth()+"_"+d.getFullYear()+"_"+d.getTime();
			stable.innerHTML = sthead + sbody;
			  $(stable).table2excel({
					name: "Jobs Split",
					filename: "Jobs_Split_"+output //do not include extension
				 });
			setTimeout(function(){
				var animate =  document.querySelector("body[class*='animsition']");
				if(animate){
					animate.classList.remove("animsition");
				}
			},2000);
			
		   });
    });
</script>