turbo_frame_tag on Table element

[michelson]

Hi , I'm trying Turbo , simple crud, table list:

example code:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Key</th>
      <th>User</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <%= turbo_frame_tag "rooms" do %>
      <% @rooms.each do |room| %>
        <%= render room %>
      <% end %>
    <% end %>
  </tbody>
</table>

but the frame tag is rendered separate from the list , why ?

note the red line is the frame tag border style:

[maricavor]

Late to the party, non rails user here...

Just encountered this issue, and was able to get row edit working with this simple setup

table.html

<turbo-frame id="edit-target"></turbo-frame>

<table class="table">
  <tbody>
    <tr id="row-1">
      <td>
        <a href="/edit.html" data-turbo-frame="edit-target"> <!-- target the dummy frame -->
          Edit me
        </a>
      </td>
    </tr>
  </tbody>
</table>

edit.html

<turbo-frame id="edit-target">
  <turbo-stream action="replace" target="row-1"> <!-- replacing row to edit with stream -->
    <template>
      <tr id="row-1">
        <td>
          <input value="Ok"></input>
        </td>
      </tr>
    </template>
  </turbo-stream>
</turbo-frame>

Wow! Thanks a lot! I did not know you can put turbo_stream tag inside turbo_frame. This solved all the issues with tables.

[david-harkness]

Have turbo stream taget a tbody

table
  tbody id='newrows'
    = render partial: 'a_row'

---

= turbo_stream.append 'newrows' do
  = render partial: 'a_row'

[johnofsydney]

Here is my simple way of adding a row to a table. Maybe not best practice, but works. Overview: Documents are added to an application via API. The Document index page is updated via hotwire

The view is the document index page at app/views/documents/index.html.erb Here is the entire index:

<%= turbo_stream_from :documents %>

<section class="section">
  <div class="container">

    <div class="table-container">
      <table class="table is-fullwidth is-striped is-hoverable">
        <thead>
          <tr>
            <th>Description</th>
            <th>Link</th>
            <th>Token</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="document-list">
          <% @documents.each do |document| %>
            <tr>
              <td><%= document.description %></td>
              <td><%= document.link %></td>
              <td><%= document.token %></td>
              <td><%= link_to "Show", document, class: "button is-small is-info" %></td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</section>

Documents are broadcast to the index page using the trigger of callback: after_create_commit. Here is the entire document model:

 class Document < ApplicationRecord
  # this hotwire event requires redis to be running

  after_update_commit do
    broadcast_replace_to(
      :document,
      target: "main-document-image",
      html: "<img id='main-document-image' src='#{self.link}' alt='Document Image'>",
    )
  end

  after_create_commit do
    broadcast_append_to(
      :documents,
      target: "document-list",
      html: "
        <tr>
          <td>#{self.description}</td>
          <td>#{self.link}</td>
          <td>#{self.token}</td>
          <td><a href='/documents/#{self.id}' class='button is-small is-info'>Show</a></td>
        </tr>
      "
    )
  end
end

• I did not need to add an id to the table row, neither in the erb, nor in HTML I am sending in the append stream.
• I did not need to add is="turbo-frame" anywhere.

Happy to hear any improvements, just noting this basic version for anyone who finds this thread.