Table (Taulukko)
Taulukkoa käytetään datan esittämiseen silloin kun se on luonteeltaan sarakemaista ja yksinkertaisen listan käyttäminen ei ole mielekästä.
| Etunimi | Sukunimi | Työtunnit | Titteli | Maa |
|---|---|---|---|---|
| John | Doe | 125 | Kehittäjä | Iso-Britannia |
| Jane | Doe | 150 | Arkkitehti | Norja |
| Bruce | Willis | 10 | Projektipäällikkö | Yhdysvallat |
| Harriet | Ackermann | 45 | Tietoturva-asiantuntija | Saksa |
| Alexander | Stubb | 2543 | Presidentti | Suomi |
Saavutettavuus ja käytettävyys
- Taulukon tulee sisältää otsikko (caption), joka kertoo taulukon sisällöstä. Otsikko voi myös olla taulukon ulkopuolinen erillinen elementti, jolloin se tulee yhdistää taulukoon aria-labelledby -attribuutilla.
- Kapeammille ruuduille siirryttäessä taulukko muuttuu sivuttaissuunnassa vieritettäväksi. Vieritysmahdollisuuden havaitsemisen helpottamiseksi taulukon reunoilla on visuaalinen varjoefekti.
- Taulukkokomponentin monimutkaisempi käyttö on esitetty erikseen omassa suunnittelumallissaan. Katso Taulukko suodattimilla
Mistä komponentti koostuu
Suomi.fi Design Systemin taulukkokomponentti mukailee HTML:n natiivia taulukkoelementtiä. Taulukko koostuu sarakkeet määrittävästä otsikkorivistä ja varsinaisista datariveistä. Otsikkorivi on visuaalisesti erottuva. Datarivit sisältävät taulukon datan.
Taulukon data on mahdollista järjestää eri sarakkeiden mukaan nousevaan ja laskevaan järjestykseen. Kun sarake on merkitty järjestyskelpoiseksi (sortable) sen nimen vieressä on järjestämistä kuvaava ikoni.
Taulukon rivejä on mahdollista merkitä valituksi käyttäen enableRowSelection-attribuuttia. Tällöin rivin vasemmassa laidassa on valintaruutu, jota klikkaamalla rivi valitaan. Valitun rivin tausta on korostettu.
Koko ja käyttö
Taulukko on hyvä valinta silloin, kun datan esittäminen sarakemaisessa muodossa on mielekästä ja datan määrä on riittävän suuri. Taulukon käyttöä suunnitellessa on hyvä miettiä, olisiko yksinkertainen lista parempi vaihtoehto.
Taulukkokomponenttia käytetään usein monimutkaisemmassa kontekstissa, jossa dataa on tarpeen järjestellä, suodattaa ja sivuttaa. Taulukon käyttö tällaisessa tilanteessa on esitetty erikseen omassa suunnittelumallissaan.