Advice on utilizing slots for a data table component

[janko]

First of all, thank you for creating ViewComponent, it's a breath of fresh air after regular partials & helpers 🙏🏻

I'm trying to create a generic data table component that will be usable for different types of data. The component currently looks like this:

  <%= render DataTableComponent.new(
    type: "products",
    headers: [nil, "name", "price", "purchase_price"],
    body: @products.map { |product|
      [
        image_tag(product.image_url.to_s),
        link_to(product.name, product_path(product.product_id)),
        number_to_currency(product.price),
        number_to_currency(product.purchase_price),
      ]
    },
    right_align: %w[price purchase_price],
    sortable: %w[name price purchase_price],
    pagination: @pagy
  ) %>

This works, but it's not great that headers and data are separate, and that alignment and sortability of individual columns are specified separately.

I'm wondering if there is a way to use slots to achieve something like this:

  <%= render DataTableComponent.new(
    type: "products",
    items: @products,
    pagination: @pagy
  ) do |c| %>
    <% c.column(name: nil) do |product| %>
      <%= image_tag product.image_url.to_s, class: "w-10 h-10" %>
    <% end %>

    <% c.column(name: "name", sortable: true) do |product| %>
      <%= link_to product.name, product_path(product.product_id), class: "text-lightblue-700" %>
    <% end %>

    <% c.column(name: "price", sortable: true, right_align: true) do |product| %>
      <%= number_to_currency product.price %>
    <% end %>

    <% c.column(name: "purchase_price", sortable: true, right_align: true) do |product| %>
      <%= number_to_currency product.price %>
    <% end %>
  <% end %>

[ledermann]

Is there any news here? I am also interested in this use case.

[boardfish]

Hi @ledermann, and thanks for bearing with us @janko - I'm interested in pulling together some sample code for this, so I'll try to do that soon.

It seems like you'd like to be able to:

• provide templates for table cells from the outside
• configure attributes for each column of the table
• provide pagination support

On that basis, here's some early advice. Create a component to represent a row of the table, and render one for each product, e.g.:

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

<% c.products.each do |product| %>
  <% c.row(product, RowComponent) %>
<% end %>

That way, your data table will be able to handle many different types of rows. sortable is probably right to be an initialize parameter as in your first example, but you may need to do things within your row components to enable that behavior.

[boardfish]

Finally got around to this, apologies for the delay! Here's a really basic starting point. Note that lambda slots can use methods from the component itself, so you could use that to inform how the row components are constructed in renders_many :rows and manually specify which fields on the model you'd like to use.

Hope that's helpful to you! If you find it raises more questions than answers, feel free to respond here and I'll help where I can.

[RolandStuder]

If someone comes accross that, I made this possible, it's not really workable with slots, but you can work around it, this blog post describes how:
https://rstuder.ch/2023-supercharged-table-component/

[robbevp]

This is a great approach! I came to something quite similar, but had to use some internals from view components, since I couldn't figure out how to capture the content of the block. Happy to be able to clean this up with the way you access view_context