Pagination

Pagination is used for splitting up results into several pages and provides controls for navigating to the next or previous page.

React Component

Default

Default with Prefix and Suffix

Default - hide counter

Default - hide counter / centered

Default - hide counter and hide pages

Default - hide counter and hide pages / centered

Sage Component

SagePagination

<h3 class="t-sage-heading-6">Default</h3>
<%= sage_component SagePagination, {
  items: Kaminari.paginate_array(Array.new(30, 1)).page(1).per(2),
  collection_name: "Record",
  window: 2,
  hide_pages: false,
} %>

<h3 class="t-sage-heading-6">Default with Prefix and Suffix</h3>
<%= sage_component SagePagination, {
  items: Kaminari.paginate_array(Array.new(30, 1)).page(1).per(10),
  collection_name: "Record",
  window: 2,
  hide_counter: false,
  hide_pages: false,
  page_count_prefix: "Presenting",
  page_count_suffix: "in the last <strong>30 days</strong>".html_safe,
} %>

<h3 class="t-sage-heading-6">Default - hide counter</h3>
<%= sage_component SagePagination, {
  items: Kaminari.paginate_array(Array.new(30, 1)).page(1).per(10),
  collection_name: "Record",
  window: 2,
  hide_counter: true,
  hide_pages: false,
} %>

<h3 class="t-sage-heading-6">Default - hide counter / centered</h3>
<%= sage_component SagePagination, {
  items: Kaminari.paginate_array(Array.new(30, 1)).page(1).per(1),
  collection_name: "Record",
  window: 2,
  align: "center",
  hide_counter: true,
  hide_pages: false,
} %>



<h3 class="t-sage-heading-6">Default - hide counter and hide pages</h3>
<%= sage_component SagePagination, {
  items: Kaminari.paginate_array(Array.new(30, 1)).page(1).per(10),
  collection_name: "Record",
  window: 2,
  hide_counter: true,
  hide_pages: true,
} %>

<h3 class="t-sage-heading-6">Default - hide counter and hide pages / centered</h3>
<%= sage_component SagePagination, {
  items: Kaminari.paginate_array(Array.new(30, 1)).page(1).per(10),
  collection_name: "Record",
  window: 2,
  align: "center",
  hide_counter: true,
  hide_pages: true,
} %>

Property	Description	Type	Default
align	Pagination uses a `--align-` modifier to align the children of the component. Can only be seen when `hide_counter: true`	"center"	`nil`
current	Pagination uses a `--current` modifier to visually indicate which page is currently being viewed.	String	`nil`
disabled	Pagination uses a `--disabled` modifier to disable a link to prevent navigation. For example, when a user has reached the last page, the Next link should be disabled since there are no other pages/results to navigate to.	String	`nil`
gap	When there are many pages, a `--gap` modifier along with an ellipsis (…) can be used to truncate the pagination list items. Should be used in conjunction with `sage-pagination__page`	String	`nil`
`hide_counter`	When set to `true`, the record count will not be displayed.	Boolean	`nil`
`hide_pages`	When set to `true`, links to individual pages will not be rendered, leaving only the "Back" and "Next links visible.	Boolean	`false`
`items` required	Maps records to create page link items	Object	`false`
`page_count_prefix`	Allows string to be added before the page count text.	String	`nil`
`page_count_suffix`	Allows string to be added after the page count text.	String	`nil`
`window`	Sets the number of items on either side of the `...` item. (Note: the left side will be `window` + 1). Has no affect when `hide_pages` is set to true.	Integer	`1`