JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
                <div class="row">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-list"></i> 検索結果</h2>
                                <div class="box-icon">
                                    <a href="#" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                                    <a href="#" class="btn btn-close btn-round btn-default"><i class="glyphicon glyphicon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content result">
                                <table class="table table-striped table-bordered bootstrap-datatable datatable responsive" id="result-table">
                                    <thead>
                                        <tr>
                                            <th>Username</th>
                                            <th>Date registered</th>
                                            <th>Role</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>David R</td>
                                            <td class="center">2012/01/01</td>
                                            <td class="center">Member</td>
                                           ...

JavaScript

$("#result-table").DataTable({
        // 件数切替の値を10～50の10刻みにする
        lengthMenu: [ 10, 20, 30, 40, 50 ],
        // 件数のデフォルトの値を50にする
        displayLength: 50,  
        scrollX: true,
        scrollY: 200,
        columnDefs: [
            { targets: 0, visible: false },
            { targets: 1, width: 100 }
        ]
});