JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.1/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.1/css/colReorder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<table id="example" class="display" style="width:100%">
</table>
JavaScript
$(document).ready(function() {
var table = $('#example').DataTable( {
dom:
"B<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>t<'row'<'col-md-12 col-lg-6'i><'col-md-12 col-lg-6'p>>",
select: {
style: "multi",
selector: "td.select-checkbox"
},
buttons: ["colvis"],
columns: [
{
"name": "IsInterne",
"title": "Interne",
"type": "switch",
"options": null,
"separator": null,
"visible": true
},
{
"name": "IsInstance",
"title": "Instance",
"type": "switch",
"options": null,
"separator": null,
"visible": true
},
{
"name": "LastName",
"title": "Nom",
"type": "text",
"options": null,
"separator": null,
"visible": true
},
{
"name": "Mail",
"title": "Email",
"type": "text",
"options": null,
"separator": null,
"visible": true
},
{
"name": "Tjm",
"title": "TJM",
"type": "text",
"options": null,
"separator": null,
"visible": true
},
{
"name": "IsTotalAdmin",
"title": "Administrateur",
"type": "switch",
"options": null,
"separator": null,
"visible": true
},
{
"name": "IsResponsible",
"title": "Responsable",
"type": "switch",
"options": null,
"separator": null,
"visible": true
...