JSFiddle - React, Tailwind, and code Playground

HTML

<table id="DataGrid" class="display table table-bordered table-hover dataTable" style="width: 100%;">
												<thead>
													<tr>
														<th class="col-md-1">S.no</th> 
														
														<th class="col-md-1">Applicant</th>
													
														<th class="col-md-2">Name</th>
														<th>Event </th>
<!-- 														<th width="185px;">Registration No.</th> -->
														<th class="col-md-2">Application ID</th>
														<th>Place of Birth/Death</th>
													
														<th>Type of Birth</th>													
														
													
														<th class="col-md-2">Submission Date</th>
													
														<th width="130px;">Application Submission Date</th>
													
														<th class="col-md-2">Event Date</th>
														<th>Event Type</th>
														<th class="col-md -2">Status</th>
														<th>Action</th>
													</tr>
												</thead>
												<tbody style="margin: 0px;" id="dataSearch">
                        </tbody>
                        </table>

JavaScript

function fetchDataTableContent(){
	 var pagingAction=$("#noOfRecords").val();
	$("#action").val(eventStatus);
	 $("#pagingAction").val(pagingAction);
	 var lastRecordOfPagination="0";
	 $("#lastRecordOflastPage").val(lastRecordOfPagination);
	 var periodRange = $('#daterange').val();
	 $("#periodRange").val(periodRange);
    
	// DataTable
			 var table=   $('#DataGrid').DataTable({
			    	destroy:true, 
			    	orderCellsTop: true,
			    	//fixedHeader: false,
			    	 stateSave: true,
			    	/*  stateSaveParams: function( settings, data ) {
			    		data.daterange = $('#daterange').val();
			    	      data.noOfRecords = $('#noOfRecords').val();
			    	     
					    	},
					    	stateLoadParams: function( settings, data ) {
					    		 $("#periodRange").val(data.daterange);
					    		$('#daterange').val(data.daterange);
					    	      $('#noOfRecords').val(data.noOfRecords);
					    	      
					    	}, */
			    	dom : '<"html5buttons"B>lTfgitp',
					"stateSaveCallback": function (settings, data) {
						$.ajax( {
							      "url" : "tableFilterDetail?action="+eventStatus+"&periodRange="+periodRange +"&lastRecordOflastPage="+lastRecordOfPagination +"&pagingAction="+pagingAction,
							      "data": data,
							     // dataType: 'json',
							    "type": "GET",
							      "success": function (response) {
							    	  //alert(response);
							    	 // callback( response );
							    	$('#pageID').html(response);
							    	 $('#birthdeathhometbleDataGrid').DataTable();
							    }
							    } );
							  },
					buttons : [
							{
								extend : 'copy' ,title : 'MCD',
									exportOptions: {
							            columns: 'th:not(:last-child)'
							         }
							},
							 {
					            extend: 'csvHtml5',
					            title: 'MCD',
					            exportOptions: {
						            columns: 'th:not(:last-child)'
						         },
					             customize: function (csv) {
					                  return 'MCD'+"...