Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Ruby on Rails: paginate stateful tabs with Pagy

Chris Seelus

January 02, 2023

Min Read
Ruby on Rails: paginate stateful tabs with Pagy

Installation

First, add Pagy to your Gemfile and run bundle install:

Add the application's data to the database:

Create the pagy.rb initializer for the app:


Include the Pagy backend in a controller to make it available just there or inside ApplicationController to make it available globally:

Now you are set up to paginate you ActiveRecord collections inside controllers which include the Pagy backend, which would be all controllers that inherit from your ApplicationController if you included it there. Let's say you have an index action that shows some space nebulæ which you want to paginate, you could do it this way:

Include the frontend in a helper or in ApplicationHelper to make it available globally:

To render your paginated nebulæ, you can now use one of Pagys frontend helpers, like so:

blue arrow to the left
Imaginary Cloud logo

Customizing the pagination

By default, pagy_nav_bootstrap_compact will render something like this:

 

Pagy Nav Bootstrap Compact

You can adapt the text labels if you require 'pagy/extra/i18n' in an initializer, copy the standard Pagy dictionary to your config/locales and change or translate the labels however you want.

Via the initializer, you can also set options like the number of items per page and much more.

To adapt the styling we can use a bit of SASS:


This will @extend Bootstraps btn-outline-dark style, replace the prev/next buttons text with arrow icons and style the input.

blue arrow to the left
Imaginary Cloud logo

Paginate multiple collections at once

Sometimes it's necessary to paginate multiple collections per controller action.

In the following example I'll render two collections, Stars & Nebulae, on one page inside two Bootstrap tabs.

With Pagy it's easy to paginate and navigate each of them separately.

Inside the controller action where I define the Pagy collections, all that's needed is the addition of a page_param with a symbol of my choice to each collection:


Now Pagy will automatically prepend that param to the navigation links as well as extract them from a URL when rendering a view. Extremely easy and convenient!

blue arrow to the left
Imaginary Cloud logo

Maintaining the state

To also maintain the state currently active tab, we can use Pagy's option to add arbitrary parameters:


This param can be used for Bootstraps tabs .nav-links and .tab-pane by setting their active state with a conditional:


We can now not only link to certain pages for each tab, but also maintain the currently open tab even when visitors copy and paste links to our website. Neat!

blue arrow to the left
Imaginary Cloud logo

Conclusion

As I hope this article helps to highlight, Pagy is not only very performant (see previous post about Pagy) but also very comfortable to use and easy to customise.

Things like renaming the page parameter are in my opinion even more straightforward to do with Pagy then with will_paginate or Kaminari.

Time will tell if Pagy will become the go-to gem for Rails when it comes to pagination, I certainly think it has to potential to become just that.

At Imaginary Cloud we work with a wide tech stack, including Ruby on Rails. If you need help with this tech or similar ones in your software development project, we have a team of experts waiting for you! Drop us a line here!

Ready for a UX Audit? Book a free call

Found this article useful? You might like these ones too!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Chris Seelus
Chris Seelus

An entrepreneur from Bavaria, currently working on web and mobile app based software for quality management. Really fond of Ruby on Rails and React Native.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon