JSFiddle - React, Tailwind, and code Playground

by Brewal Renault

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<table class="liste_elem table footable">
    <!-- Boucle des familles d'activites -->
    <thead>
        <tr>
            <th class="p_famille_activite">	<a name="fa29"></a>
Piscine</th>
            <th data-hide="phone">
                <!-- FR -->Ages</th>
            <th>
                <!-- FR -->Tarifs</th>
            <th>
                <!-- FR -->Durées</th>
            <th data-hide="phone,tablet">samedi
                <br/>19/04</th>
            <th data-hide="phone,tablet">dimanche
                <br/>20/04</th>
            <th data-hide="phone,tablet">lundi
                <br/>21/04</th>
            <th data-hide="phone,tablet">mardi
                <br/>22/04</th>
            <th data-hide="phone,tablet">mercredi
                <br/>23/04</th>
            <th data-hide="phone,tablet">jeudi
                <br/>24/04</th>
            <th data-hide="phone,tablet">vendredi
                <br/>25/04</th>
        </tr>
    </thead>
    <tbody>
        <!-- Boucle des sous-familles d'activites -->
        <tr>
            <td><a name="sfa88"></a>
Entree piscine
                <br/>	<i>(Réservation uniquement pour les non-résidents
Reservation only for non-residents.
Reserveren alleen voor klanten van buiten de camping.)</i>

            </td>
            <td align="center">-/-</td>
            <td align="center">5€</td>
            <td align="right">01:00</td>
            <!-- Boucle des jours -->
            <td class="p_liste_sessions ">
                <!-- Boucle des sessions -->
                <div class="p_session">
                    <table class="p_session">
                        <tbody>
                            <tr>
                                <td class="heure_debut"> <span class="">
                                            <a href="../reservation_prendre/?function=reserver_session&amp;id_session=16496">
                          ...

CSS

@font-face {
    font-family:'footable';
    src: url('fonts/footable.eot');
    src: url('fonts/footable.eot?#iefix') format('embedded-opentype'), url('fonts/footable.woff') format('woff'), url('fonts/footable.ttf') format('truetype'), url('fonts/footable.svg#footable') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family:'footable';
        src: url('fonts/footable.svg#footable') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}
.footable {
    width: 100%;
    /** SORTING **/
    /** PAGINATION **/
}
.footable.breakpoint > tbody > tr.footable-detail-show > td {
    border-bottom: none;
}
.footable.breakpoint > tbody > tr.footable-detail-show > td > span.footable-toggle:before {
    content:"\e001";
}
.footable.breakpoint > tbody > tr:hover:not(.footable-row-detail) {
    cursor: pointer;
}
.footable.breakpoint > tbody > tr > td.footable-cell-detail {
    background: #eee;
    border-top: none;
}
.footable.breakpoint > tbody > tr > td > span.footable-toggle {
    display: inline-block;
    font-family:'footable';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    padding-right: 5px;
    font-size: 14px;
    color: #888888;
}
.footable.breakpoint > tbody > tr > td > span.footable-toggle:before {
    content:"\e000";
}
.footable.breakpoint.toggle-circle > tbody > tr.footable-detail-show > td > span.footable-toggle:before {
    content:"\e005";
}
.footable.breakpoint.toggle-circle > tbody > tr > td > span.footable-toggle:before {
    content:"\e004";
}
.footable.breakpoint.toggle-circle-filled > tbody > tr.footable-detail-show > td > span.footable-toggle:before {
    content:"\e003";
}
.footable.breakpoint.toggle-circle-filled > tbody > tr > td > span.footable-toggle:before {
   ...

JavaScript

/*!
 * FooTable - Awesome Responsive Tables
 * Version : 2.0.1.4
 * http://fooplugins.com/plugins/footable-jquery/
 *
 * Requires jQuery - http://jquery.com/
 *
 * Copyright 2014 Steven Usher & Brad Vincent
 * Released under the MIT license
 * You are free to use FooTable in commercial projects as long as this copyright header is left intact.
 *
 * Date: 16 Feb 2014
 */ (function ($, w, undefined) {
    w.footable = {
        options: {
            delay: 100, // The number of millseconds to wait before triggering the react event
            breakpoints: { // The different screen resolution breakpoints
                phone: 480,
                tablet: 1024
            },
            parsers: { // The default parser to parse the value out of a cell (values are used in building up row detail)
                alpha: function (cell) {
                    return $(cell).data('value') || $.trim($(cell).text());
                },
                numeric: function (cell) {
                    var val = $(cell).data('value') || $(cell).text().replace(/[^0-9.\-]/g, '');
                    val = parseFloat(val);
                    if (isNaN(val)) val = 0;
                    return val;
                }
            },
            addRowToggle: true,
            calculateWidthOverride: null,
            toggleSelector: ' > tbody > tr:not(.footable-row-detail)', //the selector to show/hide the detail row
            columnDataSelector: '> thead > tr:last-child > th, > thead > tr:last-child > td', //the selector used to find the column data in the thead
            detailSeparator: ':', //the separator character used when building up the detail row
            toggleHTMLElement: '<span />', // override this if you want to insert a click target rather than use a background image.
            createGroupedDetail: function (data) {
                var groups = {
                    '_none': {
                        'name': null,
                        'data': []
         ...