HotwireDatatables

HotwireDatatables is a modern, Hotwire-powered DataTables implementation for Ruby on Rails that provides sorting, searching, and pagination capabilities with a beautiful UI.

Features

  • 🚀 Fast, server-side processing
  • 🔍 Real-time search with PostgreSQL full-text search
  • ↕️ Column sorting
  • 📄 Pagination with Pagy
  • 🎨 Beautiful UI with Tailwind CSS
  • ⚡ Hotwire/Turbo powered for smooth updates
  • 🛠️ Easy to customize and extend

Requirements

  • Ruby >= 3.0.0
  • Rails >= 7.0
  • PostgreSQL database
  • Turbo Rails
  • Tailwind CSS

Installation

Add this line to your application's Gemfile:

gem 'hotwire_datatables'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install hotwire_datatables

Then run the installer:

$ rails generate hotwire_datatables:install

Usage

  1. Include the Datatable concern in your model:
class Employee < ApplicationRecord
  include Datatable

  datatable_columns :name, :position, { age: "Employee Age" }
  datatable_search_columns :name, :position, :office
end
  1. Set up your controller:
class EmployeesController < ApplicationController
  include Pagy::Backend

  def index
    @employees = Employee.all
    @employees = @employees.search(params[:query]) if params[:query].present?
    @pagy, @employees = pagy @employees.reorder(sort_column(Employee.get_datatable_columns.map(&:name)) => sort_direction)
  end
end
  1. Add the datatable to your view:
<%= render partial: "hotwire_datatables/datatable", locals: {
  collection: @employees,
  columns: Employee.get_datatable_columns,
  frame_id: "employees_table",
  row_partial: "employee_row",
  pagy: @pagy
} %>
  1. Create a row partial for your records (_employee_row.html.erb):
<%= render partial: "hotwire_datatables/datatable_row", locals: {
  record: record,
  columns: columns
} %>

Configuration

You can configure HotwireDatatables in config/initializers/hotwire_datatables.rb:

HotwireDatatables.configure do |config|
  config.per_page = 10
  config.per_page_options = [10, 25, 50, 100]
  config.default_direction = :asc
  config.enable_search = true
  config.enable_sorting = true
  config.table_class = "table"
  config.header_class = "table-header-group"
  config.row_class = "table-row-group"
  config.cell_class = "table-cell pr-4"
end

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/yourusername/hotwire_datatables.

License

The gem is available as open source under the terms of the MIT License.

Code of Conduct

Everyone interacting in the HotwireDatatables project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.