Pagination

Page navigation control for paged data sets. Renders first, previous, numbered pages, next, and last buttons. Large page counts collapse to an ellipsis window around the current page.

Playground

Controls

Page

Total Pages

Size

Disabled

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-pagination page="1" total-pages="10"></lt-pagination>

<!-- Small size -->

<lt-pagination size="sm" page="3" total-pages="20"></lt-pagination>

<!-- Disabled -->

<lt-pagination page="5" total-pages="10" disabled></lt-pagination>

<script type="module">
document.querySelector('lt-pagination').addEventListener('change', (e) => {
  console.log('navigated to page', e.detail.page);
});
</script>

import { Pagination } from '@latty-ds/react';

<Pagination page={1} totalPages={10} onChange={(e) => console.log('page', e.detail.page)} />

<Pagination size="sm" page={3} totalPages={20} onChange={(e) => setPage(e.detail.page)} />

<template>
<lt-pagination
  :page="currentPage"
  :total-pages="totalPages"
  @change="(e) => currentPage = e.detail.page"
/>
</template>

API