Datatables

Full Example #

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

Name▲	Capital	Population▲ ▼	Region	UN Member
Senegal	Dakar	18,593,258	Africa	Yes
Serbia	Belgrade	6,567,783	Europe	Yes
Seychelles	Victoria	122,729	Africa	Yes
Sierra Leone	Freetown	9,077,691	Africa	Yes
Singapore	Singapore	6,110,200	Asia	Yes
Slovakia	Bratislava	5,413,813	Europe	Yes
Slovenia	Ljubljana	2,130,638	Europe	Yes
Solomon Islands	Honiara	750,325	Oceania	Yes
Somalia	Mogadishu	19,655,000	Africa	Yes
South Africa	Pretoria	63,100,945	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 #