Purpose: Makes entire table rows clickable for navigation, while preserving interactive elements within rows.

Features

  • Smart click detection (avoids buttons, links, inputs)
  • Turbo Frame support for SPA-like navigation
  • Proper event handling and cleanup
  • URL and frame value configuration

Static Values

static values = {
  url: String,  // URL to navigate to
  frame: String // Turbo frame target (optional)
}

Usage Examples

Basic Clickable Rows

<table class="w-full">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% @users.each do |user| %>
      <tr data-controller="fx-row-click"
          data-fx-row-click-url-value="<%= user_path(user) %>"
          class="hover:bg-gray-50 cursor-pointer">
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td>
          <%= link_to "Edit", edit_user_path(user), class: "btn btn-sm" %>
          <%= link_to "Delete", user_path(user), method: :delete, class: "btn btn-sm" %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

With Turbo Frame Navigation

<turbo-frame id="user-details">
  <!-- User details will load here -->
</turbo-frame>

<table>
  <tbody>
    <% @users.each do |user| %>
      <tr data-controller="fx-row-click"
          data-fx-row-click-url-value="<%= user_path(user) %>"
          data-fx-row-click-frame-value="user-details">
        <td><%= user.name %></td>
        <td><%= user.email %></td>
      </tr>
    <% end %>
  </tbody>
</table>