Fix the header and footer row and the first and last column when scrolling the table!
Fixed Rows and Columns
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 Name | First Name | Birthday | Company | Phone | ZIP code | Country | Balance | Points | Rating |
|---|---|---|---|---|---|---|---|---|---|
| Banks | Travis | 05/04/1969 | Apple | 200-4324 | 64655 | Italy | $61.17 | 8 | 6.6 |
| Cain | Lawrence | 05/16/1994 | IBM | 701-3108 | 98004 | United States | $54.81 | 5 | 2.5 |
| Middleton | Dennis | 01/10/1992 | 580-9501 | 80913 | Spain | $24.83 | 4 | 5.2 | |
| Valenzuela | Lunea | 01/09/1966 | Cisco | 970-8655 | 51606 | Germany | $74.07 | 7 | 3.7 |
| Burgess | Quynn | 09/24/1988 | Mozilla | 430-8943 | 78965 | France | $16.13 | 8 | 2.9 |
| Lott | Lillith | 12/10/1978 | Dell | 587-2289 | 88178 | Australia | $30.12 | 1 | 7.9 |
| Freeman | Cheyenne | 01/28/1981 | LG | 396-5473 | 14711 | Germany | $49.82 | 1 | 6.0 |
| Houston | Jorden | 05/03/1978 | Adobe | 970-1182 | 96036 | Canada | $47.31 | 2 | 1.5 |
| Harris | Merritt | 12/29/1989 | Apple | 160-5977 | 25178 | United States | $77.33 | 6 | 0.1 |
| Gregory | Brynn | 01/13/1994 | Adobe | 663-6039 | 91558 | Spain | $90.24 | 9 | 8.2 |
| Curry | Mason | 03/15/1969 | Sony | 115-4778 | 87513 | Australia | $21.68 | 5 | 6.6 |
| Holland | Alyssa | 06/25/1976 | Xerox | 704-4977 | 97921 | Canada | $50.31 | 7 | 9.5 |
| Logan | Shay | 09/13/1968 | IBM | 687-6482 | 03023 | United States | $46.39 | 8 | 7.6 |
| Moran | August | 07/04/1986 | Cisco | 651-1214 | 60737 | India | $22.64 | 1 | 7.5 |
| Vasquez | Kelsey | 03/31/1968 | Samsung | 470-7358 | 79655 | Germany | $84.05 | 3 | 4.5 |
| Stein | Lawrence | 10/15/1960 | Toshiba | 929-5407 | 36044 | Italy | $77.11 | 2 | 8.6 |
| Battle | Wylie | 01/03/1988 | 368-2276 | 37585 | Australia | $46.37 | 10 | 2.8 | |
| Booker | Logan | 12/16/1975 | Apple | 830-5701 | 22074 | United States | $40.71 | 1 | 9.0 |
| Gilbert | Chaney | 06/06/1970 | Sony | 132-5560 | 89630 | Canada | $78.45 | 9 | 1.2 |
| Buckley | Stone | 09/11/1980 | Cisco | 422-7998 | 74057 | United States | $30.01 | 2 | 7.9 |
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 Name | First Name | Birthday | Company | Phone | ZIP code | Country | Balance | Points | Rating |
|---|---|---|---|---|---|---|---|---|---|
| Banks | Travis | 05/04/1969 | Apple | 200-4324 | 64655 | Italy | $61.17 | 8 | 6.6 |
| Cain | Lawrence | 05/16/1994 | IBM | 701-3108 | 98004 | United States | $54.81 | 5 | 2.5 |
| Middleton | Dennis | 01/10/1992 | 580-9501 | 80913 | Spain | $24.83 | 4 | 5.2 | |
| Valenzuela | Lunea | 01/09/1966 | Cisco | 970-8655 | 51606 | Germany | $74.07 | 7 | 3.7 |
| Burgess | Quynn | 09/24/1988 | Mozilla | 430-8943 | 78965 | France | $16.13 | 8 | 2.9 |
| Lott | Lillith | 12/10/1978 | Dell | 587-2289 | 88178 | Australia | $30.12 | 1 | 7.9 |
| Freeman | Cheyenne | 01/28/1981 | LG | 396-5473 | 14711 | Germany | $49.82 | 1 | 6.0 |
| Houston | Jorden | 05/03/1978 | Adobe | 970-1182 | 96036 | Canada | $47.31 | 2 | 1.5 |
| Harris | Merritt | 12/29/1989 | Apple | 160-5977 | 25178 | United States | $77.33 | 6 | 0.1 |
| Gregory | Brynn | 01/13/1994 | Adobe | 663-6039 | 91558 | Spain | $90.24 | 9 | 8.2 |
| Curry | Mason | 03/15/1969 | Sony | 115-4778 | 87513 | Australia | $21.68 | 5 | 6.6 |
| Holland | Alyssa | 06/25/1976 | Xerox | 704-4977 | 97921 | Canada | $50.31 | 7 | 9.5 |
| Logan | Shay | 09/13/1968 | IBM | 687-6482 | 03023 | United States | $46.39 | 8 | 7.6 |
| Moran | August | 07/04/1986 | Cisco | 651-1214 | 60737 | India | $22.64 | 1 | 7.5 |
| Vasquez | Kelsey | 03/31/1968 | Samsung | 470-7358 | 79655 | Germany | $84.05 | 3 | 4.5 |
| Stein | Lawrence | 10/15/1960 | Toshiba | 929-5407 | 36044 | Italy | $77.11 | 2 | 8.6 |
| Battle | Wylie | 01/03/1988 | 368-2276 | 37585 | Australia | $46.37 | 10 | 2.8 | |
| Booker | Logan | 12/16/1975 | Apple | 830-5701 | 22074 | United States | $40.71 | 1 | 9.0 |
| Gilbert | Chaney | 06/06/1970 | Sony | 132-5560 | 89630 | Canada | $78.45 | 9 | 1.2 |
| Buckley | Stone | 09/11/1980 | Cisco | 422-7998 | 74057 | United States | $30.01 | 2 | 7.9 |
This also works very nicely on mobile phones, as a way to make wide tables responsive.
The table is horizontally scrollable while the first columns remains in place, so that the visitor always knows what the data in a row refers to.
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 Name | First Name | Birthday | Company | Phone | ZIP code | Country | Balance | Points | Rating |
|---|---|---|---|---|---|---|---|---|---|
| Banks | Travis | 05/04/1969 | Apple | 200-4324 | 64655 | Italy | $61.17 | 8 | 6.6 |
| Cain | Lawrence | 05/16/1994 | IBM | 701-3108 | 98004 | United States | $54.81 | 5 | 2.5 |
| Middleton | Dennis | 01/10/1992 | 580-9501 | 80913 | Spain | $24.83 | 4 | 5.2 | |
| Valenzuela | Lunea | 01/09/1966 | Cisco | 970-8655 | 51606 | Germany | $74.07 | 7 | 3.7 |
| Burgess | Quynn | 09/24/1988 | Mozilla | 430-8943 | 78965 | France | $16.13 | 8 | 2.9 |
| Lott | Lillith | 12/10/1978 | Dell | 587-2289 | 88178 | Australia | $30.12 | 1 | 7.9 |
| Freeman | Cheyenne | 01/28/1981 | LG | 396-5473 | 14711 | Germany | $49.82 | 1 | 6.0 |
| Houston | Jorden | 05/03/1978 | Adobe | 970-1182 | 96036 | Canada | $47.31 | 2 | 1.5 |
| Harris | Merritt | 12/29/1989 | Apple | 160-5977 | 25178 | United States | $77.33 | 6 | 0.1 |
| Gregory | Brynn | 01/13/1994 | Adobe | 663-6039 | 91558 | Spain | $90.24 | 9 | 8.2 |
| Curry | Mason | 03/15/1969 | Sony | 115-4778 | 87513 | Australia | $21.68 | 5 | 6.6 |
| Holland | Alyssa | 06/25/1976 | Xerox | 704-4977 | 97921 | Canada | $50.31 | 7 | 9.5 |
| Logan | Shay | 09/13/1968 | IBM | 687-6482 | 03023 | United States | $46.39 | 8 | 7.6 |
| Moran | August | 07/04/1986 | Cisco | 651-1214 | 60737 | India | $22.64 | 1 | 7.5 |
| Vasquez | Kelsey | 03/31/1968 | Samsung | 470-7358 | 79655 | Germany | $84.05 | 3 | 4.5 |
| Stein | Lawrence | 10/15/1960 | Toshiba | 929-5407 | 36044 | Italy | $77.11 | 2 | 8.6 |
| Battle | Wylie | 01/03/1988 | 368-2276 | 37585 | Australia | $46.37 | 10 | 2.8 | |
| Booker | Logan | 12/16/1975 | Apple | 830-5701 | 22074 | United States | $40.71 | 1 | 9.0 |
| Gilbert | Chaney | 06/06/1970 | Sony | 132-5560 | 89630 | Canada | $78.45 | 9 | 1.2 |
| Buckley | Stone | 09/11/1980 | Cisco | 422-7998 | 74057 | United States | $30.01 | 2 | 7.9 |
Usage instructions
To use these features with your tables, activate the “Fixed Rows and Fixed Columns” feature module on the “Modules” screen of TablePress Pro or TablePress Max. Then, configure the desired options in the “Fixed Rows and Fixed Columns” section on the table’s “Edit” screen.
Configuration parameters
To configure this module’s features, you can also use these configuration parameters in the “TablePress Table” block, the Elementor widget, or in the Shortcode that you are using to embed the table:
| Module | Slug | Configuration parameter | Name | Description | Type | Default value | |
|---|---|---|---|---|---|---|---|
| Fixed Columns | datatables-fixedheader-fixedcolumns | datatables_fixedcolumns | Fixed Columns | Which columns to fix to the left/right edge of the screen (left or right or left,right) when scrolling horizontally.Using the datatables_fixedcolumns_left_columns and datatables_fixedcolumns_right_columns settings is recommended over this one. | string | "" (empty string) | |
| Fixed Columns | datatables-fixedheader-fixedcolumns | datatables_fixedcolumns_left_columns | Fixed Columns Number of Left columns | Number of columns to fix from the left. | integer | 0 | |
| Fixed Columns | datatables-fixedheader-fixedcolumns | datatables_fixedcolumns_right_columns | Fixed Columns Number of Right columns | Number of columns to fix from the right. | integer | 0 | |
| Fixed Columns | datatables-fixedheader-fixedcolumns | datatables_scrollx_buttons | Horizontal Scroll Buttons | Whether to show left/right buttons for the horizontal scrolling. | boolean (true or false) | false | |
| Fixed Rows | datatables-fixedheader-fixedcolumns | datatables_fixedheader | Fixed Header | What to fix to the top/bottom edge of the screen (top or bottom or top,bottom) when scrolling vertically. | string | "" (empty string) | |
| Fixed Rows | datatables-fixedheader-fixedcolumns | datatables_fixedheader_offsettop | Fixed Header Offset | Offset in pixels at which the fixed header is sticky, from the top edge. This is useful when a site already has a fixed main site navigation, so that the table header row sticks below that. | integer | 0 |