Simple jQuery Plugin To Freeze Header Row In Table - freezeheader

File Size: 85.5 KB
Views Total: 91752
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Plugin To Freeze Header Row In Table - freezeheader

freezeheader is a super simple jQuery plugin that allows you to create a table with sticky header and scroll bar. You can also use this plugin to create a table with fixed header in the top browser.

Related plugins:

How to use it:

1. Include jQuery library and jQuery freezeheader on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.freezeheader.js"></script>

2. Create a standard html table

<table class="gridView" id="demo">

<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
</tr>
</thead>

<tbody>

<tr class="grid">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>

<tr class="grid">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>

...

</tbody>

</table>

3. Call the plugin with height option

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

Change logs:

2017-01-06

  • Add support to Grid controls for ASP.NET Core projects 

2017-01-03

  • Add functionality to Float the header XX pixels down the page

2015-07-19

  • Update jquery.freezeheader.js

2014-11-05

  • Add option that allows user to specify DOM element to listen for scroll events so it's not always tied to window

This awesome jQuery plugin is developed by laertejjunior. For more Advanced Usages, please check the demo page or visit the official website.