Oggi vi voglio presentare un plugin che ho realizzato per un progetto interno e che potrà forse rivelarsi utile anche per qualcun’altro.
Il problema
Vi sarà forse capitato qualche volta di voler aggiungere una barra di scorrimento verticale a una tabella, mantenendo però sempre visibili le intestazioni, così da non perdere di vista il nome delle varie colonne.
La soluzione più logica sarebbe quella di aggiungere overflow:auto al tbody della tabella ma in HTML questa funzionalità non è possibile. Tuttavia in firefox (e solo in firefox) la cosa ha sempre funzionato e per le nostre esigenze interne questo in passato è sempre stato sufficiente. Ora però vorremmo ottenere lo stesso risultato anche in altri browser e in ogni caso sembra che nell’ultima beta della prossima versione di firefox (la 4b1) la scrollbar non funzioni più.
Le alternative più semplici prevedono l’uso di tabelle separate per intestazioni e contenuti, con larghezza delle colonne fisse, oppure ottenere un layout simil-tabellare con un DIV per ogni colonna, con altezza delle righe fisse, ma è un compromesso che non può essere utilizzato se non si conoscono a priori le dimensioni dei dati di ogni cella.
La soluzione con MooTools
Ho deciso a questo punto di realizzare un plugin con MooTools che prendendo in input una tabella semplice estragga da questa i suoi thead e tfoot e li posizioni in 2 nuove tabelle intorno all’originale, crei un div con scrollbar intorno alla tabella originale che conterrà a questo punto solo il tbody, e allinei le larghezze delle colonne tra le 3 tabelle.
[html]
<!– Tabella sorgente –>
<table id=”mytable” class=”mytable”>
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tfoot>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</tfoot>
<tbody>
<tr><td>1111</td><td>22</td><td>3333333333</td></tr>
</tbody>
</table>
<!– Risultato dopo l’esecuzione del plugin su #mytable –>
<table class=”mytable”>
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
</table>
<div class=”scrollable-container” style=”overflow: auto”>
<table id=”mytable” class=”mytable”>
<tbody>
<tr><td>1111</td><td>22</td><td>3333333333</td></tr>
</tbody>
</table>
</div>
<table class=”mytable”>
<tfoot>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</tfoot>
</table>
[/html]
Come potete vedere le classi che erano assegnate alla tabella originale sono state preservate anche nelle nuove tabelle create dal plugin, cosicché lo stile della tabella non si perda nel processo. L’unica tabella a mantenere l’ID ovviamente è solo l’originale.
L’unica cosa di cui dovremo preoccuparci è quella di assegnare un’altezza massima a scrollable container tramite CSS, altrimenti la tabella continuerà a prendere tutto lo spazio che gli serve.
[css]
.scrollable-container {
height: auto !important;
max-height: 300px;
height: 300px;
}
[/css]
ScrollableTable
Il plugin si chiama ScrollableTable e tutto quello che serve fare per utilizzarlo è istanziare la classe passandogli la tabella come primo parametro. Opzionalmente si può specificare un nome diverso le la classe del DIV container.
[javascript]
var st = new ScrollableTable(‘mytable’, {
wrapperClass: ‘tableBody’
});
[/javascript]
E’ inoltre importante sapere che se la tabella è dinamica e il suo contenuto cambia, le larghezze delle colonne potrebbero non rimanere allineate, quindi ogni volta che ci sarà una modifica al layout o al contenuto della tabella dobbiamo manualmente eseguire un update della tabella:
[javascript]
st.update();
[/javascript]
Ecco un esempio funzionante:
[iframe src=”//jsfiddle.net/gnTZ4/17/embedded/”]
Download
Ho pubblicato il plugin su MooTools Forge al seguente indirizzo: http://mootools.net/forge/p/scrollabletable
Il codice sorgente è disponibile anche su GitHub.
Sono bene accetti consigli su come migliorare il plugin.
