Datatables

Full Example #

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

Name ▼	Capital	Population▲ ▼	Region	UN Member
Togo	Lomé	8,095,498	Africa	Yes
Timor-Leste	Dili	1,391,221	Asia	Yes
Thailand	Bangkok	65,859,640	Asia	Yes
Tanzania	Dodoma	68,153,004	Africa	Yes
Tajikistan	Dushanbe	10,499,000	Asia	Yes
São Tomé and Príncipe	São Tomé	209,607	Africa	Yes
Syria	Damascus	25,620,000	Asia	Yes
Switzerland	Bern	9,082,848	Europe	Yes
Sweden	Stockholm	10,605,098	Europe	Yes
Suriname	Paramaribo	616,500	Americas	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 #