by Eric Rowell (cofounder of www.adollo.com)
So What’s a Locking Column Grid Anyways?
A locking column grid is a grid that you can scoll vertically and horizontally, while the headers and certain columns stay in place. This is very handy if you are displaying a large amount of data that requires scrolling when you dont want to lose sight of your headers or certain columns of data.
Here’s what a locking column grid looks like:
The locking column grid is made up of four quandrants: the upper left, upper right, bottom left, and bottom right quandrants. The headers for the data grid are in the upper left and upper right quadrant. The columns that you want to always show are in the upper left and bottom left quadrant. The rest of scrollable data is in the bottom right quandrant. As you scroll to the right, the upper right quadrant also scrolls to the right so the columns match up, while the bottom left quadrant stays stationary. Likewise, as the bottom right quandrant is scrolled vertically, the bottom left quadrant also scrolls vertically while the top right quadrant stays stationary.
So how is a locking column grid made with HTML?
Easy! First, create the following html:
<table>
<tr>
<td>
<div id=”topLeftQuad”></div>
</td>
<td>
<div id=”topRightQuad” style=”overflow:hidden;”></div>
</td>
</tr>
<tr>
<td>
<div id=”bottomLeftQuad” style=”overflow:hidden;”></div>
</td>
<td>
<div id=”bottomRightQuad” onscroll=”scrollGrid()”></div>
</td>
</tr>
</table>
Next, you need to insert your grid headers into the top left and top right quadrants using tables, and then insert your grid data into the bottom left and bottom right quadrants again using tables. Essentially, the locking column grid is composed of four different tables, each within a cell of a 2×2 table.
Finally, you will need to create the “scrollGrid()” function. When the bottom right quadrant is scrolled, this function will get the x and y scroll position of the bottom right quad. It will then set the x scroll position of the top right quad, and then set the y scroll position of the bottom left quad.
That’s it! Good Luck!