Pagination New
New
This template shows how to build a simple paginated page
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.
<!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.duetds.com/api/fonts/1.4.31/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/1.7.33/lib/duet.min.css" integrity="sha384-ZUOdWRfXRTVZwK0KKDUx+7tNxj3LaOXhNpoLH/p42gaIO2HuzLY8CyPU38wbFmvV" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/2.5.14/lib/tokens.custom-properties.css" integrity="sha384-U+lBqX3FeAku5Wet1UsKbPE9qCtnuXTTlXft7791G1hswVrwpRaviO5rey2lm8Dz" crossorigin="anonymous" />
<script type="module" src="https://cdn.duetds.com/api/components/5.1.9/lib/duet/duet.esm.js" integrity="sha384-gDAiJrPbQRUBQWn0dv9IdV3xsREJJapLCeeNyG+TBloR8iANfJkBJVaUgorOB3tH" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/5.1.9/lib/duet/duet.js" integrity="sha384-IZFfZE9HPnTc/eJHXjVKjbsadS5PoFM4NQlMuoixFJQmuD7u9UiOAJZK4SWzmGiA" crossorigin="anonymous"></script>
</head>
<body>
<style>
.duet-dummy-placeholder {
height: 170px;
width: 150px;
background-color: #fff;
border: 1px solid #ccc;
min-width: 200px;
font-size: 50px;
color: #c3c3c3;
}
.pagination-advanced {
text-align: center;
margin: 0 auto;
}
.pagination-advanced .pagination-menu {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
text-align: center;
}
@media only screen and (max-width: 48em) {
.pagination-advanced .pagination-menu {
display: block;
}
duet-range-stepper {
display: none;
}
duet-select {
display: none !important;
}
}
</style>
<duet-header language="fi" skip-to-id="#content" contact="Ota yhteyttä" current-href="/"> </duet-header>
<duet-layout id="content">
<div slot="main">
<duet-tab-group>
<duet-tab label="Plain table with pagination">
<duet-card padding="large" heading="Plain with footer">
<duet-table variation="plain">
<table>
<thead>
<tr>
<th>Nostokohde</th>
<th>Arvopäivä</th>
<th>Nosto-%</th>
<th class="duet-text-right">Nosto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>32 %</td>
<td class="duet-text-right">-500,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="duet-font-weight-semi-bold">
<duet-pagination></duet-pagination>
</td>
</tr>
</tfoot>
</table>
</duet-table>
</duet-card>
</duet-tab>
<duet-tab selected label="Plain table with advanced pagination">
<duet-card padding="large" heading="Plain with footer">
<duet-table variation="plain" breakpoint="medium">
<table>
<thead>
<tr>
<th>Nostokohde</th>
<th>Arvopäivä</th>
<th>Nosto-%</th>
<th class="duet-text-right">Nosto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>5 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>12 %</td>
<td class="duet-text-right">-1 000,00 €</td>
</tr>
<tr>
<td>Name of original asset</td>
<td>16.04.2019</td>
<td>32 %</td>
<td class="duet-text-right">-500,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="duet-font-weight-semi-bold pagination-advanced">
<div class="pagination-menu">
<duet-pagination></duet-pagination><duet-range-stepper></duet-range-stepper
><duet-select label-hidden label="select range" value="10" variation="tiny"></duet-select>
</div>
</td>
</tr>
</tfoot>
</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: '#' },
]
// Save a reference to the above select component
const select = document.querySelector("duet-select")
// Set select menu items and their values
select.items = [
{ label: "10", value: "10"},
{ label: "20", value: "20" },
{ label: "30", value: "30" },
{ label: "40", value: "40" },
]
// Listen for change events in the select
select.addEventListener("duetChange", function (e) {
console.log("Change event detected in select:", e.detail)
})
</script>
</body>
</html>Integration
To install this template’s dependencies into your project, run:
npm install @duetds/components
npm install @duetds/css
npm install @duetds/fontsFor 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
TutorialsUsing CLI Tools
TutorialsCreating Custom Patterns
TutorialsServer Side Rendering
TutorialsSharing Prototypes
TutorialsUsage With Markdown
TutorialsZeplin
Troubleshooting
If you experience any issues while using a template, please head over to the Support page for more guidelines and help.