Notes

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:

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

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

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 ››

tablesorter

Sticky Header Widget

Flexible client-side table sorting

Notes

Options

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

Change log

CSS

Javascript

Demo

tablesorter

Sticky Header Widget

Flexible client-side table sorting

Notes

Options

stickyHeaders widget defaults (added inside of tablesorter widgetOptions)

Change log

CSS

Javascript

Demo

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