Have ideas to improve npm?Join in the discussion! »

    floatthead
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.1 • Public • Published

    jquery.floatThead

    woot

    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

    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 more, 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...

    Samsung

    • For the internet of things!

    compat-table

    Around 135,000 hits on github code search

    License

    MIT

    Install

    npm i floatthead

    DownloadsWeekly Downloads

    7,682

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    127 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar