jQuery tablesorter 2.0 - Sticky Header Widget

# tablesorter

## Sticky Header Widget

### Flexible client-side table sorting

Back to documentation

### Notes

- In v2.18.4, added a Magnific popup example to this page. Note Please take note of the extra css needed to keep the sticky header aligned.
- In v2.18.0,
  - Nested tables with sticky headers now stack properly. See the new example added to the bottom of this demo page.
  - Added `stickyHeaders_xScroll` and `stickyHeaders_yScroll` widget options.
  - Any defined `onRenderHeader` function is now executed on the cloned sticky header table cells; the `onRenderTemplate` function is not! See the change log section for more details.
- Note To access the added sticky table content from your code without worrying about using the ID, you can use `table.config.widgetOptions.$sticky`.
- Note Add the class name `sticky-false` to any header rows you don't want to become sticky (v2.1.18).

- You will need to modify the `headerTemplate` option to include the jQuery UI icon! See the example in the code (v2.7).
- Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!
- Multiple rows in the header, including the filter row, will become sticky.
- As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.
- Because of the limitations of Internet Explorer version 7 and older, this widget will not work.

### Options

#### stickyHeaders widget defaults (added inside of tablesorter `widgetOptions`)

TIP! Click on the link in the function column to reveal full details (or toggle|show|hide all) or double click to update the browser location.

Option | Default | Description
--- | --- | ---
stickyHeaders | '' | Include any extra class name to be added to the sticky header table (v2.1; v2.18.0) Note prior to v2.18.0, this class was applied to the sticky table `thead`; after v2.18.0, the `thead` and `caption` are wrapped in a div that is made sticky, with this class name. Modified in v2.11 so that "tablesorter-stickyHeader" class is always added and this option only adds additional classes.
stickyHeaders_offset | 0 | Set this to a number (in pixels) or jquery selector targeting the `position:fixed` element in which to place the sticky header below while scrolling.
stickyHeaders_cloneId | '-sticky' | If the original table has an ID, then the value from this option is added to the end of the cloned table to maintain a unique ID (v2.9). It contains a suffix to add to any table id. Its default value is `-sticky`
stickyHeaders_addResizeEvent | true | When `true`, the `$.tablesorter.addHeaderResizeEvent` function is applied to the table header cells so a "resize" event is triggered and the sticky headers widget can then properly resize the cloned table header cells to match the originals.
stickyHeaders_includeCaption | true | If `false` and a table caption exist, it won't be included in the sticky header.
stickyHeaders_zIndex | 2 | Adjust the zIndex of the stickyHeaders element as desired.
stickyHeaders_attachTo | null | Set this option as a jQuery selector or object where the sticky header will be attached (v2.14.4). Setting this option with either a jQuery selector string (`".wrapper"`) or jQuery object (`$(".wrapper")`). This option contains the target to which the sticky header will attach - see the second example below.
stickyHeaders_filteredToTop | true | Scroll table top into view after filtering (v2.16.2) This is needed when the user choses to filter the table which results in fewer rows than are currently visible in the browser viewport. So, the sticky header may still exist, but the table body may not be seen. Setting this option to `true` forces the original table header to scroll back into view.
stickyHeaders_xScroll | null | jQuery selector or object that will be used to monitor horizontal scroll position(v2.18.0) Defaults: xScroll > attachTo > window Indicate the element (jQuery selector or obect) in which to monitor for changes in scroll position; If undefined (`null` by default), the window is monitored.
stickyHeaders_yScroll | null | jQuery selector or object that will be used to monitor vertical scroll position (v2.18.0) Defaults: yScroll > attachTo > window Indicate the element (jQuery selector or obect) in which to monitor for changes in scroll position; If undefined (`null` by default), the window is monitored.

### Change log

- v2.18.0:
  - Nested tables with sticky headers now stack properly. See the new example added to the bottom of this demo page.
  - Added `stickyHeaders_xScroll` and `stickyHeaders_yScroll` options to indicate the element (jQuery selector or obect) in which to monitor for changes in scroll position; If undefined (`null` by default), the window is monitored.
  - Any defined `onRenderHeader` function is now executed on the cloned sticky header table cells. There are now 3 parameters available to this function:
    - `index` - header cell index; this is not the column index!
    - `config` - the `table.config` settings for the table.
    - `$table` - the target of this parameter changes:
      - For the original table header cells, this parameter is a jQuery object pointing to the original table; this table has the class name `hasStickyHeaders`.
      - When the sticky table header cells are processed, this parameter is a jQuery object pointing to a copy of the table that is used as a sticky header; this table has the class name `containsStickyHeaders`.
    Note Any defined `onRenderTemplate` function is not called on the sticky header because it is a clone of the already rendered header cell; instead use `onRenderHeader` to attach event listeners, etc.
  - Removed jQuery UI theme from the theme selector in this demo to accomodate adding the accordion. With the current setup, changing the table theme would continue to show the jQuery UI class names on the table (uitheme is not removed when switching themes), so the tables became a chimera of jQuery UI and the selected theme, and the accordion would become un-styled; it was a real mess.
- v2.14.4: Added `cssStickyHeaders_attachTo` option (default set to `null`).
  - Setting this option with either a jQuery selector string (`".wrapper"`) or jQuery object (`$(".wrapper")`).
  - This option contains the target to which the sticky header will attach - see the second example below.
- v2.9:
  - As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.
  - Added a widget option named `stickyHeaders_cloneId`
    - It contains a suffix to add to any table id.
    - Its default value is `-sticky`
  - Table captions and any additional rows (filter widget row) will also be included in the sticky header.
- v2.7: You will need to modify the `headerTemplate` option to include the jQuery UI icon! See the example in the code.
- v2.1.18: Add the class name `sticky-false` to any header rows you don't want to become sticky.
- v2.1.17: Multiple rows in the header will become sticky.
- v2.1 (updated v2.11): Added a widget option named `stickyHeaders` option which contains the css class name applied to the actual sticky header. Modified in v2.11 so that "tablesorter-stickyHeader" class is always added and this option only adds additional classes.

# CSS

# Javascript

# Demo

Choose Theme:

Include Caption:

### Sticky headers in a popup window

- Show table in Magnific popup window
- Show table in jQuery UI Dialog
- Show table in Bootstrap Modal

Student Grades
Name | Major | Sex | English | Japanese | Calculus | Geometry
--- | --- | --- | --- | --- | --- | ---
Name | Major | Sex | English | Japanese | Calculus | Geometry
Student01 | Languages | male | 80 | 70 | 75 | 80
Student02 | Mathematics | male | 90 | 88 | 100 | 90
Student03 | Languages | female | 85 | 95 | 80 | 85
Student04 | Languages | male | 60 | 55 | 100 | 100
Student05 | Languages | female | 68 | 80 | 95 | 80
Student06 | Mathematics | male | 100 | 99 | 100 | 90
Student07 | Mathematics | male | 85 | 68 | 90 | 90
Student08 | Languages | male | 100 | 90 | 90 | 85
Student09 | Mathematics | male | 80 | 50 | 65 | 75
Student10 | Languages | male | 85 | 100 | 100 | 90
Student11 | Languages | male | 86 | 85 | 100 | 100
Student12 | Mathematics | female | 100 | 75 | 70 | 85
Student13 | Languages | female | 100 | 80 | 100 | 90
Student14 | Languages | female | 50 | 45 | 55 | 90
Student15 | Languages | male | 95 | 35 | 100 | 90
Student16 | Languages | female | 100 | 50 | 30 | 70
Student17 | Languages | female | 80 | 100 | 55 | 65
Student18 | Mathematics | male | 30 | 49 | 55 | 75
Student19 | Languages | male | 68 | 90 | 88 | 70
Student20 | Mathematics | male | 40 | 45 | 40 | 80
Student21 | Languages | male | 50 | 45 | 100 | 100
Student22 | Mathematics | male | 100 | 99 | 100 | 90
Student23 | Languages | female | 85 | 80 | 80 | 80
student23 | Mathematics | male | 82 | 77 | 0 | 79
student24 | Languages | female | 100 | 91 | 13 | 82
student25 | Mathematics | male | 22 | 96 | 82 | 53
student26 | Languages | female | 37 | 29 | 56 | 59
student27 | Mathematics | male | 86 | 82 | 69 | 23
student28 | Languages | female | 44 | 25 | 43 | 1
student29 | Mathematics | male | 77 | 47 | 22 | 38
student30 | Languages | female | 19 | 35 | 23 | 10
student31 | Mathematics | male | 90 | 27 | 17 | 50
student32 | Languages | female | 60 | 75 | 33 | 38
student33 | Mathematics | male | 4 | 31 | 37 | 15
student34 | Languages | female | 77 | 97 | 81 | 44
student35 | Mathematics | male | 5 | 81 | 51 | 95
student36 | Languages | female | 70 | 61 | 70 | 94
student37 | Mathematics | male | 60 | 3 | 61 | 84
student38 | Languages | female | 63 | 39 | 0 | 11
student39 | Mathematics | male | 50 | 46 | 32 | 38
student40 | Languages | female | 51 | 75 | 25 | 3
student41 | Mathematics | male | 43 | 34 | 28 | 78
student42 | Languages | female | 11 | 89 | 60 | 95
student43 | Mathematics | male | 48 | 92 | 18 | 88
student44 | Languages | female | 82 | 2 | 59 | 73
student45 | Mathematics | male | 91 | 73 | 37 | 39
student46 | Languages | female | 4 | 8 | 12 | 10
student47 | Mathematics | male | 89 | 10 | 6 | 11
student48 | Languages | female | 90 | 32 | 21 | 18
student49 | Mathematics | male | 42 | 49 | 49 | 72
student50 | Languages | female | 56 | 37 | 67 | 54

### Attach sticky header to browser window

Student Grades
Name | Major | Sex | English | Japanese | Calculus | Geometry
--- | --- | --- | --- | --- | --- | ---
Name | Major | Sex | English | Japanese | Calculus | Geometry
Student01 | Languages | male | 80 | 70 | 75 | 80
Student02 | Mathematics | male | 90 | 88 | 100 | 90
Student03 | Languages | female | 85 | 95 | 80 | 85
Student04 | Languages | male | 60 | 55 | 100 | 100
Student05 | Languages | female | 68 | 80 | 95 | 80
Student06 | Mathematics | male | 100 | 99 | 100 | 90
Student07 | Mathematics | male | 85 | 68 | 90 | 90
Student08 | Languages | male | 100 | 90 | 90 | 85
Student09 | Mathematics | male | 80 | 50 | 65 | 75
Student10 | Languages | male | 85 | 100 | 100 | 90
Student11 | Languages | male | 86 | 85 | 100 | 100
Student12 | Mathematics | female | 100 | 75 | 70 | 85
Student13 | Languages | female | 100 | 80 | 100 | 90
Student14 | Languages | female | 50 | 45 | 55 | 90
Student15 | Languages | male | 95 | 35 | 100 | 90
Student16 | Languages | female | 100 | 50 | 30 | 70
Student17 | Languages | female | 80 | 100 | 55 | 65
Student18 | Mathematics | male | 30 | 49 | 55 | 75
Student19 | Languages | male | 68 | 90 | 88 | 70
Student20 | Mathematics | male | 40 | 45 | 40 | 80
Student21 | Languages | male | 50 | 45 | 100 | 100
Student22 | Mathematics | male | 100 | 99 | 100 | 90
Student23 | Languages | female | 85 | 80 | 80 | 80
student23 | Mathematics | male | 82 | 77 | 0 | 79
student24 | Languages | female | 100 | 91 | 13 | 82
student25 | Mathematics | male | 22 | 96 | 82 | 53
student26 | Languages | female | 37 | 29 | 56 | 59
student27 | Mathematics | male | 86 | 82 | 69 | 23
student28 | Languages | female | 44 | 25 | 43 | 1
student29 | Mathematics | male | 77 | 47 | 22 | 38
student30 | Languages | female | 19 | 35 | 23 | 10
student31 | Mathematics | male | 90 | 27 | 17 | 50
student32 | Languages | female | 60 | 75 | 33 | 38
student33 | Mathematics | male | 4 | 31 | 37 | 15
student34 | Languages | female | 77 | 97 | 81 | 44
student35 | Mathematics | male | 5 | 81 | 51 | 95
student36 | Languages | female | 70 | 61 | 70 | 94
student37 | Mathematics | male | 60 | 3 | 61 | 84
student38 | Languages | female | 63 | 39 | 0 | 11
student39 | Mathematics | male | 50 | 46 | 32 | 38
student40 | Languages | female | 51 | 75 | 25 | 3
student41 | Mathematics | male | 43 | 34 | 28 | 78
student42 | Languages | female | 11 | 89 | 60 | 95
student43 | Mathematics | male | 48 | 92 | 18 | 88
student44 | Languages | female | 82 | 2 | 59 | 73
student45 | Mathematics | male | 91 | 73 | 37 | 39
student46 | Languages | female | 4 | 8 | 12 | 10
student47 | Mathematics | male | 89 | 10 | 6 | 11
student48 | Languages | female | 90 | 32 | 21 | 18
student49 | Mathematics | male | 42 | 49 | 49 | 72
student50 | Languages | female | 56 | 37 | 67 | 54

### Attach sticky header to its parent

Student Grades
Account # | First Name | Last Name | Age | Total | Discount | Diff
--- | --- | --- | --- | --- | --- | ---
A43 | Peter | Parker | 28 | 9.99 | 20.3% | +3
A255 | John | Hood | 33 | 19.99 | 25.1% | -7
A33 | Clark | Kent | 18 | 15.49 | 44.2% | -13
A11 | Bruce | Almighty | 45 | 153.19 | 44% | +19
A102 | Bruce | Evans | 56 | 153.19 | 23% | +9
A23 | Mike | Peters | 22 | 5.69 | 20.3% | +2
A55 | Leslie | Kent | 33 | 15.99 | 25.1% | -3
A3 | Frank | Mint | 44 | 12.59 | 44.2% | -12
A21 | Joe | Thomas | 45 | 15.25 | 44% | +12
A12 | Tess | Evans | 66 | 13.59 | 23% | +4
A21 | Peter | Dunn | 12 | 2.99 | 21.1% | +2
A33 | Harry | Jones | 13 | 19.49 | 22.2% | -6
A13 | John | James | 16 | 13.89 | 42.1% | -13
A71 | Nick | Parker | 45 | 13.89 | 44% | +29
A21 | Charles | Dunn | 19 | 15.49 | 22% | +3

### Nested sticky header tables

Main table header
Main table - row 1
Main table - row 2
Header for the nested table 1
Second header row for nested table 1
data in the nested table 1 - row 1
data in the nested table 1 - row 2
data in the nested table 1 - row 3
data in the nested table 1 - row 4
data in the nested table 1 - row 5
Nested table 2 caption
Header for the nested table 2
Second header row for nested table 2
data in the nested table 2 - row 1
data in the nested table 2 - row 2
data in the nested table 2 - row 3
data in the nested table 2 - row 4
data in the nested table 2 - row 5
data in the nested table 2 - row 6
data in the nested table 2 - row 7
data in the nested table 2 - row 8
data in the nested table 2 - row 9
data in the nested table 2 - row 10
data in the nested table 2 - row 11
data in the nested table 2 - row 12
data in the nested table 2 - row 13
data in the nested table 2 - row 14
data in the nested table 2 - row 15
data in the nested table 2 - row 16
data in the nested table 2 - row 17
data in the nested table 2 - row 18
data in the nested table 2 - row 19
data in the nested table 2 - row 20
data in the nested table 1 - row 6
data in the nested table 1 - row 7
data in the nested table 1 - row 8
data in the nested table 1 - row 9
data in the nested table 1 - row 10
data in the nested table 1 - row 11
data in the nested table 1 - row 12
data in the nested table 1 - row 13
data in the nested table 1 - row 14
data in the nested table 1 - row 15
data in the nested table 1 - row 16
data in the nested table 1 - row 17
data in the nested table 1 - row 18
data in the nested table 1 - row 19
data in the nested table 1 - row 20
Main table - row 3
Nested table 3 caption
Header for the nested table 3
data in the nested table 3 - row 1
data in the nested table 3 - row 2
data in the nested table 3 - row 3
data in the nested table 3 - row 4
data in the nested table 3 - row 5
data in the nested table 3 - row 6
data in the nested table 3 - row 7
data in the nested table 3 - row 8
data in the nested table 3 - row 9
data in the nested table 3 - row 10
data in the nested table 3 - row 11
data in the nested table 3 - row 12
data in the nested table 3 - row 13
data in the nested table 3 - row 14
data in the nested table 3 - row 15
data in the nested table 3 - row 16
data in the nested table 3 - row 17
data in the nested table 3 - row 18
data in the nested table 3 - row 19
data in the nested table 3 - row 20
Main table - row 4

Next up: Zebra stripe widget ››