Taulukot
Taulukon perusrakenne
<table>
<thead>
<tr><th>Ranking</th><th>Title</th></tr>
</thead>
<tbody>
<tr><td>1.</td><td>The Shawshank Redemption</td></tr>
<tr><td>2.</td><td>The Godfather</td></tr>
<tr><td>3.</td><td>The Godfather: Part II</td></tr>
<tr><td>4.</td><td>Pulp Fiction</td></tr>
<tr><td>5.</td><td>Il buono, il brutto, il cattivo</td></tr>
</tbody>
</table>
Taulukon toiminnot
Taulukon toiminnot sijoitetaan divin sisään, millä on luokka table-tools. Toiminnot voidaan periaatteessa sijoittaa miten tahansa tavalla käyttämällä BS:n grid-tyylejä, mutta ensisijainen tapa on jakaa taulukon leveys kolmeen osaan (kolme diviä, joilla luokka col-md-4) ja sijoittaa niiden sisään elementit seuraavasti:
- ensimmäiseen osaan
- näytettävät rivit
- rivien määrä yhteensä
- rivien määrä per sivu -asettaminen
- toiseen
- sivutus (keskitetty)
- kolmanteen
- mahdolliset toimintonapit
- sarakkeiden näkyvyyden asettaminen
- mahdolliset filtteröinnit kannattaa sijoittaa omalle rivillleen, jotta valittujen filtterien määrä ei hajota layoutia
- suositus: laitetaan toimintojen yläpuolelle
<div class="table-tools">
<!-- filtterit (jos käytössä) omaksi rivikseen -->
<div class="row">
<div class="filters col-md-12">...</div>
</div>
<!-- taulukon muut toiminnot -->
<div class="row">
<!-- first column -->
<div class="col-md-4">
<div class="count">...</div>
<div class="results">...</div>
</div>
<!-- second column -->
<div class="pages col-md-4">...</div>
<!-- third column -->
<div class="col-md-4">
<div class="table-actions">...</div>
<div class="columns">...</div>
</div>
</div>
</div>
Filtteröinti
<div class="filters">
<span class="filters-title">Active filters:</span>
<span class="label label-default">Selected filter</span>
<div class="btn-group btn-group-xs">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
</button>
<ul role="menu" class="dropdown-menu right-side">
<li><a>Filter 2</a></li>
...
</ul>
</div>
</div>
Filtteröinnin voi lisätä toimintopalkkiin esimerkiksi omaksi rivikseen toimintojen yläpuolelle.
Rivien määrä
<div class="count"> <span class="count-from">1</span> <span class="count-hyphen">-</span> <span class="count-to">50</span> <span class="count-divider">/</span> <span class="count-outof">1543</span> </div>
Näytettävien rivien määrä -valinta
<div class="results">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="current">50</span><span class="caret"></span>
</button>
<ul class="dropdown-menu right-side" role="menu">
<li>10</li>
...
</ul>
</div>
<span>results per page</span>
</div>
Sivutus
Sivutuksessa käytetään samaa syntaksia kuin Bootsrapin sivutuksessa. Eduplan GUI yliajaa joitain BS-tyylejä, jotta tuloksena on hieman tiiviimpi näkymä
<div class="pages">
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
Toimintopainikkeet
<div class="table-actions">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default"><i class="fa fa-file-excel-o"></i> Excel</button>
<button type="button" class="btn btn-default"><i class="fa fa-file-text-o"></i> CSV</button>
</div>
</div>
Sarakkeiden näkyvyys -valinta
Jos piilotukseen/näyttämiseen riittää js/css-piilotus sarakkeen indexin perusteella (isoissa taulukoissa voi koitua ongelmaksi) voidaan käyttää initTableColumns(elem, table) -funktiota. Funktiolle annetaan parametreina elementti, jolla on lista sarakkeista, sekä taulukko, jonka sarakkeita halutaan käsitellä. Sarakkeiden nimet voivat olla listassa esim. aakkosjärjestyksessä, kunhan data-attrbuutissa kerrotaan minkä indeksin saraketta käsitellään.
<script>
$(document).ready(function(){
initTableColumns("#test", "#demoTable");
});
</script>
...
<div class="columns">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Columns <span class="caret"></span>
</button>
<ul id="test" class="dropdown-menu right-side " role="menu">
<li><label><input data-index="0" checked="" type="checkbox"> Column 1</label></li>
<li><label><input data-index="1" checked="" type="checkbox"> Column 2</label></li>
</ul>
</div>
</div>
...
<table id="demoTable">...</table>
Järjestäminen
Mikäli taulukossa on käytössä järjestämismahdollisuus, indikoidaan järjestämistä antamalla otsikkosarakkeelle (th) tarvittavat luokat:
- järjestelemätön sarake: sort (käytännössä kaikkiin)
- nouseva järjestys: asc
- laskeva järjestys: desc
Järjestyksestä kertovat ikonit ovat oletuksena sarakkeen nimen jälkeen (suositus). Halutessaan ne saa asetettua myös nimeä ennen, kun lisää taulukolle luokan sort-before.
<table>
<thead>
<tr>
<th class="sort">Ranking </th>
<th class="sort asc">Title</th>
</tr>
</thead>
<tbody>
<tr><td>1.</td><td>The Shawshank Redemption</td></tr>
<tr><td>2.</td><td>The Godfather</td></tr>
<tr><td>3.</td><td>The Godfather: Part II</td></tr>
<tr><td>4.</td><td>Pulp Fiction</td></tr>
<tr><td>5.</td><td>Il buono, il brutto, il cattivo</td></tr>
</tbody>
</table>
Rivikohtaiset toiminnot
Riippuen taulukon rivien toimintojen määrästä, voidaan käyttää joko yksittäistä toimintopainiketta tai pudotusvalikkoa useammalle toiminnolle. Useimmiten toimintoja on enemmän kuin yksi, joten pudotusvalikko on yleisin tapa näyttää rivikohtaisia toimintoja.
Toiminnot tulevat aina rivin viimeisimpään soluun ja toimintosolulle annetaan luokka row-actions.
<td class="row-actions"> // Toiminnot </td>
Näistä projektiryhmän mielipiteet, mitä käytetään. Esim. onko pelkkä caret liian huomaamaton? Halutaanko ikoneita? Miten mobiilissa?
Yksittäinen toimintonappi
<td class="row-actions"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">Action</button> </td>
Painike (caret) + valikko
<td class="row-actions">
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
</td>
Painike (teksti + caret) + valikko
<td class="row-actions">
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
Toiminnot <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
</td>
Painike (ikoni + teksti + caret) + valikko
<td class="row-actions">
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-cog"></i> Toiminnot <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
</td>