JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9,fc-3.1.0,fh-3.0.0,rr-1.0.0,se-1.0.1/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9,fc-3.1.0,fh-3.0.0,rr-1.0.0,se-1.0.1/datatables.min.js"></script>
JavaScript
$('body').ready(
function (){
// create table
var iNumRows = 5;
var iNumCols = 5;
var tr = document.createElement('tr');
for (var j = 0; j < iNumCols; j++) {
var th = document.createElement('th');
th.innerHTML = "col " + j.toString();
tr.appendChild(th);
}
var thead = document.createElement('thead');
thead.appendChild(tr);
var tbody = document.createElement('tbody');
for (var i = 0; i < iNumRows; i++) {
tr = document.createElement('tr');
for (var j = 0; j < iNumCols; j++) {
var td = document.createElement('td');
td.innerHTML = "cell " + i.toString();
tr.appendChild(td)
}
tbody.appendChild(tr);
}
var table = document.createElement("table");
table.className = "display compact nowrap";
table.cellspacing="0"
table.appendChild(tbody);
table.appendChild(thead);
// create my absolute div container
var div = document.createElement("div");
div.style.position = 'absolute';
div.style.width = "500px";
div.style.height = "500px";
div.style.backgroundColor = '#FF0000';
div.appendChild(table)
$('body').append(div);
setTimeout( function (){
$(table).DataTable({
paging: false,
ordering: false,
//scrollX: true,
scrollY: "100%",
searching:false,
fixedColumns: {
leftColumns: 1
},
columns: [
{ "width": "10em" , className: "myRowHeaderClass" },
{className: "myRowHeaderClass" },
{className: "myRowHeaderClass" },
{className: "myRowHeaderClass" },
...