• 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 - Editor

Responsive Tables - Editor (english)

Concept description

When I first released the Joomla plugin "Responsive Tables" in 2013, the "Responsive Design" website's market was emerging. A few months later, according to the requests of my clients, I decided to increase the power of my plugin simplying it for you. In this logic, I've been worked on implementation that meet 2 criteria:

  • Provide 2 ways to display your table responsively,
  • Anyone should be able to use it without knowing HTML code.

First method : Flip side

The first method to display the table responsively is well knowed now. On mobiles devices (under 768px), the < thead >, of the table become his first column (the yellow one on the picture bellow). The table toggle 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).

Description Responsive Tables

Video

 

Second method : Horizontal scroll

The second method to display the table responsively is a little bit different. On mobiles devices, the table scrolls horizontaly (if the table is larger than the screen).
You just have to touch the table with your finger and move "right" and "left" the columns. In this case, the table doesn't "flip" and the first column can disapear. This is different approach of the "Responsive Design" to increase the user experience.

Description Responsive Tables

Setup

Installation

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

Description Responsive Tables

Let's create our first responsive table now

  • Create a new article in Joomla!,
  • Click on the button "Table Editor" below the text-area,

    Description Responsive Tables

  • In the popup, indicate how many rows and columns you need to create for your table,

    Description Responsive Tables

  • Choose the way your table must be display responsively :
    • flip side (first method)
    • Horizontal scroll (second method)
  • Click on the button "Table Editor" to generate your "Responsive Table" in the text area

    Description Responsive Tables

  • Fill your new table with your datas, the job is done !

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

Caution

If you want/need to display images, the best design practice is using the div. Remember, tables are displaying datas. So, please don't use "Responsive Tables - Editor" to display images in your HTML tables. The plugin DO NOT resize pictures.

 

Support

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

Rating

Due to the quality of the concept and the quality of the support given, "Responsive Tables - Editor" will have an excellent rating from 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 1.0.0 - February 2015
Licence GNU/GPL http://www.gnu.org/licenses/gpl-2.0.html
Copyright © 2015 web-eau.net
Compatibility:

Download

 

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.