Datatable Rails Components
Display tabular data in a scrollable, sortable table with filters. All examples use Turbo Frames for seamless server-side sorting and filtering without full page reloads. Includes row selection with bulk actions and pagination integration.
Installation
1. Stimulus Controller
The datatable controller handles sorting via Turbo Frames, preserving filter values and integrating with pagination.
This code is available to Pro users only.
// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!
class SecretMessage {
constructor() {
this.message = "Thanks for checking out Rails Blocks!";
this.compliment = "You're awesome!";
}
reveal() {
console.log(this.message);
return this.compliment;
}
}
const secret = new SecretMessage();
secret.reveal();2. Sort Indicator Partial
Create a reusable sort indicator partial that shows sort direction and loading states:
This code is available to Pro users only.
// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!
class SecretMessage {
constructor() {
this.message = "Thanks for checking out Rails Blocks!";
this.compliment = "You're awesome!";
}
reveal() {
console.log(this.message);
return this.compliment;
}
}
const secret = new SecretMessage();
secret.reveal();Examples
Basic Datatable
A clean datatable with sortable column headers. Click any column header to sort by that column. The sort direction toggles between ascending and descending on subsequent clicks.
This code is available to Pro users only.
<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Message from Rails Blocks</title>
<style>
.secret-message {
font-family: 'Comic Sans MS', cursive;
text-align: center;
padding: 2rem;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.wiggle { animation: wiggle 0.5s ease-in-out infinite; }
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
75% { transform: rotate(-1deg); }
}
</style>
</head>
<body>
<div class="secret-message">
<h1>🎉 Hello, Code Detective! 🕵️</h1>
<p>Thanks for checking out Rails Blocks!</p>
<p>You're clearly someone who pays attention to details.</p>
<p>That's exactly the kind of developer we love!</p>
<div class="cta-section">
<button class="awesome-btn wiggle">You're awesome!</button>
<p><small>Seriously, keep being curious! 🚀</small></p>
</div>
<footer>
<p>Built with ❤️ by the Rails Blocks team</p>
<p>Now go build something amazing!</p>
</footer>
</div>
<script>
console.log("🎊 Bonus points for opening the console!");
console.log("Keep exploring and happy coding! 💻");
</script>
</body>
</html>This code is available to Pro users only.
# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!
class SecretMessage
def initialize
@message = "Thanks for checking out Rails Blocks!"
@compliment = "You're awesome!"
end
def reveal
puts @message
@compliment
end
end
secret = SecretMessage.new
secret.revealDatatable with Row Selection & Pagination
Combines sortable columns with checkbox selection for bulk operations. Select rows to reveal the action bar. Supports shift-click range selection and "select all pages" for virtual selection across paginated data. Uses Checkbox Select All and Pagination.
This component has to be viewed in fullscreen
This code is available to Pro users only.
<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Message from Rails Blocks</title>
<style>
.secret-message {
font-family: 'Comic Sans MS', cursive;
text-align: center;
padding: 2rem;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.wiggle { animation: wiggle 0.5s ease-in-out infinite; }
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
75% { transform: rotate(-1deg); }
}
</style>
</head>
<body>
<div class="secret-message">
<h1>🎉 Hello, Code Detective! 🕵️</h1>
<p>Thanks for checking out Rails Blocks!</p>
<p>You're clearly someone who pays attention to details.</p>
<p>That's exactly the kind of developer we love!</p>
<div class="cta-section">
<button class="awesome-btn wiggle">You're awesome!</button>
<p><small>Seriously, keep being curious! 🚀</small></p>
</div>
<footer>
<p>Built with ❤️ by the Rails Blocks team</p>
<p>Now go build something amazing!</p>
</footer>
</div>
<script>
console.log("🎊 Bonus points for opening the console!");
console.log("Keep exploring and happy coding! 💻");
</script>
</body>
</html>This code is available to Pro users only.
# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!
class SecretMessage
def initialize
@message = "Thanks for checking out Rails Blocks!"
@compliment = "You're awesome!"
end
def reveal
puts @message
@compliment
end
end
secret = SecretMessage.new
secret.revealDatatable with Filters
A datatable with dropdown filters, search input, and server-side filtering via Turbo Frames. Filters auto-submit on change using the included Autosubmit controller. Uses Select and Pagination.
This component has to be viewed in fullscreen
This code is available to Pro users only.
<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Message from Rails Blocks</title>
<style>
.secret-message {
font-family: 'Comic Sans MS', cursive;
text-align: center;
padding: 2rem;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.wiggle { animation: wiggle 0.5s ease-in-out infinite; }
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
75% { transform: rotate(-1deg); }
}
</style>
</head>
<body>
<div class="secret-message">
<h1>🎉 Hello, Code Detective! 🕵️</h1>
<p>Thanks for checking out Rails Blocks!</p>
<p>You're clearly someone who pays attention to details.</p>
<p>That's exactly the kind of developer we love!</p>
<div class="cta-section">
<button class="awesome-btn wiggle">You're awesome!</button>
<p><small>Seriously, keep being curious! 🚀</small></p>
</div>
<footer>
<p>Built with ❤️ by the Rails Blocks team</p>
<p>Now go build something amazing!</p>
</footer>
</div>
<script>
console.log("🎊 Bonus points for opening the console!");
console.log("Keep exploring and happy coding! 💻");
</script>
</body>
</html>This code is available to Pro users only.
// Hey curious person!
// You seem to be sneaking around the code...
// I hope you're enjoying the components!
// Have a great day!
class SecretMessage {
constructor() {
this.message = "Thanks for checking out Rails Blocks!";
this.compliment = "You're awesome!";
}
reveal() {
console.log(this.message);
return this.compliment;
}
}
const secret = new SecretMessage();
secret.reveal();This code is available to Pro users only.
# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!
class SecretMessage
def initialize
@message = "Thanks for checking out Rails Blocks!"
@compliment = "You're awesome!"
end
def reveal
puts @message
@compliment
end
end
secret = SecretMessage.new
secret.revealDatatable with Multi-Select Filters
Multi-select dropdown filters for complex filtering scenarios. Filter by multiple values simultaneously with active filters shown as removable tags. Uses Select in multi-select mode.
This component has to be viewed in fullscreen
This code is available to Pro users only.
<!-- Hey curious person! -->
<!-- You seem to be sneaking around the code... -->
<!-- I hope you're enjoying the components! -->
<!-- Have a great day! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Message from Rails Blocks</title>
<style>
.secret-message {
font-family: 'Comic Sans MS', cursive;
text-align: center;
padding: 2rem;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.wiggle { animation: wiggle 0.5s ease-in-out infinite; }
@keyframes wiggle {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1deg); }
75% { transform: rotate(-1deg); }
}
</style>
</head>
<body>
<div class="secret-message">
<h1>🎉 Hello, Code Detective! 🕵️</h1>
<p>Thanks for checking out Rails Blocks!</p>
<p>You're clearly someone who pays attention to details.</p>
<p>That's exactly the kind of developer we love!</p>
<div class="cta-section">
<button class="awesome-btn wiggle">You're awesome!</button>
<p><small>Seriously, keep being curious! 🚀</small></p>
</div>
<footer>
<p>Built with ❤️ by the Rails Blocks team</p>
<p>Now go build something amazing!</p>
</footer>
</div>
<script>
console.log("🎊 Bonus points for opening the console!");
console.log("Keep exploring and happy coding! 💻");
</script>
</body>
</html>This code is available to Pro users only.
# Hey curious person!
# You seem to be sneaking around the code...
# I hope you're enjoying the components!
# Have a great day!
class SecretMessage
def initialize
@message = "Thanks for checking out Rails Blocks!"
@compliment = "You're awesome!"
end
def reveal
puts @message
@compliment
end
end
secret = SecretMessage.new
secret.revealConfiguration
The datatable controller handles sorting via Turbo Frames with URL-based state management. It preserves filter form values when sorting and integrates seamlessly with pagination.
Controller Values
Configure the datatable controller with these values:
Targets
Actions
Rails Controller Example
Here's how to set up your Rails controller to handle server-side sorting:
class UsersController < ApplicationController
def index
# Get sort parameters from URL
sort_column = params[:column] || "name"
sort_direction = params[:direction] || "asc"
# Validate sort column to prevent SQL injection
allowed_columns = %w[name email role created_at]
sort_column = "name" unless allowed_columns.include?(sort_column)
sort_direction = "asc" unless %w[asc desc].include?(sort_direction)
# Apply sorting to your query
@users = User.order("#{sort_column} #{sort_direction}")
# Pass sort state to the view
@sort_column = sort_column
@sort_direction = sort_direction
# Respond to Turbo Frame requests
respond_to do |format|
format.html
format.turbo_stream
end
end
end
Basic View Setup
Minimal HTML structure for a sortable datatable with Turbo Frame support:
<turbo-frame id="users-table">
<div data-controller="datatable"
data-datatable-frame-value="users-table"
data-datatable-sort-column-value="<%%= @sort_column %>"
data-datatable-sort-direction-value="<%%= @sort_direction %>"
data-datatable-column-param-value="column"
data-datatable-direction-param-value="direction">
<table>
<thead>
<tr>
<!-- Sortable column -->
<th data-datatable-target="header"
data-column="name"
data-action="click->datatable#sort"
class="cursor-pointer">
<span>Name</span>
<%%= render "shared/sort_indicator",
column: "name",
sort_column: @sort_column,
sort_direction: @sort_direction %>
</th>
<!-- Non-sortable column -->
<th>Status</th>
</tr>
</thead>
<tbody>
<%% @users.each do |user| %>
<tr>
<td><%%= user.name %></td>
<td><%%= user.status %></td>
</tr>
<%% end %>
</tbody>
</table>
<!-- Pagination -->
<%%= render "shared/pagy_nav",
pagy: @pagy,
frame_id: "users-table",
preserve_params: request.query_parameters %>
</div>
</turbo-frame>
Combining with Other Components
The datatable works seamlessly with other Rails Blocks components:
Pagination
– Add pagination controls with Pagy integration
Checkbox Select All
– Row selection with bulk actions and "select all pages"
Combobox
– Multi-select filters for complex filtering scenarios
Scroll Area
– Custom scrollbars for better UX on long tables
Features
- Turbo Frame Support: Seamless integration with Hotwire Turbo for instant sorting without full page reloads
- Filter Preservation: Sort operations automatically preserve filter form values in the URL
- Loading States: Built-in loading spinner on column headers during sort operations
- Select All Pages: Virtual selection across paginated data without loading all rows
- URL State Management: Sort state is persisted in URL parameters for bookmarking and sharing
- Empty State Handling: Built-in support for showing empty state when filters return no results