JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/scroller/2.2.0/js/dataTables.scroller.min.js"></script>
<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
    </tr>
  </thead>
</table>

CSS

#myDiv {
  height: 400px;
}

JavaScript

var table = $("#example").DataTable({
		columns: [
      {
        className: 'dt-control',
        orderable: false,
        data: null,
        defaultContent: ''
      },
      { data: 'id' },
    ],
    //
    // example from https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html
    //
    ajax: function (data, callback, settings) {
        setTimeout(() => {
        	let out = [];
 
          for (var i = data.start, ien = data.start + data.length; i < ien; i++) {
            out.push({ id: i });
          }

          callback({
            draw: data.draw,
            data: out,
            recordsTotal: 5000000,
            recordsFiltered: 5000000
          });
        } , 50);
    },
    ordering: false,
    scroller: {
        loadingIndicator: true
    },
    scrollY: 200,
    searching: false,
    serverSide: true
});

//
// example from https://datatables.net/examples/api/row_details.html
//

// Add event listener for opening and closing details
table.on('click', 'td.dt-control', function (e) {
    let tr = e.target.closest('tr');
    let row = table.row(tr);
 
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
    }
    else {
        // Open this row
        row.child(format(row.data())).show();
    }
    
    table.scroller.measure(false);
});

// Formatting function for row details - modify as you need
function format(d) {
    // `d` is the original data object for the row
    return (
        '<dl>' +
        '<dt>Full name:</dt>' +
        '<dd>' +
        d.name +
        '</dd>' +
        '<dt>Extension number:</dt>' +
        '<dd>' +
        d.extn +
        '</dd>' +
        '<dt>Extra info:</dt>' +
        '<dd>And any further details here (images etc)...</dd>' +
        '</dl>'
    );
}