Luonnos

TableV2

Komponentti taulukkomuotoisen tiedon esitykseen.

Julkaistu versiossa 15.2.0

HTML

Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta Käyttö ilman Reactia.

Esikatselu

Esimerkit

Yhteenvetorivi

Rivien väritys

Tiivistetty ja raidoitettu taulukko

Taulukon järjestäminen

CSS-luokat

CSS-luokka	Arvot	Kuvaus
`kds-table-v2-container`		Taulukon ympäröivän elementin perusluokka.
`kds-table-v2-container--scrollable`		Tekee taulukosta vieritettävän vaakasuunnassa.
`kds-table-v2`		Taulukon perusluokka
`kds-table-v2--xs`		Taulukon tiiviimpi asettelu
`kds-table-v2--striped`		Taulukon rivien raidoitus
`kds-table-v2__caption`		Taulukon otsikko
`kds-table-v2__head`		Taulukon ylätunniste
`kds-table-v2__head-row`		Taulukon otsikkorivi
`kds-table-v2__head-row--border`		Taulukon otsikkorivin reunaviiva
`kds-table-v2__head-cell`		Taulukon otsikkosolu. Käytetään yhdessä `kds-table-v2__cell` kanssa.
`kds-table-v2__head-cell--sort`		Taulukon otsikkosolu, joka järjestää rivejä.
`kds-table-v2__body`		Taulukon runko
`kds-table-v2__row`		Taulukon rivi
`kds-table-v2__row--selected`		Taulukon rivi valittuna
`kds-table-v2__row--summary`		Taulukon korostettu yhteenvetorivi
`kds-table-v2__row--[variant]`	`primary`, `success`, `warning`, `danger`	Taulukon rivin tilan väri
`kds-table-v2__row--stripe-disabled`		Estää raidoituksen riviltä
`kds-table-v2__cell`		Taulukon solun perusluokka
`kds-table-v2__cell--[cellType]`	`selection`, `icon`, `status`, `toggle`	Taulukon solun tyyppi
`kds-table-v2__cell--narrow`		Taulukon solun kapea versio esimerkiksi ikonille.
`kds-table-v2__cell--dense-[dense]`	`auto`, `x`, `y`, `left` ,`right` ,`top` ,`bottom`	Taulukon solun tiiviimpi asettelu.
`kds-table-v2__footer`		Taulukon alatunniste
`kds-table-v2__sort-btn`		Järjestyspainikkeen perusluokka
`kds-table-v2__sort-btn--active`		Järjestyspainikkeen aktiivinen tila