JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/s/dt/dt-1.10.10,cr-1.3.0,fc-3.2.0,se-1.1.0/datatables.min.css">
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10,cr-1.3.0,fc-3.2.0,se-1.1.0/datatables.js"></script>
<div id="f1:cars" class="ui-datatable ui-widget m3dt m3List" m3updateConfRemoteCommand="tstDtUpdateConfiguration" m3colReorder="true" m3scrollX="true" m3colResize="true" m3colSort="true" scrollLimit="1000" scrollStep="2">
			<div class="ui-datatable-tablewrapper">
				<table role="grid">
					<thead id="f1:cars_head">
						<tr role="row">
							<th id="f1:cars:j_idt58" class="ui-state-default  m3reordable m3orderIdx0" role="columnheader">
								<span class="ui-column-title">ID</span>
							</th>
							<th id="f1:cars:j_idt62" class="ui-state-default  m3reordable m3orderIdx1" role="columnheader">
								<span class="ui-column-title">Year</span>
							</th>
							<th id="f1:cars:j_idt64" class="ui-state-default  m3reordable m3orderIdx2" role="columnheader">
								<span class="ui-column-title">Brand</span>
							</th>
							<th id="f1:cars:j_idt66" class="ui-state-default  m3reordable m3orderIdx3" role="columnheader" style="width:600px">
								<span class="ui-column-title">Email</span>
							</th>
						</tr>
					</thead>
					<tfoot id="f1:cars_foot">
						<tr>
							<td class="ui-state-default"/>
							<td class="ui-state-default">Sale Rate 1</td>
							<td class="ui-state-default">Sale Rate 2</td>
							<td class="ui-state-default">Sale Rate 3</td>
						</tr>
					</tfoot>
					<tbody id="f1:cars_data" class="ui-datatable-data ui-widget-content">
						<tr data-ri="0" data-rk="6d1ddc04" class="ui-widget-content ui-datatable-even ui-datatable-selectable ui-state-highlight" role="row" aria-selected="true">
							<td role="gridcell" class=" m3reordable m3orderIdx0">
								<a href="#"...

JavaScript

$(document).ready(function() {
    $('table').DataTable({dom: 'Zt', //Z: https://github.com/Silvacom/colResize
        autoWidth: false,
        deferRender: false,
        info: false,
        jQueryUI: false,
        lengthChange: false,
        ordering: true,
        paging: false,
        processing: false,
        searching: false,
        serverSide: false,
        stateSave: false,
        orderClasses: false,
        scrollX: true,
        colReorder: {
            realtime: false
        },
        order: []    
        });
} );