JSFiddle - React, Tailwind, and code Playground

by chouxe

HTML

<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="http://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>Picture</th> 
        <th>Num</th> 
        <th>Status</th> 
        <th>Title</th> 
        <th>Art</th> 
        <th>Start</th> 
        <th>Close</th> 
        <th>Mobile Formatted</th> 
    </tr> 
</thead> 
<tbody> 
        <tr> 
            <td>Picture 1</td> 
            <td>1</td> 
            <td>Online</td> 
            <td>Title 1</td> 
            <td>Art 1</td> 
            <td>Start 1</td> 
            <td>End 1</td> 
            <td>
              <b>Num:</b> 1<br/>
              <b>Online:</b> yes<br/>
              <b>Title:</b> Title 1<br/>
              <b>Art:</b> Art 1<br/>
              <b>Start:</b> Start 1<br/>
              <b>End:</b> End 1
            </td> 
        </tr> 
        <tr> 
            <td>Picture 2</td> 
            <td>2</td> 
            <td>Online</td> 
            <td>Title 2</td> 
            <td>Art 2</td> 
            <td>Start 2</td> 
            <td>End 2</td> 
            <td>
              <b>Num:</b> 2<br/>
              <b>Online:</b> yes<br/>
              <b>Title:</b> Title 2<br/>
              <b>Art:</b> Art 2<br/>
              <b>Start:</b> Start 2<br/>
              <b>End:</b> End 2
            </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: true,
        columnDefs: [ 
        	{ targets:"_all", orderable: false },
        	{ targets:[0,1,2,3,4,5,6], className: "desktop" },
        	{ targets:[0,7], className: "tablet, mobile" }
        ]
    } );
} );