How to add a fixed header to your Twitter Bootstrap Table

October 23rd, 2012 by admin Leave a reply »

The table styling in bootstrap is very nice, the biggest benefit being that it is responsive and works on all devices, all you have to do to make the columns disappear is to put a class of “hidden-phone” on the columns you want to hide.  I have using it to death in my application I have been working on and I have noticed on large sets of data, especially data that has to scroll down, you lose the headers after it overflows past your div.  For me this was unacceptable because your user will lose the context of the data and will not understand what the columns hold.  I did some searching and came across this jQuery plugin that will basically take the table header you have and make a copy of it and lay it on top of your bootstrap header, here is a link to the plugin:https://gist.github.com/2948136.  I have the basic layout of your html that will make use of this below:

<div class="fixed-table">
    <div class="table-content"> 
        <table id="tableId" class="table table-fixed-header">
            <thead class="header">
            <tr>
                <th>Your Header</th>
            </tr>
            </thead>
            <tr>
                    <td>Your Data</td>
                </tr>
        </table>
    </div>
</div>

You will need the css as it does some nice styling for you but I don’t think its necessary, it would be nice down the road if this just becomes a class you can tack on to your html and it will do this work for you. Here is simply how you create the fixed header: $(‘.table-fixed-header’).fixedHeader();

Advertisement

Leave a Reply