Datatables

Full Example #

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

Name▲	Capital	Population▲ ▼	Region	UN Member
Nepal	Kathmandu	29,911,840	Asia	Yes
Netherlands	Amsterdam	18,100,436	Europe	Yes
New Zealand	Wellington	5,324,700	Oceania	Yes
Nicaragua	Managua	6,803,886	Americas	Yes
Niger	Niamey	26,312,034	Africa	Yes
Nigeria	Abuja	223,800,000	Africa	Yes
North Korea	Pyongyang	25,950,000	Asia	Yes
North Macedonia	Skopje	1,822,612	Europe	Yes
Norway	Oslo	5,606,944	Europe	Yes
Oman	Muscat	5,343,630	Asia	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 #