MediaTable jQuery Plugin

Oggi mi sono imbattuto in un ottimo articolo di FilamentGroup riguardante l’usabilità di una tabella dati su schermi di piccole dimensioni. (link articolo)

La soluzione proposta consiste nel definire due o più gruppi di colonne assegnando varie classi (Es: essential, optional, etc..) quindi utilizzare delle media-query CSS per visualizzare e nascondere gruppi di colonne in base alle dimensioni del display.

Si tratta dunque di un esempio di design responsivo.

Trovando la soluzione molto interessante ho costruito un plugin jQuery che rende estremamente semplice realizzare sulle proprie pagine web quanto spiegato nell’articolo.

>>> Vai alla demo! <<<

MediaTable in Azione:

In questo primo screenshoot vediamo una tabella di cui sono visualizzate solamente le colonne veramente importanti. Siamo su di uno schermo di piccole dimensioni!

Cliccando sul menu “columns” (il cui nome è configurabile) si apre un menu contenente l’elenco completo delle colonne disponibili nella tabella. Possiamo variare a piacere il numero di colonne visualizzate mettendo in relazione informazioni differenti.

Questo menu è generato automaticamente! Il sorgente di questo esempio, come spiegato successivamente, è una semplice tabella dati HTML!

>>> Vai alla demo! <<<

Come si usa MediaTable?

MediaTable richiede la definizione di una tabella HTML definita correttamente ovvero con THEAD e TBODY. Le colonne di intestazione vanno raggruppate per classe in base alla priorità di visualizzazione.

Via CSS si imposteranno dei breakpoint su cui definire quali gruppi di colonne visualizzare.
Il plugin costruisce inoltre un menu delle colonne disponibili per consentire una selezione manuale esplicita delle colonne da visualizzare.

Il nostro esempio utilizza 3 gruppi di colonne:

  • essential – visibili su qualunque schermo
  • optional – visibili dai 768px (iPad portrait)
  • n/a – visibili dai 1024px (iPad landscape)

Un’ulteriore classe “persist” è utilizzata per identificare colonne che non sono gestite dal menu. Impostando una colonna con le classi essential e persist essa non potrà mai essere nascosta!

<table class="mediaTable">
<thead>
<tr>
<th class="essential persist">Employee</th>
<th class="essential">xHTML</th>
<th class="optional">HTML5</th>
<th class="essential">CSS</th>
<th class="essential">JS</th>
<th class="optional">jQuery</th>
<th class="optional">jQueryUI</th>
<th>jQuery Mobile</th>
<th>Sencha Touch</th>
<th class="essential">PHP</th>
<th>PHP (OO)</th>
<th class="optional">CakePHP</th>
</tr>
</thead>
<tbody>
<tr>
<td>Marco Pegoraro</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
<td class="yes">y</td>
</tr>
<tr>
....
</tr>
</tbody>
</table>

Il codice javascript per l’inizializzazione del plugin è estremamente semplice:

$('.mediaTable').mediaTable();

Tutte le tabelle aventi classe “mediaTable” verranno attivate per consentire la selezione dei campi ed il comportamento responsivo rispetto alle dimensioni dello schermo.

>>> Vai alla demo! <<<

Compatibilità:

Ho testato il plugin sui seguenti sistemi:

  • Mac OsX, Firefox 9.0.1
  • Mac OsX, Firefox 4.0
  • Mac OsX, Chrome 16
  • Mac OsX, Safari 5.1.2
  • Windows7, IE9
  • Windows7, IE8, IE7, IE6 (with respond.js for media-query)
  • Windows7, Firefox 7.0.9

Fork on GitHub:

Il plugin è di libera distribuzione!

Link al progetto pubblico su GitHub!

Scritto da MPeg

Progetto e sviluppo applicazioni web basate su CakePHP e jQuery.
Fornisco consulenza e formazione su PHP, Javascript, HTML5, CSS, CakePHP, jQuery, jQueryUI, BackboneJS, LESS.
Inoltre scrivo articoli e seminari riguardanti l’usabilità delle interfacce web, ottimizzazione del codice e delle prestazioni di pagine ed applicazinoni web.

Oltre al web le mie grandi passioni sono l’escursionismo in montagna, la mountain bike, la V-Strom ed in generale quasi qualunque sport che non faccia successo in TV!

Posted in jQuery, Usabilità, Web Design and tagged , , , , , , . Bookmark the permalink. RSS feed for this post. Leave a trackback.
  • Chris

    Great Plugin. Thanks. How can you change the code to be able to work with an id #mediaTable to table instead of the class .mediaTable? Using another class on my table collides with my existing table class. 

    Thanks.

    Chris

  • mpeg

    Hi Chris, I thank you for the appreciation.

    “mediaTable” class name is not mandatory to apply the plugin.You can use any identifier:——$(‘#my-table’).mediaTable();$(‘body table:first’).mediaTable();——CSS class name is used to apply styles, not to apply behaviors.

    By now class-name is hard coded into plugin because lot of CSS styles depends on this name.

    Try to find/replace with case sensitive option:
    —–
    MediaTable -> {prefix}-MediaTable
    mediaTable -> {prefix}-mediaTable
    —–

    You can apply this change to booth the .js and the .css files.

  • http://www.matt-ball.co.uk Matt Ball

    Very nice plugin.. how can I change the js file to close the tableMenu when the mouse is clicked elsewhere rather than when the mouse is moved elsewhere? Thanks

  • Pingback: Responsive Columns CSS Styles | spworldblog

  • ryan

    how can I make this so you dont have to click media tables. I would like the colums selection to always be visible and adctive

Swedish Greys - a WordPress theme from Nordic Themepark.