JSFiddle - React, Tailwind, and code Playground

by jontxo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.3/css/scroller.bootstrap4.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.bootstrap4.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.3/js/dataTables.scroller.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.js"></script>
            <div id="features-overview" class="collapse show container-fluid">
            <div class="x_panel mb-4 ps-2 pe-3 ms-3">
    <table id="features-table" class="table-bordered display nowrap w-100" >
        <thead>
            <tr>
                <th colspan="1"></th>
                <th class="header" colspan=3>Features</th>
                
                    <th class="metadata" colspan=3>Additional Data</th>
                    
                <th class="header" colspan=7>Scenarios</th>
                <th class="header" colspan=7>Steps</th>
            </tr>
            <tr>
     ...

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: 130,
        responsive: {
            details: {
                type: 'column',
                target: '5', 
                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) {
            if(false){
                this.api().column( '.feature-time' ).visible( false );
            }
            if(false){
                this.api().column( '.scenarios-pending' ).visible( false );
            }
            if(false){
                this.api().column( '.feature-metadata' ).visible( false );
            }
            if(false) {
                this.api().column( '.scenarios-skipped' ).visible( false );
            }
            if(false) {
                this.api().column( '.scenarios-undefined' ).visible( false );
            }
            if(false) {
                 this.api().column( '.scenarios-ambiguous' ).visible( false );
            }
            if(false){ 
                 this.api().column( '.steps-failed' ).visible( false );
            }
            if(false){
                this.api().column( '.steps-skipped' ).visible( false );
            }
            if(false){
                this.api().column( '.steps-pending' ).visible( false );
            }
     ...