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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td></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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td></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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td class="duet-text-center">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td></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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td></td>
<td></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>
</td>
<td class="duet-text-center duet-selected-column">
<duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
</td>
<td></td>
<td></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>
</td>
<td class="duet-selected-column"></td>
<td></td>
<td></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

Building Layouts

Tutorials

Using CLI Tools

Tutorials

Creating Custom Patterns

Tutorials

Server Side Rendering

Tutorials

Sharing Prototypes

Tutorials

Usage With Markdown


Troubleshooting

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