Skip to main content

Table
New

Table is a lightweight and un-opinionated component for enhancing tabular data. It offers features like sticky headers, support for narrow viewport widths, and table styles.

It’s important to pay close attention to semantics when authoring tables with Duet Table component. The markup in the examples below can be used as a starting point for most tables. However, be aware that HTML tables have a large feature set, which cannot be covered exhaustively here.

Examples

Open in new window
<duet-table>
<table>
<thead>
<tr>
<th>Eläkeaika</th>
<th>Tavoite-eläke/kk</th>
<th>Eläkearvio/kk</th>
</tr>
</thead>
<tbody>
<tr>
<td>55v-65v</td>
<td>1.660,24 euroa</td>
<td>1.433,95 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td>477,99 euroa</td>
</tr>
<tr>
<td>55v-65v</td>
<td>1.660,24 euroa</td>
<td>1.433,95 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td>477,99 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td>477,99 euroa</td>
</tr>
</tbody>
</table>
</duet-table>
Open in new window
<duet-table variation="plain">
<table>
<thead>
<tr>
<th>Eläkeaika</th>
<th>Tavoite-eläke/kk</th>
<th>Eläkearvio/kk</th>
</tr>
</thead>
<tbody>
<tr>
<td>55v-65v</td>
<td>1.660,24 euroa</td>
<td>1.433,95 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td>477,99 euroa</td>
</tr>
<tr>
<td>55v-65v</td>
<td>1.660,24 euroa</td>
<td>1.433,95 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td>477,99 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td>477,99 euroa</td>
</tr>
</tbody>
</table>
</duet-table>
Open in new window
<duet-table>
<table>
<thead>
<tr>
<th>Eläkeaika</th>
<th>Tavoite-eläke/kk</th>
<th class="duet-text-right">Eläkearvio/kk</th>
</tr>
</thead>
<tbody>
<tr>
<td>55v-65v</td>
<td>1.660,24 euroa</td>
<td class="duet-text-right">1.433,95 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td class="duet-text-right">477,99 euroa</td>
</tr>
<tr>
<td>55v-65v</td>
<td>1.660,24 euroa</td>
<td class="duet-text-right">1.433,95 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td class="duet-text-right">477,99 euroa</td>
</tr>
<tr>
<td>
65v-75v
</td>
<td>553,42 euroa</td>
<td class="duet-text-right">477,99 euroa</td>
</tr>
</tbody>
</table>
</duet-table>
Open in new window
<duet-table breakpoint="large">
<table>
<thead>
<tr>
<th>Valtuutettu</th>
<th>Salkun nimi</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
Hermanni Mikkola<br />
10.10.1999
</td>
<td class="foo">
Antin salkku<br />
<duet-link url="/">Siirry salkkuun ›</duet-link>
</td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Delete
</duet-button>
</td>
</tr>
<tr>
<td>
Jukka-Pekka Routakorpi-Salomaa<br />
10.11.1988
</td>
<td>
Justiinan ja Jukka-Pekan yhteinen salkku 1234<br />
<duet-link url="/">Siirry salkkuun ›</duet-link>
</td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Delete
</duet-button>
</td>
</tr>
<tr>
<td>
Veera Mikkola<br />
1.1.2001
</td>
<td>
Vapun rahastot<br />
<duet-link url="/">Siirry salkkuun ›</duet-link>
</td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Delete
</duet-button>
</td>
</tr>
</tbody>
</table>
</duet-table>
Open in new window
<duet-table variation="plain" sticky sticky-distance="none">
<table>
<thead>
<tr>
<th>Item</th>
<th>Number</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
<tr>
<td>Policy name</td>
<td>1298395893258015</td>
<td>100,00&nbsp;</td>
</tr>
</tbody>
</table>
</duet-table>
Open in new window
<duet-table breakpoint="large" sticky sticky-distance="none">
<table>
<thead>
<tr>
<th>Sijoituskohde</th>
<th>Arvopäivä</th>
<th>Osuuden arvo</th>
<th>Osuuden määrä</th>
<th class="duet-text-right">Sääston määrä</th>
</tr>
</thead>

<tbody>
<tr>
<th colspan="5">Varainhoitosalkut</th>
</tr>
<tr>
<td><duet-link>Varainhoito Tasapainoinen ›</duet-link></td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
</tbody>

<tbody>
<tr>
<th colspan="5">Sijoitussalkut</th>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
</tbody>

<tbody>
<tr>
<th colspan="5">Eläkesuunnitelma</th>
</tr>
<tr>
<td><duet-link>Varainhoito Nordic Plus</duet-link></td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
<tr>
<td><duet-link>Varainhoito Nordic Plus</duet-link></td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
<tr>
<td><duet-link>Varainhoito Nordic Plus</duet-link></td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
<tr>
<td><duet-link>Varainhoito Nordic Plus</duet-link></td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
<tr>
<td>Varainhoito Nordic Plus</td>
<td>16.4.2018</td>
<td>10,320&nbsp;</td>
<td>147,31&nbsp;kpl</td>
<td class="duet-text-right">1.520,16&nbsp;</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="duet-font-weight-semi-bold">Total</td>
<td class="duet-text-right duet-font-weight-semi-bold duet-font-size-large">16.721,76&nbsp;</td>
</tr>
</tfoot>
</table>
</duet-table>
Open in new window
<div class="duet-responsive-table">
<duet-table margin="none" breakpoint="none">
<table>
<thead>
<tr>
<th width="45%" style="min-width: 180px">Vakuutus</th>
<th class="duet-text-center">Loisto&shy;kasko</th>
<th class="duet-text-center duet-color-secondary duet-selected-column">Laaja&shy;kasko</th>
<th class="duet-text-center">Perus&shy;kasko</th>
<th class="duet-text-center">Osa&shy;kasko</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<duet-collapsible heading="Eläintörmäys" margin="none">
Eläintörmäysvakuutus korvaa, jos ajoneuvo törmää muuhun eläimeen kun hirvieläimeen. Väistämisestä aiheutuneet vahingot korvataan kolarointi&shy;vakuutuksesta.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Hirvivahinko" margin="none">
Hirvivahinkovakuutus korvaa, jos ajoneuvo törmää hirven, poron, kauriin tai peuran kanssa. Väistämisestä aiheutuneet vahingot korvataan kolarointi&shy;vakuutuksesta.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Palo" margin="none">
Palovakuutus korvaa irtipäässeen tulen tai ajoneuvon suoraan osuneen salamaniskun aiheuttamat vahingot.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Palovakuutus sisältyy</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Varkaus" margin="none">
Varkausvakuutus korvaa ajoneuvon, jos se varastetaan. Vakuutus korvaa myös ajoneuvon vauriot, jos se vahingoittuu varkauden, luvattoman käytön tai näiden yrityksen yhteydessä. Korvaus maksetaan, jos ajoneuvo on ollut lukittuna tai lukitussa tilassa. Varkaus pitää aina ilmoittaa poliisille.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Ilkivalta" margin="none">
Ilkivaltavakuutus korvaa tahallisesta vahingonteosta aiheutuneita vahinkoja. Ilkivallasta on tehtävä rikosilmoitus. Toisella ajoneuvolla aiheutettua vahinkoa ei korvata ilkivalta&shy;vakuutuk&shy;sesta.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Rahoitus" margin="none">
Rahoitusvakuutus liitetään kaskoon, jos ajoneuvon omistajana on rahoitusyhtiö tai autoliike tai ajoneuvo on leasingvuokrattu. Rahoitusvakuutuksesta voidaan korvata ajoneuvon menettäminen tai vaurioituminen ajoneuvon omistajalle, jos korvaus muuten evättäisiin tai sitä kohtuul&shy;listet&shy;taisiin.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Rahoitusvakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Luonnonilmiö" margin="none">
Luonnonilmiövakuutus korvaa, jos myrsky kaataa puun ajoneuvon päälle, raesade vahingoittaa ajoneuvon ulkopintoja tai kun tulvaveden nousu tai myrskyn irrottama esine aiheuttaa vahinkoa pysähtyneelle ajoneuvolle.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Rahoitusvakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Kolarointi" margin="none">
Kolarointivakuutus eli törmäysvakuutus korvaa vahingot, jos ajoneuvo törmää, suistuu tieltä, kaatuu tai putoaa.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Kolarointivakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Bonusturva" margin="none">
Bonusturva varmistaa, että bonukset eivät laske, vaikka kolari sattuisi. Ansaitset bonusturvan vahingottomalla ajolla.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Bonusturva sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Bonusturva sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Bonusturva ei sisälly.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Bonusturva ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Lasi" margin="none">
Lasivakuutus korvaa vauriot, jotka aiheutuvat suoraan ulkoapäin ikkunalasiin osuneesta iskusta. Esimerkiksi kivi sinkoutuu tuulilasiin ja rikkoo sen.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Lasivakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Lasivakuutus sisältyy.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Lasivakuutus ei sisälly.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Lasivakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
<tr>
<td>
<duet-collapsible heading="Laaja sijaisauto" margin="none">
Laajan sijaisautovakuutuksen turvin saat käyttöön sijaisauton, kun oma auto on korjattavana matkan keskeyttävän teknisen vian tai vakuutuksesta korvattavan kaskovahingon takia. Sijaisautona korvataan vastaava, enintään C-kokoluokan henkilöauto tai enintään 9m3 pakettiauto.
</duet-collapsible>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
<duet-visually-hidden>Laaja sijaisautovakuutus sisältyy.</duet-visually-hidden>
</td>
<td class="duet-selected-column">
<duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
</td>
<td>
<duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
</td>
</tr>
</tbody>
</table>
</duet-table>
</div>

Properties #

Property Attribute Description Type Default
breakpoint breakpoint The breakpoint at which the component should be rendered as a regular table. "large" | "medium" | "none" | "small" | "x-large" | "xx-large" | "xxx-large" "small"
margin margin Controls the margin of the component. "auto" | "none" "auto"
sticky sticky Controls whether the table has a sticky header. boolean false
stickyDistance sticky-distance Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky. "none" | "with-links" | "without-links" "with-links"
theme theme Theme of the table. "" | "default" | "turva" undefined
variation variation Style variation of the table. "plain" | "striped" "striped"

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Abstract

Tutorials

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown

Tutorials

VS Code

Tutorials

Zeplin


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.