Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

Category: Javascript , Table | November 13, 2017
Author: twlikol
Views Total: 393
Official Page: Go to website
Last Update: November 13, 2017


Freeze Table Rows And Columns With JavaScript – GridViewScroll.js


GridViewScroll.js is an easy-to-use JavaScript plugin which makes any number of table columns and rows to be fixed in place as you scroll.

How to use it:

Import the ‘GridViewScroll.js’ script into the html file.

<script src="js/gridviewscroll.js"></script>

Add the ‘GridViewScrollHeader’ class to the table header which should be frozen on scroll.

<tr class="GridViewScrollHeader">

Add the ‘GridViewScrollItem’ to the table rows.

<tr class="GridViewScrollItem">
  <td>HL Mountain Frame - Black, 38</td>
  <td>7/1/2001 12:00:00 AM</td>
  <td>3/11/2004 10:01:36 AM</td>


Config the GridViewScroll.js.

var options = new GridViewScrollOptions();
options.elementID = "myTable";
options.width = 450;
options.height = 300;
options.freezeColumn = true;
options.freezeFooter = true;
options.freezeColumnCssClass = "GridViewScrollItemFreeze";
options.freezeFooterCssClass = "GridViewScrollFooterFreeze";
options.freezeColumnCount = 2;

Attach the GridViewScroll to the html table. Done.

new GridViewScroll(option);

Leave a Reply