Ransack Table

Needle has *no* chance in this haystack

Includes a Ruby component and corresponding Rails helper

Ruby

This is a paid-only premium component

Premium

Built to work seamlessly with the Ransack gem for advanced searching and sorting functionality. Extends the base Table component with built-in search form integration and sortable headers.

Example

Title	Studio ▲	Platform	Year	Actions
Wreckfest	Bugbear Entertainment	Multi	2018	View
F1 23	Codemasters	Multi	2023	View
Dirt Rally	Codemasters	Multi	2015	View
Burnout Paradise	Criterion Games	Multi	2008	View
Need for Speed Heat	Ghost Games	Multi	2019	View
iRacing	iRacing.com	PC	2008	View
Assetto Corsa	Kunos Simulazioni	PC	2014	View
Hot Wheels Unleashed	Milestone	Multi	2021	View
TrackMania	Nadeo	PC	2020	View
Ridge Racer	Namco	Arcade	1993	View

<% @q = Game.ransack(params[:q])
@games = @q.result.limit(10) %>

<%= turbo_frame_tag "ransack-demo", class: "block w-full" do %>
  <div class="mb-4">
    <%= nk_search_form_for @q, url: request.path, data: { turbo_frame: "ransack-demo" } do |f| %>
      <div class="space-y-3">
        <div class="flex flex-wrap gap-2">
          <%= f.field :studio_eq,
                  as: :select,
                  label: "Studio",
                  options: Game.studios_for_select,
                  include_blank: "All studios",
                  oninput: "this.form.submit()".html_safe,
                  value: params.dig(:q, :studio_eq) %>

          <%= f.field :platform_eq,
                  as: :select,
                  label: "Platform",
                  options: Game.platforms_for_select,
                  include_blank: "All platforms",
                  oninput: "this.form.submit()".html_safe,
                  value: params.dig(:q, :platform_eq) %>

          <%= f.field :release_year_gteq,
                  as: :select,
                  label: "From Year",
                  options: (1990..Date.current.year).to_a.reverse.map { |y| [y, y] },
                  include_blank: "Any year",
                  oninput: "this.form.submit()".html_safe,
                  value: params.dig(:q, :release_year_gteq) %>

          <%= f.field :release_year_lteq,
                  as: :select,
                  label: "To Year",
                  options: (1990..Date.current.year).to_a.reverse.map { |y| [y, y] },
                  include_blank: "Any year",
                  oninput: "this.form.submit()".html_safe,
                  value: params.dig(:q, :release_year_lteq) %>
        </div>

        <div class="flex gap-2 items-center">
          <%= f.field :title_or_studio_cont,
                  as: :search,
                  label: "Search",
                  placeholder: "Title or studio&hellip;",
                  wrapper: {
                    class: "w-full max-w-md",
                  },
                  value: params.dig(:q, :title_or_studio_cont) %>
        </div>

        <div class="flex gap-2 items-center">
          <%= f.submit "Search" %>
          <%= nk_button_link_to "Clear", request.path, icon: "x", target: "_top" %>
        </div>
      </div>

    <% end %>
  </div>

  <%= nk_ransack_table(@q) do |t| %>
    <%= t.thead do %>
      <%= t.tr do %>
        <%= t.sortable_th :title, "Title" %>
        <%= t.sortable_th :studio, "Studio", class: "w-1/5" %>
        <%= t.sortable_th :platform, "Platform", class: "w-1/5" %>
        <%= t.sortable_th :release_year, "Year", default_order: :desc, class: "w-[5em]" %>
        <%= t.th "Actions", class: "text-right", class: "w-[5em]" %>
      <% end %>
    <% end %>
    <%= t.tbody do %>
      <% @games.each do |game| %>
        <%= t.tr do %>
          <%= t.td { tag.strong { game.title } } %>
          <%= t.td { game.studio } %>
          <%= t.td { game.platform } %>
          <%= t.td { game.release_year } %>
          <%= t.td class: "text-right" do %>
            <%= nk_button_link_to "View", "#", size: :xs %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= nk_search_form_for @q do |f| %>
  <%= f.search_field :name_cont, placeholder: "Search..." %>
  <%= f.submit "Search" %>
<% end %>

<%= nk_ransack_table(@q) do |t| %>
  <%= t.thead do %>
    <%= t.tr do %>
      <%= t.sortable_th :name, "Name" %>
      <%= t.sortable_th :email, "Email" %>
      <%= t.sortable_th :created_at, "Created" %>
      <%= t.th "Actions" %>
    <% end %>
  <% end %>
  <%= t.tbody do %>
    <% @users.each do |user| %>
      <%= t.tr do %>
        <%= t.td { user.name } %>
        <%= t.td { user.email } %>
        <%= t.td { l(user.created_at, format: :short) } %>
        <%= t.td { nk_button "Edit", size: :xs } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Install

Premium

Set up Nitro Kit then

bin/rails app:template \
  LOCATION="https://nitrokit.dev/t/premium/ransack_table?license=LICENSE-KEY"

Dependencies

This component adds third-party dependencies:

RubyransackWeb GitHub

Usage


`nk_search_form_for(record, **options) { \|f\| ... }`
Property	Default	Description
`record`	`Ransack search object`	The Ransack search object, typically created with `Model.ransack(params[:q])`.
`**attrs`		HTML attributes for `<form>` element


`nk_ransack_table(record, **attrs) { \|t\| ... }`
Property	Default	Description
`record`	`Ransack search object`	The same Ransack search object used with the search form.
`**attrs`		HTML attributes for `<table>` element


`table.sortable_th(attribute, label = nil, **attrs) { ... }`
Property	Default	Description
`attribute`	`Symbol`	The model attribute to sort by (e.g., `:name`, `:created_at`).
`label`	`String`	Display text for the header. Auto-generated from attribute if not provided.
`default_order`	`:asc or :desc`	Default sort direction when this header is first clicked.
`hide_indicator`	`Boolean`	Whether to hide the sort direction indicator arrows.
`**attrs`		HTML attributes for `<th>` element

Note: Since Ransack Table is a subclass of the base Table component, it accepts all the same APIs and methods. Refer to the Table documentation for additional styling options and methods.

Controller Setup

class UsersController < ApplicationController
  def index
    @q = User.ransack(params[:q])
    @users = @q.result.includes(:profile)
    @pagy, @users = pagy(@users)
  end
end