JSFiddle - React, Tailwind, and code Playground

by Dave Shama

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%"> 
    
<thead> 
    <tr> 
        <th></th> 
        <th>Item 1</th> 
        <th>Item 2</th> 
        <th>Item 3</th> 
        <th>Item 4</th> 
        <th>Item 5</th> 
    </tr> 
</thead> 
<tbody> 
        <tr> 
            <td></td> 
            <td>data 1</td> 
            <td>data 1</td> 
            <td>data 1</td> 
            <td>data 1</td> 
            <td>data 1 hidden</td> 
        </tr> 
        <tr> 
            <td></td> 
            <td>data 2</td> 
            <td>data 2</td> 
            <td>data 2</td> 
            <td>data 2</td> 
            <td>data 2 hidden</td> 
        </tr> 
    </tbody> 
</table>

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
@import url('//cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css');

JavaScript

$(document).ready(function() {
    $('#example').DataTable( {
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets:   0
        } ],
        order: [ 1, 'asc' ]
    } );
} );