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