JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/u/dt/dt-1.10.12,b-1.2.1,b-html5-1.2.1,sc-1.4.2,se-1.2.0/datatables.min.css">
<script src="https://cdn.datatables.net/u/dt/dt-1.10.12,b-1.2.1,b-html5-1.2.1,sc-1.4.2,se-1.2.0/datatables.min.js"></script>
<h2>
Process
</h2>
<p>
Click here to see the bug : <a href="#" onclick="window.bugme();">start</a> = scroll a little, then reduce height.<br><br>
Change height : <a href="#" onclick="window.minimizeme();">Min height</a>.
<a href="#" onclick="window.maximizeme();">Max height</a>.
</p>
<h2>
Table
</h2>

<div id="info_other_spe">
<table id="info_other_spe_table" class="display compact" width="100%" cellspacing="0"></table>
</div>

JavaScript

var nb_rows = 100;

// these values triggers the bug
var dt_min_height = 70;
var dt_row_to_scroll = 6;
var dt_max_height = 400;
var displayBuffer = 2;

window.bugme = function() {
	// notes : to automate this test I need to scroll then resize, the way a user will do :
  // - no scroll animation... but it seems the scroll isn't immediate
  // - settimeout, to be sure the resize will be done after the scroll finishes

	// 1. scroll a little
	var dt = $("#info_other_spe_table").DataTable({bRetrieve:true});
  dt.row(dt_row_to_scroll).scrollTo(false);
	// 2. reduce size
  setTimeout(function(){
	  window.resizeme( "#info_other_spe", dt_min_height );
  }, 1000);
};

window.maximizeme = function() {
	window.resizeme( "#info_other_spe", dt_max_height );
}
window.minimizeme = function() {
	window.resizeme( "#info_other_spe", dt_min_height );
}

window.resizeme = function( MY_TABLE, THE_NEW_HEIGHT ) {
	$(MY_TABLE+' .dataTables_scrollBody').css( 'height', THE_NEW_HEIGHT +"px");
 	var dt = $(MY_TABLE+'_table').DataTable({bRetrieve:true});
	dt.scroller.measure(); // without this, maximizing shows empty rows
	dt.draw("page"); // I want that the table still displays the currently visible first line
}

$(document).ready(
	function() {
  	var rows = [];
    for(var i=0; i<=nb_rows;i++) {
    	rows.push({
      	"a":i,
        "b":"row "+i
      });
    }
    //console.log( rows );
    
    $('#info_other_spe_table').dataTable({
    	destroy: true,
			paging: true,
			scrollX: true,
			scrollCollapse: false,
			scrollY: dt_max_height,
			deferRender: true,
			scroller: {
				displayBuffer: displayBuffer
			},
			sort: false,
      data: rows,
			columns: [
      	{data:"a","title":"Col A"},
        {data:"b","title":"Col B"},
      ],
			select: {
				style: 'single'
			},
			//dom: 'Bfrtip',
    });
  }
);