FooTable, adaptez vos tableaux pour le responsive design avec jQuery

18 novembre 2013
5 987 vues

FooTable est un plugin jQuery qui permet d’adapter un tableau HTML pour le responsive webdesign en masquant certaines colonnes sur l’affichage smartphone afin de montrer leur contenu seulement au clic de la ligne concernée. Pratique pour les tableaux qui ont beaucoup de données à afficher.

Un tableau pensé pour le tactile

Si le responsive design est une technique désormais bien maitrisée par les développeurs, le tableau HTML (table) reste un élément difficile à adapter, surtout quand il possède un grand nombre de colonnes. FooTable propose une solution simple et efficace : masquer certaines colonnes à différentes tailles d’écran à l’aide des attributs HTML5 data-* et rendre chaque ligne du tableau « cliquable / touchable » (via une icône) pour afficher les informations supplémentaires.

footable

Le plugin est assez flexible puisque vous pouvez choisir les colonnes à cacher en fonction de la taille d’écran. Pour cela, deux breakpoints sont définis par défaut pour cibler les terminaux mobiles (480px pour smartphone et 1024px pour tablette) que vous pouvez modifier. Ces points d’arrêt sont indépendants des media queries CSS : vous pouvez donc utiliser le plugin sans problème avec des frameworks responsive comme Bootstrap ou Foundation.

Installation du tableau responsive

On commence par inclure jQuery et le plugin FooTable.

<link href="footable.core.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="footable.js" type="text/javascript"></script>

Ensuite on définit un tableau HTML simple. Ne pas oublier de définir une classe CSS sur votre tableau ainsi que des attributs data-hide sur chaque colonne de l’entête du tableau (thead). Dans notre exemple, on décide de cacher sur smartphonne et tablette les deux dernières colonnes concernant le numéro de téléphone et l’email :

<table class="footable">
  <thead>
    <tr>
      <th>Name</th>
      <th data-hide="phone,tablet">Phone</th>
      <th data-hide="phone,tablet">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob Builder</td>
      <td>555-12345</td>
      <td>bob@home.com</td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>bjones@mysite.com</td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>cruise1@crazy.com</td>
    </tr>
  </tbody>
</table>

Et on termine par l’appel du plugin comme ceci :

$(function () {
    $('.footable').footable();
});

Il ne reste plus qu’à redimensionner votre fenêtre pour voir le résultat. FooTable apporte d’autres fonctionnalités comme la possibilité de trier / filtrer les données du tableau. Il est également possible de mettre en place un système de pagination. Vous pouvez aussi configurer le plugin pour que chaque ligne soit déjà pré-ouverte sur l’affichage smartphone, et l’icône d’ouverture est bien sûr personnalisable. L’idée est plutôt originale, qu’en pensez-vous ?

Requis : jQuery
Compatibilité : Non communiqué
Démonstration : http://fooplugins.com/plugins/footable-jquery/
GitHub : https://github.com/bradvin/FooTable
Licence : MIT

Commentaires

  • Angy

    Bonjour !
    J’ai installé le plugin dans wordpress !
    j’ai bien suivi les instructions mais … Rien ne se passe !
    Merci d’avance !

    • http://www.megaptery.com/ Pierre

      Ton conteneur est bien responsive ? Tu as bien défini les attributs data-hide ?