Example of a basic table component

index.html.erb

<p style="color: green"><%= notice %></p>

<h1>Products</h1>

<div id="products">
  <%= render TableComponent.new do |c| %>
    <% @products.each do |product| %>
      <% c.row(product, RowComponent) %>
    <% end %>
  <% end %>
</div>

<%= link_to "New product", new_product_path %>

row_component.html.erb

<tr>
  <% @object.attributes.each do |key, value| %>
    <td id="<%= "#{helpers.dom_id(@object)}_#{key}" %>"><%= value %></td>
  <% end %>
</tr>

row_component.rb

# frozen_string_literal: true

class RowComponent < ApplicationComponent
  def initialize(object)
    @object = object
  end
end

table_component.html.erb

<table>
  <thead>
    <% column_names.each do |column_name| %>
      <th><%= column_name %></th>
    <% end %>
  </thead>
  <tbody>
    <% rows.each do |row| %>
      <%= row %>
    <% end %>
  </tbody>
</table>

table_component.rb

# frozen_string_literal: true

class TableComponent < ApplicationComponent
  renders_many :rows, ->(object, component_class, **params) { component_class.new(object, **params) }

  def column_names
    Product.new.attributes.keys
  end
end