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
Project Cars 3	Slightly Mad Studios	Multi	2020	View
OutRun	Sega AM2	Arcade	1986	View
Automobilista	Reiza Studios	PC	2016	View
Rocket League	Psyonix	Multi	2015	View
Wipeout	Psygnosis	PlayStation	1995	View
Gran Turismo 7	Polyphony Digital	PlayStation	2022	View
Forza Horizon 5	Playground Games	Xbox/PC	2021	View
Mario Kart 8	Nintendo EPD	Nintendo	2014	View
F-Zero	Nintendo EAD	Nintendo	1990	View
Crash Team Racing	Naughty Dog	PlayStation	1999	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