Fixed Rows and Columns

Fix the header and footer row and the first and last column when scrolling the table.

The module can fix a table’s head row to the top of the screen, when the user scrolls through a long table on a page. With this, the column titles will always be visible, so that the user always knows what information the columns in a table contain.

Likewise, it can fix a table’s foot row to the bottom of the screen, or columns on the left or right side of the screen, for wide columns.

Possibilities for Fixed Rows and Columns

The Module allows fixing rows and columns in various ways:

Fixed Head Row and Fixed Left Column

Here’s an example where the table’s head row will stick to the top of the screen, when scrolling down, and where the first column will stick to the left edge, when scrolling sideways:

Last NameFirst NameBirthdayCompanyPhone (Ext.)ZIP codeCountryBalancePointsRating
BanksTravis05/04/1969Apple200-432464655Italy$61.1786.6
CainLawrence05/16/1994IBM701-310898004United States$54.8152.5
MiddletonDennis01/10/1992Google580-950180913Spain$24.8345.2
ValenzuelaLunea01/09/1966Cisco970-865551606Germany$74.0773.7
BurgessQuynn09/24/1988Mozilla430-894378965France$16.1382.9
LottLillith12/10/1978Dell587-228988178Australia$30.1217.9
FreemanCheyenne01/28/1981LG396-547314711Germany$49.8216.0
HoustonJorden05/03/1978Adobe970-118296036Canada$47.3121.5
HarrisMerritt12/29/1989Apple160-597725178United States$77.3360.1
GregoryBrynn01/13/1994Adobe663-603991558Spain$90.2498.2
CurryMason03/15/1969Sony115-477887513Australia$21.6856.6
HollandAlyssa06/25/1976Xerox704-497797921Canada$50.3179.5
LoganShay09/13/1968IBM687-648203023United States$46.3987.6
MoranAugust07/04/1986Cisco651-121460737India$22.6417.5
VasquezKelsey03/31/1968Samsung470-735879655Germany$84.0534.5
SteinLawrence10/15/1960Toshiba929-540736044Italy$77.1128.6
BattleWylie01/03/1988Facebook368-227637585Australia$46.37102.8
BookerLogan12/16/1975Apple830-570122074United States$40.7119.0
GilbertChaney06/06/1970Sony132-556089630Canada$78.4591.2
BuckleyStone09/11/1980Cisco422-799874057United States$30.0127.9

New feature! When using fixed columns, it is also possible to show left/right arrow buttons on the left and right sides of the table, to indicate that a table can be scrolled horizontally, in addition to swiping. And the cool thing: These buttons are only shown when a table can be scrolled horizontally. And then, they stick to the page so that they are always visible, which makes them very helpful for long tables.

Last NameFirst NameBirthdayCompanyPhone (Ext.)ZIP codeCountryBalancePointsRating
BanksTravis05/04/1969Apple200-432464655Italy$61.1786.6
CainLawrence05/16/1994IBM701-310898004United States$54.8152.5
MiddletonDennis01/10/1992Google580-950180913Spain$24.8345.2
ValenzuelaLunea01/09/1966Cisco970-865551606Germany$74.0773.7
BurgessQuynn09/24/1988Mozilla430-894378965France$16.1382.9
LottLillith12/10/1978Dell587-228988178Australia$30.1217.9
FreemanCheyenne01/28/1981LG396-547314711Germany$49.8216.0
HoustonJorden05/03/1978Adobe970-118296036Canada$47.3121.5
HarrisMerritt12/29/1989Apple160-597725178United States$77.3360.1
GregoryBrynn01/13/1994Adobe663-603991558Spain$90.2498.2
CurryMason03/15/1969Sony115-477887513Australia$21.6856.6
HollandAlyssa06/25/1976Xerox704-497797921Canada$50.3179.5
LoganShay09/13/1968IBM687-648203023United States$46.3987.6
MoranAugust07/04/1986Cisco651-121460737India$22.6417.5
VasquezKelsey03/31/1968Samsung470-735879655Germany$84.0534.5
SteinLawrence10/15/1960Toshiba929-540736044Italy$77.1128.6
BattleWylie01/03/1988Facebook368-227637585Australia$46.37102.8
BookerLogan12/16/1975Apple830-570122074United States$40.7119.0
GilbertChaney06/06/1970Sony132-556089630Canada$78.4591.2
BuckleyStone09/11/1980Cisco422-799874057United States$30.0127.9

Adding an Offset

As many sites and themes use a fixed navigation bar at the top of the screen, fixing the table head row directly to the top of the screen might not be desired, as they would overlap. For this, it is possible to add an offset to the fixed head row, so that it is fixed below the site’s fixed navigation bar. That offset is the number of pixels that the fixed table head row shall be shifted down. This number has to be set to the height of the site’s fixed navigation bar in pixels.

Last NameFirst NameBirthdayCompanyPhone (Ext.)ZIP codeCountryBalancePointsRating
BanksTravis05/04/1969Apple200-432464655Italy$61.1786.6
CainLawrence05/16/1994IBM701-310898004United States$54.8152.5
MiddletonDennis01/10/1992Google580-950180913Spain$24.8345.2
ValenzuelaLunea01/09/1966Cisco970-865551606Germany$74.0773.7
BurgessQuynn09/24/1988Mozilla430-894378965France$16.1382.9
LottLillith12/10/1978Dell587-228988178Australia$30.1217.9
FreemanCheyenne01/28/1981LG396-547314711Germany$49.8216.0
HoustonJorden05/03/1978Adobe970-118296036Canada$47.3121.5
HarrisMerritt12/29/1989Apple160-597725178United States$77.3360.1
GregoryBrynn01/13/1994Adobe663-603991558Spain$90.2498.2
CurryMason03/15/1969Sony115-477887513Australia$21.6856.6
HollandAlyssa06/25/1976Xerox704-497797921Canada$50.3179.5
LoganShay09/13/1968IBM687-648203023United States$46.3987.6
MoranAugust07/04/1986Cisco651-121460737India$22.6417.5
VasquezKelsey03/31/1968Samsung470-735879655Germany$84.0534.5
SteinLawrence10/15/1960Toshiba929-540736044Italy$77.1128.6
BattleWylie01/03/1988Facebook368-227637585Australia$46.37102.8
BookerLogan12/16/1975Apple830-570122074United States$40.7119.0
GilbertChaney06/06/1970Sony132-556089630Canada$78.4591.2
BuckleyStone09/11/1980Cisco422-799874057United States$30.0127.9

Usage instructions

To use this feature with your tables, choose the desired options on the table’s “Edit” screen.