TableV2

Esikatselu

Käyttötarkoitus

Taulukko on sopiva esitysmuoto silloin, kun tiedoilla on sama tai samankaltainen rakenne. Taulukot säästävät tilaa ja helpottavat tietojen silmäilyä ja vertailua. Pyri pitämään sarakeotsikoiden ja taulukon solujen sisältö tiiviinä. Liian pitkät sisällöt heikentävät taulukon luettavuutta ja vaikeuttavat vertailua.

Responsiivisuus

Suurten tietomäärien esittäminen pienellä näytöllä on haastavaa, eikä tämä komponentti välttämättä ratkaise tätä ongelmaa. Responsiivisten taulukoiden toteutukseen on useita eri vaihtoehtoja ja oikea toteutustapa riippuu sisällöstä ja sen käyttökontekstista.

Vinkkejä responsiivisten taulukoiden suunnitteluun:

• sisällön priorisointi
• taulukon sisältöjen pilkkominen useampaan taulukkoon
• avattavien taulukkorivien käyttäminen
• sivusuunnassa vieritettävä taulukko
• toiminnallisuus, jolla käyttäjä voi itse valita mitä sarakkeita taulukossa näytetään
• jokin kokonaan muu esitystapa kuin taulukko pienemmillä näytöillä

TableV2 tarjoaa tällä hetkellä valmiina avattavat rivit ja sivusuunnassa vieritettävän taulukon.

Saavutettavuus

Otsikoi taulukon solut ja merkitse otsikointi ruudunlukijoille joko HTML-taulukon scope-attribuutilla, tai vaihtoehtoisesti käyttämällä id- ja headers-attribuuttia.

Jos taulukoissa on tyhjiä soluja, ne jätetään lähtökohtaisesti tyhjiksi.

Jos kaikissa sarakkeissa pitäisi olla tieto (esim. Kyllä / Ei), on taulukon yläpuolella kerrottava, mitä tyhjä solu tarkoittaa. Esim. “Alla olevassa taulukossa tyhjä sarake tarkoittaa, että kyseinen tieto ei ole vielä saapunut Kelaan.”

Muista aina antaa pelkkiä kuvakkeita sisältäville soluille ja painikkeille saavutettavat tekstivastineet.

• rivin tilakuvake
• rivin valintaruutu/-painike
• rivin avauspainike
• muut painikkeet

Vältä monimutkaisten taulukkorakenteiden käyttöä, esim. sisäkkäiset taulukot tai erilaiset yhdistetyt solut. Näiden käyttö tekee taulukosta vaikeasti ymmärrettävän erityisesti ruudunlukijoiden käyttäjille.

Järjestettävää taulukkoa käytettäessä komponentille voi antaa sortLabel ja sortDescription-propit. sortLabel välittää ruudunlukijalle sarakkeen otsikon ja sortDescription kertoo järjestyksen suunnan.

Esimerkki proppien käytöstä ja tarkempi ohjeistus järjestettävästä talukosta löytyy Taulukon järjestäminen osiosta.

Taulukon rakenne

Taulukko koostuu seuraavista komponenteista:

• TableV2 - Taulukon pääelementti.
• TableV2Head - Taulukon otsikkoelementti.
• TableV2HeadRow - Taulukon otsikkorivi.
• TableV2HeadCell - Taulukon otsikkosolu.
• TableV2Body - Taulukon runko.
• TableV2Row - Taulukon rivi.
• TableV2Cell - Taulukon solu.
• TableV2Footer- Taulukon alatunniste.

Seuraavat komponentit ovat saatavilla erikseen, jos niitä on tarve räätälöidä:

• TableV2Container - Taulukon ympäröivä elementti, joka tarvittaessa luo vaakavierityspalkin.
• TableV2Caption - Taulukkoa kuvaava otsikko.
• TableV2SortButton - Sarakkeen järjestyspainike.

Taulukon ulkoasu

Tasaa taulukon solut sisältötyyppien mukaan oikealle tai vasemmalle.

Suositukset:

• teksti, päivämäärät ja kellonajat tasataan vasemmalle
• muut numeeriset arvot, kuten rahasummat tai muut vertailtavat lukuarvot tasataan oikealle
• tasaa sarakeotsikot aina sisältöä vastaavasti
• tasaa taulukon lukusuunnassa ensimmäinen sarake aina vasemmalle.

Esitä toistuvat yksiköt, kuten rahayksiköt, sarakeotsikoissa.

Taulukoissa käytetään oletuksena samaa tekstikokoa kuin leipätekstissä. Sarakeotsikot ovat lihavoituja ja ne erotetaan sisältösoluista selkeästi erottuvalla reunaviivalla. Taulukon sisältörivit erotetaan toisistaan vaakaviivoilla.

Rivien korostaminen

Taulukon rivin voi korostaa tehostevärillä ja kuvakkeella.

• Sininen rivi (info): lisätieto, joka asiakkaan on hyvä tietää tai joka tukee hänen toimintaansa.
• Vihreä rivi (success): onnistuneen toiminnon korostaminen.
• Keltainen rivi (warning): huomiota vaativa tilanne, esim. tiedon tarkistaminen.
• Punainen rivi (danger): välittömästi käyttäjän toimia vaativa tilanne, esim. virhe.

Taulukon muille riveille lisätään automaattisesti (hasVariants="auto") kuvaketta vastaava tyhjä solu niin, että taulukon rakenne pysyy ehjänä. Suorituskyvyn parantamiseksi voi asettaa hasVariants={true|false} sen mukaan sisältääkö taulukko tilatiedollisia rivejä, erityisesti jos taulukko sisältää paljon tietoa, joka päivittyy useasti.

Lisää otsikkoriville ja korostetulle riville ruudunlukijoiden tekstivastine variantLabel-propilla, joka toimii kuvakkeen lisätietotekstinä.

Yhteenvetorivi

Käytä korostettua yhteenvetoriviä esim. summien tai erotusten esitykseen.

Rivien avaaminen

Käytä avattavaa riviä, kun kaikki taulukkoon haluttu tieto ei mahdu esitettäväksi tai kun haluat priorisoida taulukossa olevaa tietoa. Vähemmän tärkeän tiedon tai riviin liittyviä toimintoja voi laittaa piiloon avattavan rivin sisälle.

Lisää avauspainikkeiden kuvakkeille saavutettava tekstivastine collapseLabel-propilla.

Tarvittaessa koko rivin voi määrittää klikattavaksi alueeksi. Samalle riville ei silloin kannata lisätä muita klikattavia toimintoja.

Rivien valinta

Useiden rivien valinta valintaruuduilla.

Yhden rivin valinta valintanapilla.

Rivien valinta ja avaaminen samassa taulukossa

Tarvittaessa toimintaa voi myös räätälöidä.

Taulukon järjestäminen

Taulukon sarakkeiden otsikoista voi tehdä painikkeet välittämällä TableV2HeadCell-komponentille onClick- ja order-propit. Voit käyttää KDS:n tarjoamaa useSort-hookia tekstiä ja numeroita sisältävien solujen järjestämiseen.

Järjestystoiminnon tulee noudattaa aina samaa järjestystä, kun painiketta painetaan: ei järjestystä → laskeva järjestys → nouseva järjestys → ei järjestystä…

Ruudunlukija lukee sarakeotsikon aria-sort-attribuutin, kun kohdistus siirtyy otsikkosoluun tai poistuu siitä. TableV2-komponentti toteuttaa aria-live-alueen, joka kertoo ruudunlukijoille järjestyksen automaattisesti, kun painiketta painetaan. Muista välittää komponentille aria-live-alueen tarvitsemat tekstit:

• sortLabel: järjestetyn sarakkeen otsikko, esim. “Lisätieto”
• sortDescription: järjestyksen suunnan kuvaus, esim. “järjestetty laskevasti”

Ruudunlukija lukee tekstit muodossa {sortLabel} {sortDescription}, esim. “Lisätieto järjestetty laskevasti”, kun taulukon järjestys muuttuu.

Tiivistetty taulukko

Näytettävän tiedon tiheydestä ja määrästä riippuen voi olla tarpeellista käyttää tiivistettyä taulukkoa. Tiivistetty taulukko on suunniteltu käytettäväksi asiantuntijakäyttöliittymissä.

Pitkien taulukoiden rivien lukemisen helpottamiseen voi käyttää apuna raidallista korostusta. Raidallista taulukkoa käytettäessä on hyvä huomioida, että raidoituksen käyttäminen muun visuaalisen korostuksen kanssa voi tehdä taulukosta hankalasti tulkittavan.

Toimintojen yhdistäminen tiivistettyyn taulukkoon.

Taulukon koon muuttaminen CSS-muuttujilla

Tarvittaessa taulukon kokoa voi mukauttaa seuraavilla CSS-muuttujilla.

.app-custom-table-v2--xs {
  --kds-table-v2-caption-font-size: #{$font-size-sm};
  --kds-table-v2-cell-p-x: #{$spacing-1};
  --kds-table-v2-cell-p-y: #{$spacing-1};
  --kds-table-v2-cell-btn-p-x: #{$spacing-1};
  --kds-table-v2-cell-btn-p-y: #{$spacing-1};
  --kds-table-v2-collapse-area-m-b: #{$spacing-1};
  --kds-table-v2-collapse-area-p-x: #{$spacing-1};
  --kds-table-v2-collapse-area-p-y: #{$spacing-1};
  --kds-table-v2-collapse-p-x: #{$spacing-1};
  --kds-table-v2-font-size: #{$font-size-sm};
  --kds-table-v2-icon-cell-p-x-multiplier: 1;
  --kds-table-v2-icon-cell-p-y-multiplier: 1;
  --kds-table-v2-icon-cell-p-y: #{$spacing-1};
  --kds-table-v2-icon-size: #{$icon-size-xs};
  --kds-table-v2-line-height: #{$line-height-sm};
  --kds-table-v2-m-b: #{$spacing-4};
  --kds-checkbox-size: #{$spacing-4};
  --kds-radio-size: #{$spacing-4};
}

Sisällön päällä kelluva otsikkorivi

Pitkät taulukot voivat olla hankalasti luettavia etenkin pienillä näytöillä. Jos taulukon sisältö ei kokonaisuudessaan mahdu näytölle, voidaan harkita kelluvan otsikkorivin käyttämistä. Vierittäessä taulukon otsikkorivi kelluu sisällön päällä, joka helpottaa taulukon lukemista.

Alla on karkea esimerkkitoteutus. Jos taulukko mahtuu mobiiliruudulle, voi isScrollable-propin asettaa arvoon false ja toteuttaa kelluvan otsikkorivin pelkästään CSS:n avulla position: sticky; määrityksellä.

Lomakekentät taulukossa

Normaaliin taulukkoon sijoitettavien lomakekomponenttien size-propin arvoksi asetetaan sm.

Tiivistetyn taulukon lomakekenttien size-propin arvoksi asetetaan xs.

Esimerkki taulukkokomponentin soveltamisesta. Taulukkoa on pienennetty, koska taulukossa on paljon tietoa ja se on kapeassa palstassa.