Pagination

<sl-pagination> | SlPagination
Since 1.1.5 experimental

Pagination is a custom element for navigating and selecting the number of items to display per page in a paginated list. 

<sl-pagination id="pagination" total-items="210"></sl-pagination>

<script>
  const pagination = document.getElementById('pagination');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination {
     --pagination-nav-select-width: 70px;
  }
</style>

Examples

Types

Simple

<sl-pagination id="pagination-simple" total-items="210"></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-simple');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-simple {
     --pagination-nav-select-width: 70px;
  }
</style>

Fullset 

<sl-pagination id="pagination-fullset" total-items="1000" pages-shown="5" pagination-type="fullset" page="50"></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-fullset');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-fullset {
     --pagination-nav-select-width: 70px;
  }
</style>

Centred 

<sl-pagination id="pagination-centred" total-items="1000" pagination-type="centred" max-items-per-page="20"></sl-pagination>

<style>
  #pagination-centred {
     --pagination-nav-select-width: 70px;
  }
</style>

Sizes

There are two sizes medium and small. The default size is medium, change the size using size attribute.

Medium size 

<sl-pagination id="pagination-medium" total-items="210"></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-medium');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-medium {
     --pagination-nav-select-width: 70px;
  }
</style>

Small size 

<sl-pagination id="pagination-small" total-items="210" size="small"></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-small');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-small {
     --pagination-nav-select-width: 70px;
  }
</style>

Disable ellipses 

<sl-pagination id="pagination-fullset-disable-ellipses" total-items="251" pages-shown="3" pagination-type="fullset" disable-ellipses></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-fullset-disable-ellipses');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-fullset-disable-ellipses {
     --pagination-nav-select-width: 70px;
  }
</style>

Loop

Using loop attribute to allow loop through pages when reaching first/last page.

<sl-pagination id="pagination-loop" total-items="210" loop></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-loop');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-loop {
     --pagination-nav-select-width: 70px;
  }
</style>

Optional hide elements

Hide range

Use hide-range to hide range display in pagination size select element.

<sl-pagination id="pagination-hide-range" total-items="210" hide-range></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-hide-range');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-hide-range {
     --pagination-nav-select-width: 70px;
  }
</style>

Hide size select

Use hide-size-select to hide size select in pagination size select element.

<sl-pagination id="pagination-hide-size-select" total-items="210" hide-size-select></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-hide-size-select');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-hide-size-select {
     --pagination-nav-select-width: 70px;
  }
</style>

Hide tooltip

Use hide-tooltip to hide tooltip in navigation component.

<sl-pagination id="pagination-hide-tooltip" total-items="210" hide-tooltip></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-hide-tooltip');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-hide-tooltip {
     --pagination-nav-select-width: 70px;
  }
</style>

Compact layout

Use compact to enable compact layout. Use --pagination-gap to change the gap.

<sl-pagination id="pagination-compact" total-items="210" compact></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-compact');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-compact {
     --pagination-nav-select-width: 70px;
     --pagination-gap: 20px;
  }
</style>

Use input

Use use-input enable input component instead of select component. Use --pagination-nav-input-width and --pagination-size-input-width to change width of input components.

Medium

<sl-pagination id="pagination-use-input" total-items="210" use-input></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-use-input');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-use-input {
    --pagination-input-width: 70px;
    --pagination-nav-input-width: var(--pagination-input-width);
    --pagination-size-input-width: var(--pagination-input-width);
  }
</style>

Small

<sl-pagination id="pagination-use-input-small" total-items="210" use-input size="small"></sl-pagination>

<script>
  const pagination = document.getElementById('pagination-use-input-small');
  pagination.options = [10, 20, 50, 100, 200];
</script>

<style>
  #pagination-use-input-small {
    --pagination-input-width: 70px;
    --pagination-nav-input-width: var(--pagination-input-width);
    --pagination-size-input-width: var(--pagination-input-width);
  }
</style>

[component-metadata:sl-pagination]

Properties

Name Description Reflects Type Default
totalItems
total-items 		The total number of items. number 1
page The index of current page. number 0
paginationType
pagination-type 		The type of pagination. 'simple' | 'centred' | 'fullset' 'simple'
size Size of the pagination. 'medium' | 'small' 'medium'
tooltipPrevText
tooltip-prev-text 		Tooltip text for the previous pagination button. string 'Previous'
tooltipNextText
tooltip-next-text 		Tooltip text for the next pagination button. string 'Next'
tooltipPosition
tooltip-position 		Tooltip position 'top' | 'bottom' | 'left' | 'right' 'top'
options Max items per page options. array [10, 20, 50, 100]
loop Whether user should be able to loop through the pages when reaching first / last page. boolean false
maxItemsPerPage
max-items-per-page 		Current max items per page. number 0
hideRange
hide-range 		Whether or not to hide range. boolean false
hideSizeSelect
hide-size-select 		Whether or not to hide the size select. boolean false
compact Use compact layout. boolean false
hideTooltip
hide-tooltip 		Whether or not to hide tooltip boolean false
useInput
use-input 		Whether or not to use input for page selection. boolean false
pagesShown
pages-shown 		Used in fullset/centred variations only. Number of fullset’s page buttons to display. number 7
disableEllipses
disable-ellipses 		Used in fullset/centred variations only. Whether or not to disable ellipses. boolean false
rangeFrom Range display from page. number 1
rangeTo Range display to page. number 1
totalPages Total number of pages. number 1
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-page-change Emits when page changes. CustomEvent
sl-page-size-change Emits when page size changes. CustomEvent

Learn more about events.

Custom Properties

Name Description Default
--pagination-nav-input-width The width of the pagination navigation input component.
--pagination-size-input-width The width of the pagination size input component.
--pagination-nav-select-width The width of the pagination navigation select component.
--pagination-size-select-width The width of the pagination size select component.
--pagination-gap The gap between pagination elements in compact mode.
--pagination-icon-btn-size The size of the pagination navigation icon buttons.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
nav-base The pagination navigation’s base wrapper.
nav-prev-button The pagination navigation’s previous button.
nav-next-button The pagination navigation’s next button.
nav-select The pagination navigation’s select element.
size-base The pagination size’s base wrapper.
size-select The pagination size’s select element.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-icon-button>
  • <sl-input>
  • <sl-option>
  • <sl-popup>
  • <sl-select>
  • <sl-tag>