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
Forza Horizon 5	Playground Games	Xbox/PC	2021	View
Crash Team Racing	Naughty Dog	PlayStation	1999	View
Wipeout	Psygnosis	PlayStation	1995	View
Gran Turismo 7	Polyphony Digital	PlayStation	2022	View
TrackMania	Nadeo	PC	2020	View
Automobilista	Reiza Studios	PC	2016	View
Assetto Corsa	Kunos Simulazioni	PC	2014	View
iRacing	iRacing.com	PC	2008	View
F-Zero	Nintendo EAD	Nintendo	1990	View
Mario Kart 8	Nintendo EPD	Nintendo	2014	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