warped 0.2.0 → 1.0.1

data/app/views/warped/_column.html.erb

@@ -0,0 +1,35 @@
+<%# locals: (path:, column:, turbo_action:) %>
+
+<div class="warped-table--table--cell">
+  <% if controller.class.include?(Warped::Controllers::Sortable::Ui) && sorted? && sortable_field?(column.parameter_name) %>
+    <% html_form_options = {}.tap do |hash| %>
+      <% hash.merge!(filter_url_params) if try(:filtered?) %>
+      <% hash.merge!(paginate_url_params) if try(:sorted?) %>
+      <% hash.merge!(search_url_params) if try(:searched?) %>
+    <% end %>
+
+    <% column_sorted = sorted_field?(column.parameter_name) %>
+    <% sort_direction = column_sorted ? current_action_sort_value.opposite_direction : default_sort_direction %>
+
+    <%= button_to(path, { "data-turbo-action" => turbo_action, method: :get, params: html_form_options.merge(sort_key: column.parameter_name, sort_direction: sort_direction) }) do %>
+      <% if column_sorted %>
+        <% if current_action_sort_value.asc? %>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+          </svg>
+        <% else %>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+          </svg>
+        <% end %>
+      <% else %>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+        </svg>
+      <% end %>
+      <span> <%= column.display_name %> </span>
+    <% end %>
+  <% else %>
+    <%= column.display_name %>
+  <% end %>
+</div>

data/app/views/warped/_filters.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (path:, turbo_action:, **options) %>
+
+<% opts = options.deep_dup %>
+
+<% data = opts.delete(:data) { {} } %>
+<% data.merge!(controller: "filters #{data[:controller]}", filters_filter_outlet: ".warped-filters--filter", turbo_action:) %>
+
+<% html = opts.extract!(:html) %>
+<% html_class = opts.delete(:class) %>
+<% html.merge!(class: "warped-filters #{html_class}") %>
+
+<%= form_with url: path, method: :get, html:, data:, **opts do |f| %>
+  <%= f.submit "Filter", class: "warped-filters--submit" %>
+  <%= f.button "Clear", type: :reset, class: "warped-filters--clear", data: { action: "filters#clearAll" } %>
+
+  <% current_action_filters.each do |filter| %>
+    <%= render "warped/filters/filter", form: f, filter: filter %>
+  <% end %>
+
+  <%= render "warped/hidden_fields", form: f, modules: %i[sortable searchable] %>
+<% end %>

data/app/views/warped/_hidden_fields.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (form:, modules:) %>
+
+<% Array.wrap(modules).each do |module_name| %>
+  <% if module_name.to_sym == :searchable && try(:searched?) %>
+    <%= form.hidden_field search_param, value: search_term %>
+  <% elsif module_name.to_sym == :filterable && try(:filtered?) %>
+    <% filter_url_params.each do |key, value| %>
+      <%= form.hidden_field key, value: %>
+    <% end %>
+  <% elsif module_name.to_sym == :sortable && try(:sorted?) %>
+    <% sort_url_params.each do |key, value| %>
+      <%= form.hidden_field key, value: %>
+    <% end %>
+  <% elsif module_name.to_sym == :pageable && try(:paginated?) %>
+    <% paginate_url_params.each do |key, value| %>
+      <%= form.hidden_field key, value: %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/warped/_pagination.html.erb

@@ -0,0 +1,34 @@
+<%# locals: (path:, turbo_action:, **options) %>
+
+<% opts = options.deep_dup %>
+<% pagination_class = "warped--pagination #{opts.delete(:class)}" %>
+
+<% uri = URI(path) %>
+
+<% html_form_options = {}.tap do |hash| %>
+  <% hash.merge!(sort_url_params) if try(:sorted?) %>
+  <% hash.merge!(filter_url_params) if try(:filtered?) %>
+  <% hash.merge!(search_url_params) if try(:searched?) %>
+<% end %>
+
+<%= tag.nav(class: pagination_class, role: "navigation", **opts) do %>
+  <% if pagination[:prev_page] -%> <%= button_to("Previous", path, { "data-turbo-action" => turbo_action, method: :get, form_class: "warped--pagination--btn", params: html_form_options.merge(page: pagination[:prev_page]) }) %>
+  <% else -%> <span class="warped--pagination--btn warped--pagination--btn-disabled" disabled>Previous</span>
+  <% end -%>
+
+  <% pagination[:series].each do |item| -%>
+    <% if    item.is_a?(Integer) -%> <%= button_to(item, path, { "data-turbo-action" => turbo_action, method: :get, form_class: "warped--pagination--btn warped--pagination--btn-inactive", params: html_form_options.merge(page: item) }) %>
+    <% elsif item.is_a?(String) -%> <span class="warped--pagination--btn warped--pagination--btn-active"><%= item %></span>
+    <% elsif item == :gap %>
+      <span class="warped--pagination--btn warped--pagination--btn-gap">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+        </svg>
+      </span>
+    <% end -%>
+  <% end -%>
+
+  <% if pagination[:next_page] -%>  <%= button_to("Next", path, { "data-turbo-action" => turbo_action, method: :get, form_class: "warped--pagination--btn", params: html_form_options.merge(page: pagination[:next_page]) }) %>
+  <% else -%>  <span class=" warped--pagination--btn warped--pagination--btn-disabled" disabled>Next</span>
+  <% end -%>
+<% end %>

data/app/views/warped/_row.html.erb

@@ -0,0 +1,19 @@
+<%# locals: (resource:, columns:, path: nil, actions: nil) -%>
+
+<% element_tag = path.present? ? :a : :div %>
+
+<%= content_tag element_tag, **{ class: "warped-table--table--row" }.merge!(href: path).compact_blank do %>
+  <% if (block = yield).present? %>
+    <%= block %>
+  <% else %>
+    <% columns.each do |column| %>
+      <%= render "warped/cell" do %>
+        <%= column.content_for(resource) %>
+      <% end %>
+    <% end %>
+
+    <% if actions.present? %>
+      <%= render "warped/actions", actions:, resource: %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/warped/_search.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (path:, turbo_action:, **options) %>
+
+<% opts = options.deep_dup %>
+
+<% html = opts.extract!(:html) %>
+<% html.merge!(class: "warped-searchbar #{opts.delete(:class)}") %>
+
+<% data = opts.delete(:data) { {} } %>
+<% data.merge!(turbo_action:) %>
+
+<%= form_with url: path, method: :get, data:, html:, **opts do |f| %>
+  <%= f.button type: :submit, class: "warped-searchbar--button", name: nil do %>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+    </svg>
+  <% end %>
+
+  <%= f.text_field search_param, autocomplete: "off", value: search_term, class: "warped-searchbar--input" %>
+
+  <%= render "warped/hidden_fields", form: f, modules: %i[pageable sortable filterable] %>
+<% end %>

data/app/views/warped/_table.html.erb

@@ -0,0 +1,52 @@
+<%# locals: (collection:, path:, columns:, turbo_action: :replace, actions: [], **options) %>
+
+
+<%= tag.div class: 'warped-table' do %>
+  <div class="warped-table--controls">
+    <% if controller.class.include?(Warped::Controllers::Searchable::Ui) %>
+      <%= render "warped/search", path:, turbo_action:, **(options[:search].presence || {}) %>
+    <% end %>
+
+    <% if controller.class.include?(Warped::Controllers::Filterable::Ui) %>
+      <%= render "warped/filters", path:, turbo_action:, **(options[:filters].presence || {}) %>
+    <% end %>
+  </div>
+
+
+
+  <% table_opts = options[:table]&.deep_dup.presence || {} %>
+  <% table_class = "warped-table--table #{table_opts.delete(:class)}" %>
+
+  <div class="warped-table--container">
+    <%= tag.div class: table_class, **table_opts do %>
+      <div class="warped-table--table--header">
+        <div class="warped-table--table--row">
+          <% columns.each do |column| %>
+            <%= render "warped/column", column:, path:, turbo_action: %>
+          <% end %>
+
+          <% if actions.any? %>
+            <div class="warped-table--table--cell">
+              Actions
+            </div>
+          <% end %>
+        </div>
+      </div>
+      <div class="warped-table--table--row-group">
+        <div class="warped-table--table--empty-row">
+          <div class="warped-table--table--cell">
+            Whoops! Nothing over here!
+          </div>
+        </div>
+        <% if (block = yield).present? %>
+          <%= block %>
+        <% else %>
+          <% collection.each do |resource| %>
+            <%= render "warped/row", resource:, columns:, actions: %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <%= render("warped/pagination", path:, turbo_action:, **(options[:pagination].presence || {})) if controller.class.include?(Warped::Controllers::Pageable::Ui) %>
+<% end %>

data/app/views/warped/filters/_filter.html.erb

@@ -0,0 +1,40 @@
+<%# locals: (form:, filter:) %>
+
+<% filter_value = current_action_filter_values.find { |v| v.filter.name == filter.name } %>
+
+<div class="warped-filters--filter <%= 'warped-filters--filter-inactive' if filter_value.blank? %>" data-controller="filter" data-filter-filter-outlet=".warped-filters--filter" data-filter-empty-class="warped-filters--filter-inactive" data-filter-collapsed-class="warped-filters--filter--panel-collapsed" data-action="keydown.esc@window->filter#close click@window->filter#clickOutside">
+  <div class="warped-filters--filter--icon" data-action="click->filter#toggle">
+    <% if !filter_value.nil? %>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+    <% else %>
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+    <% end %>
+  </div>
+
+  <%= form.label filter.parameter_name, class: "warped-filters--filter--label" %>
+
+  <div data-filter-target="badgeValue" class="warped-filters--filter--value">
+    <span class="warped-filters--filter--value--values" data-filter-target="relation">
+      <%= filter_value&.relation if !filter_value&.empty? %>
+    </span>
+
+    <span class="warped-filters--filter--value--values" data-filter-target="value">
+      <%= ": #{filter_value&.value}" if !filter_value&.html_value.nil? %>
+    </span>
+  </div>
+
+  <div class="warped-filters--filter--panel-collapsed warped-filters--filter--panel" data-filter-target="panel">
+    <%= form.select "#{filter.parameter_name}.rel", options_for_select(filter.relations, include_blank: true, selected: filter_value&.relation), {}, class: "warped-filters--filter--panel--select", data: { filter_target: "relationInput", action: "change->filter#changeRelation" } %>
+    <%= tag :input, type: filter.html_type, name: filter.parameter_name, value: filter_value&.html_value, class: "warped-filters--filter--panel--input", data: { filter_target: "valueInput", action: "keyup->filter#changeValue" } %>
+
+    <span class="warped-filters--filter--panel--remove" data-action="click->filter#clear click->filter#close">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+    </span>
+  </div>
+</div>

data/config/importmap.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+pin_all_from File.expand_path("../app/assets/javascript", __dir__)

data/docs/controllers/FILTERABLE.md

@@ -23,6 +23,82 @@ GET /users?email=john@example.com
 GET /users?created_at=2021-01-01
 ```
 
+## Adding type-safety to the fields
+
+The `filterable_by` method, accepts keyword arguments to be passed. The keyword arguments are the field names and the type to cast the query parameter to. This is useful to prevent invalid queries from being executed on the database.
+
+```ruby
+class UsersController < ApplicationController
+  include Warped::Controllers::Filterable
+
+  filterable_by name: { kind: :string }, email: { kind: :string }, created_at: { kind: :date }
+
+  def index
+    users = filter(User.all)
+    render json: users
+  end
+end
+```
+
+When passing a value to the query parameter, the value will be cast to the specified type. If casting fails, the query parameter will be ignored.
+
+If the strict flag is passed to the filterable_by method, then it will raise a `Filter::ValueError`.
+
+```ruby
+class UsersController < ApplicationController
+  include Warped::Controllers::Filterable
+
+  filterable_by created_at: { kind: :date }, strict: true
+
+  def index
+    users = filter(User.all)
+    render json: users
+  end
+end
+```
+
+Request examples:
+```
+GET /users?created_at=2021-01-01 # returns users created at 2021-01-01
+GET /users?created_at=not_a_date # Raises a Filter::ValueError, with the message 'not_a_date' cannot be casted to date
+```
+
+## Handling invalid filter values in strict mode
+
+```ruby
+class UsersController < ApplicationController
+  include Warped::Controllers::Filterable
+
+  rescue_from Filter::ValueError, with: :render_invalid_filter_value
+  rescue_from Filter::RelationError, with: :render_invalid_filter_relation
+
+  filterable_by age: { kind: :integer }, strict: true
+
+  def index
+    users = filter(User.all)
+    render json: users
+  end
+
+  private
+
+  # default handler for invalid filter values
+  def render_invalid_filter_value(exception)
+    render json: { error: exception.message }, status: :bad_request
+  end
+
+  def render_invalid_filter_relation(exception)
+    render json: { error: exception.message }, status: :bad_request
+  end
+end
+```
+
+Request examples:
+```
+GET /users?age=18 # returns users with age 18
+GET /users?age=not_an_integer
+# returns a 400 (Bad Request), with the message "'not_an_integer' cannot be casted to integer"
+```
+
 ## Referencing tables in the filterable fields
 
 The `filterable_by` method can also be used to reference fields in associated tables. For example, to filter the users by the name of the company they work for, the following can be done:
@@ -31,7 +107,7 @@ The `filterable_by` method can also be used to reference fields in associated ta
 class UsersController < ApplicationController
   include Warped::Controllers::Filterable
 
-  filterable_by :name, :email, :created_at, 'companies.name'
+  filterable_by :name, 'companies.name', "companies.created_at" => { kind: :date_time }
 
   def index
     users = filter(User.joins(:company))
@@ -44,6 +120,7 @@ Request examples:
 ```
 GET /users?name=John
 GET /users?companies.name=Acme
+GET /users?companies.created_at=2021-01-01T00:00:00
 ```
 
 ## Renaming the filter query parameters
@@ -55,7 +132,9 @@ you can specify the query parameter to use for each field:
 class UsersController < ApplicationController
   include Warped::Controllers::Filterable
 
-  filterable_by 'companies.name' => :company_name, 'users.name' => :user_name
+  filterable_by 'companies.name' => { kind: :string, alias_name: :company_name },
+                'users.name' => { kind: :string, alias_name: :user_name }
+
 
   def index
     users = filter(User.join(:company))
@@ -78,7 +157,7 @@ By default, the `filter` method will use the `eq` filter method to filter the re
 class UsersController < ApplicationController
   include Warped::Controllers::Filterable
 
-  filterable_by :name, :age
+  filterable_by name: { kind: :string }, age: { kind: :integer }
 
   def index
     users = filter(User.all)

data/docs/controllers/views/PARTIALS.md

@@ -0,0 +1,285 @@
+# Using Warped built-in view partials
+
+In order to use the built in Warped view partials, you need to include the `Warped::Controllers::<WarpedConcern>::Ui` module in your controller.
+
+## Warped::Controllers::Filterable::Ui
+```ruby
+# app/controllers/users_controller.rb
+class UsersController < ApplicationController
+  include Warped::Controllers::Filterable::Ui
+
+  def index
+    @users = filter(User.all)
+  end
+end
+```
+
+```erb
+<!-- app/views/users/index.html.erb -->
+
+<%= render "warped/filters", path: users_path, turbo_action: "replace" %>
+
+<% @users.each do |user| %>
+  <p><%= user.first_name %>, <%= user.last_name %></p>
+<% end %>
+```
+
+The `warped/_filters` partial uses [strict locals](https://edgeguides.rubyonrails.org/action_view_overview.html#strict-locals), and it accepts:
+- `path` - the path to the controller action to which the filters will be applied
+- `turbo_action` - the Turbo action to be used when submitting the form (replace/advance)
+
+The partial also accepts the following optional locals:
+- `class`: the class to be applied to the form
+- `data`: a hash of data attributes to be applied to the form
+Any other locals that are passed to the partial will be passed to the `form_with` helper.
+
+The `warped/_filters` partial will also render a set of hidden fields to store the sortable and searchable values, if the controller action called `#search` or `#sort`
+
+## Warped::Controllers::Pageable::Ui
+```ruby
+# app/controllers/users_controller.rb
+class UsersController < ApplicationController
+  include Warped::Controllers::Pageable::Ui
+
+  def index
+    @users = paginate(User.all)
+  end
+end
+```
+
+```erb
+<!-- app/views/users/index.html.erb -->
+
+<% @users.each do |user| %>
+  <p><%= user.first_name %>, <%= user.last_name %></p>
+<% end %>
+
+<%= render "warped/pagination", path: users_path, turbo_action: "replace" %>
+```
+
+The `warped/_pagination` partial uses [strict locals](https://edgeguides.rubyonrails.org/action_view_overview.html#strict-locals), and it accepts:
+- `path` - the path to the controller action to which the pagination will be applied
+- `turbo_action` - the Turbo action to be used when submitting the form (replace/advance)
+
+Any other locals that are passed to the partial will be passed to the pagination <nav> tag.
+
+The `warped/_pagination` partial will also render a set of hidden fields for each button, to store the sortable, searchable and filterable values, if the controller action called `#search`, `#sort` or `#filter`.
+
+## Warped::Controllers::Searchable::Ui
+```ruby
+# app/models/user.rb
+
+class User < ApplicationRecord
+
+  scope :search, ->(query) {
+    where("first_name ILIKE :query OR last_name ILIKE :query", query: "%#{query}%")
+  }
+end
+```
+
+```ruby
+# app/controllers/users_controller.rb
+class UsersController < ApplicationController
+  include Warped::Controllers::Searchable::Ui
+
+  def index
+    @users = search(User.all)
+  end
+end
+```
+
+```erb
+<!-- app/views/users/index.html.erb -->
+
+<%= render "warped/search", path: users_path, turbo_action: "replace" %>
+
+<% @users.each do |user| %>
+  <p><%= user.first_name %>, <%= user.last_name %></p>
+<% end %>
+```
+
+The `warped/_search` partial uses [strict locals](https://edgeguides.rubyonrails.org/action_view_overview.html#strict-locals), and it accepts:
+- `path` - the path to the controller action to which the search will be applied
+- `turbo_action` - the Turbo action to be used when submitting the form (replace/advance)
+Any other locals that are passed to the partial will be passed to the search `form_with` helper.
+
+The `warped/_search` partial will also render a set of hidden fields to store the sortable, filterable and pagination values, if the controller action called `#sort`, `#filter` or `#paginate`.
+
+## Warped::Controllers::Tabulatable::Ui
+```ruby
+# app/controllers/users_controller.rb
+class UsersController < ApplicationController
+  include Warped::Controllers::Tabulatable::Ui
+
+  def index
+    @users = tabulate(User.all)
+  end
+
+  def show
+    @user = User.find(params[:id])
+  end
+
+  def destroy
+    User.find(params[:id]).destroy
+    redirect_to users_path
+  end
+end
+```
+
+```erb
+<!-- app/views/users/index.html.erb -->
+
+<%= render "warped/table", collection: @users, path: users_path, turbo_action: "replace",
+                           columns: [
+                              Warped::Table::Column.new(:first_name, "First Name"),
+                              Warped::Table::Column.new(:last_name, "Last Name")
+                           ],
+                           actions: [
+                              Warped::Table::Action.new(:show, ->(user) { user_path(user) }),
+                              Warped::Table::Action.new(:destroy, ->(user) { user_path(user) }, data: { turbo_method: "delete", turbo_confirm: "Are you sure?" })
+                           ] %>
+```
+
+The `warped/_table` partial uses [strict locals](https://edgeguides.rubyonrails.org/action_view_overview.html#strict-locals), and it accepts:
+- `collection` - the collection of records to be displayed
+- `path` - the path to the controller action to which the table filtering/sorting/searching/pagination will be applied
+- `turbo_action` - the Turbo action to be used when submitting the form (replace/advance)
+- `columns` - an array of `Warped::Table::Column` objects that define the columns to be displayed
+- `actions` - an array of `Warped::Table::Action` objects that define the actions to be displayed for each record
+Any other locals under the keys `:table`, `:filters`, `:search` or `:pagination` are passed to the respective partials.
+Example:
+```erb
+<%= render "warped/table", collection: @users, path: users_path, turbo_action: "replace",
+                           columns: [
+                             Warped::Table::Column.new(:first_name, "First Name"),
+                             Warped::Table::Column.new(:last_name, "Last Name")
+                           ],
+                           actions: [
+                             Warped::Table::Action.new(:show, ->(user) { user_path(user) }),
+                             Warped::Table::Action.new(:destroy, ->(user) { user_path(user) }, data: { turbo_method: "delete", turbo_confirm: "Are you sure?" })
+                           ],
+                           table: { class: "table" },
+                           filters: { class: "filters" },
+                           search: { class: "search" },
+                           pagination: { class: "pagination" } %>
+```
+This will render the table with the class `table`, and it will forward the locals:
+- `class: "filters"` to the `warped/_filters` partial
+- `class: "search"` to the `warped/_search` partial
+- `class: "pagination"` to the `warped/_pagination` partial
+
+### Using the `Warped::Table::Column` class
+The `Warped::Table::Column` class is used to define the columns to be displayed in the table. The initializer accepts the following arguments:
+- `parameter_name` - the name of the parameter/alias_name passed to the `filterable_by`/`sortable_by`/`tabulatable_by` methods
+- `display_name`(optional) - the name to be displayed in the table header
+- `method`(optional) - this can be a symbol or a lambda. If the method is a symbol, it will be called on the record to get the value. If the method is a lambda, it will be called with the record as an argument.
+
+### Using the `Warped::Table::Action` class
+The `Warped::Table::Action` class is used to define the actions to be displayed for each record in the table. The initializer accepts the following arguments:
+- `name` - the name of the action. If the name is a symbol or a string, it will be used as the action name. If the name is a lambda, it will be called with the record as an argument.
+- `path` - the path to the controller action to which the action will be applied. If the path is a lambda, it will be called with the record as an argument.
+
+
+## Using turbo-frames with the partials
+The partials can be used with turbo-frames to provide a seamless experience, regardless of the action used in the controller.
+
+```ruby
+# app/controllers/user_controller.rb
+class UserController < ApplicationController
+  include Warped::Controllers::Tabulatable::Ui
+
+  tabulatable_by title: { kind: :string }, published_at: { kind: :date_time },
+
+  def show
+    @user = current_user
+    @posts = tabulate(@user.posts)
+  end
+end
+```
+
+```erb
+<!-- app/views/users/show.html.erb -->
+<h1><%= @user.name %></h1>
+
+<%= turbo_frame_tag dom_id(@posts) do %>
+  <%= render "warped/table", collection: @posts, path: user_path, turbo_action: "advance",
+                             columns: [
+                               Warped::Table::Column.new(:title, "Title"),
+                               Warped::Table::Column.new(:published_at, "Published At")
+                             ],
+                             actions: [
+                               <%# pass target: "_top" to the action, to escape from the turbo_frame navigation %>
+                               Warped::Table::Action.new(:show, ->(post) { post_path(post) }, target: "_top")
+                             ] %>
+<% end %>
+```
+
+## Styling the partials
+The partials are designed to be as unobtrusive as possible, and they can be styled using the classes passed as locals to the partials, or by modifying the partials css classes.
+
+The css classes are in the following files:
+– `app/assets/stylesheets/warped/base.css` - the base css variables
+- `app/assets/stylesheets/warped/filters.css` - the css classes for the filters partial
+- `app/assets/stylesheets/warped/pagination.css` - the css classes for the pagination partial
+- `app/assets/stylesheets/warped/search.css` - the css classes for the search partial
+- `app/assets/stylesheets/warped/table.css` - the css classes for the table partial
+
+You can override the css classes by adding the following to your css file:
+```css
+@import "warped/base.css";
+@import "warped/filters.css";
+@import "warped/pagination.css";
+@import "warped/search.css";
+@import "warped/table.css";
+```
+
+## Moving logic from the view to the controller
+Using the "warped/_table" can introduce a lot of logic in the view. To move the logic to the controller, you can instantiate the Columns and Actions in the controller and use them in the view as instance variables.
+
+```ruby
+# app/controllers/users_controller.rb
+class UsersController < ApplicationController
+  include Warped::Controllers::Tabulatable::Ui
+
+  helper_method :columns_for_index, :actions_for_index
+
+  tabulatable_by first_name: { kind: :string },
+                 last_name: { kind: :string },
+                 email: { kind: :string },
+                 created_at: { kind: :date_time, alias_name: :registered_at },
+                 status: { kind: :date_time }
+
+  def index
+    users_query = User.all.select("users.*, CASE WHEN confirmed_at IS NULL THEN 'Inactive' ELSE 'Active' END AS status")
+    @users = tabulate(users_query)
+  end
+
+  ...
+
+  private
+
+  def columns_for_index
+    [
+      Warped::Table::Column.new(:first_name, "First Name"),
+      Warped::Table::Column.new(:last_name, "Last Name"),
+      Warped::Table::Column.new(:email, "Email"),
+      Warped::Table::Column.new(:registered_at, "Registered At"),
+      Warped::Table::Column.new(:status, "Status")
+    ]
+  end
+
+  def actions_for_index
+    [
+      Warped::Table::Action.new(:show, ->(user) { user_path(user) }),
+      Warped::Table::Action.new(:edit, ->(user) { edit_user_path(user) }),
+      Warped::Table::Action.new(:destroy, ->(user) { user_path(user) }, data: { turbo_method: "delete", turbo_confirm: "Are you sure?" })
+    ]
+  end
+```
+
+```erb
+<!-- app/views/users/index.html.erb -->
+<%= render "warped/table", collection: @users, path: users_path, turbo_action: "replace",
+                           columns: columns_for_index,
+                           actions: actions_for_index %>
+```