Creating a Rails admin page with DataTables

I wanted to create an admin panel for an existing Rails app and I was interested in the activeadmin gem. This would apparently create an admin console to control all of the CRUD operations, for all of the models, in one place.

The problem is that my app was already quite developed, and I'd already created CRUD routes, and bound the operations to a signed-in user using Devise. Trying to retro-fit activeadmin proved to be complicated, with a cascading series of errors. Next time, I'll build the application around activeadmin rather than trying to shoe-horn it in.

So I decided to create my own admin panel, which proved to be relatively easy. Here are the steps I took.

Create an admin controller

The main models in my application are Videos and Events, so I created a new AdminController which had access to all objects in these models, and ensured that only signed-in users can access this:

class AdminController < ApplicationController
  before_action :authenticate_user!
  def index
    @videos = Video.all
    @events = Event.all
  end
end

Download Datatables

DataTables is an excellent JS plugin which adds loads of useful functionality (such as sorting, filtering, and pagination) to an existing table. I installed the JS, CSS and images into the relevant folders in my app.

Create an admin view

I created a new view at /views/admin/index.html.haml and loaded in the DataTables JS file using = javascript_include_tag 'jQuery.dataTables.min'.

The next step was to create tables for the videos and events, in the admin#index view:

%table#videos
  %thead
    %tr
      %th Title
      %th URL
  %tbody
    -@videos.each do |video|
      %tr
        %td= video.title
        %td= video.url

Finally, you need to instantiate the DataTables functionality on the two tables, in the admin.js file:

function pageLoad() {
  $('#videos').DataTable();
  $('#events').DataTable();
}
$(document).ready(pageLoad);

Edit/Delete functionality can be accessed via link_to edit_video_path(video) and =link_to video_path(video), method: :delete.... as usual.

The end result isn't as fully-featured as activeadmin, but is good enough for what I need, with a fraction of the complexity. DataTables allows easy filtering, sorting and pagination through multiple records, and the direct Edit/Delete functionality on each object allows for fast administration.

admin panel using datatables

Another advantage of this approach is that I can still access the Edit/Delete functionality directly on each Video/Event page. Eg on the video#show page I have:

- if user_signed_in?
  = link_to edit_video_path(@video)
  = link_to video_path(@video), method: :delete,  data: {confirm: "Are you sure you want to delete this video?"} 

The admin panel is simply a faster way to access the same functionality for all objects in one place.

Update - once my project got large enough, the Admin page became very slow since all objects were loaded each time the page was loaded. A much more efficient approach is to use the ajax-datatables-rails gem to load the object on the server-side instead.

Back to articles

CONTACT