JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap.min.css">
    <title>Title</title>
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>ZIP / Post code</th>
      <th>Country</th>
      </tr>
    </thead>
    <tbody>
    
</table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.2.0/js/dataTables.scroller.min.js"></script>
</body>
</html>

JavaScript

$(document).ready(function() {
       var tableConfig = {
            language : {
                loading: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>',
                loadingRecords: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
            },
            ordering: false,
            scroller: {
                loadingIndicator: true
            },
            scrollY: '50vh',
            searching: false,
            stripeClasses: [],
            dom: 'tp',
            fixedColumns: true,
            deferRender: true,
            serverSide: true,
            processing: true,
            ajax : function (data, callback, settings) {
                let out = [];

                for (var i = data.start, ien = data.start + data.length; i < ien; i++) {
                    out.push([i + '-1111111111 11111111111111111 1111111111111111',
                    i + '-2222222222222222 2222222222222 22222222222222',
                    i + '-333333 33333333333 3333333333333333333333 3333333333333 3333333333 33',
                    i + '-4',
                    i + '-5',
                    i + '-6',
                    i + '-7',
                    i + '-8',
                    i + '-9']);
                }

                setTimeout(() => {
                    callback({
                        draw: data.draw,
                        data: out,
                        recordsTotal: 10000,
                        recordsFiltered: 10000
                    });
                }, 150);
            },
            
        }; 
        
        $("table[id*=example]").DataTable(tableConfig);
    } );