Flexible rows for TableComponent

custom_table_component.html.erb

<tr>
  <td class="border p-3">
    <%= tag.p tag.strong @data.name %>
    <%= tag.p @data.description %>
  </td>
  <td class="border p-3"><%= @data.qty %></td>
  <td class="border p-3"><%= @data.tax %></td>
  <td class="border p-3"><%= @data.unit_cost %></td>
</tr>

custom_table_component.rb

# frozen_string_literal: true

class CustomTableRowComponent < ViewComponent::Base
  with_collection_parameter :data

  def initialize(data:)
    @data = data
  end

end

table_component.html.erb

<table class="<%= classes %>">

  <% if @headings.present? %>
    <thead class='bg-gray-300 font-medium'>
      <tr>
        <% @headings.each do |h| %>
          <%= tag.th h, class: "border p-3" %>
        <% end %>
      </tr>
    </thead>
  <% end %>

  <tbody>
      <%= content %>
  </tbody>
</table>

table_component.rb

# frozen_string_literal: true

class TableComponent < ViewComponent::Base

  def initialize(headings:, rows_items:nil, classname: nil)
    @headings = headings
    @rows_items = rows_items
    @classname = classname
  end

  def classes
    c = ["w-full"]
    c << @classname

    c.join(' ')
  end

end

use_table_component.html.erb

<%= render TableComponent.new(
  headings: [ 'Name and Description', 'Quantity', 'Tax', 'Total'],
  classname: 'my-4'
) do %>
  <%= render CustomTableRowComponent.with_collection(custom_data) %>
<% end %>