Responsive dataTable is not working with Bootstrap 4.3.1

Question

I have an issue with the responsive DataTable Plugin and Boostrap 4.3.1 in this specific scenario:

I have an extra large modal which display a table, this table have 3 collapsed columns with some contact information this work as expected:

However in mobile display the table dont collapse the other columns as I would expect, and the table is not wraped inside the modal:

I used the following example at Datatables.net and loaded basically the same files with the exception of Bootstrap which is the version 4.3.1 and not the 4.1.3.

My HTML:

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" id="modalOpciones" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Opciones:</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <table id="tablaDirectorio" cellspacing="0" class="table table-striped table-bordered dt-responsive " style="width:100%">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Departamento</th>
                            <th>Puesto</th>
                            <th>Fecha Creado</th>
                            <th>Extension</th>
                            <th class="none">Telefono</th>
                            <th class="none">Celular</th>
                            <th class="none">Email</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>id</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Departamento</th>
                            <th>Puesto</th>
                            <th>Fecha Creado</th>
                            <th>Extension</th>
                            <th>Telefono</th>
                            <th>Celular</th>
                            <th>Email</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

My Javascript:

$('#opciones-list').on('click', 'a' ,(e) => {
            $('#modalOpciones').modal('show');
            var tablaEditar=$('#tablaDirectorio').DataTable({
                "destroy": true,
                "responsive":/*{
                    "details": {
                        renderer: function ( api, rowIdx, columns ) {
                            var data = $.map( columns, function ( col, i ) {
                                return col.hidden ?
                                '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                                '</tr>' :
                                '';
                            } ).join('');

                            return data ?$('<table/>').append( data ) :false;
                        }
                    }
                }*/true,
                "autoWidth": false,
                "ajax": {
                    "url": 'controller/controller.php',
                    "method": 'POST',
                    data:{accion:'getTabla'}
                },
                "columns": [
                    {"data": "directorio"},
                    {"data": "nombres"},
                    {"data": "apellidos"},
                    {"data": "departamento_nombre"},
                    {"data": "puesto"},
                    {"data": "fechacreado"},
                    {"data": "Extension"},
                    {"data": "Telefono"},
                    {"data": "Celular"},
                    {"data": "Email"}
                ],
                "language":idioma_spanol,
                "columnDefs": [
                    {"className": "dt-center", "targets": "_all"}
                ]
            });
        })

Hope someone can help me on this one !! Thanks in advice

Answer 1

CAUSE

Your table is hidden initially which prevents jQuery DataTables from initializing the table correctly.

SOLUTION

Use the code below to recalculate column widths of all visible tables once modal becomes visible by using a combination of columns.adjust() and responsive.recalc() API methods.

$('#modal').on('shown.bs.modal', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .responsive.recalc();
});

You can also adjust single table by using table ID, for example:

$('#modal').on('shown.bs.modal', function(e){
   $('#example').DataTable()
      .columns.adjust()
      .responsive.recalc();
});

LINKS

• jQuery DataTables: Column width issues with Bootstrap tabs - Responsive extension – Incorrect breakpoints.
• Datatable jquery - table header width not aligned with body width

Answer 2

Try to wrap the table inside a divand then give it the attribute overflow:auto;