Skip to main content

Data Table
New

This template shows how to build a simple responsive view that utilizes Table component. Please note that the example below does not represent a real use case.

Hint: Press F on your keyboard to view both templates and components in fullscreen and ESC to exit the fullscreen mode. You can also open the template in a new browser window.


Open in new window
<!DOCTYPE html>
<html class="duet-bg-gradient duet-sticky-footer" lang="fi">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>LähiTapiola</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/fonts@latest/lib/localtapiola.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/css@latest/lib/duet.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/tokens@latest/lib/tokens.custom-properties.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/components@3.4.11/lib/duet/duet.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/components@3.4.11/lib/duet/duet.js"></script>
</head>
<body>
<duet-header
language="fi"
skip-to-id="#content"
contact="Ota yhteyttä"
current-href="/">

</duet-header>
<duet-layout header-distance="without-links" sticky sticky-top="110" id="content">
<div slot="main">
<duet-tab-group>
<duet-tab selected label="Multi-body">
<duet-card padding="large" heading="Multi-body table" heading-level="h1">
<duet-table breakpoint="large" sticky sticky-top="64">
<table>
<thead>
<tr>
<th>Sijoituskohde</th>
<th>Arvopäivä</th>
<th>Osuuden arvo</th>
<th>Osuuden määrä</th>
<th class="duet-text-right">Saaston määrä</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="5">Varainhoitosalkut</th>
</tr>
<tr>
<td><duet-link>Varainhoito Tasapainoinen ›</duet-link></td>
<td>16.04.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.04.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.04.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.04.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.04.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.04.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.04.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.04.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.04.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.04.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.04.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>
</duet-card>
</duet-tab>
<duet-tab label="Plain with buttons">
<duet-card padding="large" heading="Plain with buttons">
<duet-table breakpoint="medium" variation="plain">
<table>
<thead>
<tr>
<th>Valtuuttaja</th>
<th>Salkun nimi</th>
<th>Tuoteryhmä</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<duet-link url="/">Antti Ahola ›</duet-link>
</td>
<td class="foo">Antin salkku<br /><duet-link url="/">Siirry salkkuun ›</duet-link></td>
<td>Rahastot</td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Delete
</duet-button>
</td>
</tr>
<tr>
<td>
<duet-link url="/">Metallitarvike Oy ›</duet-link>
</td>

<td>390-677889-H<br /><duet-link url="/">Siirry salkkuun ›</duet-link></td>
<td>Vakuutussijoitukset</td>
<td>
<duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
Delete
</duet-button>
</td>
</tr>
</tbody>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab label="Striped with buttons">
<duet-card padding="large" heading="Striped with buttons">
<duet-table breakpoint="medium">
<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 />
01.01.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>
</duet-card>
</duet-tab>
<duet-tab label="Plain with footer">
<duet-card padding="large" heading="Plain with footer">
<duet-table variation="plain">
<table>
<thead>
<tr>
<th>Nostokohde</th>
<th>Arvopäivä</th>
<th>Nosto&nbsp;%</th>
<th class="duet-text-right">Nosto&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name of original asset</td>
<td>00.00.2019</td>
<td>5%</td>
<td class="duet-text-right">-1.000&nbsp;</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>00.00.2019</td>
<td>12%</td>
<td class="duet-text-right">-1.000&nbsp;</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>00.00.2019</td>
<td>32%</td>
<td class="duet-text-right">-500&nbsp;</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="duet-font-weight-semi-bold">Yhteensä</td>
<td class="duet-text-right duet-font-weight-semi-bold duet-font-size-large">-2.500&nbsp;</td>
</tr>
</tfoot>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab label="Sticky header">
<duet-card padding="large" heading="Sticky header">
<duet-table variation="plain" sticky sticky-top="64">
<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>
</duet-card>
</duet-tab>
</duet-tab-group>
</div>
</duet-layout>
<duet-footer logo-href="/" language="fi"></duet-footer>
<script>
// Save references to components we want to adjust below
var header = document.querySelector("duet-header")
var footer = document.querySelector("duet-footer")

// Set the contact menu items
header.contactItems = [
{ label: "Kysy lisätietoja", href: "mailto:minna.poikela@lahitapiola.fi" },
{ label: "Yhteystiedot", href: "/yhteystiedot/" }
]

// Set label and href for session link
header.session = {
label: "Kirjaudu sisään",
href: "#signin",
type: "signin"
}

// Set footer main items
footer.items = [
{ label: 'Hae korvausta', href: '#', icon: 'navigation-make-claim' },
{ label: 'Osta vakuutus', href: '#', icon: 'action-buy-insurance' },
{ label: 'Yhteystiedot', href: '#', icon: 'form-tel' }
]

// Set footer help menu
footer.menu = [
{ label: 'Turvallisuus ja käyttöehdot', href: '#' },
{ label: 'Evästeet', href: '#' },
{ label: 'Henkilötietojen käsittely', href: '#' },
]
</script>
</body>
</html>

Integration

To install this template’s dependencies into your project, run:

npm install @duetds/components --save-dev
npm install @duetds/css --save-dev
npm install @duetds/fonts --save-dev

For further guidelines, please see each package’s documentation.



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 template, please head over to the Support page for more guidelines and help.