JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="grid" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>RUN</th>
<th>Empresa</th>
<th>Licencias</th>
<th>Faenas</th>
<th>Requisitos</th>
<th>Infracciones</th>
<th>Fecha Registro</th>
<th>Fecha Actualización</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>5</td>
<td>Conductor 1</td>
<td>Apellido 1</td>
<td>33.333.333-3</td>
<td>Empresa Colaboradora</td>
<td>B</td>
...
JavaScript
$(document).ready( function () {
grid = $('#grid').removeAttr('width').DataTable({
language: {
url: "//cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json",
select: {
rows: {
_: "%d conductores seleccionados",
0: "",
1: "1 conductor seleccionado"
}
}
},
dom: "<'row'<'col-sm-12 col-md-4'<\"toolbar\">><'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
processing: false,
serverSide: false,
colReorder: true,
orderMulti: false,
autoWidth: false,
rowId: "id",
columns: [
{
data: null,
defaultContent: '',
orderable: false,
className: 'select-checkbox',
width: 35
},
{data: "id", width: 100},
{data: "nombres", width: 120},
{data: "apellidos", width: 120},
{data: 'runFormateado', width: 80},
{data: 'empresa', width: 200, orderable: false},
{data: 'licencias', width: 120, orderable: false},
{data: 'faenas', width: 200, orderable: false},
{data: 'requisitosWebcontrol', width: 100},
{data: 'infracciones', width: 100, orderable: false},
{data: "createdAt", width: 130},
{data: "updatedAt", width: 130},
{
data: null,
className: "text-center",
...