JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.2.2/css/dataTables.scroller.min.css">
<script src="https://cdn.datatables.net/scroller/1.2.2/js/dataTables.scroller.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.12.1/features/scrollResize/dataTables.scrollResize.min.js"></script>
<div id="myDiv">
  <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
          <tr>
              <th>ID</th>
          </tr>
      </thead>
  </table>
</div>
<button id="resizeButton">Resize</button>
<span id="serverReturn"></span>

JavaScript

$('#resizeButton').click(() => $("#myDiv").height(800));

$("#example").dataTable({
	"serverSide": true,
	"ajax": function ( data, callback, settings ) {
		setTimeout( function () {
			var out = Array.apply(null, Array(settings._iDisplayLength))
      	.map(function (x, i) {
        	return { id: settings._iDisplayStart + i + 1 };
        })
        .filter(function(x) {
        	return x.id <= 180; // simulate only 180 record in server
        });
        
      $("#serverReturn").text('from: ' + out[0].id + ' to: ' + out[out.length - 1].id + ' _iDisplayLength: ' + settings._iDisplayLength);

			callback({
				"draw": data.draw,
				"data": out,
				"recordsTotal": 180,
				"recordsFiltered": 180,
			});
		}, 50);
	},     
	"scroller": {
		"loadingIndicator": true,
	},
	"dom": "rtiS",
	"scrollY": "100px",
	"columns": [
		{"data": "id"}, 
	],
  "scrollResize": true,
});