JSFiddle - React, Tailwind, and code Playground

by jontxo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<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.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/responsive/2.2.3/css/responsive.bootstrap4.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.1/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.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/responsive/2.2.3/js/dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.1/js/dataTables.scroller.js"></script>
<body>
    <nav class="navbar">
        <div class="container-fluid p-0">
            <div class="container-fluid p-0">
                <table class="table" style="table-layout: fixed;" border="1" >
                    <thead>
                        <tr>
                            <th style="background-color: #e0ebeb">Project</th>
                            <th style="background-color: #e0ebeb">Date</th>
                            <th style="background-color:...

JavaScript

$('#features-table').dataTable({
        buttons: ['colvis'],
        order: [[0, "asc"]],
        lengthMenu: [[50, 100, 150, -1], [50, 100, 150, "All"]],
        deferRender: true,
        scrollCollapse: true,
        scrollY: '50vh',
        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'
                } )
            }
        }
    });