Datatables

Full Example #

A full example of a datatable with sorting, filtering, and pagination.

Name ▼	Capital	Population▲ ▼	Region	UN Member
Eswatini	Mbabane	1,235,549	Africa	Yes
Estonia	Tallinn	1,369,995	Europe	Yes
Eritrea	Asmara	3,607,000	Africa	Yes
Equatorial Guinea	Malabo	1,668,768	Africa	Yes
El Salvador	San Salvador	6,029,976	Americas	Yes
Egypt	Cairo	107,271,260	Africa	Yes
Ecuador	Quito	18,103,660	Americas	Yes
Dominican Republic	Santo Domingo	10,771,504	Americas	Yes
Dominica	Roseau	67,408	Americas	Yes
Djibouti	Djibouti	1,066,809	Africa	Yes

class CountriesTable < RapidUI::Datatable::Base
  extension :bulk_actions
  extension :export
  extension :select_filters

  adapter :array
  adapter :rails

  columns do |t|
    t.string :name, sortable: true, searchable: true
    t.string :capital
    t.integer :population, sortable: true, sort_order: "desc"
    t.string :region
    t.boolean :un_member, label: "UN Member"
    t.string :openstreetmap, label: "OpenStreetMap"
  end

  self.sort_column = :name
  self.available_per_pages = [ 10, 25, 50, 100 ]
  self.per_page = 10

  # Display options
  self.responsive = true
  self.striped = true
  self.hover = true
  self.bordered = true

  attr_accessor :reset_button_disabled

  self.header_controls = [ :bulk_actions, %i[region_filter search_field_form reset_bulk_action] ]
  self.footer_controls = %i[per_page pagination exports]

  bulk_action :delete

  cell_value :openstreetmap, :html do |record|
    link_to helpers.icon("globe", size: 16), record.openstreetmap, target: "_blank"
  end

  select_filter :region,
    choices: ->(scope) { scope.map(&:region).uniq.sort },
    filter: ->(scope, value) { scope.keep_if { |record| record.region == value } }

  register_control :reset_bulk_action, ->(**kwargs) do
    build(
      RapidUI::Button,
      "Reset",
      path: table.component_path(view_context:, action: "bulk_action", bulk_action: "reset"),
      class: "btn btn-outline-naked",
      disabled: table.reset_button_disabled,
      data: { turbo_stream: true, turbo_method: :post },
    )
  end

  def skip_reset_bulk_action?
    reset_button_disabled.nil?
  end
end

class Components::Controls::DatatablesController < Components::BaseController
  include RapidUI::RendersComponents
  include Components::Controls::DatatablesLayout
  include ReplaysActionsWithCookie

  before_action :set_countries
  before_action :set_full_example_table

  def index
    respond_with_component(@full_example_table)
  end

  def bulk_action
    case params[:bulk_action]
    when "reset"
      @cookie_actions.reset
    when "delete"
      @cookie_actions.bulk_delete(ids: params[:ids])
    else
      raise BadRequestError, "Invalid bulk action: #{params[:bulk_action]}"
    end

    # reload the table with the latest changes
    respond_with_component(set_full_example_table, action: "index")
  end

  private

  def set_countries
    @countries = YAML.load_file(UiDocs::Engine.root.join("db", "countries.yml")).map do |country|
      Country.new(id: country["name"].underscore, **country)
    end
  end

  def set_full_example_table
    id = :full_example
    @cookie_actions = find_cookie_actions("datatables_#{id}", path: url_for(action: "index"))
    countries = @cookie_actions.replay(@countries)

    @full_example_table = ui.build(
      CountriesTable,
      countries,
      id:,
      full_params: params,
      # HACK: should pass this into the control, not the table
      reset_button_disabled: @cookie_actions.cookie_value.blank?,
    )

    add_renderable_component @full_example_table
  end
end

Country = Struct.new(:id, :name, :capital, :population, :region, :un_member, :openstreetmap, keyword_init: true)

Features #

RapidUI::Datatable::Base has these features built-in:

Columns — Define which columns appear in the table, their headers, how values are rendered and grouped.
Pagination — Split the dataset into pages so users can navigate through large result sets.
Search — Provide a search box that filters rows across specified columns.
Sorting — Allow users to sort rows by specific columns.

Extensions #

Optional extensions that add additional features to the datatable.

Bulk Actions — Enable selection of multiple rows and run actions on the selected set.
Export — Let users export the full dataset to CSV or JSON.
Select Filters — Filter rows by a specific value using a dropdown.

Adapters #

Provides support for different data sources and Ruby libraries.

ActiveRecord — use ActiveRecord models as the data source.
Array — use raw Ruby arrays as the data source.
Kaminari — Support for Kaminari pagination.

On this page

Full Example#

Features#

Extensions#

Adapters#

Full Example #

Features #

Extensions #

Adapters #