Rails 7: Tabulator and Stimulus

This is turning into a little series for me! I am loving moving things out of my html.erb files and into Stimulus controllers. It is cleaning things up and making things faster. Win-win!

This time I am going back to Tabluator, which I admit to having a dev-crush on. It is a fast and full-featured library that is a breath of fresh air after more than a decade of hand-to-hand combat with Datatables.

This is a companion piece to my YouTube video that goes into a little more depth in some areas. Make sure to go over there and of course like and subscribe!

I am starting with my using Rails 7 Bootstrap starter app and actually carrying on from my previous Chartkick demo. When I left off I had a table on the index page that was — shock, horror! — an actual table, with the data coming in at load time.

Replace the Table with Tabulator

<div data-purchases-chart-target='table' class='table table-striped table-sm mt-2'></div>

We are setting a target value in our Stimulus controller. We will hook all this up in a minute.

All of this is going inside our existing div that exposes the Stimulus controller:

<div class='outside'
  data-controller='purchases-chart'
  data-purchases-chart-id-value='purchasesChart'
  data-purchases-chart-url-value='<%= purchases_data_purchases_path %>'>
// our stuff in here
</div>

Add Tabulator

Let’s install Tabulator on this branch:

yarn add tabulator-tables

In our app/javascription/application.js add this:

import {TabulatorFull as Tabulator} from 'tabulator-tables';
window.Tabulator = Tabulator; // make it available to our window

And in our app/assets/stylesheets/application.bootstrap.scss add this:

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

Hook up to our div to Stimulus

To do this we need to do 3 things inside the Stimulus Controller

1. Add the target
2. Create some values to store our table and also the URL we will need later
3. Create the Tabulator object

Inside the connect() add this:

this.tabulatorTable = new Tabulator(this.tableTarget, {
      layout: "fitDataFill",
      pagination: true,
      paginationSize: 25,
      paginationSizeSelector: true,
      dataSendParams: {
        "page": "start",
        "size": "length"
      },
      ajaxURL: this.datasourceValue,
      columns: [
        {title: "ID", field: "id", visible: false},
        {title: "Item Name", field: "item_name"},
        {title: "Quantity", field: "quantity"},
        {title: "Purchase Amount", field: "purchase_amount", formatter: "money", formatterParams: {precision: 2, symbol: "$"}},
        {title: "Purchased At", field: "purchased_at"},
        {title: "Status", field: "status"},
        {title: "Description", field: "description"}
      ]
    })

This will configure the Tabulator to pull the data and put it into those columns.

You should now be able to refresh the page and see the Tabulator footer at the bottom

Add the Ajax URL

We already had a `purchases/purchase_data` url from how we were loading the data in the Chartkick demo. Let’s keep using that URL.

1. Set the URL in the Stimulus controller
2. Edit the RAILS Controller to handle the different request.

def purchases_data
    @date_filter = params[:date_filter]

    @purchases = Purchase.all.order(purchased_at: :desc)
    if @date_filter.present?
      datetime = DateTime.parse(@date_filter)
      @purchases = @purchases.where(purchased_at: datetime.beginning_of_day..datetime.end_of_day)
    end

    respond_to do |format|
      format.html # for giggles leave this here for the old way
      format.json { render json: @purchases } # add this (requests from Tabulator are JSON requests)
    end
  end

Refreshing the page will now show you the table with data! Woo hoo!

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! 😊🎉