JSFiddle - React, Tailwind, and code Playground

by desytec

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css">
<div class="row">
<div class="col-12">
    <div class="card">
        <div class="card-body">
          <table id="reporte" class="table table-striped table-bordered nowrap" style="width: 100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Identificación</th>
                        <th>Credencial</th>
                        <th>Nombres</th>
                        <th>Apellido Paterno</th>
                        <th>Apellido Materno</th>
                        <th>Other 1</th>
                        <th>Other 2</th>
                        <th>Other 3</th>
                    </tr>
                </thead>
                <tbody>
                  <tr>
                    <td></td> 
                    <td>111111111</td>
                    <td></td>
                    <td>Juan</td>
                    <td>Pérez</td>
                   ...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

$(document).ready(function () {
            $.fn.dataTable.ext.errMode = 'none';

            var tabla = $('#reporte').DataTable({
                fnDrawCallback: function () {
                	$("div.gridToolbar").html('<div class="button-group"><button id="btnExportar" type="button" class="btn btn-info" data-container="body" title="Exportar" data-toggle="tooltip" data-placement="top" data-content="Exporta a Excel el contenido de toda la grilla, luego de realizada alguna búsqueda."><i class="far fa-file-excel"></i> Exportar</button></div>');
                    

                    $("div.customSearch").html('<div id="reporte_filter" class="dataTables_filter"><label>Buscar:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="reporte"></label></div>');
                    $('.tooltip_commands').each(function () {
                        tippy(this, {
                            delay: 100,
                            arrow: true,
                            arrowType: 'round',
                            size: 'large',
                            duration: 500,
                            animation: 'scale',
                            placement: 'left',
                            interactive: true,
                            trigger: 'click',
                            content: document.querySelector('#tooltip_content').cloneNode(true),
                            async onShown(tip) {
                                tooltipMenu = tip;

                                var reference = tip.reference;

                                var id = $(reference.closest('tr')).prop('id');

                                var url = '@Url.Action("VerMotivo", "Visita")' + '/' + id;
                                $('#_verMotivo').prop('href', url);

                                url = '@Url.Action("VerObservaciones", "Visita")' + '/' + id;
                                $('#_verObservaciones').prop('href', url);

                     ...