Sortable Table styled by Bootstrap 3

In the previous post Bootstrap 3 Sortable Table we learned how to use the plugin to create a sortable table. In this tutorial I’ll show you how to create a sortable table styled by Bootstrap 3: when you change variables in a Bootstrap 3 theme the sortable table will automatically change its style too.

Sortable Table styled by Bootstrap 3

For this tutorial we’ll use the HTML file we created in the previous tutorial Bootstrap 3 Sortable Table.

HTML file modifications

In the header section we replace the link for the blue theme with a link to the custom CSS file (that we’ll create in this tutorial):

In the opening table tag we replace the class “tablesorter” with a class name for the custom theme we’ll create (e.g. “tablesorter-mytheme”):

The links for both the Tablesorter plugin and the widgets should already be present:

Then we replace the existing script with the script below:

As you can see in this script I included 2 widgets:

  • the widget that adds zebra striping: different background colors for odd and even rows
  • the widget that allows a user to sort the table based on a selection of multiple columns


The tablesorter plugin contains several CSS theme files. These are based on a LESS theme file. We will use this LESS file to create a version that’s related to the Bootstrap 3 “variables.less” file.

We start by downloading the LESS theme file:

  • Visit the GitHub page for the tablesorter plugin.
  • Open the CSS folder and click on the file “theme.less”.
  • Then click on the button “Raw”. You now see the source file.
  • Right-click anywhere in the source file and save the file as “theme.less”.
Getting rid of comments

The file “theme.less” contains several lines with comments. Unfortunately these have been created with /* and */ instead of //. If we leave those comments as they are they will show in the CSS file (at the top). I prefer deleting those comments from “themes.less”. Another reason for deleting them is that some of these comments were inserted inside rule sets (e.g. lines 36, 108 and 126). This can result in errors when we compile the file.

If you prefer using the “theme.less” file I already stripped of most of the comments click on the download button below:

Custom theme name

Almost at the top of “theme.less” you see:

@theme : tablesorter-custom;

You need to replace the name “tablesorter-custom” by a custom name (e.g. “tablesorter-mytheme”). When the LESS file is used to create the CSS file this name will be used to create specific class labels for the elements in the table.

Save the file as “theme_custom.less” (or another name, where ‘custom’ can be replaced with a custom name for your theme).

Variable names instead of values

At the top of the file “theme.less” we find the variables used to style the sortable tables. To make the style of the sortable tables dependent on the styling of a Bootstrap 3 theme we need to replace the value of (some of) these variables by existing Bootstrap 3 variable names.

To begin with we import the Bootstrap variables with:

@import 'variables.less';.

Add this import at the start of the file “theme_custom.less”.

The highlighted lines below are the ones where I have replaced a value with a variable name:

Widgets sections

In the following sections in this tutorial we’ll examine how we can create a better contrast between the background and the text in a cell when we use some of the widgets (zebra, hovered rows, columns).

We’ll use 2 different approaches:

  1. with so called Guards or Guarded Mixins that conditionally style the text.
  2. with the contrast function that sets the color of the text if the brightness of the background is above of below a certain threshold value.
Zebra striping

Because we included the zebra widget the table has zebra striping: odd rows have a slightly darker color that even rows.

The zebra widget makes use of certain mixins in the file “theme.less” to set the background for even rows (“evenRows”) and odd rows (“.oddRows”). You can find those mixins almost directly after the variables section.

What I want to show you here is how we can use Guarded Mixins to automatically change the color of the text when we use a darker or lighter background color:

You can recognize a Guard by the use of the keyword “when”. This keyword introduces the guard sequence. The Guarded Mixin contains a parameter (e.g. “@a). The value of that parameter is set when the Guarded Mixin is invoked.

In the example above we first define the guarded mixin “.bodyRows_color (@a)”.

When we invoke this guarded mixin for odd rows the parameter “@a” is replaced by “lighten(@headerBackground, 20%)”.

When the lightness of “lighten(@headerBackground, 20%)” is equal to or larger than 55% the color of the text will be set to “#000000”.

The text in even rows becomes white when the background is dark (has a lightness below 55%).

Hovered rows

I used the second approach for hovered rows: the color of text is set based on a contrast value.

A contrast function contains 4 parameters. When the luma (= perceived brightness) of the background set by the first parameter is above the threshold value (= the last parameter) then the text gets a color set by the second parameter. If it’s below the threshold value the text color is set by the third parameter.

In my opinion the structure would have been easier to understand if the threshold was the second parameter.

Even rows get the background as the header when a user hovers over that row. When the perceived brightness of an even row is above the threshold value of 43% the text becomes black. When the perceived brightness of the background is below that threshold value the text becomes white.

Notice that in the file “theme.less” the background color is a desaturated version of the header background color. I set the background color differently: when a user hovers over an even row the background becomes the same as that of the header; for odd rows the background becomes 20% darker than the header.

Contrast for sorting columns

To get a good contrast for text in columns – when these are selected for sorting – I used the same contrast-approach:

Finding the correct threshold demands a bit of trial and error. The default threshold is 43% (which I used for hovered rows). But for the columns a got a better result with a threshold value of 58%.

I also included the header cells (th.primary and th.secondary) to get a good contrast there as well.

Now that we’ve finished our modifications of the file “theme.less” we can compile it and save the CSS file (for instance as “theme_custom.css”; if you use a different name make sure that you also used that name in the HTML file).

The demo shows the table twice, with different values for the header background color as the starting point for several mixins, contrast, etc.The demo will show slight differences from your result.

If you want each table to be responsive insert them into a div with class “table-responsive” and add this section into the header of your HTML file (or the CSS rules through a separate style sheet):


In the demo I changed the font in the header cells from bold to normal. And I changed the line-height. But since these changes are not really relevant for this tutorial I didn’t dwell on them.

Add your comment

Related Posts