npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

floatthead

v2.2.5

Published

fixed table header plugin that works

Downloads

81,514

Readme

gif showing plugin in action

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. Supports responsive tables.

Install

Package managers

npm install floatthead
bower install floatThead

Download code

Latest Release (zip)

Via CDN

https://cdnjs.com/libraries/floatthead/
https://www.jsdelivr.com/#!jquery.floatthead
https://unpkg.com/floatthead

<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/floatthead"></script>
<script>
  $(() => $('table').floatThead());
</script>

For java people

Webjar

Wrappers

vuejs component by @tmlee

angularjs directive by @brandon-barker

yii2 framework wrapper by @bluezed

Why not just use position:sticky?


You probably should! This plugin was created years before that existed. There are still a few reasons why you might want to use this plugin:

  • Your code runs in the real world, where some browsers don't support position: sticky.
  • Any kind of non-standard scroll parent scenario, where the thing that you scroll with is not supported by position: sticky.
    • Your table's scroll parent isn't the body, but the body is what scrolls and you can't change this.
    • Your table scrolls horizontally within a container, but vertically within the page.
  • Your sticky top position is dynamic, or you want to know when the header becomes sticky and you don't want to write code to do this.
  • You don't want to learn these newfangled CSS things, you want a proven solution that works and uses jQuery, the greatest thing ever!

Things this plugin does:


  • In prod @ big corporations and opensource projects. Maintained. See open issues.
  • Works on tables within a scrollable container or whole window scrolling
  • Works with responsive table wrappers
  • Works with dynamically hidden/added/removed columns
  • Does not clone the thead - so your events stay bound
  • Does what position:fixed cannot do (and on browsers that do not support it)
  • Does not mess with your styles, and doesnt require any css (see fixed vs absolute position modes)
  • Works with border-collapse variants, weird margins, padding and borders
  • Works with libs like datatables, perfect-scrollbar, bootstrap3, and many more
  • Header can be floated with position:absolute which adds a wrapper, or position:fixed which does not. Both have their pros and cons. By default the best option is chosen based on your configuration

Things this plugin does NOT do:


  • Does not float the footer
  • Does not let you lock the first column like in excel
  • Safari and mobile safari are not supported. It might work, or it might not, depending on your markup and safari version.
  • RTL is not really supported - it might work in overflow scrolling mode, if you are lucky. Expects dir on html element.
  • Layout issues resulting from document zoom not being 100% are not supported.

Common Pitfalls

If you use css and html best practices, this plugin will work. If you are stuck in 1999, you better read the faq.

How to get help with the floatThead

All issues should be reported through github.

Requirements:

  • jQuery 1.8.x or better (1.9 compliant) (or jQuery 1.7.x and jQuery UI core)

Supported Browsers:

Change Log

see CHANGELOG.md

Who is using floatThead ?

Ctrl O

  • Ctrl O provides simple and innovative products to help an organization's business processes. Linkspace, its flagship product, helps share information between teams and individuals, in a simple and effective manner.

WheresTheGig.com

  • A free service for the musical community

Google

  • Internally, I happen to know...

tld-list.com

  • The first table you see.

Samsung

  • For the internet of things!

Around 153,000 hits on github code search

License

MIT