Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

Preview:

Description:

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">
  <th>StandardCost<br/>123</th>
  <th>ListPrice</th>
  <th>SafetyStockLevel</th>
  <th>SellStartDate</th>
  <th>SellEndDate</th>
  <th>ModifiedDate</th>
  <th>ProductID</th>
  <th>Name</th>
  <th>Number</th>
  <th>ReorderPoint</th>
  <th>Weight</th>
</tr>

Add the ‘GridViewScrollItem’ to the table rows.

<tr class="GridViewScrollItem">
  <td>747</td>
  <td>HL Mountain Frame - Black, 38</td>
  <td>FR-M94B-38</td>
  <td>375</td>
  <td>2.68</td>
  <td>739.0410</td>
  <td>1349.6000</td>
  <td>500</td>
  <td>7/1/2001 12:00:00 AM</td>
  <td>&nbsp;</td>
  <td>3/11/2004 10:01:36 AM</td>
</tr>
...

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);