JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/kt-2.2.1/sc-1.4.2/se-1.2.2/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/kt-2.2.1/sc-1.4.2/se-1.2.2/datatables.js"></script>
<table id="datatable">
  <thead>
    <tr>
      <td>COL1</td>
      <td>COL2</td>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript

let data = [];
let columns = [
  { "data": "col1" },
  { "data": "col2" },
];

for (let i = 0; i < 5000; ++i) {
	data.push({ col1: `row${i}a`, col2: `row${i}b`});
}

let api = $('#datatable').dataTable({
	columns,
  data,
  deferRender: true,
	scrollY: '625px',
  scrollX: '100%',
	keys: true,
  select: true,
  scroller: true
});