The Pagination design is very close to the Google Material Design standards. Keeping Pagination simple and styling it in a similar fashion to the table ensures that the Pagination component can be seamlessly added to a Table component or used as a stand-alone component if necessary.


Rows per page
1 - 10 of 100


Pagination component that can be used in the footer of a Table to help control navigation.

When setting up Pagination make sure to pass in a pageSize but also to listen for the update-pageSize event so that you can recieve new values for pageSize. We automatically reset the value to 1 when the pageSize is changed.


Text labels for pagination can be customized via the labels property. The default labels values are:

  rowsPerPage: "Rows per page",
  range: "${start} - ${end} of ${total}",
  first: "Go to first page",
  last: "Go to last page",
  next: "Go to next page",
  previous: "Go to previous page",
  paginationLabel: "Pagination controls"

NOTE for range ${start}, ${end} and ${total} will be replaced with the corresponding values.


modelValuecurrent page that is active. First page is 1Numbertrue-
totaltotal number of items being displayedNumbertrue-
pageSizecurrent page size being displayedNumbertrue-
pageSizesarray containing number of available page sizesNumber[]false[10, 20, 50]
labelsobject containing labels to be used by this component. Mainly used for i18n or customization of labels. See Labels exampleObjectfalseSee Labels example


  • update:modelValue - emits new page value. Always a number
  • update:pageSize - emits new page size value. Always a number


  • feather-pagination-first-button - on the button element that goes to first page
  • feather-pagination-previous-button - on the button element that goes to previous page
  • feather-pagination-next-button - on the button element that goes to next page
  • feather-pagination-last-button - on the button element that goes to last page