Bootstrap 3 Sortable Table

In this tutorial we’ll create a Bootstrap 3 Sortable Table which will sort the data in the table when you click on one (or several) of the column headers.

Bootstrap 3 Sortable Table

Bootstrap 3 doesn’t provide us with a plugin to create a sortable table. Fortunately there is an excellent jQuery plugin that does just what we need: tablesorter.

In this tutorial I will explain how to make use of the Tablesorter plugin and we’ll also look into:

  • How to easily change an Excel table into an HTML table
  • How to use (some of) the widgets and themes provided with Tablesorter

Download and install Tablesorter

To download the Tablesorter plugin we visit the tablesorter download page and click on one of the 2 blue buttons to download the “zip” or the “tar.gz” file.

Go to the download location and extract the contents. This will result in the folder “tablesorter-master”.

Create a separate project folder for this tutorial and copy the file “jquery.tablesorter.min.js” (from the “tablesorter-master/js” folder) into your project folder. We’ll only need this file to get the plugin to work.

Open/create a basic Bootstrap 3 template that contains (links to) the Bootstrap 3 and jQuery libraries (see for instance the tutorial Bootstrap 3 template with a CDN).

Add this link (to the Tablesorter plugin) in your HTML file:

Make sure that the path in this link is correct for your project setup. Save the HTML file in your project folder.

Next we’ll add a table with data.

From Excel to HTML table

Creating an HTML table can be time consuming. If you already have an Excel worksheet with the data in rows and columns you can quickly change this into an HTML table.

Excel has an option to save a worksheet as a web page. But my advice is not to use that. It adds a lot of ugly HTML to the data.

A better approach is to use one of these online tools:

If you use Tableizer make sure to use the option “No CSS styles”.

With the No-Cruft table converter you’d better check if there are no empty rows at the end of the table and if so delete those.

Copy and paste the results into the body section of your HTML file.

Tableizer adds classes “tableizer-table” and “tableizer-firstrow”. Delete those classes after you have pasted the results into your HTML file.

Insert the thead and tbody tags where appropriate for your table.

If you prefer using an existing HTML table you can download ‘’ by clicking on the button below and paste that table into your Bootstrap 3 template:

Linking the table to the plugin

To get the plugin to work on the table do the following:

  1. Insert an ID into the opening table tag (e.g. ‘id=”mytable” ‘)
  2. Insert the class “tablesorter” into the same opening table tag
  3. Add this script below the link for the tablesorter plugin:

Save your HTML file with the table. Open it in a browser. Click on one of the head cells of the table and check that this results in a table with data sorted based on the data in that column.

DEMO - Sortable Table

Tablesorter widgets

When you look at the content list on the tablesorter page you’ll see that there’s a section about Widget & Pager options.

In this tutorial I’ll explain how to use an existing theme (“blue”) and one of the widgets (“columns”). With that knowledge you can easily use one of the other themes and/or widgets.

We start by copying the files “” (from the “tablesorter-master/css” folder) and the file “jquery.tablesorter.widgets.min.js” (from the “tablesorter-master/js” folder) into your project folder.

We add a link to the blue theme in the head section of the HTML file with the table:

And a link to the widget file directly below the link to the tablesorter plugin:

Make sure the paths in these links are correct for your project setup.

We can now add the theme and the widget to our existing script. Which should now look like this:

We now have a sortable table where a visitor can select three columns that will decide the sorting of the table:

DEMO - Sortable Table Blue Theme & Columns Widget

That’s it for now. In the next tutorial I will show you how you can automatically change the style of the sortable table when using a different Bootstrap 3 theme.


Abdenour - September 23, 2016 Reply

This is realy good stuff !! Thank you soo much for your explanations !!!

Theo - September 23, 2016 Reply

Thanks Abdenour!

sombi - August 9, 2015 Reply

thx…. this best tutorial i have ever come accross… i like simple and clear presentation at has inspired me alot….. to day is my first day but i have learnt alot. my humble request if u can trya project using x-editable bootstrap plugin….. i miss to learn how to work with its..i appreciate ur reply. im very greatfull thx

Theo - August 10, 2015 Reply

Hi Sombi,


I’ll make a note about your X-editable request but make no promises.

Cheers, Theo

Brian - April 13, 2015 Reply

Hello, I downloaded the plugin, it’s working @firefox but not on google chrome… what did I do wrong??

Theo - April 13, 2015 Reply

Hello Brian,

checked it myself and both the demo on my website as well as the demo on the plugin website work correctly in Google Chrome. You could do the same check with your browsers to detect if it’s got to do with the browser or with your markup. If those 2 demos also don’t work you might want to check if you have set JavaScript to enabled in Chrome.
If JavaScript is enabled my suggestion would be to report this as a bug to the developer of the plugin. However do try to be more specific when reporting a bug then “it’s not working in Chrome”.

Cheers, Theo

Greg - March 10, 2015 Reply

I downloaded the tablesorter with bootstrap theme, but the package doesn’t included all icons (
I managed to find them on a site but I don’t know how to operate to display them (chevron, row up, row down,..).
Somebody can help me pleaseeeeeeee!!!
Thanks in advance.

Theo - March 10, 2015 Reply

Hi Greg,

can you tell us some more about what you tried and what did or did not work. The github page (your link) mentions that you can use the glyphicons with Bootstrap 3. So these icons are not included in with the tablesorter plugin but are included in the Bootstrap download. Did you check that there’s a url to the glyphicons in your HTML file?

The JavaScript on the same page shows in the section //icon class names how to include the appropriate classes for the glyphicons. Did you try that?

Regards, Theo

Paras - February 17, 2015 Reply

Thumbs up !!!

Really helpful as i am new to LESS, it worked like a lifesaver for me 🙂

Thanks, Appreciated !

Le Anh Duc - February 5, 2015 Reply

Thank you so much for this amazing stuff! It’s all what I need to do tonight, but you just help me do it perfectly !!!

David - November 21, 2014 Reply

This is great, just what I was looking for 🙂
I have added an extra column (5 in total) when i scale down to say 320px the last column gets cut off, is their anything I can do about this?


Theo - November 21, 2014 Reply

Hi David,

thanks! Did you try adding a horizontal scrollbar? (see making the table responsive = last part of this post:

Cheers, Theo

Ronnie - September 5, 2014 Reply

This is very useful, but i have 1 question though. How do you add an arrow up or down icon beside the headers and the arrow should point how the columns were sorted?

Theo - September 5, 2014 Reply

Hi Ronnie,


The arrows are part of the theme that you use with the tablesorter plugin. So the easiest method to include the arrows is to choose a theme that contains the arrows.

If you want to create your own theme and want to include the arrows please read my other tutorial This tutorial explains where you can find the “theme.less” file. The “theme.less” file is the basis for all available themes and contains the arrows (as Data URI’s). If you are unfamiliar with Data URI’s I can recommend this post:

Cheers, Theo

Wishow - May 19, 2014 Reply

Hi, thanks… this is awesome. Excuse my english.

Maybe this is a stupid question, but I do not know how to do it:

What if I want to sort #mytable by just two of total columns?
Example: C1(sortable) C2(not sortable) C3(not sortable) C4(sortable)

Theo - May 19, 2014 Reply

Thanks Wishow,

To sort the table with C1 and C4 first click in the top most cell of C1 then hold the Shift key and click on the top most cell of C4. In this demo
First click on the cell with “Manager” (check if you get the order that you want in that column; if not: click again on the same “Manager” cell to get the reverse order) then hold the Shift key down and click in the cell with Year.

Cheers, Theo

Juan - May 9, 2014 Reply

well, on regular basis I almost never comment 😛 …
but as the first comment says … I cant believe noone comments XD … so here I am
awesome tutorial extremly easy to do and understand 😀
thanks so much!! 😀

Theo - May 9, 2014 Reply

Thanks Juan,

all the more appreciated.

Cheers, Theo

Adi K Putra - March 31, 2014 Reply

This is what I’m looking for! Thanks for sharing.

Psycho - March 6, 2014 Reply

I extremely surprised that no one’s commented yet…!
This was a great tutorial, I’ve been looking for something like this. Thanks, Theo.

Theo - March 7, 2014 Reply

Hi ‘Psycho’,

great to hear you found this tut useful.

Cheers, Theo

Add your comment

Related Posts