JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.1/css/dataTables.colVis.css">
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js"></script>
<script src="http://cdn.datatables.net/colreorder/1.1.2/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/colreorder/1.1.2/css/dataTables.colReorder.css">
<table id="example" class="display" cellspacing="0" width="100%">
</table>
JavaScript
$(document).ready(function() {
$('#example').DataTable( {
serverSide: true,
processing: true,
dom: 'RC<"clear">lrtip',
scrollX: true,
ajax: {
url: '/echo/json/',
type:'POST',
data: {
json: JSON.stringify({
data: [
{
name: 'Tiger Nixon',
pos: 'System Architect',
office: 'Edinburgh',
age: '61',
start: '2011/04/25',
salary: '$320,800'
}
],
recordsFiltered: '1',
recordsTotal: '1'
}),
delay: 1
}
},
columns: [
{data: 'name', title: 'Name'},
{data: 'pos', title: 'Position'},
{data: 'office', title: 'Office'},
{data: 'age', title: 'Age'},
{data: 'start', title: 'Start Date'},
{data: 'salary', title: 'Salary'}
]
} );
} );