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
OutRun	Sega AM2	Arcade	1986	View
F-Zero	Nintendo EAD	Nintendo	1990	View
Ridge Racer	Namco	Arcade	1993	View
Wipeout	Psygnosis	PlayStation	1995	View
Crash Team Racing	Naughty Dog	PlayStation	1999	View
Burnout Paradise	Criterion Games	Multi	2008	View
iRacing	iRacing.com	PC	2008	View
Assetto Corsa	Kunos Simulazioni	PC	2014	View
Mario Kart 8	Nintendo EPD	Nintendo	2014	View
Dirt Rally	Codemasters	Multi	2015	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