JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.4/css/scroller.dataTables.min.css">
<script src="https://cdn.datatables.net/scroller/2.0.4/js/dataTables.scroller.min.js"></script>
<table id="dt" class="table table-hover table-sm table-striped">

</table>

JavaScript

let rows = [];
for (let i = 0; i < 20000; i++){
	rows.push({ col: "one" })
}

for (let i = 0; i < 20000; i++){
	rows.push({ col: "two" })
}

$('#dt').DataTable({
    //data: this.devices,
    serverSide: true,
    deferRender: true,
    scrollY: 600,
    scrollCollapse: false,
    scroller: {
      serverWait: 50,
      loadingIndicator: true
    },
    createdRow: this.handleRowCreated,
    ajax: (data, callback, settings) => {
			let filtered = rows;
      if (data.search.value.length > 0){
        let search = data.search.value.toLowerCase();
        filtered = rows.filter(row => {
          return row.col.toLowerCase().includes(search);
        });
      }

      let page = filtered.slice(data.start, data.start + data.length);
      setTimeout(() => {
        callback({
          draw: data.draw,
          data: page,
          recordsTotal: rows.length,
          recordsFiltered: filtered.length
        });
      })
    },
    columns: [  		
      { "data": "col", "title": "Column", "defaultContent": "" , "sortable": false}
    ]
})