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
orcolspan
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.
13 Replies to “DataTables with Bootstrap 4 Minimal Setup in Rails 6”
getting error message Uncaught ReferenceError: $ is not defined
at (index):86
This error is not sufficient to debug the exact issue, however I am pretty sure you have messed up the jQuery. Either it hasn’t loaded or you have changed the $ to something else.
I made a demo adding some jquery notification library: 3rd party and one from Bootstrap team (dismissal alert): https://github.com/lucaszmoraes/Demo-Datatables-with-jQuery-Notifications
checkout out my confi files (env.js, app.js)
DOES NOT WORK. Nobody can tell you how either. There’s 50,000,000,000 articles on this and people STILL cannot get this to work.
$(…).dataTable NOT A FUNCTION.
I have provided the source code repo link in article. Go through it. It might help you.
Didn’t work for me. Finally got it to work by following this guide: https://inopinatus.org/2019/09/14/webpacker-jquery-and-jquery-plugins/.
yarn add datatables.net-bs4 imports-loader
application.js looks like this:
require(‘@rails/ujs’).start()
require(‘@rails/activestorage’).start()
require(‘channels’)
require(‘jquery’)
require(‘bootstrap/dist/js/bootstrap’)
window.$ = $
require(‘imports-loader?define=>false!datatables.net’)(window, $)
require(‘imports-loader?define=>false!datatables.net-bs4’)(window, $)
In the image you posted the format of datatables in not right. For example the keyqord “Search” and the corresponding input field should be on the same line and on the right side of the table. Add following to the application.css to load the format correctly:
@import ‘admin-lte/dist/css/adminlte’;
@import ‘admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.css’;
The rest of you tutorial worked like a charm. Thank you 🙂
Haha. Thanks i am aware about this. the css was not loaded properly when i took screenshot. Thanks for suggesting.
I had to add
@import ‘datatables.net-bs4/css/dataTables.bootstrap4.css’;
in order to get the correct style.
Thanks for posting this. I have spent weeks chasing my tail trying to figure this out. This now works perfectly!
Thank you for the post. Really helpful to me. Cheers
I am able to add datatables in my rails 6. But how to sort columns? I don’t see sorting arrows either. Please help.
Probably you are missing the CSS files. if you click on column headers it might be working without arrows as well. that’s a default feature.