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>
<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>
<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>

Properties #

Property Attribute Description Type Default
breakpoint breakpoint The breakpoint at which the component should be rendered as a regular table. "large" or "medium" or "small" or "x-large" or "xx-large" or "xxx-large" "small"
margin margin Controls the margin of the component. Can be one of: "auto", "none". "auto" or "none" "auto"
sticky sticky Controls whether the table has a sticky header. boolean false
stickyTop sticky-top Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky. number 0
theme theme Theme of the table. Can be one of: "default", "turva". "" or "default" or "turva" undefined
variation variation Style variation of the table. "plain" or "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


Troubleshooting

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