Paginator

The Paginator component provides navigation controls for paginated content.

Import

<script>
  import { Paginator } from 'svelte-fluentui';
</script>
svelte

Basic Usage

<Paginator
  totalPages={10}
  currentPage={1}
  on:pagechange={(e) => handlePageChange(e.detail)}
/>
svelte

With Page Size Options

<Paginator
  totalItems={250}
  pageSize={10}
  pageSizeOptions={[10, 25, 50]}
  showPageSizeSelector
/>
svelte

Properties

PropertyTypeDefaultDescription
currentPagenumber1Current active page
totalPagesnumberundefinedTotal number of pages
totalItemsnumberundefinedTotal number of items
pageSizenumber10Items per page
pageSizeOptionsnumber[][10, 25, 50]Page size options
showPageSizeSelectorbooleanfalseShow page size selector

Events

EventDescription
on:pagechangeFired when page changes
on:pagesizechangeFired when page size changes
Last update at: Invalid Date