PHPackages jmosbech/sticky-table-headers - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. jmosbech/sticky-table-headers ActiveLibrary[Utility & Helpers](/categories/utility) jmosbech/sticky-table-headers ============================= jQuery sticky table headers plugin v0.1.24(8y ago)9074.9k↓50%293[41 issues](https://github.com/jmosbech/StickyTableHeaders/issues)[17 PRs](https://github.com/jmosbech/StickyTableHeaders/pulls)MITJavaScript Since Jan 14Pushed 5y ago49 watchersCompare [ Source](https://github.com/jmosbech/StickyTableHeaders)[ Packagist](https://packagist.org/packages/jmosbech/sticky-table-headers)[ Docs](https://github.com/jmosbech/StickyTableHeaders)[ RSS](/packages/jmosbech-sticky-table-headers/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (5)Used By (0) StickyTableHeaders ================== [](#stickytableheaders) So what's it good for? Well, let's say you want to display a long list of fairly uniform tabluar data, like [stock exchange listings](http://online.barrons.com/public/page/majormarket-nysecomposite-A.html) or [sport statistics](https://sports.yahoo.com/nfl/stats/weekly/?sortStatId=PASSING_YARDS&selectedTable=7) but you don't want your users to get lost in the data as they scroll down on the page. StickyTableHeaders to the rescue: By applying the StickyTableHeaders jQuery plugin to the table, the column headers will stick to the top of the viewport as you scroll down. Go ahead and [try out a demo](http://jsfiddle.net/jmosbech/stFcx/). The code is based on [this proof of concept](http://stackoverflow.com/questions/1030043/html-table-headers-always-visible-at-top-of-window-when-viewing-a-large-table/1041566#1041566). Installation ------------ [](#installation) The best way to install is using [npm](https://www.npmjs.com/): ``` npm install sticky-table-headers ``` or [Bower](http://bower.io/): ``` bower install StickyTableHeaders ``` or by loading it directly from the [unpkg CDN](https://unpkg.com/sticky-table-headers): ``` ``` Usage ----- [](#usage) Initializing the plugin is pretty straight forward: ``` $('table').stickyTableHeaders(); ``` ### Tear down [](#tear-down) To remove the plugin: ``` $('table').stickyTableHeaders('destroy'); ``` ### Trigger an update manually [](#trigger-an-update-manually) ``` $(window).trigger('resize.stickyTableHeaders'); ``` ### Options [](#options) You can initialize the plugin with an options map to tweak the behavior. The following options are supported: #### `fixedOffset` [](#fixedoffset) A number or jQuery object specifying how much the sticky header should be offset from the top of the page: ``` $('table').stickyTableHeaders({fixedOffset: $('#header')}); ``` #### `scrollableArea` [](#scrollablearea) A DOM element or jQuery object. Allows you to overwrite which surrounding element is scrolling. Defaults to `window`. [Check this demo for an example](/demo/scrollable-div.html): ``` $('table').stickyTableHeaders({scrollableArea: $('.scrollable-area')}); ``` #### `cacheHeaderHeight` [](#cacheheaderheight) Performance tweak: When set to `true` the plugin will only recalculate the height of the header cells when the width of the table changes. Default value: `false` ``` $('table').stickyTableHeaders({cacheHeaderHeight: true}); ``` #### z-index [](#z-index) The plugin uses z-index to make the thead overlay the body. You can override the z-index value by passing in a `zIndex` option: ``` $('table').stickyTableHeaders({zIndex: 999}); ``` ### Reinitialize [](#reinitialize) As described in [pull request #33](https://github.com/jmosbech/StickyTableHeaders/pull/33) responsive pages might need to reinitialize the plugin when the user resizes his browser. This is can be done by calling the plugin with the new options: ``` $('table').stickyTableHeaders({fixedOffset: [new-offset]}); ``` ### Events [](#events) The plugin triggers the following events on the targeted `` element: - `clonedHeader.stickyTableHeaders`: When the header clone is created. - `enabledStickiness.stickyTableHeaders`: When the sticky header is enabled. - `disabledStickiness.stickyTableHeaders`: When the sticky header is disabled. Confused? --------- [](#confused) If any of this is confusing, please check out the [/demo](/demo) folder. There are a couple of examples in there. E.g. you can see how to use it with Twitter Bootstrap. Known Issues ------------ [](#known-issues) - Internet Explorer: You need to set the padding of the ``s explicitly in the css in order to make the plugin work - Internet Explorer: Adding horizontal margin to the table causes the header to be misaligned when scrolling. (Issue #10) - Using the plugin together with [tablesorter](http://tablesorter.com/docs/) breaks in Internet Explorer 8 Browser Support --------------- [](#browser-support) The plugin has been verified to work in: - Chrome 35 - Firefox 29 - Internet Explorer 8-11 - Safari 5 NOTE: It does not work in Internet Explorer 7 (but it degrades nicely) ### Health Score 41 — FairBetter than 89% of packages Maintenance19 Infrequent updates — may be unmaintained Popularity47 Moderate usage in the ecosystem Community34 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 84.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 4 Last Release 3046d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/9feed51e3e8721770ad2e76ba32834efe5504622c974e398e0ee2725b7bd0259?d=identicon)[f1mishutka](/maintainers/f1mishutka) --- Top Contributors [![jmosbech](https://avatars.githubusercontent.com/u/1012710?v=4)](https://github.com/jmosbech "jmosbech (159 commits)")[![alexbeletsky](https://avatars.githubusercontent.com/u/304929?v=4)](https://github.com/alexbeletsky "alexbeletsky (4 commits)")[![arfordweb](https://avatars.githubusercontent.com/u/1002408?v=4)](https://github.com/arfordweb "arfordweb (3 commits)")[![grigorieff](https://avatars.githubusercontent.com/u/1093528?v=4)](https://github.com/grigorieff "grigorieff (2 commits)")[![jasonbrady](https://avatars.githubusercontent.com/u/22871612?v=4)](https://github.com/jasonbrady "jasonbrady (2 commits)")[![dkhayzin](https://avatars.githubusercontent.com/u/6217510?v=4)](https://github.com/dkhayzin "dkhayzin (2 commits)")[![floticerus](https://avatars.githubusercontent.com/u/1765749?v=4)](https://github.com/floticerus "floticerus (1 commits)")[![Gandhi11](https://avatars.githubusercontent.com/u/4001049?v=4)](https://github.com/Gandhi11 "Gandhi11 (1 commits)")[![kavun](https://avatars.githubusercontent.com/u/662069?v=4)](https://github.com/kavun "kavun (1 commits)")[![krishnasagr](https://avatars.githubusercontent.com/u/2046123?v=4)](https://github.com/krishnasagr "krishnasagr (1 commits)")[![KyleAMathews](https://avatars.githubusercontent.com/u/71047?v=4)](https://github.com/KyleAMathews "KyleAMathews (1 commits)")[![meodai](https://avatars.githubusercontent.com/u/608386?v=4)](https://github.com/meodai "meodai (1 commits)")[![mitermayer](https://avatars.githubusercontent.com/u/1042131?v=4)](https://github.com/mitermayer "mitermayer (1 commits)")[![mygoodgomez](https://avatars.githubusercontent.com/u/1099052?v=4)](https://github.com/mygoodgomez "mygoodgomez (1 commits)")[![nawawi](https://avatars.githubusercontent.com/u/1203635?v=4)](https://github.com/nawawi "nawawi (1 commits)")[![raisoblast](https://avatars.githubusercontent.com/u/753819?v=4)](https://github.com/raisoblast "raisoblast (1 commits)")[![alekstorm](https://avatars.githubusercontent.com/u/711371?v=4)](https://github.com/alekstorm "alekstorm (1 commits)")[![simon04](https://avatars.githubusercontent.com/u/782446?v=4)](https://github.com/simon04 "simon04 (1 commits)")[![axelarge](https://avatars.githubusercontent.com/u/289689?v=4)](https://github.com/axelarge "axelarge (1 commits)")[![c960657](https://avatars.githubusercontent.com/u/111346?v=4)](https://github.com/c960657 "c960657 (1 commits)") --- Tags jqueryheaderstablesticky ### Embed Badge ![Health badge](/badges/jmosbech-sticky-table-headers/health.svg) ``` [![Health](https://phpackages.com/badges/jmosbech-sticky-table-headers/health.svg)](https://phpackages.com/packages/jmosbech-sticky-table-headers) ``` ### Alternatives [datatables.net/datatables.net DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is jQuery DataTables 56156.5k25](/packages/datatablesnet-datatablesnet)[fedemotta/yii2-widget-datatables DataTables widget for Yii2 34179.4k1](/packages/fedemotta-yii2-widget-datatables)[datatables.net/datatables.net-bs5 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap5\](https://getbootstrap.com/) 2185.7k16](/packages/datatablesnet-datatablesnet-bs5)[datatables.net/datatables.net-bs4 DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[Bootstrap4\](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 2924.0k15](/packages/datatablesnet-datatablesnet-bs4)[datatables.net/datatables.net-dt DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is DataTables with styling for \[DataTables\](https://datatables.net/) 1835.1k15](/packages/datatablesnet-datatablesnet-dt) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)