<span class="lui-pagination" data-controller="lui--pagination"> <a class="lui-button lui-button--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/default?page=6"> <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-left" data-lui--button-target="leadingIcon"></i> </a> <a href="/lookbook/inspect/pagination/default?page=1" class="lui-pagination__item">1</a> <span class="lui-pagination__divider">...</span> <a href="/lookbook/inspect/pagination/default?page=5" class="lui-pagination__item">5</a> <a href="/lookbook/inspect/pagination/default?page=6" class="lui-pagination__item">6</a> <a class="lui-pagination__item lui-pagination__item--active">7</a> <a href="/lookbook/inspect/pagination/default?page=8" class="lui-pagination__item">8</a> <a href="/lookbook/inspect/pagination/default?page=9" class="lui-pagination__item">9</a> <a href="/lookbook/inspect/pagination/default?page=10" class="lui-pagination__item">10</a> <a href="/lookbook/inspect/pagination/default?page=11" class="lui-pagination__item">11</a> <a class="lui-button lui-button--neutral--secondary lui-button--size-small w-fit w-fit" data-controller="lui--button" href="/lookbook/inspect/pagination/default?page=8"> <i class="lui-button__icon lui-button__icon--small fa-regular fa-chevron-right" data-lui--button-target="leadingIcon"></i> </a></span>Pagination
Description
Related components
| Used Components | Components where is Used |
|---|---|
| Label |
Usage rules
- ✅ Do
- ❌ Don't
<%= render LooposUi::Pagination.new( count: preview_params[:count], page: preview_params[:page], items: preview_params[:items]) %>No notes provided.
| Param | Description | Input |
|---|---|---|
|
Total number of items |
|
|
|
Current page number |
|
|
|
Number of items per page |
|
Pagination
Description
The Pagination component provides navigation for paginated data sets, allowing users to move between pages of results.
It supports integration with the Pagy gem or can be used with explicit count, page, and items arguments for flexibility.
Pagy usage is recommended, and internally the other arguments will be converted to a pagy object.
Arguments
| Property | Default | Description |
|---|---|---|
pagy |
nil |
A Pagy object. If provided, takes precedence over manual arguments. |
count |
nil |
Total number of items (used if not using pagy). |
page |
1 |
Current page number (used if not using pagy). |
items |
nil |
Items per page (used if not using pagy). |
path |
request.fullpath |
The path to use for pagination links. |
link_attrs |
{} |
Additional attributes for the link elements. |
You must provide either a pagy object or all of count, page, and items.
If you have several pagination on the same page, you can provide a path argument to each pagination to make sure they have different links.
The path can contain query parameters, so you can use those to paginate different data sets on the same page also.
We recommend also wrapping the paginated component in a turbo frame container, so only the clicked element will be updated.
If the element you need to update is deeply nested and you can't wrap it in a turbo frame, you can use the link_attrs argument to add additional attributes to the link elements.
<%= render LooposUi::Pagination.new(link_attrs: { data: { turbo_frame: "my_frame" } }) %>Usage
Using a Pagy object
<%= render LooposUi::Pagination.new(pagy: @pagy) %>Using count, page, and items arguments
<%= render LooposUi::Pagination.new(count: 101, page: 3, items: 10) %>Future improvements
mode argument - in event mode, the pagination will not render as a list of links, but as a set of elements that will trigger bubbling events.