Navigation

`<kern-pagination>`

Paging for long tables and lists: range („1–25 von 380“), optional page size, first/previous, page numbers with „…“, next/last. Emits kernPageChange; the app loads the page. Changing the page size keeps the first visible item on screen.

Examples

Paging a device table

Set total and page-size; the component shows the range, page numbers with „…“ and first/previous/next/last buttons. It only emits kernPageChange — the app loads the page.

Pick a page.

<kern-pagination total="380" page-size="25" page="3"></kern-pagination> <p class="out" style="font-size:13px;color:var(--text-muted)">Pick a page.</p>

root.querySelector('kern-pagination').addEventListener('kernPageChange', (e) => { root.querySelector('.out').textContent = `kernPageChange → ${JSON.stringify(e.detail)}`; });

Page size

page-sizes offers a page size choice; changing it keeps the first visible item on screen. siblings sets how many page numbers show around the current one. The texts follow the Kern language; the label-* attributes replace single ones, where {from}, {to}, {total} and {n} are replaced.

<kern-pagination total="38" page-size="10" page-sizes="10,25,50" siblings="2" locale="en"></kern-pagination>

Properties

labeldefault Pages · de Seiten

string | undefined

labelFirstattribute label-first · default First page · de Erste Seite

string | undefined

labelLastattribute label-last · default Last page · de Letzte Seite

string | undefined

labelNextattribute label-next · default Next page · de Nächste Seite

string | undefined

labelPageattribute label-page · default Page {n} · de Seite {n}

string | undefined

{n} is replaced.

labelPageSizeattribute label-page-size · default Per page · de Pro Seite

string | undefined

labelPreviousattribute label-previous · default Previous page · de Vorherige Seite

string | undefined

labelRangeattribute label-range · default {from}–{to} of {total} · de {from}–{to} von {total}

string | undefined

{from}, {to} and {total} are replaced.

locale

string | undefined

BCP 47 locale for numbers; defaults to <html lang>, then the browser language.

page

mutable

default 1

number

Current page, from 1.

pageSize

mutable

attribute page-size · default 25

number

pageSizesattribute page-sizes · default ''

number[] | string

Offered page sizes, e.g. 10,25,50,100; empty hides the choice.

siblingsdefault 1

number

Page numbers on each side of the current one.

totaldefault 0

number

Number of items.

Events

kernPageChange

CustomEvent<{ page: number; pageSize: number; }>

The page or page size changed.