Search and Sort With The Ransack Gem
This last week I spent some time learning .Net 3.1, as well as .Net 5. I had some requirements for searching and sorting in both .cshtml pages, as well as razor components. At some point, I began to wonder how quickly I could have done this in Ruby on Rails instead.
The natural progression, of course, was that I would rediscover the Ransack Gem. This gem is absolutely amazing for bootstrapping search and sort functionality into an application. For reference, this video tutorial took around 15 minutes to learn to set up.
In this tutorial we’ll cover setting up the Ransack gem with some seeded Faker data. We’ll create an articles model that has both a title and a body. Afterwards, we’ll search and sort both columns, and combine the search forms into one form.
In future tutorials, my plan is to cover how to search and sort on associations. Then we’ll hopefully cover some more advanced features, such as custom queries and custom sort links. These will allow the Ransack Gem to scale to a production search solution.
All of this code is available at this GitHub repo.
Video Version of Tutorial
Timestamps
0:00 Intro and Video Overview
1:01 Code Begins By Adding Ransack Gem To Rails Application
1:40 Creating The Articles Scaffold
2:56 Using The Faker Gem To Seed The Development Database
5:26 Ransack Controller Setup
6:26 Ransack View Setup
10:26 Combine Two Ransack Fields Into One Search Bar
11:16 Sorting With The Ransack Gem
15:10 Sneak Peak At Advanced Ransack Searching And Sorting With Postgresql
16:49 Outro and Video Summary
Part 1 - The Article Scaffold
The first step is going to be adding the Ransack and Faker gems to our gemfile. Once we run our bundle command, we can then generate the article scaffold and migrate the database. After we migrate, we can seed the database.
# Gemfile.rb
gem 'ransack'
gem 'faker'
bundle install
rails g scaffold Article title body:text
rails db:migrate
# /db/seeds.rb
# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
# movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
# Character.create(name: 'Luke', movie: movies.first)
50.times do |x|
Article.create(title: Faker::Lorem.sentences(number: 1),
body: Faker::Lorem.paragraph(sentence_count: 5))
end
Part 2 - The Ransack Gem Controllers
The controller is fairly straight forward. You’re just going to have to insert some logic for the query based on the parameters you were passed. This can become fairly involved, but for this tutorial you’ll just have to modify your index method to match mine.
class ArticlesController < ApplicationController
before_action :set_article, only: %i[ show edit update destroy ]
# GET /articles or /articles.json
def index
@q = Article.ransack(params[:q])
@articles = @q.result(distinct: true)
end
Part 3 - The Ransack Gem Views
The views are going to include two parts. The first is going to be the search form partial. In here we can either use a f.search_field :title_cont and a f.search_field :body_cont, or we can combine the two. I opt to combine the two into a f.search_field :title_or_body_cont.
<%= search_form_for @q do |f| %>
<%= f.search_field :title_or_body_cont, placeholder: "Search..." %>
<%= f.submit "Search!" %>
<% end %>
For the index page, we simply need to add the partial render on line 5, which will give us a search form. We can then modify the headers on line 9 and 10 from “Title” and “Body” to be the sort_links shown below.
<p id="notice"><%= notice %></p>
<h1>Articles</h1>
<%= render 'articles/search_form.html.erb' %>
<table>
<thead>
<tr>
<th><%= sort_link(@q, :title, "Title", default_order: :asc) %></th>
<th><%= sort_link(@q, :body, "Article Content", default_order: :desc) %></th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @articles.each do |article| %>
<tr>
<td><%= article.title %></td>
<td><%= article.body %></td>
<td><%= link_to 'Show', article %></td>
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Destroy', article, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New Article', new_article_path %>
Conclusion
And there you have it, an application with searching and sorting in a very short amount of time. I’ve included a preview of the finished project, which again is available on GitHub. I think how quickly this was implemented is a testament to how effective the Ransack Gem is.
You add the gem, Ransack your MVC where appropriate, and you’re off to the races. You very rarely need custom routes, helpers, or jobs that come with a hand-built search solution. If you’d like to see more than just the image of the finished project, this blog was based on this video on my YouTube channel.
The Finished Product
