--- title: Filterable Index with Slide-Out Detail Drawer slug: filterable-index-with-detail-drawer category: Tables summary: A Retool-style admin index — a condensed table showing only key columns, a collapsible left-hand filter/search panel, and a right-hand slide-out drawer that loads the full show/edit views for a row via one Turbo Frame, no page reloads. tags: [stimulus, turbo, turbo-frames, drawer, filters, search, tables, admin, ux-default] status: stable visibility: public source_project: leo-tozeb.leo.llamapress.ai layers: [view, stimulus_js, controller] related: - title: High-Quality Inline-Editable Table url: /cookbook/inline-editable-table summary: The sibling pattern — edit flat scalar columns directly in the cells. Use THIS guide instead when a row has more fields than the table shows and needs a real multi-field form. - title: Cmd+K Global Search url: /cookbook/global-search-command-palette summary: Cross-table search from anywhere. This guide's filter panel is per-table; the palette is app-wide. They compose well. --- # Filterable Index with Slide-Out Detail Drawer > ⚠️ **Cookbook example — not live code.** (KEEP THIS CALLOUT.) Every code block below > is an **example snippet**, **not part of the llamapress.ai codebase**, and **not > running on this server**. This is a reference recipe for a **Leo instance (an AI coding > agent) to implement in its own app** — read it to understand the pattern, then recreate > it there. The classic "Retool-style" admin screen, built with plain Rails + Hotwire. The index page shows a **condensed table** — only the 4–6 columns a human scans, not every model column. A thin strip on the **left** slides open a **filter panel** (search box, date range, multi-select status/association filters) that submits as a normal GET form, so every filtered view is a shareable URL. Clicking a row slides a **drawer in from the right** and loads that record's **full `show` view — every column — inside a Turbo Frame**. The pencil icon (or the Edit button inside the drawer) swaps the same drawer to the **`edit` form**. Create/update/validation round-trips all happen inside the drawer; the page underneath never reloads. The trick that makes it cheap: the drawer is **one global shell in the layout** with one `turbo_frame_tag "record_drawer"` inside. Your `show.html.erb` and `edit.html.erb` are otherwise-normal views that render their content inside a matching frame tag. Turbo does all the fetching and swapping; ~90 lines of vanilla JS handle open/close/escape/backdrop. Adding the pattern to a second or third resource costs only the index markup — the drawer, its JS, and the partials are shared. > **When to use:** any admin/back-office index where rows have more fields than fit in a > table — CRM records, orders, signals, jobs. The moment you're tempted to cram a 12th > column in, reach for this instead. **When not to:** if rows are flat and every field > fits in the table, inline cell editing is faster (see > [inline-editable-table](/cookbook/inline-editable-table)). If the "detail" is a whole > workspace (tabs, sub-lists), give it a real page instead of a drawer. > The example uses a `Contact` model with > `name / email / company / phone / website / status / notes` columns. The **table shows > only** name, company, status, created — the **drawer shows everything**. Swap in your > own model — see **How to adapt** at the bottom. --- ## The 80/20 in one breath 1. Put a **global drawer shell** (backdrop + fixed right panel + an empty `turbo_frame_tag "record_drawer"`) in `layouts/application.html.erb`, with ~90 lines of vanilla JS: open the drawer whenever that frame receives content, close on ✕ / backdrop / Escape, and navigate the frame when a `` is clicked. 2. Make `show.html.erb` and `edit.html.erb` render their content through a shared `shared/_drawer_content` partial that wraps everything in the same `turbo_frame_tag "record_drawer"`. 3. On the index, give each `` a `data-drawer-url` and point the row's name link and pencil link at the frame with `data: { turbo_frame: "record_drawer" }`. 4. Wrap the whole index page in ONE `form_with method: :get` — the left filter panel's inputs are just fields of that form. A small Stimulus controller slides the panel open/closed from a thin trigger strip. 5. In the controller's `index`, permit the filter params (arrays included), chain `.where` scopes conditionally, and paginate. 6. Scaffold-standard `create`/`update` already work: redirects are followed *inside* the frame, so a successful save swaps the drawer to the fresh `show` view, and validation errors re-render the form in place. Only `destroy` needs to break out to `_top`. --- ## Layer 1 — The layout: one global drawer shell + the JS Add this once, near the end of ``. Every resource reuses it. ```erb <%# app/views/layouts/application.html.erb — just before %> <%# ── Slide-out detail drawer (right side) ─────────────────────────── %> ``` --- ## Layer 2 — Shared partials The frame wrapper every `show`/`edit` renders through: ```erb <%# app/views/shared/_drawer_content.html.erb %> <%# Drawer frame wrapper. Locals: title, subtitle (optional). Yields body. %> <%= turbo_frame_tag "record_drawer" do %>
<%= title %>
<% if local_assigns[:subtitle].present? %>
<%= subtitle %>
<% end %>
<%= yield %>
<% end %> ``` A reusable multi-select for the filter panel: ```erb <%# app/views/shared/_filter_select.html.erb %> <%# Locals: label, name (end it in [] for multi), options ([display, value] pairs), selected %>
``` --- ## Layer 3 — The index view One GET form wraps the entire screen: trigger strip, filter panel, and table. Submitting any filter is a plain page navigation with clean URL params. ```erb <%# app/views/contacts/index.html.erb %> <% content_for :title, "Contacts" %> <% status_options = Contact.statuses.keys.map { |s| [s.humanize, s] } page_size_options = [25, 50, 100, 200, 500] filter_keys = [:q, :start_date, :end_date, :statuses] filters_active = filter_keys.any? { |k| @filters[k].present? } %> <%= form_with url: contacts_path, method: :get, local: true, data: { turbo_frame: "_top" } do |f| %>
<%= link_to new_contact_path, class: "rounded-md bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium px-3 py-1.5 inline-flex items-center gap-2", data: { turbo_frame: "record_drawer" } do %> New Contact <% end %>
<% @contacts.each do |contact| %> <% end %> <% if @contacts.empty? %> <% end %>
Name Company Status Created at Edit
<%= link_to contact.name.to_s.truncate(80), contact_path(contact), class: "hover:text-indigo-600", data: { turbo_frame: "record_drawer" } %> <%= contact.company.presence || "—" %> <% badge_class = case contact.status when "active" then "bg-emerald-50 text-emerald-700 border-emerald-200" when "inactive" then "bg-amber-50 text-amber-700 border-amber-200" else "bg-gray-100 text-gray-500 border-gray-200" end %> <%= contact.status.humanize %> <%= contact.created_at.strftime("%b %-d, %Y") %> <%= link_to edit_contact_path(contact), class: "inline-flex items-center justify-center w-7 h-7 rounded text-gray-400 hover:text-indigo-600 hover:bg-gray-100", title: "Edit", data: { turbo_frame: "record_drawer" } do %> <% end %>
No contacts match these filters
<% end %> ``` --- ## Layer 4 — Stimulus: the left filter panel Width-transition open/close. Collapsed is `w-0 px-0 opacity-0`; the inner `w-64` div keeps the content from reflowing during the animation. ```js // app/javascript/controllers/filter_drawer_controller.js import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ["panel", "filterIcon", "closeIcon"] connect() { this.close() } toggle() { this.panelTarget.classList.contains("w-0") ? this.open() : this.close() } open() { this.panelTarget.classList.remove("w-0", "px-0", "opacity-0") this.panelTarget.classList.add("w-64", "px-4", "opacity-100") this.panelTarget.style.pointerEvents = "" if (this.hasCloseIconTarget) this.closeIconTarget.classList.remove("hidden") if (this.hasFilterIconTarget) this.filterIconTarget.classList.add("hidden") } close() { this.panelTarget.classList.add("w-0", "px-0", "opacity-0") this.panelTarget.classList.remove("w-64", "px-4", "opacity-100") this.panelTarget.style.pointerEvents = "none" if (this.hasCloseIconTarget) this.closeIconTarget.classList.add("hidden") if (this.hasFilterIconTarget) this.filterIconTarget.classList.remove("hidden") } } ``` --- ## Layer 5 — Controller: permit the filters, chain the scopes ```ruby # app/controllers/contacts_controller.rb class ContactsController < ApplicationController before_action :set_contact, only: %i[ show edit update destroy ] def index @filters = index_filter_params scope = Contact.order(created_at: :desc) if @filters[:q].present? q = "%#{Contact.sanitize_sql_like(@filters[:q])}%" scope = scope.where("name ILIKE :q OR email ILIKE :q OR company ILIKE :q", q: q) end scope = scope.where("created_at >= ?", parse_date(@filters[:start_date])) if @filters[:start_date].present? scope = scope.where("created_at <= ?", parse_date(@filters[:end_date])&.end_of_day) if @filters[:end_date].present? scope = scope.where(status: @filters[:statuses]) if @filters[:statuses].present? per_page = @filters[:page_size].to_i.clamp(1, 500) @pagy, @contacts = pagy(scope, limit: per_page) # no pagy? see How to adapt @total_count = Contact.count end def show; end def edit; end def new @contact = Contact.new end # Scaffold-standard create/update work UNCHANGED with the drawer: # the redirect is followed INSIDE the frame → drawer swaps to the fresh show view; # validation errors re-render the form inside the drawer. def create @contact = Contact.new(contact_params) if @contact.save redirect_to @contact, notice: "Contact created." else render :new, status: :unprocessable_entity end end def update if @contact.update(contact_params) redirect_to @contact, notice: "Contact updated.", status: :see_other else render :edit, status: :unprocessable_entity end end def destroy @contact.destroy! redirect_to contacts_path, notice: "Contact deleted.", status: :see_other end private def set_contact @contact = Contact.find(params[:id]) end def contact_params params.require(:contact).permit(:name, :email, :company, :phone, :website, :status, :notes) end def index_filter_params permitted = params.permit(:q, :start_date, :end_date, :page_size, statuses: []).to_h.symbolize_keys permitted[:page_size] = 100 if permitted[:page_size].blank? permitted end # Bad date strings from the URL must not 500 the page. def parse_date(value) Date.parse(value.to_s) rescue ArgumentError, TypeError nil end end ``` --- ## Layer 6 — show & edit: normal views that land in the drawer The drawer shows **all** the columns, even though the table showed four. ```erb <%# app/views/contacts/show.html.erb %> <%= render "shared/drawer_content", title: "Contact", subtitle: @contact.name do %> <% { "Name" => @contact.name, "Email" => @contact.email, "Company" => @contact.company, "Phone" => @contact.phone, "Website" => @contact.website, "Status" => @contact.status.humanize, "Notes" => @contact.notes, "Created" => @contact.created_at.strftime("%b %-d, %Y %H:%M") }.each do |label, value| %>
<%= label %> <%= value.presence || "—" %>
<% end %>
<%= link_to edit_contact_path(@contact), class: "rounded-md bg-indigo-600 hover:bg-indigo-700 text-white text-sm px-3 py-1.5 inline-flex items-center gap-1", data: { turbo_frame: "record_drawer" } do %> Edit <% end %> <%= button_to @contact, method: :delete, class: "rounded-md bg-rose-500 hover:bg-rose-600 text-white text-sm px-3 py-1.5 inline-flex items-center gap-1", form: { data: { turbo_frame: "_top", turbo_confirm: "Delete this contact?" }, class: "inline" } do %> Delete <% end %>
<% end %> ``` ```erb <%# app/views/contacts/edit.html.erb %> <%= render "shared/drawer_content", title: "Editing Contact", subtitle: @contact.name do %> <%= render "form", contact: @contact %>
<%= link_to "Cancel", contact_path(@contact), class: "text-sm text-gray-500 hover:text-gray-700", data: { turbo_frame: "record_drawer" } %>
<% end %> ``` `new.html.erb` is the same shape as `edit` (title "New Contact", render the form). The `_form` partial is a scaffold-standard `form_with model: contact` — no frame attributes needed on it; a form inside a frame targets that frame by default. --- ## Gotchas (the hard-won stuff) - **Reset the frame's `src` on close, not just its content.** Turbo won't re-navigate a frame whose `src` already equals the clicked URL. If close only clears `innerHTML`, clicking the SAME row again silently does nothing and the drawer never reopens. The close handler must do both: `frame.removeAttribute('src'); frame.innerHTML = ''`. - **Open the drawer on `turbo:frame-load`, not on click.** Opening on click flashes an empty white panel while the fetch is in flight. Waiting for the frame to load means the drawer slides in already populated. (Corollary: if the drawer "doesn't open", check the browser console — a failed frame fetch means no `turbo:frame-load` fires.) - **The row-click handler must ignore interactive descendants.** Without the `e.target.closest('a, button, input, select, textarea, [data-no-drawer]')` guard, the pencil link fires AND the row handler fires — double navigation. `[data-no-drawer]` is the escape hatch for any future in-row widget. - **Scaffold redirects are followed INSIDE the frame — usually what you want.** After a successful update, `redirect_to @contact` swaps the drawer to the fresh show view. Trade-off: the table row behind the drawer still shows stale values until the next page navigation. If that matters, break out instead: submit the form with `data: { turbo_frame: "_top" }` to reload the whole filtered index after save. - **`destroy` MUST break out to `_top`.** A delete that responds inside the frame leaves the dead record's row sitting in the table. `button_to ... form: { data: { turbo_frame: "_top" } }` makes the redirect reload the index so the row disappears. - **Wrap the index in ONE GET form and stamp it `data: { turbo_frame: "_top" }`.** Everything in the filter panel is a plain field of that form, so "Apply Filters" is a normal navigation with clean, shareable URL params — and the `_top` stamp guarantees a filter submit never gets captured by the drawer frame. - **Permit array params explicitly.** `params.permit(:q, statuses: [])` — forget the `statuses: []` declaration and multi-selects silently arrive empty. - **Guard date parsing.** A hand-edited URL like `?start_date=garbage` will 500 the index through `Date.parse`. Always rescue to `nil` (the `parse_date` helper above). - **Direct visits to `/contacts/1` still work, but look bare.** The frame renders inline in the main content area (the drawer shell stays closed). Fine for an admin tool; if it bothers you, have `show` redirect HTML requests without a `Turbo-Frame` header to the index. - **Sticky header needs the right scroll container.** `sticky top-0` on `` only works because the `overflow-auto` div is the table's nearest scroll ancestor. Put `overflow-x-auto` on a different wrapper and the header scrolls away. - **Flash inside a frame response is invisible.** A `notice:` on the redirect renders in the layout, which frame responses strip — so nothing shows. Either live without toasts for drawer actions, or embed the flash inside the frame content in a hidden `[data-drawer-flash]` div and have the layout JS move it to a fixed toast host on `turbo:frame-load` (the source project does exactly this). - **Font Awesome isn't guaranteed on every box.** The icons here (`fa-filter`, `fa-times`, `fa-search`, `fa-pen`, `fa-plus`, `fa-trash`) need Font Awesome in the layout. No FA? Use inline SVGs or text glyphs (✕, ✎) — the pattern doesn't care. - **Collapse the panel with `w-0 px-0 opacity-0`, keep a fixed-width inner div.** Animating the outer width while an inner `w-64` div holds the content is what makes the slide smooth — animate the padding/width of the content itself and it reflows mid-animation. --- ## Files this pattern touches ``` app/views/layouts/application.html.erb # drawer shell + CSS + JS (once, global) app/views/shared/_drawer_content.html.erb # frame wrapper for show/edit/new app/views/shared/_filter_select.html.erb # reusable multi-select filter app/views/contacts/index.html.erb # trigger strip + filter panel + table app/views/contacts/show.html.erb # all columns, in the drawer app/views/contacts/edit.html.erb # form, in the drawer app/views/contacts/new.html.erb # form, in the drawer app/javascript/controllers/filter_drawer_controller.js app/controllers/contacts_controller.rb # filter params + scopes ``` ## How to adapt to your schema 1. **Swap the model.** Replace `Contact` and its routes. Pick the 4–6 columns humans scan for the table; everything else lives only in the drawer's show/edit views. 2. **Pick your filters.** Text search + date range + one or two multi-selects covers most admin tables. For an association filter (e.g. by category), render another `shared/filter_select` with `options: Category.order(:name).pluck(:name, :id)` and add `category_ids: []` to the permitted params + a `where(category_id: ...)` scope. 3. **No pagy?** Replace the pagy line with `@contacts = scope.limit(per_page).offset(([params[:page].to_i, 1].max - 1) * per_page)` and simple prev/next links that carry the filter params. Keep the 500 cap — an unbounded index on a big table can eat a small box's RAM. 4. **Second resource?** Reuse the layout drawer, both shared partials, and the Stimulus controller as-is. You only write the new index markup and the show/edit bodies. 5. **Drawer too narrow/wide?** It's one class on the `