Pagination

Examples

Simple Pagination


<vega-pagination
  current="1"
  page-size="10"
  total="100"
/>

Example with number of pages viewed


  <vega-pagination id="pagination1" current="1" page-size="10" total="100" />

const pagination1 = document.querySelector('#pagination1');
pagination1.extensions = [['currentPageLabel'], ['pageSelector']];

Example with variable item number display


<vega-pagination id="pagination2" current="1" page-size="10" total="100" />

const pagination2 = document.querySelector('#pagination2');
pagination2.extensions = [['pageSizeSelector'], ['pageSelector', 'goTo']];

Combined Example


<vega-pagination
    id="pagination3"
    current="1"
    page-size="10"
    total="100"
  />

const pagination3 = document.querySelector('#pagination3');
pagination3.extensions = [
  ['currentPageLabel', 'pageSizeSelector'],
  ['pageSelector', 'goTo'],
];

Example with ordering

  <vega-pagination
    id="vega-pagination-custom-orders"
    current="1"
    page-size="10"
    total="100"
  />

  const customOrders = document.querySelector('#vega-pagination-custom-orders');
  customOrders.extensions = [['pageSizeSelector'], ['pageSelector'], ['goTo']];

Usage

The pagination component is designed for situations where there are a large number of items to be displayed on a page or multiple pages. It is a navigation tool to allow the user the option to 1) view the number of items on a page, 2) determine the number of items to show, and/or 3) navigate to other pages to view more results. There is also a page selector option to jump to a specific page.

Each of these elements within this component can be used together or separately. You have the option to determine which pieces of the component to display, and in which order.

Properties

Name	Description	Default
total	Total number of data items number	-
page-size	Number of data items per page number	10
current	Current page number number	1
pageSizeSelectorOptions	The page size selector options	`[10, 20, 50, 100]`
extensions	Extensions for the pagination items	`[['pageSelector']]`
Event
vegaChange	Callback executed when vega-pagination page number is changed. `(e: CustomEvent<number>) => {}`
vegaPageSizeChange	Event emiitter for notification of trhe pageSize change

Types


type VegaPaginationItemType = 'currentPageLabel' | 'pageSizeSelector' | 'pageSelector' | 'goTo';

For more details, view in Storybook.

Accessibility

id attribute value must be unique

Best Practices

Provide enough spacing between page numbers for users to distinguish between them.

Provide clickable areas which are large enough for a user to find and navigate to with their mouse or pointing device.

Provide next and last links. In this case, the last link is identified by its page number.