floatthead
Advanced tools
#Documentation & Examples: http://mkoryak.github.io/floatThead/
Float the table header on scroll. No changes to your HTML/CSS are required, it just works. Supports floating the header while scrolling within the window or while scrolling within a container with overflow.
:heart_eyes_cat:My cat loves it:heart_eyes_cat:
###Install
bower install floatThead
npm install floatthead
http://cdnjs.com/libraries/floatthead/
http://www.jsdelivr.com/#!jquery.floatthead
angularjs directive by @brandon-barker
yii2 framework wrapper by @bluezed
If you use css and html best practices, this plugin will work. If you are stuck in 1999, you better read this.
All issues should be reported through github. If you don't have an account you can make one.
Providing the following will greatly increase the chances of your issue being resolved quickly:
I will do my best to help you in a timely manner.
FloatThead will not work properly in IE9 unless you have the following meta tag in the head of the page:
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
With very big tables, you may also run into this exciting bug: http://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly
Watch for it.
reflowed event, see docsposition. value mappings (old -> new) are: [true -> 'absolute', false -> 'fixed', null -> 'auto']top and 'scrollingBottom' to bottomfloatThead-floatContainer class from the $floatContainer because floatThead-container class is already there and it is configurable via floatContainerClass option.autoReflow optiongetRowGroups, method which was busted when the header was floatedautoReflow option should work better if your browser supports MutationObserverHuge thanks to CoryDuncan, ithielnor, jurko-gospodnetic and mhwlng for your PRs
enableAria optioncellTag option, use headerCellSelector instead (see docs)destroy method that get the table back into a more pristine state<colgroup> elementscellpadding and cellspacingcaption tag supportYour site? email me: my last name at gmail
There are plenty of other fixed header / floating header / scrolling table header plugins that attempt to do the same thing this plugin does. None of them support both window and overflow scrolling and many of them depend on special css or require that you set the table column widths. Some of them are good and some of them suck. Go ahead and check them out too.
I have compiled a list here with comments on each one:
| Plugin | Window Scrolling | Overflow-X Scrolling | Overflow-Y Scrolling | No Special CSS | Keeps Bound Events | Freeze Columns | |:-------------:|:-------------:|:-----:|:-------------:|:-------------:|:-----:|:-----:|:-----:| | FloatThead | yes | yes | yes | yes | yes | no | | Fixed-Table-Header | no | yes | no | yes | no | no | | jquery.scrollTableBody | no | yes | yes | no | ?? | no | | Fixed table rows cols | no | yes | yes | no | ?? | yes | | Table Fixed Header | yes | no | no | yes | no | no | | Sticky Table Header | yes | no | no | yes | yes | no | | Grid | no | yes | yes | yes | yes | no |
Fixed-Table-Header This is the original. It has been around for ages and it will be the first plugin you find when you start looking. It also has a ton of open unresolved issues. It does not support window scrolling, it does not seem to support y-scrolling withing the container. It loses the events you attached to the thead. Lots of open issues. Stay away.
Fixed table rows cols Does not support window scrolling. Requires you to specify the column widths for the table. This means that the table will not be able to optimally lay itself out. It does support freezing columns in place. If you need that, this might be the plugin for you.
jquery.scrollTableBody Does not support window scrolling. A newcomer to the scene, not a mature project. Has some major issues with cell padding. Stay away until issues are resolved.
Grid This lib is very different from the rest because its main usecase is to give you a sortable grid. You do not run this plugin on an existing table - you need to provide a json or xml data source. This is a great lightweight replacement for datatables. This may be the plugin for you if you are not converting an existing table.
Table Fixed Header This is a window scrolling plugin, does not support overflow scrolling. Does not work properly when the window is resized and the table width changes. Floated header sticks around if you scroll past table. Author welcomes pull requests but does not fix issues. Stay away
Sticky Table Header This is a window scrolling plugin. Does not support overflow scrolling. It is probably the best window scrolling plugin (besides this one). The author seems to fix issues as they arise.
Big thanks to jetbrains for giving me an open source webstorm license for this project. They make the best IDEs.
MIT
1.3.2
reflowed event, see docsFAQs
fixed table header plugin that works
The npm package floatthead receives a total of 19,624 weekly downloads. As such, floatthead popularity was classified as popular.
We found that floatthead demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.