Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

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

Preview:

Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

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

One thought on “Freeze Table Rows And Columns With JavaScript – GridViewScroll.js

  1. KP

    This is a good way BUT one thing you did not consider is cells with long data content. Your script breaks for that case. Consider wrapping the text in case the content width is larger than half of grid width.

    Reply

Leave a Reply