Passing an argument to slot at time of rendering

[albiere]

Hey peeps,

I'm not sure the title is very clear, but let me try to give an example of what I'm trying to achieve.

Here's the DataTableComponent that I have:

class DataTableComponent < ViewComponent::Base
  renders_many :columns, ->(field:, options: {}, &block) do
    TableColumnComponent.new(field: field, options: options, &block)
  end

  renders_one :actions, ->(options: {}, &block) do
    TableActionsComponent.new(options: options, &block)
  end

  attr_reader :collection, :pagination

  def initialize(collection:, pagination: true)
    @collection = collection
    @pagination = pagination
  end
end

<div>
  <table class="min-w-full divide-y divide-gray-300">
    <thead>
      <tr>
        <% columns.each do |column| %>
          <%= render column.to_header(collection.model) %>
        <% end %>

        <%= actions.to_action_header %>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 bg-white">
      <% collection.each do |record| %>
        <%= tag.tr id: dom_id(record) do %>
          <% columns.each do |column| %>
            <%= render column.to_cell(record) %>
          <% end %>

          <%= actions.to_action_cell(record) %>
        <% end %>
      <% end %>
    </tbody>
  </table>

  <% if pagination %>
    <%= render TablePaginationComponent.new(collection: collection) %>
  <% end %>
</div>

<%= render DataTableComponent.new(collection: @users) do |table| %>
  <% table.with_column(field: :name) do |record| %>
    <% record.name %>
  <% end %>

  <% table.with_column(field: :email_address) do |record| %>
    <% record.email_address %>
  <% end %>

  <% table.with_column(field: :role) do |record| %>
    <% record.role.capitalize %>
  <% end %>

  <% table.with_actions do |record| %>
    <%= link_to "Edit", edit_admin_user_path(record), class: "mx-2 text-primary-600 hover:text-primary-900" %>
    <%= link_to "Delete", admin_user_path(record), method: :delete, data: { confirm: "Are you sure?" }, class: "mx-2 text-red-600 hover:text-red-900" %>
  <% end %>
<% end %>

In this design, I'm creating a TableColumnComponent that only acts as configuration for the TableCellComponent. See the <%= render column.to_cell(record) %>. Rather than having this intermediate component, I'd like to render the cell directly passing in the record from the collection, which comes from the main component DataTableComponent.

Is there a way to do it? Or am I not seeing something that might be simpler, perhaps?

[joelhawksley]

@albiere I'd be hesitant to use a component just to hold configuration. I'm guessing you might want to build your own way of setting and retrieving configuration.

I'd recommend giving #912 a read.