Rails 7 and Tabulator

I always seem to be working on projects that require showing a big table of data. It’s not the most attractive UI but sometimes people want to see the numbers, not pictures. This is undoubtedly true with Zonmaster, where we need to show tables of Amazon order information, products, and so on.

Over at ZMCentral, we are in the midst of upgrading Zonmaster to Rails 7. As an aside, Zonmaster was started on Rails 4, and going from 4 to 5 and 5 to 6 was easy. Rails 7 is a bit of a nightmare.

Before we were using Datatables — and I have some videos up about using Datatables in Rails. But Rails 7 and Turbo and other concerns have led me to look elsewhere and we have settled upon Tabulator.

Why Tabulator?

Tabulator is pure Javascript, removing one more dependency on jQuery. Bootstrap 5 — yes I am a Bootstrap person! — has also removed the dependency on jQuery. I think it is too early to completely ditch jQuery, but we want to work towards it. There is nothing wrong with it, it’s just ‘Yet Another Libary’ and it is huge.

Tabulator code is cleaner and leaner. Datatables just seemed to be a big mess.

Tabulator offers lots of built-in formatters. It is just a nice to have.

Quick Install

Fire up a console and create a new rails app using rails new tablulatorTest --css bootstrap. Once that is going throw in Tabulator using yarn add tabulator-tables.

In your application.js add

import {TabulatorFull as Tabulator} from 'tabulator-tables';
window.Tabulator = Tabulator
// while we are here make sure you have
window.bootstrap = bootstrap

In your app/assets/stylesheets/application.bootstrap.scss add

@import 'tabulator-tables/dist/css/tabulator_bootstrap5.min';

Quick Demo

Let’s see if it’s working by pulling in the example from Tabulator’s QuickStart.

In console:

rails g controller tabula_test index

Edit app/views/tabula_test/index.html.erbto look like this:

<div id="example-table"></div>

<script>
//define some sample data
 var tabledata = [
  {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
  {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
  {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
  {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
  {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];

//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
  height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data:tabledata, //assign data to table
  layout:"fitColumns", //fit columns to width of table (optional)
  columns:[ //Define Table Columns
   {title:"Name", field:"name", width:150},
   {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
   {title:"Favourite Color", field:"col"},
   {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
  ],
});

//trigger an alert message when the row is clicked
table.on("rowClick", function(e, row){ 
 alert("Row " + row.getData().id + " Clicked!!!!");
});
</script>

Start your Rails server using foreman start -f Procfile.dev and visit localhost:3000/tabula_test/index and behold! A nicely formatted table.

Add Ajax

To round things out, let’s pull the data from the server, like the big boys do. The reason for doing this is simple — it quickens your page response time. Also, later on, we could add server-side pagination and sorting and you’ll be better off just getting the data from the server to start with.

Add a method to your tabula_test_controller:

class TabulaTestController < ApplicationController
  def index; end

  def table_data
    tabledata = [
      { id: 1, name: 'Oli Bob', age: '12', col: 'red', dob: '' },
      { id: 2, name: 'Mary May', age: '1', col: 'blue', dob: '14/05/1982' },
      { id: 3, name: 'Christine Lobowski', age: '42', col: 'green', dob: '22/05/1982' },
      { id: 4, name: 'Brendon Philips', age: '125', col: 'orange', dob: '01/08/1980' },
      { id: 5, name: 'Margret Marmajuke', age: '16', col: 'yellow', dob: '31/01/1999' }
    ]

    render json: tabledata
  end
end

Modify app/views/tabula_test/index.html.erb and remove data: tabledata and replace it with ajaxURL: '/tabula_test/table_data'.

Add this to your routes.rb: get 'tabula_test/table_data'.

Now refresh your page. It should look the same, but with the data coming from the server!

I have got an hour-long video on YouTube that goes much further with Tabulator and Rails. Subscribe to that channel for videos about Ruby on Rails, Entrepreneurship, and life as a Software Developer.

Or, if you prefer to read things rather than look at me, go over to my SubStack.

Talk to me!

You can find me on Twitter where I share insights on Ruby on Rails, discuss my journey with Zonmaster, and explore various aspects of life. You can also check out my YouTube channel where I cover various topics related to web development, including Ruby on Rails.

And guess what? I’ve recently released my first guide, “Getting Started with Ruby on Rails: A Step-by-Step Guide for Beginners” on Gumroad! 📚🚀 It’s a ‘Fair Price’ ebook, so you can get it for free, but any payment is greatly appreciated as it helps support my work and future guides. Don’t miss out on this opportunity to level up your web development skills with Rails!

Drop me a note on Twitter or LinkedIn if you have any questions or need help with your Rails project. Happy coding! 😊🎉