Tablets

Installation

Add this line to your application's Gemfile:

gem 'tablets'

Include tablets and jquery datatables scripts in your app/assets/application.js:

//= require dataTables/jquery.dataTables
//= require tablets

Include jquery datatables styles in your app/assets/application.css:

 *= require dataTables/jquery.dataTables

Mount engine in config/routes.rb:

mount Tablets::Engine, at: '/tablets'

Examples

In app/tablets/posts.rb:

Tablets.register :posts do
  # Authorization logic.
  authorize do |controller|
    controller.current_user.id == params[:author_id]
  end

  # jQuery-datatables options overrides.
  options do
    { order: [0, 'asc'] }
  end

  # Columns definitions.
  columns do
    [{
      title: 'Title',
      data: :title,
      order: 'posts.title',
      search: 'posts.title',
      options: { className: 'post-title' }
    }, {
      title: 'User',
      data: ->(user) { [user.first_name, user.last_name].compact.join(' ') },
      order: ['users.first_name', 'users.last_name'],
      search: ['users.first_name', 'users.last_name']
    }]
  end

  # HTML for details area.
  details do |post|
    post.content.html_safe
  end

  # Process records before extracting data.
  process do |posts|
    posts.map { |post| post.use_wrapper }
  end

  # Data relation.
  relation do |params|
    # Note: User joined to enable ordering.
    User.joins(:users).where(user_id: params[:user_id])
  end
end

In app/views/posts/index.html.erb:

<%= render_tablet :posts, user_id: current_user.id %>

In app/assets/javascripts/posts.js:

$('.tablet[name="posts"]').on('click', 'tbody > tr[role=row]', function() {
  Tablets.toggleDetails($(this).closest('tr'));
});

Use '.tablet.has-details' for all tablets that has details.

JavaScript callbacks

Called just before datatable initialization.

Tablets.Callbacks.beforeInit = function(element, options) {};

Called after datatable initialization.

Tablets.Callbacks.afterInit = function(table) {};

JavaScript API

Open details for row.

Tablets.toggleDetails($tr);