dataTable Responsive

by jontxo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<table id="features-table" class="table-bordered table-sm display nowrap w-100" >
                <thead>
                    <tr>
                        <th colspan="1"></th>
                        <th class="header" colspan=3>Features</th>
                        
                            <th class="metadata" colspan=1>Custom Data</th>
                            
                        <th class="header" colspan=7>Scenarios</th>
                        <th class="header" colspan=7>Steps</th>
                    </tr>
                    <tr>
                        <th class="feature-name">Feature Name</th>
                        <th class="feature-tags"><i class="fa fa-tags fa-lg" title="Tags"></i></th>
                        <th class="feature-status">Status</th>
                        <th class="feature-time">Time</th>
                        
                            
                                <th class="feature-metadata">browser</th>
                                
                        
                        <th class="scenarios-total">Total</th>
                        <th class="scenarios-passed">Passed</th>
                        <th class="scenarios-failed">Failed</th>
                       ...

JavaScript

$('#features-table').dataTable({
        dom: "<'row'<'col-md-2'l><'col-md-1'B><'col-md-1'f><'col-md-9'>>" +
            "<'row'<'col-lg-12't>><'row'<'col-lg-6'i><'col-lg-6'p>>",
        buttons: ['colvis'],
        order: [[0, "asc"]],
        lengthMenu: [[50, 100, 150, -1], [50, 100, 150, "All"]],
        deferRender: true,
        scrollCollapse: true,
        scrollY: 175,
        columnDefs: [
        { className: 'none', targets: 1 }
        ],
        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'
                } )
            }
        },
         initComplete: function(settings, json) {
            $('#features-table').DataTable().columns.adjust().draw();
         }
        });