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

ViewportFull width
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

ViewportFull width
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(:nickname, label: "Public nickname", 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

ViewportFull width
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

ViewportFull width
Rubytest/dummy/app/components/gallery/components/details_table_page.rb
render NitroKit::Card.new(id: "gallery-details-table-card") do |card|
  card.title("Workspace owner", level: 3)
  card.full_width do
    render NitroKit::ProgressiveImage.new(
      attachment: demo_attachment,
      alt: "Abstract indigo workspace illustration",
      size: :sm,
      id: "gallery-details-table-image"
    )
  end
  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