Responsive Tables, plugin pour Joomla

Pour réaliser une partie précise d'un projet web, j'avais besoin d'afficher des données grâce à un tableau HTML. Le souci est que ces tableaux ne font pas bon ménage avec les design adaptatifs. Or, il fallait absolument préserver la responsivité du site. J'ai alors cherché quelles étaient les différentes solutions. Certaines offraient des idées intéressantes mais aucune d’entre elles conciliaient tous les pré-requis dont j'avais besoin pour ce projet :

  • respecter le "Responsive Design" du site,
  • ne masquer aucune donnée sur les smartphones,
  • le plus "light" possible du point de vue du code.

Ne trouvant rien qui corresponde précisément à ce dont j'avais besoin pour le site de mon client, j'ai décidé de développer ce plugin à base de CSS. Pour des raisons de poids et pour éviter tout conflit, j'ai décidé de ne pas recourir à l'usage de la bibliothèque jQuery.

Le plugin "modifie" les tableaux afin de les rendre compatibles avec les mobiles et tablettes pour qu'ils répondent à ces critères en terme d'affichage. Le plugin fonctionne en transformant la première ligne (sur écrans) en la première colonne (sur tablettes et smartphones) à la gauche du tableau, ce qui permet de faire coulisser les autres colonnes de gauche à droite. Ainsi, cela respecte votre mise en page "Responsive".

Schéma Responsive Tables

Le plugin n'a aucun paramètre à configurer, tout est entièrement automatisé après son installation.
Afin de rendre vos tableaux "Responsive Design", il vous suffit alors de leur appliquer la classe CSS responsive rt comme ceci :

<table class="responsive rt">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">First</th>
			<th scope="col">Last</th>
			<th scope="col">Email</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@osm</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@joomla</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@nba</td>
		</tr>
	</tbody>
</table>

Exemple de code d'un tableau HTML responsif

Ce plugin est compatible avec les versions de Joomla depuis la version 2.5.x et il diffusé gratuitement sous license GNU GPLv2.

Pour réaliser une partie précise d'un projet web, j'avais besoin d'afficher des données grâce à un tableau HTML. Le souci est que ces tableaux ne font pas bon ménage avec les design adaptatifs. Or, il fallait absolument préserver la responsivité du site. J'ai alors cherché quelles étaient les différentes solutions. Certaines offraient des idées intéressantes mais aucune d’entre elles conciliaient tous les pré-requis dont j'avais besoin pour ce projet :

  • respecter le "Responsive Design" du site,
  • ne masquer aucune donnée sur les smartphones,
  • le plus "light" possible du point de vue du code.

Ne trouvant rien qui corresponde précisément à ce dont j'avais besoin pour le site de mon client, j'ai décidé de développer ce plugin à base de CSS. Pour des raisons de poids et pour éviter tout conflit, j'ai décidé de ne pas recourir à l'usage de la bibliothèque jQuery.

Le plugin "modifie" les tableaux afin de les rendre compatibles avec les mobiles et tablettes pour qu'ils répondent à ces critères en terme d'affichage. Le plugin fonctionne en transformant la première ligne (sur écrans) en la première colonne (sur tablettes et smartphones) à la gauche du tableau, ce qui permet de faire coulisser les autres colonnes de gauche à droite. Ainsi, cela respecte votre mise en page "Responsive".

Schéma Responsive Tables

Le plugin n'a aucun paramètre à configurer, tout est entièrement automatisé après son installation.
Afin de rendre vos tableaux "Responsive Design", il vous suffit alors de leur appliquer la classe CSS responsive rt comme ceci :

<table class="responsive rt">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">First</th>
			<th scope="col">Last</th>
			<th scope="col">Email</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@osm</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@joomla</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@nba</td>
		</tr>
	</tbody>
</table>

Exemple de code d'un tableau HTML responsif

Ce plugin est compatible avec les versions de Joomla depuis la version 2.5.x et il diffusé gratuitement sous license GNU GPLv2.

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net