• Développement web
    Imaginez votre futur web
    Imaginer et créer de nouveaux outils, de nouvelles applications dédiées à votre site Web, ce sont les compétences que web-eau.net peut apporter à votre projet. Discutons-en !

Responsive Tables Free Joomla! Plugin


Responsive Tables (english)

Concept description

Since 2012, "Responsive Design" is a massive trend in webdesign. Websites are mainly oriented to increase the user experience on any devices. In this logic, the lightweight "Responsive Tables" plugin is designed to make "Responsive Design" any HTML / CSS table, specially on mobiles. To create this plugin, I've worked on implementation that would meet four criteria:

  • Doesn't break responsive layouts of the template,
  • Doesn't unnecessarily hide table data,
  • Still allows you to compare rows with a key column.
  • No librairy Jquery to avoid conflicts,

Responsive Tables


Most of the time, as you looked at data table, you realized that the first column is the main key. This is the reference for the other columns. I wanted my extension "Responsive Tables" to have this first column always available.
So, on mobiles devices, the head of the table become this first column (the yellow one on the picture bellow), the table "flip" on the side.
You just have to touch the table with your finger and move "right" and "left" the columns, the first one is still fix and available (see below).

 

Demo video


Schema

Description Responsive Tables


The setup

1. Installation

  • Install the plugin like any other Joomla! extension through the Extension manager,
  • Go to the Plugin manager and just publish "Responsive Tables".

2. The syntax

  • Add the CSS classes "responsive rt" to the < table > tag like that : < table class="responsive rt" >
  • Create the < thead > for the first row (it will become the first column on mobile devices),
  • Use < tbody > for the content of your table,

Example

exemple code Responsive tables


The "Responsive Design" experience was successfully tested on iPhone, iPad, Androïd and BlackBerry.


Caution

Please, do not use Responsive Tables to display images or medias in your content. The plugin DO NOT resize pictures. If you want/need to display images, the best design practice is using the tag < div >, tables are displaying datas.


Support

If you have an issue, please use the forum support : http://www.web-eau.net/developpement/forum-support


Rating

Due to the quality of the concept and the quality of the support given, "Responsive Tables" have an excellent rating form users. If you appreciate my extension and/or my support, thanks in advance for posting a positive review on the Joomla! Extension Directory


Informations

Price : FREE

Author: web-eau.net
Version 2.1.0 - February 2014
Licence GNU/GPL http://www.gnu.org/licenses/gpl-2.0.html
Copyright © 2014 - 2016 web-eau.net
Compatibility:


Download

Download button

 

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.