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>