Turbo frame for table rows

1

Pretty new to Hotwire, wondering if what I am thinking is doable.

I am looking into reducing load times for a table where row clicks turn into an edit form which changes the contents of the clicked row. The current issue is the whole table has to reload when only one row has changed. Is it possible for me to somehow wrap the rows in frames so only that row changes?

I saw this post from Dec 2020: How to wrap a table row with a turbo frame?. Where someone said this will take support from the core team. Wondering anyone knows of ways to do it currently.

2

You don’t need to wrap them in a frame - a turbo stream can now target any DOM id or classes so you can simply target the row id.

3

You possibly could use a Turbo-stream inside a Turbo-frame

For example.

Original Page:

<table>
  <tr id="row_1">
    <td><a href="edit_row/1" data-turbo-frame="row-frame">Edit</a></td>
  </tr>
  <tr id="row_2">
    <td><a href="edit_row/2" data-turbo-frame="row-frame">Edit</a></td>
  </tr>
</table>

<turbo-frame id="row-frame"></turbo-frame>

EDIT LINK GET RESPONSE

<turbo-frame id="row-frame">
  <turbo-stream action="replace" target="row_1">
    <template>
      <tr id="row_1">
        <td>
          <form action="">
            <input type="text">
            <input type="submit">
          </form>
        </td>
      </tr>
    </template>
  </turbo-stream>
</turbo-frame>

FORM POST Turbo-Stream RESPONSE

<turbo-stream action="replace" target="row_1">
  <template>
    <tr id="row_1">
      <td><a href="edit_row/1" data-turbo-frame="row-frame">Edit</a></td>
    </tr>
  </template>
</turbo-stream>