JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.3/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/dt/jqc-1.12.3/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
<table id="ofac" class="display compact" style="width:100%">
<thead>
<tr>
<th>State</th>
<th>City</th>
<th>Employee</th>
</tr>
</thead>
<tbody>
<tr>
<td>Florida</td>
<td>Miami</td>
<td>100</td>
</tr>
<tr>
<td>Florida</td>
<td>Tampa</td>
<td>50</td>
</tr>
<tr>
<td>Florida</td>
<td>Jacksonville</td>
<td>25</td>
</tr>
</tbody>
</table>

JavaScript

$(document).ready(function() {
var dataTables = $('#ofac').DataTable( {
    // make responsive
    responsive: true, 
    // make table long
    paging: false, 
    // column reorder
    colReorder: true, 
    // row grouping by name
    orderFixed: [[0, 'asc']],
        rowGroup: {
            dataSrc: 0
        }

} );

} );