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
Assetto Corsa	Kunos Simulazioni	PC	2014	View
Automobilista	Reiza Studios	PC	2016	View
Burnout Paradise	Criterion Games	Multi	2008	View
Crash Team Racing	Naughty Dog	PlayStation	1999	View
Dirt Rally	Codemasters	Multi	2015	View
F1 23	Codemasters	Multi	2023	View
Forza Horizon 5	Playground Games	Xbox/PC	2021	View
F-Zero	Nintendo EAD	Nintendo	1990	View
Gran Turismo 7	Polyphony Digital	PlayStation	2022	View
Hot Wheels Unleashed	Milestone	Multi	2021	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