JSFiddle - React, Tailwind, and code Playground

by maxious

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.min.js"></script>
<div style="width: 350px;">

<table width="100%" class="display" id="example" cellspacing="0"><thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th></th>
            </tr>
        </thead>
    </table>

</div>

JavaScript

$(document).ready(function() {
    var aoColumns = [
        { "width": "2%", "orderable": false, "className": "datatables-cell-icon" },
        { "name": "Tittel", "className": "datatables-cell-title" },
        { "name": "Type", "className": "min-tablet-l" },
        { "name": "Oppdatert", "className": "datatables-cell-date min-tablet-l" },
        ];
    
    aoColumns.push({
        data: null,
        defaultContent: "",
        className: 'control',
        orderable: false,
        targets: -1
    });
    
    
    $('#example').DataTable( {
         destroy: true,
        stateSave: true,
    ordering: true,
    autoWidth: false,
    language: {
        "emptyTable": "Ingen data",
        "info": "Viser _START_ til _END_ av _TOTAL_ linjer",
        "infoEmpty": "Viser 0 til 0 av 0 linjer",
        "infoFiltered": "(filtrert fra _MAX_ totalt antall linjer)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Vis _MENU_ linjer",
        "loadingRecords": "Laster...",
        "processing": "Laster...",
        "search": "S&oslash;k:",
        "zeroRecords": "Ingen linjer matcher s&oslash;ket",
        "paginate": {
            "first": "F&oslash;rste",
            "last": "Siste",
            "next": "Neste",
            "previous": "Forrige",
        },
        "aria": {
            "sortAscending": ": activate to sort column ascending",
            "sortDescending": ": activate to sort column descending"
        },
    },
    responsive: {
        details: {
            type: "column",
            target: -1
        }
    },
    orderClasses: false,
            drawCallback: function () {
       $(window).resize();
    },
    order: [],
        
        columns: aoColumns,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "http://webmax.ru/scripts/server_processing.php",
            "dataType": "json"
        },
        responsive: {
            details: {
                type: 'column',
 ...