Notes:
- there is a demo app repository
- note the spelling, it’s tabulatr, not tabulator.
Tabulatr aims at making the ever-recurring task of creating listings of ActiveRecord or Mongoid models simple and uniform.
We found ourselves reinventing the wheel in every project we made, by using
- different paging mechanisms,
- different ways of implementing filtering/searching,
- different ways of implementing selecting and batch actions,
- different layouts.
We finally thought that whilst gems like Formtastic or SimpleForm provide a really cool, uniform, and concise way to implement forms, it’s time for a table builder. During a project with Magento, we decided that their general tables are quite reasonable, and enterprise-proven — so that’s our starting point.
Every Tabulatr table consists of the following components:
- a wrapping form
- a ‘Controls Container’ containing the table-controls as
- the paginator,
- the batch_actions,
- the submit button,
- controls to manage selecting/checking/marking,
- an info_text
- The actual table consisting of
- A header row,
- A filter row,
- data rows,
- possibly a selecting/checking/marking column
- possibly action links/buttons
Whilst this is a strong decision, we made everything as-configurable-as-possible, there are roughly 150 options you can use to tweak almost every aspect of Tabulatr.
Tabulatr tries to make these common tasks as simple/transparent as possible:
- paging
- selecting/checking/marking
- filtering
- batch actions
- stateful index pages
We suppose we have a couple of models
- tags has and belong to many products
- vendors have many products
- products belong to vendors and have and belong to many tags
In the products controllers index action we have:
def index @products = Product.find_for_table(params) end
the find_for_table method is injected into ActiveRecord by Tabulatr, it retrieves all relevant data from the params hash automagically. If you want the the table to be stateful, i.e. remembering its sorting/filtering/selecting settings (very useful when processing a certain selection of entries), you can pass the option :stateful => session to the find_for_table call and the data will be stored. Also, a Reset button will be rendered to get rid of the state.
To get a simple Table, all we need to do is
<%= table_for @products do |t| t.column :id t.column :title t.column :price t.column :active t.association :vendor, :name t.association :tags, :title end %>
but the result is pretty fancy, already:
To add a column with checkboxes (thus giving all the “Select …” buttons a reasonable semantics), we simply add a
t.checkbox
row.
To add e.g. edit-buttons, we specify
t.action do |record| link_to "Edit", edit_product_path(record) end
To add a select-popup with batch-actions (i.e., actions that are to be performed on all selected rows), we add an option to the table_for:
<%= table_for @products, :batch_actions => {'foo' => 'Foo', 'delete' => "Delete"} do |t| ... end %>
If you prefer individual buttons for the batch actions over a select input, give the option :batch_actions_type => :button to the table_for call.
To handle the actual batch action, we have to add a block to the find_for_table call in the controller:
@products = Product.find_for_table(params) do |batch_actions| batch_actions.delete do |ids| ids.each do |id| Product.find(id).destroy end redirect_to index_select_products_path() return end batch_actions.foo do |ids| ... do whatever is foo-ish to the records end end
where the ids parameter to the block is actually an Array containing the numeric ids of the currently selected rows.
Installation is pretty straightforward. Just include a line
gem 'tabulatr', '...current version here'
in your applications Gemfile, then run bundle install.
If you want to use a predefined stylesheet and the images for sorting and paging, just issue
$ rails g tabulatr:install create public/stylesheets/tabulatr.css create public/images/tabulatr/buttons_lite_background.png create public/images/tabulatr/pager_arrow_left.gif create public/images/tabulatr/pager_arrow_left_off.gif create public/images/tabulatr/pager_arrow_right.gif create public/images/tabulatr/pager_arrow_right_off.gif create public/images/tabulatr/sort_arrow_down.gif create public/images/tabulatr/sort_arrow_down_off.gif create public/images/tabulatr/sort_arrow_up.gif create public/images/tabulatr/sort_arrow_up_off.gif ------------------------------------------------------- Please note: We have copied a sample stylesheet to public/stylesheets/tabulatr.css to actually use it in your application, please include it in your layout file. You may use s/th like <%= stylesheet_link_tag :tabulatr %> for that. -------------------------------------------------------
Literally every aspect of Tabulatr can be tweaked to fit your needs. You may add or remove components, change the class or other html attributes of the generated html nodes. There are options of several types:
These options are to be specified at the form_for level and change the appearance and behaviour of the table. This is taken from lib/tabulatr/tabulatr/settings.rb
remote: false, # add data-remote="true" to form form_class: 'tabulatr_form', # class of the overall form table_class: 'tabulatr_table', # class for the actual data table sortable_class: 'sortable', # class for the header of a sortable column sorting_asc_class: 'sorting-asc', # class for the currently asc sorting column sorting_desc_class: 'sorting-desc', # class for the currently desc sorting column page_left_class: 'page-left', # class for the page left button page_right_class: 'page-right', # class for the page right button page_no_class: 'page-no', # class for the page no <input> control_div_class_before: 'table-controls', # class of the upper div containing the paging and batch action controls control_div_class_after: 'table-controls', # class of the lower div containing the paging and batch action controls paginator_div_class: 'paginator', # class of the div containing the paging controls batch_actions_div_class: 'batch-actions', # class of the div containing the batch action controls select_controls_div_class: 'check-controls', # class of the div containing the check controls submit_class: 'submit-table', # class of submit button pagesize_select_class: 'pagesize_select', # class of the pagesize select element select_all_class: 'select-btn', # class of the select all button select_none_class: 'select-btn', # class of the select none button select_visible_class: 'select-btn', # class of the select visible button unselect_visible_class: 'select-btn', # class of the unselect visible button select_filtered_class: 'select-btn', # class of the select filtered button unselect_filtered_class: 'select-btn', # class of the unselect filteredbutton info_text_class: 'info-text', # class of the info text div batch_actions_label: 'Batch Action: ', # Text to show in front of the batch action select batch_actions_type: :select, # :select or :button depending on the kind of input you want batch_actions_class: 'batch-action-inputs', # class to apply on the batch action input elements submit_label: 'Apply', # Text on the submit button select_all_label: 'Select All', # Text on the select all button select_none_label: 'Select None', # Text on the select none button select_visible_label: 'Select visible', # Text on the select visible button unselect_visible_label: 'Unselect visible', # Text on the unselect visible button select_filtered_label: 'Select filtered', # Text on the select filtered button unselect_filtered_label: 'Unselect filtered', # Text on the unselect filtered button reset_label: 'Reset', # Text on the reset button info_text: "Showing %1$d, total %2$d, selected %3$d, matching %4$d", # which controls to be rendered above and below the tabel and in which order before_table_controls: [:submit, :paginator, :batch_actions, :select_controls, :info_text], after_table_controls: [], # whih selecting controls to render in which order select_controls: [:select_all, :select_none, :select_visible, :unselect_visible, :select_filtered, :unselect_filtered], image_path_prefix: '/images/tabulatr/', pager_left_button: 'left.gif', pager_left_button_inactive: 'left_off.gif', pager_right_button: 'right.gif', pager_right_button_inactive: 'right_off.gif', sort_up_button: 'up.gif', sort_up_button_inactive: 'up_off.gif', sort_down_button: 'down.gif', sort_down_button_inactive: 'down_off.gif', make_form: true, # whether or not to wrap the whole table (incl. controls) in a form table_html: false, # a hash with html attributes for the table row_html: false, # a hash with html attributes for the normal trs header_html: false, # a hash with html attributes for the header trs filter_html: false, # a hash with html attributes for the filter trs filter: true, # false for no filter row at all paginate: true, # true to show paginator sortable: true, # true to allow sorting (can be specified for every sortable column) selectable: true, # true to render "select all", "select none" and the like action: nil, # target action of the wrapping form if applicable batch_actions: false, # name: value hash of batch action stuff translate: false, # call t() for all 'labels' and stuff, possible values are true/:translate or :localize row_classes: ['odd', 'even'] # class for the trs
header: false, # a string to write into the header cell width: false, # the width of the cell align: false, # horizontal alignment valign: false, # vertical alignment wrap: true, # wraps type: :string, # :integer, :date td_html: false, # a hash with html attributes for the cells th_html: false, # a hash with html attributes for the header cell filter_html: false, # a hash with html attributes for the filter cell filter: true, # false for no filter field, # container for options_for_select # String from options_from_collection_for_select or the like # :range for range spec # :checkbox for a 0/1 valued checkbox checkbox_value: '1', # value if checkbox is checked checkbox_label: '', # text behind the checkbox filter_width: '97%', # width of the filter <input> range_filter_symbol: '–', # put between the <inputs> of the range filter format: false, # a sprintf-string or a proc to do special formatting method: false, # if you want to get the column by a different method than its name link: false, # proc or symbol to make the content a link map: true, # whether to map the call on individual records (true) of an association or call on the list (false) join_symbol: ', ', # symbol used to join the elements of 'many' associations sortable: true # if set, sorting-stuff is added to the header cell
These settings are not supposed to be changed on a per-table basis. This is necessary, because the find_for_table method needs to rely on a priori information.
This hash contains all the information about the naming of the generated form elements. To override them, you should, in an initializer, call
Tabulatr.table_form_options(my_options_hash)
batch_action_name: 'batch_action', # name of the batch action param sort_by_key: 'sort_by_key', # name of key which to search, format is 'id asc' pagination_postfix: '_pagination', # name of the param w/ the pagination infos filter_postfix: '_filter', # postfix for name of the filter in the params hash: xxx_filter sort_postfix: '_sort', # postfix for name of the filter in the params hash: xxx_filter checked_postfix: '_checked', # postfix for name of the checked in the params hash: xxx_filter associations_filter: '__association', # name of the associations in the filter hash method: 'post', # http method for that form if applicable batch_postfix: '_batch', # postfix for name of the batch action select checked_separator: ',' # symbol to separate the checked ids
To override these, you should, in an initializer, call
Tabulatr.paginate_options(my_options_hash)
page: 1, pagesize: 10, pagesizes: [10, 20, 50]
We use
- whiny_hash to handle the options in a fail-early-manner,
- id_stuffer to compress the remembered ids.
- And… eh… It’s an extension for Rails 3, so it might be handy to have a version of Rails 3 and Ruby 1.8.? or 1.9.?.
Since everyhing about the state of the table is intentionally encoded in the URI, the URI may become somewhat bloated if fancy selecting is used. By using id_stuffer, we drastically reduced the size of the URI (that’s the reason we actually made it), but it may still become rather large. This is a problem particulary when using WEBrick, because WEBricks URIs must not exceed 2048 characters. And this limit is hard-coded IIRC. So – If you run into this limitation – please consider using another server. (Thanks to stepheneb for calling my attention back to this.)
There are roughly another 997 bugs in Tabulatr, although we do some testing (see spec/). So if you hunt them, please let me know using the GitHub Bugtracker.
- Check out the latest master to make sure the feature hasn’t been implemented or the bug hasn’t been fixed yet
- Check out the issue tracker to make sure someone already hasn’t requested it and/or contributed it
- Fork the project
- Start a feature/bugfix branch
- Commit and push until you are happy with your contribution
- Make sure to add tests for it. This is important so I don’t break it in a future version unintentionally.
- Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
- Feel free to send a pull request if you think others (me, for example) would like to have your change incorporated into future versions of tabulatr.
Copyright © 2010-2011 Peter Horn, Provideal GmbH
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.