JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/keytable/2.1.1/js/dataTables.keyTable.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/keytable/2.1.1/css/keyTable.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.2/js/dataTables.fixedHeader.min.js"></script>

        <script type="text/javascript" src="https://cdn.datatables.net/keytable/2.7.0/js/dataTables.keyTable.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
		
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.2/css/fixedHeader.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.7.0/css/keyTable.dataTables.min.css"/>


<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th><th>Salary</th>
                <th>Salary</th>
                <th>Salary</th>
                <th>Salary</th>
  ...

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable( {
    orderCellsTop: true,
				scrollX:true,
			  responsive: true,
		    "pageLength": 10,
		  "keys": {
				"keys": [ 38,40,39,37 ]
			},
			"language": {
    			"aria": {
					"sortAscending": " - click/return to sort ascending this is a custom aria lable",
					"sortDescending": " - click/return to sort descending this is a custom aria lable"
				}
  			},
			"drawCallback": function( settings ) {
        						
				$("#table-allData tbody td").each(function(i){
					console.log($(this).text)
					$(this).attr("aria-label",$(this).text())
					$(this).attr("aria-describedby",$(this).text())
					$(this).attr("aria-role","cell")
					
				})
				
				;
    		}
    })
} );