DataTables with Bootstrap 4 Minimal Setup in Rails 6

DataTables provide a quick and handy way to add functionalities to Tables.. In this article we are going to implement DataTable with bootstrap 4 theme to our brand new Rails 6 App. We will be using static data for this article.

rails _6.0.0_ new datatables_demo

Setup

Create home controller and set up your index page.

rails g controller home index

In routes set up root path:

#config/routes.rb
Rails.application.routes.draw do
  root 'home#index'
end

Install essential libraries via yarn i.e. jquery, bootstrap and datatables.

yarn add jquery bootstrap datatables.net-bs4 

datatables.net-bs4 is an extended module of datatables.net for bootstrap type styles. Now set up environment.js.

#config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery'
}))

module.exports = environment

Import JQuery global and require DataTables in application.js.

// app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('datatables.net-bs4')

import $ from 'jquery';
global.$ = jQuery;

Import Bootstrap Css in application.scss. We need to provide absolute path so that asset pipeline can know where the exact file is.

PS: If you are using stylesheet_pack_tag, you don’t need it to include here.

/* app/assets/application.scss */

/*
 *= require_tree .
 *= require_self
 */
@import "bootstrap/dist/css/bootstrap";

Layout/Views

Fill index.html with some sample data and initialize the DataTable via jQuery selector.

<div class="container">
	<table id="example" class="table table-striped table-bordered" style="width: 1000px;">
		<thead>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
		</thead>
		<tbody>
			<tr>
				<td>Tiger Nixon</td>
				<td>System Architect</td>
				<td>Edinburgh</td>
				<td>61</td>
				<td>2011/04/25</td>
				<td>$320,800</td>
			</tr>
			<tr>
				<td>Garrett Winters</td>
				<td>Accountant</td>
				<td>Tokyo</td>
				<td>63</td>
				<td>2011/07/25</td>
				<td>$170,750</td>
			</tr>
			<tr>
				<td> Paul Byrd</td>
				<td> Chief Financial Officer (CFO)</td>
				<td> New York</td>
				<td>64</td>
				<td> 2010/06/09</td>
				<td> $725,000</td>
			</tr>
			<tr>
				<td> Gloria Little</td>
				<td>Systems Administrator</td>
				<td>New York</td>
				<td>59</td>
				<td>2009/04/10</td>
				<td>$237,500</td>
			</tr>
			<tr>
				<td>Bradley Greer</td>
				<td>Software Engineer</td>
				<td>London</td>
				<td>41</td>
				<td>2012/10/13</td>
				<td>$132,000</td>
			</tr>
			<tr>
				<td>Dai Rios</td>
				<td>Personnel Lead</td>
				<td>Edinburgh</td>
				<td>35</td>
				<td>2012/09/26</td>
				<td>$217,500</td>
			</tr>
			<tr>
				<td>Jenette Caldwell</td>
				<td>Development Lead</td>
				<td>New York</td>
				<td>30</td>
				<td>2011/09/03</td>
				<td>$345,000</td>
			</tr>
		</tbody>
	</table>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable();
  });
</script>

Now, start the server rails s and head over to http://localhost:3000

Voila it worked. Try searching and sorting to check everything is fine. Anyone looking for exact code base to implement DataTable with bootstrap 4 in Rails 6 can check here: https://github.com/Rajan4436/datatables_demo

Troubleshooting

There are possibilities that you might run into JQuery issues. Below are the points you should check first.

• Check you table structure. The <td> and <tr> elements should be properly nested.
• Check for any rowspan or colspan attributes if they are present either remove them or make it sure the corresponding cells counts should be same for every span.
• Check if there is any <tfoot> tag. Consider removing it because it is the culprit in many cases.
• Number of columns should be same in <thead> and <tbody>

Hope this helps.