DataTables with Bootstrap 4 Minimal Setup in Rails 6

DataTables with Bootstrap 4 Minimal Setup in Rails 6

DataTable Bootstrap Rails

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


Create home controller and set up your index page.

rails g controller home index

In routes set up root path:

Rails.application.routes.draw do
  root 'home#index'

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

yarn add jquery bootstrap is an extended module of for bootstrap type styles. Now set up 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


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";


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;">
			<th>Start date</th>
				<td>Tiger Nixon</td>
				<td>System Architect</td>
				<td>Garrett Winters</td>
				<td> Paul Byrd</td>
				<td> Chief Financial Officer (CFO)</td>
				<td> New York</td>
				<td> 2010/06/09</td>
				<td> $725,000</td>
				<td> Gloria Little</td>
				<td>Systems Administrator</td>
				<td>New York</td>
				<td>Bradley Greer</td>
				<td>Software Engineer</td>
				<td>Dai Rios</td>
				<td>Personnel Lead</td>
				<td>Jenette Caldwell</td>
				<td>Development Lead</td>
				<td>New York</td>

<script type="text/javascript">
  $(document).ready(function() {

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

jquery datatables with bootstrap 4 in  rails 6
You will see the screen like this.

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:


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.

5 Replies to “DataTables with Bootstrap 4 Minimal Setup in Rails 6”

  1. 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.

  2. 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.

Leave a Reply