application_component.rb

# frozen_string_literal: true

class ApplicationComponent < ViewComponent::Base

end

blue_row_component.html.erb

<div style="background: blue;">Blue row: <%= content %></div>

blue_row_component.rb

# frozen_string_literal: true

class BlueRowComponent < RowComponent

end

red_row_component.html.erb

<div style="background: red;">Red row: <%= content %></div>

red_row_component.rb

# frozen_string_literal: true

class RedRowComponent < RowComponent

end

row_component.html.erb

<div><%= content %></div>

row_component.rb

# frozen_string_literal: true

class RowComponent < ApplicationComponent

end

table_component.html.erb

<div>Table color is <%= @color %></div>
<% rows.each do |row| %><%= row %><% end %>

table_component.rb

# frozen_string_literal: true

class TableComponent < ApplicationComponent
  renders_many :rows, -> { @color == :red ? RedRowComponent.new : BlueRowComponent.new }

  def initialize(color:)
    @color = color       
  end
end