Details table

Record attributes with deterministic Rails values and explicit custom rendering.

Source: app/components/nitro_kit/details_table.rb
API: NitroKit::DetailsTable.new(record) { |details| details.field(:name); details.fields(:email, :role) }

Resolved fields

Attributes resolve through public Ruby methods; labels and Rails-friendly value formatting remain deterministic.

Member profile

Name	Ada Lovelace
Email	[email protected]
Active	Yes
Joined on	February 12, 2024
Score	98.6
Website	https://example.test/ada
Roles	Workspace owner, Billing administrator

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/details_table_page.rb

render NitroKit::DetailsTable.new(PROFILE, id: "gallery-details-table-profile") do |details|
  details.fields(:name, :email, :active, :joined_on, :score, :website, :roles)
end

Omitted and explicit values

An omitted value reads the record. An explicit nil remains nil, and a field block receives that resolved value.

Nil and overrides

Nickname	Not provided
Public website	Intentionally not published
Quality score	98.6 / 100

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/details_table_page.rb

render NitroKit::DetailsTable.new(PROFILE, id: "gallery-details-table-values") do |details|
  details.field(:nickname)
  details.field(:website, label: "Public website", value: nil) do |value|
    value.nil? ? "Intentionally not published" : value
  end
  details.field(:score, label: "Quality score", value: "98.6 / 100")
end

Application rendering

Blocks own application-specific presentation while the table retains its record structure.

Status and actions

Account	Ada Lovelace
Status	Active
Contact	[email protected]

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/details_table_page.rb

render NitroKit::DetailsTable.new(PROFILE, id: "gallery-details-table-custom") do |details|
  details.field(:name, label: "Account") do |name|
    strong { name }
  end
  details.field(:status) do |status|
    render NitroKit::Badge.new(
      status.to_s.humanize,
      id: "gallery-details-table-status-badge",
      color: :success,
      size: :sm
    )
  end
  details.field(:email, label: "Contact") do |email|
    a(href: "mailto:#{email}") { email }
  end
end

Compositions

Details and progressive media can form one classless application-owned record surface.

Workspace record card

Workspace owner

Name	Ada Lovelace
Email	[email protected]
Joined on	February 12, 2024

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/details_table_page.rb

render NitroKit::Card.new(id: "gallery-details-table-card") do |card|
  card.full do
    render NitroKit::ProgressiveImage.new(
      attachment: demo_attachment,
      alt: "Abstract indigo workspace illustration",
      size: :sm,
      id: "gallery-details-table-image"
    )
  end
  card.title("Workspace owner", level: 3)
  card.body do
    render NitroKit::DetailsTable.new(PROFILE, id: "gallery-details-table-card-values") do |details|
      details.fields(:name, :email, :joined_on)
    end
  end
end

Under pressure

A hostile member record: a hundred-character name, a 130-character email, an unbroken slug, a webhook URL as link text, RTL and CJK values, huge and negative amounts, and an eighty-character label; then the same record in a small container.

Hostile record

Name	Dr. Maximiliana Wolfeschlegelsteinhausenbergerdorff-Featherstonehaugh von Hohenzollern-Sigmaringen III
Email	maximiliana.wolfeschlegelsteinhausenbergerdorff+billing.notifications.eu-west-2026@finance.department.enterprise-holdings-international.example
Workspace slug	Wolfeschlegelsteinhausenbergerdorffwelchevoralternwarengewissenhaftschaferswessenschafewarenwohlgepflege
Regional data residency, retention, and lawful-basis preferences for every workspace	https://enterprise-holdings-international.example/workspaces/analytical-engines-research-and-production/settings/integrations/webhooks/deliveries/whd_01J8ZK3Q9W7RX2M5N6P8T4V1Y0/attempts/3?include=headers,body,response&expand=endpoint.owner
محمد عبد الرحمن الهاشمي القحطاني	山田太郎（プラットフォームエンジニアリング）
Outstanding balance	$9,999,999,999,999.99
Credit	−$1,234,567.89
Notes	This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text. This description keeps going well past the point where a sensible product would have stopped, because real customers paste release notes, legal disclaimers, and entire support tickets into fields that were designed for a single line of text.
Joined on	December 31, 2999
Status	Regional data residency, retention, and lawful-basis preferences for every workspace

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/details_table_page.rb

member = Gallery::Hostile.members(1).first

render NitroKit::DetailsTable.new(member, id: "gallery-details-table-hostile", label: "Hostile member details") do |details|
  details.field(:name)
  details.field(:email) { |email| a(href: "mailto:#{email}") { email } }
  details.field(:slug, label: "Workspace slug", value: Gallery::Hostile::LONG_WORD)
  details.field(:webhook, label: Gallery::Hostile::LONG_LABEL, value: Gallery::Hostile::LONG_URL) do |url|
    a(href: url) { url }
  end
  details.field(:owner, label: Gallery::Hostile::RTL_NAME, value: Gallery::Hostile::CJK_NAME)
  details.field(:balance, label: "Outstanding balance", value: Gallery::Hostile::HUGE_MONEY)
  details.field(:credit, label: "Credit", value: Gallery::Hostile::NEGATIVE_MONEY)
  details.field(:notes, label: "Notes", value: Gallery::Hostile::LONG_PARAGRAPH)
  details.field(:joined_on)
  details.field(:status) do |status|
    render NitroKit::Badge.new(
      Gallery::Hostile::BADGE_LABELS.fetch(1),
      id: "gallery-details-table-hostile-status",
      color: status == :active ? :success : :warning,
      size: :sm
    )
  end
end

Hostile record in a small container

Name	Dr. Maximiliana Wolfeschlegelsteinhausenbergerdorff-Featherstonehaugh von Hohenzollern-Sigmaringen III
Email	maximiliana.wolfeschlegelsteinhausenbergerdorff+billing.notifications.eu-west-2026@finance.department.enterprise-holdings-international.example
Regional data residency, retention, and lawful-basis preferences for every workspace	https://enterprise-holdings-international.example/workspaces/analytical-engines-research-and-production/settings/integrations/webhooks/deliveries/whd_01J8ZK3Q9W7RX2M5N6P8T4V1Y0/attempts/3?include=headers,body,response&expand=endpoint.owner
Wolfeschlegelsteinhausenbergerdorffwelchevoralternwarengewissenhaftschaferswessenschafewarenwohlgepflege	$9,999,999,999,999.99

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/details_table_page.rb

render NitroKit::Container.new(size: :sm, id: "gallery-details-table-hostile-narrow-container") do
  render NitroKit::DetailsTable.new(
    Gallery::Hostile.members(1).first,
    id: "gallery-details-table-hostile-narrow",
    label: "Hostile member details in a small container"
  ) do |details|
    details.fields(:name, :email)
    details.field(:webhook, label: Gallery::Hostile::LONG_LABEL, value: Gallery::Hostile::LONG_URL) do |url|
      a(href: url) { url }
    end
    details.field(:balance, label: Gallery::Hostile::LONG_WORD, value: Gallery::Hostile::HUGE_MONEY)
  end
end

Component contract

Constructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.

docs/component_contracts.md · NitroKit::DetailsTable

Constructor-specific options: record, caption: nil, label: nil, empty_text: nil, boolean_labels: nil, route_base: nil, id: nil
Root and closed vocabulary: div[data-nk=details-table] containing a slotted Table
Compound contract: Requires one or more fields with unique keys, declared inside the render block. field(attribute, label: nil, value:) distinguishes omitted and explicit nil values; a block receives the resolved value. fields(*attributes) adds ordinary resolved fields. caption: names the table visibly and label: names it through aria-label; empty and boolean copy remain caller-owned keywords; when omitted they come from nitro_kit.details_table.empty, .boolean_true, and .boolean_false.

Relevant patterns

Application conventions this component belongs to. Each summary is the leading section of its pattern document.

docs/patterns/inline_edit.md · docs/patterns/crud_resource.md

Inline edit

Wrap the complete resource region in one stable Turbo Frame.
Show, edit, validation failure, success, and Cancel return the same frame ID.
Invalid updates render with 422; successful updates redirect with 303.
Use a Turbo Stream only when the update changes another region too. if editing render UI::ProjectForm.new(project) else div do h2 { project.name } render NitroKit::Button.new("Edit", href: edit_project_path(project)) end end

Complete product resource

Define the resource, tenant boundary, actor, lifecycle, visibility, and states before writing views.
Build index, form, detail, destructive action, and tests as one product surface.
Use one shell toolbar title and one application-owned page gutter; do not repeat hierarchy across nested components.
Scope every lookup through the current tenant and model meaningful lifecycle transitions as noun resources.

System rules for coding agents

Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.

test/dummy/app/components/gallery/agent_rules.rb

View agent instructions

Nitro Kit 2.0 is a gem-owned, Phlex-only UI system for Rails. Render components directly: render NitroKit::Button.new("Save", variant: :primary).
Compose Nitro components inside application-owned Phlex classes. Public initializers and declared slots are the component API; private methods are not.
Public options are explicit keywords, and enumerated options are closed vocabularies. Invalid names or values raise ArgumentError; this component's accepted options are in the contract above.
Pass native attributes through their typed boundary: html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.
Nitro owns NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.
If an integration truly requires a class, use desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".
Every root emits data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.
Customize components with documented --nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.
Use NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.
Preserve native elements and accessibility semantics. State is exposed through native semantics and ARIA first, and through data-state when styling or behavior also needs it.