Simple jQuery Plugin To Freeze Header Row in Html Table – jquery.freezeheader.js

0 102

If you have html table with large number of records and when ever you scroll table then table header may be hide for users it shows bad user experience so here i am going to share simple jQuery Plugin to freeze header row in html table while scrolling it’ll add good user experience and user may not confuse between column data with associated header. It simply create a table with fixed header in the top browser on selected offset.

Create a Table With Fixed Header

Below there are 3 example to fixed table header, one for simple on scroll, 2nd table with fixed header in the top browser and last one table with fixed header and offset.

Libraries

Plugin dependent on jQuery core library so include it first then load jquery.freezeheader.js on page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.freezeheader.js"></script>

HTML

Create sample html table.

<table id="demo">
  <thead>
    <tr><th>Name</th><th>Email</th><th>Phone</th></tr>
  </thead>
  <tbody>
   <tr><td>Rohit</td><td>hi@iamrohit.in</td><td>955XXXXXXX</td></tr>
   <tr><td>Manish</td><td>hi@iamrohit.in</td><td>955XXXXXXX</td></tr>
   ......
   ......
  </tbody>
</table>

 

JS

finally call the plugin on page to activate the fixed table header feature on page scroll.
Create a table with fixed header in the top browser

$(function() {   
  $("#demo").freezeHeader();
});

Create a table with fixed header and scroll bar

$(function() {   
  $("#demo").freezeHeader({ 'height': '300px' });
});

Create a table with fixed header and offset

$(function() {   
  $("#demo").freezeHeader({'offset' : '51px'})
            .on("freeze:on", function( event ) {
                    //do something
            }).on("freeze:off", function( event ) {
                    //do something
            });;
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Leave A Reply

Your email address will not be published.