PHPackages                             jasonbrady/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. jasonbrady/sticky-table-headers

ActiveLibrary[Utility & Helpers](/categories/utility)

jasonbrady/sticky-table-headers
===============================

jQuery sticky table headers plugin

08.4k↑325%1[1 PRs](https://github.com/jasonbrady/StickyTableHeaders/pulls)JavaScript

Since Aug 8Pushed 8y agoCompare

[ Source](https://github.com/jasonbrady/StickyTableHeaders)[ Packagist](https://packagist.org/packages/jasonbrady/sticky-table-headers)[ RSS](/packages/jasonbrady-sticky-table-headers/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependenciesVersions (2)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](http://sports.yahoo.com/nba/stats/byposition?pos=PG,SG,G,GF,SF,PF,F,FC,C) 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
```

Alternatively, you can download the latest version from [jquery.stickytableheaders.min.js](https://raw.github.com/jmosbech/StickyTableHeaders/master/js/jquery.stickytableheaders.min.js).

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](https://github.com/jmosbech/StickyTableHeaders/tree/master/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});
```

### 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](https://github.com/jmosbech/StickyTableHeaders/tree/master/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

28

—

LowBetter than 52% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 83.4% 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.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/22871612?v=4)[Jason Brady](/maintainers/jasonbrady)[@jasonbrady](https://github.com/jasonbrady)

---

Top Contributors

[![jmosbech](https://avatars.githubusercontent.com/u/1012710?v=4)](https://github.com/jmosbech "jmosbech (136 commits)")[![jasonbrady](https://avatars.githubusercontent.com/u/22871612?v=4)](https://github.com/jasonbrady "jasonbrady (4 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)")[![dkhayzin](https://avatars.githubusercontent.com/u/6217510?v=4)](https://github.com/dkhayzin "dkhayzin (2 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)")[![alekstorm](https://avatars.githubusercontent.com/u/711371?v=4)](https://github.com/alekstorm "alekstorm (1 commits)")[![raisoblast](https://avatars.githubusercontent.com/u/753819?v=4)](https://github.com/raisoblast "raisoblast (1 commits)")[![axelarge](https://avatars.githubusercontent.com/u/289689?v=4)](https://github.com/axelarge "axelarge (1 commits)")[![ced-b](https://avatars.githubusercontent.com/u/5283269?v=4)](https://github.com/ced-b "ced-b (1 commits)")[![coderkk](https://avatars.githubusercontent.com/u/1467826?v=4)](https://github.com/coderkk "coderkk (1 commits)")[![floticerus](https://avatars.githubusercontent.com/u/1765749?v=4)](https://github.com/floticerus "floticerus (1 commits)")

### Embed Badge

![Health badge](/badges/jasonbrady-sticky-table-headers/health.svg)

```
[![Health](https://phpackages.com/badges/jasonbrady-sticky-table-headers/health.svg)](https://phpackages.com/packages/jasonbrady-sticky-table-headers)
```

###  Alternatives

[nfephp-org/sped-esocial

e-Social library

18537.5k](/packages/nfephp-org-sped-esocial)[netgen/information-collection-bundle

Information collection alike feature for Ibexa Platform

1945.8k11](/packages/netgen-information-collection-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)