JSFiddle - React, Tailwind, and code Playground

by jontxo

HTML

<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.20/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.bootstrap4.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.bootstrap4.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.0/css/scroller.bootstrap4.css">
                <table id="features-table" class="table-bordered table-sm display nowrap"  width="100%"">
                    <thead>
                        <tr>
                            <th colspan="1"></th>
                            <th class="header" colspan=3>Features</th>
                            
                            <th class="header" colspan=3>Scenarios</th>
                            <th class="steps" colspan=2>Steps</th>
                        </tr>
                        <tr>
                     ...

JavaScript

$('#features-table').dataTable({

        buttons: ['colvis'],
        order: [[0, "asc"]],
        lengthMenu: [[50, 100, 150, -1], [50, 100, 150, "All"]],
        scroller: true,
        fixedColumns:   true,
        scrollY: 300,
        scrollX: false,
        scrollCollapse: true,
         columnDefs: [
            {
                    className: "dt-nowrap"
            }
         ],
        responsive: true,
        initComplete: function(settings, json) {
        	this.api().columns( '.steps' ).visible( false );
        	          this.api().columns( '.total' ).visible( false );
        }
    });