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".

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.

• Page du projet : https://www.web-eau.net/developpement/responsive-tables

• Documentation: https://www.web-eau.net/developpement/responsive-tables/documentation

• Sur le Joomla extensions directory : https://extensions.joomla.org/extension/responsive-tables/