Datatables

Full Example #

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

Name ▼	Capital	Population▲ ▼	Region	UN Member
Greece	Athens	10,400,720	Europe	Yes
Ghana	Accra	33,742,380	Africa	Yes
Germany	Berlin	83,491,249	Europe	Yes
Georgia	Tbilisi	4,000,921	Asia	Yes
Gambia	Banjul	2,422,712	Africa	Yes
Gabon	Libreville	2,469,296	Africa	Yes
France	Paris	66,351,959	Europe	Yes
Finland	Helsinki	5,650,325	Europe	Yes
Fiji	Suva	900,869	Oceania	Yes
Ethiopia	Addis Ababa	111,652,998	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 #