The sticky table header plug-in

If you have large tabular data to present to your visitors in web pages, then it is quite probable that user will lose the idea what table headers are and has to scroll back to the top to see which column relates to the particular table header.

This behavior is quite natural and can be addressed by using the sticky table header and the topic of this article.

The jquery.stickyTableHeader is a jQuery based plug-in for creating the table headers that sticks on top as a user scrolls down a large table. The size of the plug-in is small and it allows smooth scrolling. It also has a few options to customize as per the need of your project.

Demo1 Demo2
Developer page Download plug-in

How to install the sticky header plug-in?

You may install this plug-in via npm:

npm install jquery jquery-sticky-table-header –save

You may also download the plug-in via GitHub website, see the above links.

Include the reference of the jquery.stickyTableHeader.js file after the jQuery library:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

<script src=”js/jquery-stickyTableHeader/jquery.stickyTableHeader.js”></script>

The markup

In order to work this plug-in properly, you must create a table inside a container like a div element. The table must contain the <thead> and <tbody> elements as shown in the demos below.

A Demo of sticky header plug-in for HTML tables

In this demo, the <thead> tag contains two table rows. That means two rows of headings. For the demo, the first row contains main headings with the colspan attribute. The second row contains six headings.

Both of these header rows sticks on top as you scroll down the table that contains some dummy data. Have a look:

jquery sticky header

See online demo and code

The mark for the table is as follows:

 

Finally, you need to initiate the plug-in via JavaScript:

 

See the complete code and output on the demo page.

A Demo of using multiple tables

So, if your web page contains more than one table and you need to use sticky headers on all – no problems. This plug-in also supports this feature. See this example where three tables are created with table headers and many rows so that scrollbar appears.

See how it looks:

See online demo and code

A Demo of changing the sticky header style

You may amend the style of the sticky header by modifying the existing classes in the CSS files that comes with the plug-in. Alternatively, you may create your own CSS class(es) and use the provided options in the jQuery code section for customizing the sticky header.

For an idea, I have changed the StickyTableHeader.is-scrolling class in the existing CSS file. Scroll down the demo page and see how it looks. Also, I have used the Bootstrap CSS file and referred in the table tag just to show that this plug-in may work with any CSS:

jquery sticky header Bootstrap

See online demo and code

The following CSS class is changed:

 

You may see the complete code in the demo page.

For more on this plug-in along with available options and methods, visit the developer page.