JSFiddle - React, Tailwind, and code Playground

by jlujan

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css">
<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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.css">
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
<div class="container">
<table id="grid" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>Nombre</th>
                <th>Fecha Registro</th>
                <th>Fecha Actualización</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td>3</td>
            <td>Los Bronces</td>
            <td>20/09/2018 06:34</td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
    </table>
                            </div>
                              </body>
</html>

CSS

table.dataTable
{
  margin: 0;
}

JavaScript

var grid = $('#grid').DataTable({
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json",
                    select: {
                        rows: {
                            _: "%d faenas seleccionadas",
                            0: "",
                            1: "1 faena seleccionada"
                        }
                    }
                },
                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,
                rowId: "id",
                columns: [
                    {
                        data: null,
                        defaultContent: '',
                        orderable: false,
                        className: 'select-checkbox',
                        width: 35
                    },
                    {data: "id", width: 50},
                    {data: "nombre", width: 300},
                    {data: "createdAt", width: 130},
                    {data: "updatedAt", width: 130},
                    {
                        data: null,
                        className: "text-center",
                        orderable: false,
                        width: 70,
                        defaultContent: '<a href="" class="row-btn editor_edit" title="Editar"><i class="fas fa-pencil-alt"></i></a> <a href="" class="row-btn editor_remove" title="Eliminar"><i class="fas fa-trash-alt"></i></a>'
                    }
                ],
                order: [2, "asc"],
                scrollX: true,
                fixedColumns: {
                    rightColumns: 1
                },
                select: {
                    style: 'multi',
        ...