Details Table

The devil's in the details

Includes a Ruby component and corresponding Rails helper

Ruby

This is a paid-only premium component

Premium

The Details Table component displays individual record details in a clean key-value format. Perfect for showing detailed information about any ActiveRecord object with automatic handling of different data types including images, booleans, dates, URLs, and more.

Basic Example

Title	Mario Kart 8
Studio	Nintendo EPD
Platform	Nintendo
Release year	2014
Genre	Arcade Racing
Rating	9.2
Multiplayer
Online multiplayer

<%
  # For the example, we'll create a sample game object
  game = Game.find_by(title: "Mario Kart 8") || Game.first
%>

<%= render NitroKit::DetailsTable.new(game) do |details| %>
  <% details.field :title %>
  <% details.field :studio %>
  <% details.field :platform %>
  <% details.field :release_year %>
  <% details.field :genre %>
  <% details.field :rating %>
  <% details.field :multiplayer %>
  <% details.field :online_multiplayer %>
<% end %>

<%= render NitroKit::DetailsTable.new(@game) do |details| %>
  <%= details.field :title %>
  <%= details.field :studio %>
  <%= details.field :platform %>
  <%= details.field :release_year %>
  <%= details.field :genre %>
  <%= details.field :rating %>
  <%= details.field :multiplayer %>
<% end %>

Custom Field Values

You can customize field values and labels by providing your own values or using block syntax for complex formatting.

Box art
Title	Rocket League
Studio	Psyonix
Price	Free
Rating	8.7/10
Website url	https://www.rocketleague.com/
Description	A high-powered hybrid of arcade-style soccer and vehicular mayhem with easy-to-understand controls and fluid physics-driven competition.
Age	10
Created at	September 01, 2025 21:42

<%
  # For the example, we'll create a sample game object
  game = Game.find_by(title: "Rocket League") || Game.first
%>

<%= render NitroKit::DetailsTable.new(game) do |details| %>
  <% details.field :box_art %>
  <% details.field :title %>
  <% details.field :studio %>
  
  <% details.field :price, game.price %>
  <% details.field :rating, game.formatted_rating %>
  
  <% details.field :website_url %>
  <% details.field :description %>
  
  <% details.field "Age", game.release_age do |age| %>
    <%= age %> years old
  <% end %>
  
  <% details.field :created_at %>
<% end %>

<%= render NitroKit::DetailsTable.new(@game) do |details| %>
  <%= details.field :title %>
  <%= details.field :price, @game.price %>
  <%= details.field :rating, @game.formatted_rating %>
  
  <%= details.field "Age", @game.release_age do |age| %>
    <%= age %> years old
  <% end %>
  
  <%= details.field :website_url %>
  <%= details.field :description %>
<% end %>

Bulk Field Assignment

Use fields to quickly add multiple standard fields at once.

Box art
Title	Mario Kart 8
Studio	Nintendo EPD
Platform	Nintendo
Release year	2014
Genre	Arcade Racing
Price	$59.99
Rating	9.2
Metacritic score	88
Multiplayer
Online multiplayer
Description	The definitive version of Mario Kart 8 and the biggest leap in the Mario Kart series. Get the complete Mario Kart experience.
Website url	https://www.nintendo.com/store/products/mario-kart-8-deluxe-switch/
Created at	September 01, 2025 21:42
Updated at	September 01, 2025 21:51

<%
  # For the example, we'll create a sample game object with all available data
  game = Game.find_by(title: "Mario Kart 8") || Game.first
%>

<%= render NitroKit::DetailsTable.new(game) do |details| %>
  <% details.fields :box_art, :title, :studio, :platform, :release_year, :genre %>
  <% details.field :price, game.price %>
  <% details.fields :rating, :metacritic_score %>
  <% details.fields :multiplayer, :online_multiplayer %>
  <% details.field :description %>
  <% details.field :website_url %>
  <% details.fields :created_at, :updated_at %>
<% end %>

<%= render NitroKit::DetailsTable.new(@game) do |details| %>
  <%= details.fields :title, :studio, :platform, :release_year %>
  <%= details.field :price, @game.price %>
  <%= details.fields :rating, :metacritic_score %>
  <%= details.fields :multiplayer, :online_multiplayer %>
  <%= details.field :website_url %>
<% end %>

Install

Premium

Set up Nitro Kit then

bin/rails app:template \
  LOCATION="https://nitrokit.dev/t/premium/details_table?license=LICENSE-KEY"

Usage


`render NitroKit::DetailsTable.new(record, route_base: nil, **attrs) { \|details\| ... }`
Property	Default	Description
`record`	`ActiveRecord object`	The record whose details you want to display.
`route_base`	`Symbol, Array, or nil`	Route prefix for ActiveRecord object links. Use `:admin` for admin routes or `[:admin, :v2]` for nested namespaces.
`**attrs`		HTML attributes for `<table>` element


`details.field(attribute, value = nil, &block)`
Property	Default	Description
`attribute`	`Symbol or String`	The attribute name to display. Used as both the field key and to fetch the value from the record (if no custom value provided).
`value`	`Any`	Optional custom value to display instead of `record.send(attribute)`.
`block`	`Proc`	Optional block for custom formatting. Block receives the field value as an argument.


`details.fields(*attributes)`
Property	Default	Description
`attributes`	`Array of Symbols`	Multiple attribute names to display using their default values and formatting.

Helper Method


`nk_details_table(record, route_base: nil, **attrs) { \|details\| ... }`
Property	Default	Description
`record`	`ActiveRecord object`	The record whose details you want to display.
`route_base`	`Symbol, Array, or nil`	Route prefix for ActiveRecord object links. Examples: `:admin`, `[:admin, :v2]`, or `nil` for default routes.
`**attrs`		HTML attributes for `<table>` element

Automatic Value Formatting

The Details Table automatically formats different data types:

URLs: Automatically converted to clickable links
Booleans: Displayed as disabled checkboxes (checked/unchecked)
Dates/Times: Formatted using Rails' localization helpers
ActiveStorage attachments: Images shown as thumbnails, files as filename
ActiveRecord objects: Linked with smart naming (configurable via route_base)
Arrays/Collections: Items joined with commas
Nil values: Displayed as "N/A" in muted text
Numbers: Decimal values between 0-1 formatted as percentages