JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="http://fooplugins.com/footable/css/footable.core.css?v=2-0-1">
<script src="http://fooplugins.com/footable/js/footable.js?v=2-0-1"></script>
<link rel="stylesheet" href="http://fooplugins.com/footable/demos/css/bootstrap.css">
<table class="table demo table-bordered" data-filter="#filter" data-page-size="5" data-page-previous-text="prev" data-page-next-text="next">
    <thead>
        <tr>
            <th class="column-1">First Name</th>
            <th class="column-2">Last Name</th>
            <th class="column-3">Job Title</th>
            <th class="column-4">DOB</th>
            <th class="column-5">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Isidra</td>
            <td><a href="#">Boudreaux</a>

            </td>
            <td>Traffic Court Referee</td>
            <td data-value="78025368997">22 Jun 1972</td>
            <td data-value="1"><span class="status-metro status-active" title="Active">Active</span>

            </td>
        </tr>
        <tr>
            <td>Shona</td>
            <td>Woldt</td>
            <td><a href="#">Airline Transport Pilot</a>

            </td>
            <td data-value="370961043292">3 Oct 1981</td>
            <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span>

            </td>
        </tr>
        <tr>
            <td>Granville</td>
            <td>Leonardo</td>
            <td>Business Services Sales Representative</td>
            <td data-value="-22133780420">19 Apr 1969</td>
            <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span>

            </td>
        </tr>
        <tr>
            <td>Easer</td>
            <td>Dragoo</td>
            <td>Drywall Stripper</td>
            <td data-value="250833505574">13 Dec 1977</td>
            <td data-value="1"><span class="status-metro status-active" title="Active">Active</span>

            </td>
      ...

CSS

body {
    padding: 2em;
}

JavaScript

$('table > thead th.column-4, table > thead th.column-5').attr('data-hide', 'phone,tablet');
$('table > thead th.column-1').attr('data-toggle', 'true');
$('table').footable({
    breakpoints: {
        phone: 768,
        tablet: 1024
    }
});