JSFiddle - React, Tailwind, and code Playground

by alrick

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Photo</th>
            <th>Name</th>
            <th>Function</th>
            <th>Activity</th>
            <th>Phone</th>
            <th>Status</th>
            <th>Tool</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>none</td>
            <td>George</td>
            <td>Butler</td>
            <td>Sleeping</td>
            <td>00</td>
            <td>Active</td>
            <td>Hook</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Photo</th>
            <th>Name</th>
            <th>Function</th>
            <th>Activity</th>
            <th>Phone</th>
            <th>Status</th>
            <th>Tool</th>
        </tr>
    </tfoot>
</table>

JavaScript

var dtTable = $("#example").DataTable({
    "ajax": {
        "url": "https://dl.dropboxusercontent.com/s/suiwqwn6p7cw3mr/test.json",
        "dataSrc": "data.items"
    },
    "columns": [
        { "data": "id", "orderable": false },
        { "data": "photo", "orderable": false },
        { "data": "nom", "orderable": true },
        { "data": "fonction", "orderable": false },
        { "data": "activite", "orderable": false },
        { "data": "telephone", "orderable": false },
        { "data": "statut", "orderable": false },
        { "data": "tool", "orderable": false }
    ],
});