JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css">
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
    <div class="table-responsive">
    
        <table id="workplace-datatable" class="">
            <thead>
                <tr>
                    <th></th>
                    <th>ID</th>
                    <th>Workplace</th>
                    <th>Alias</th>
                </tr>
            </thead>
        </table>
    </div>

JavaScript

$(document).ready(function (){

 dataTable = $('#workplace-datatable').DataTable({
                serverSide: false,
                processing: false,
                ajax: "https://c6250240.ngrok.io/test/GetDatatable.json",
                order: [[1, "asc"]],
                rowId: 'WorkplaceID',
                select: {
                    'style': 'multi'
                },
                columnDefs: [
                    {   //Checkbox
                        targets: 0, searchable: false, data: "WorkplaceID",
                        checkboxes: {
                            selectRow: true,
                            selectAllPages: false,
                            stateSave:true
                        }
                    },
                    { targets: 1, data: "WorkplaceID" },
                    { targets: 2, data: "WorkplaceName" },
                    { targets: 3, data: "WorkplaceAlias" }
                ]
            });
});