Modal in Bootstrap 4 and DataTables not loading

I have a php page that loads the following table: the code is this:

<table id="tabla" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Usuario</th>
                    <th scope="col">Sector</th>
                    <th scope="col">Ultimo Ingreso</th>
                    <th scope="col">Acción</th>
                </tr>
            </thead>
            <tbody>
                <?php if ($arrDatos) {
                foreach ($arrDatos as $row) { ?>
                <tr>
                    <td>
                        <?php echo $row['id']; ?>
                    </td>
                    <td>
                        <?php echo $row['usuario']; ?>
                    </td>

                    <td>
                        <?php
                      if ($row['sector'] == 1) { ?>
                            <p>Administración</p>
                            <?php } else { ?>
                            <p>Producción</p>
                            <?php } ?>
                    </td>

                    <td>
                        <?php echo $row['ultimo_acceso']; ?>
                    </td>

                    <td>
                        <div class="btn-group">
                            <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal" data-id=" <?echo $row[ 'id'];?>"><i class="fas fa-eye"></i></a>

                            <a href="editar.php?var=<?php echo base64_encode($row[ 'id']);?>" class="btn btn-success btn-sm">
                        <i class="fas fa-edit"></i>
                        </a>
                            <a href="eliminar.php?var=<?php echo base64_encode($row[ 'id']);?>" class="btn btn-danger btn-sm">
                        <i class="fas fa-trash-alt"></i>
                        </a>
                        </div>
                    </td>
                </tr>
                <?php }} ?>
            </tbody>
        </table>

I was reading that the datatables itself incorporates its own viewer for each record: dtybootstrap

It turns out that I followed all the steps explained in the documentation, as you can see I don't get the first button that you see in the image:

in the head I have the following:

<link rel="stylesheet" 
 href="../../componentes/bootstrap/css/bootstrap.min.css">
 <script src="../../componentes/jquery-3.3.1.min.js"></script>
 <script src="../../componentes/popper.min.js"></script>
 <script src="../../componentes/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" 
  href="../../componentes/DataTables/datatables.css">
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/datatables.js"></script>
  <link rel="stylesheet" href="../../componentes/DataTables/Buttons-
  1.5.1/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" href="../../componentes/DataTables/Responsive-
  2.2.1/css/responsive.bootstrap4.min.css">
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Buttons-
  1.5.1/js/buttons.bootstrap4.min.js"></script>
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Responsive-
  2.2.1/js/dataTables.responsive.min.js"></script>
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Responsive-
  2.2.1/js/responsive.bootstrap4.min.js"></script>

  <link href="../../componentes/fontawesome/on-server/css/fontawesome-
  all.css" rel="stylesheet">
  <script>
  $(document).ready(function() {
    $('#tabla').DataTable({
        language: {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ 
     registros",
            "sInfoEmpty": "Mostrando de 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sSearch": "Buscar: ",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de 
        manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de 
        manera descendente"
            }
        },

        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function(row) {
                        var data = row.data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
            }
        }
    });
});

</script>

At first I was breaking my head with the bootstrap modal but I realized that I can create a modal with the datatables itself, I don't know why it's not working for me... can someone give me a hand? DO YOU RECOMMEND THAT I DO IT IN THE DATATABLES MODE? OR THE BOOTSTRAP ONE?