Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save AndreaBarghigiani/60a8589f6f55ed518780c99d45219a9a to your computer and use it in GitHub Desktop.
Save AndreaBarghigiani/60a8589f6f55ed518780c99d45219a9a to your computer and use it in GitHub Desktop.
Flexible rows for TableComponent
<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>
# frozen_string_literal: true
class CustomTableRowComponent < ViewComponent::Base
with_collection_parameter :data
def initialize(data:)
@data = data
end
end
<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>
# 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
<%= render TableComponent.new(
headings: [ 'Name and Description', 'Quantity', 'Tax', 'Total'],
classname: 'my-4'
) do %>
<%= render CustomTableRowComponent.with_collection(custom_data) %>
<% end %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment