Ok so this has been an issue at work for some time. We have really huge tables with lots of columns and rows. They wanted a fixed header and only the tbody to scroll. If you've ever done this or tried to do this you will know that it is a huge pain in the ass to do it properly.

Some people load 2 tables and hide the thead on one and the tbody on the other and place one in a overflow:scroll/auto div. This is messy to code and really slow on performance if you are dealing with a lot of data.

Other ways to do it is not even use proper table tags and do it all in divs (again bad. tabular data should almost always be displayed in tables)

So I put together a really small (~4kb) jQuery plugin that will build a table using valid HTML and have a fixed header and optional fixed footer and will resize the table to fit inside whatever div you put it in. So if you want the table to auto-resize to fit your browser window it can.

All the developer has to do is include the plugin js file, jquery, and the stylesheet. Setup their table like normal (proper table tags) or use something like displayTag if you do any java/jsp development. And give whatever tables you want to have fixed headers/footers a specific class name. It will do the rest.

I'm going to upload it to my blog so anyone that wants to download it can give it a try. Just thought i'd help out any fellow developers that have run into similar issues in the past/future.

I should add that it includes rounded corners on all 4 corners of the table (top two of the header/bottom two of the footer) and the stylesheet is setup in a way that adding your own theme is simple.

[Edited on October 2, 2009 at 6:02 PM. Reason : .]

10/2/2009 6:01:00 PM

forgot to add:

This is supported for IE6, IE7, IE8, Firefox and Safari.

10/2/2009 7:41:36 PM

Link to blog? You should also submit this to webappers.com.

10/2/2009 7:45:19 PM

^thanks for the link. I'll do that as well.

as for the blog link...working on that right now haha...I've got a wordpress blog setup on my dev server that i never published so this weekend is a good time to do that. Just going to use a free wootheme until I have time to make my own just so i can get this out today/tomorrow.

10/2/2009 7:49:45 PM

If you want to write up a little bit of a tutorial for it you can load it up to nettuts. They pay $150 if they publish it on the site.

10/3/2009 9:12:06 AM

does yours work only with static data? or can I load stuff through JSON/AJAX?


I've been using jqGrid to do this sort of stuff.

10/3/2009 12:18:07 PM

^I'm working on getting it to work with a buffered Ajax call so as you scroll the table it requests more and more data. This will eliminate the need for pagination.

I'm also working on making it work with Ajax/dwr (reverse ajax) because I can make a more slick loader that way and it doesn't slow the initial page load down. It's better to load the UI then load the data.

^^Sweet...i didn't know about that either. I'll check that out too.

[Edited on October 3, 2009 at 12:50 PM. Reason : .]

10/3/2009 12:47:21 PM

so... kinda like a lazy load?

You sure you want to do that to eliminate pagination without having sortable/searchable?

The more data in a table, the more confusing and harder to manage it becomes.

In practical application, there is no difference in functionality between lazy loading and pagination - both load chunks of data into a viewable window at a user-controlled pace - but IMO pagination makes a user feel safer.

IE: "I saw that info on Page 3" vs. "I have to pick that data out from a 1800 item long list, somewhere between Invoice #45634343 and #46008764"

10/3/2009 1:34:43 PM

I've noticed that with a lot of other plugins they don't account for the scroll bar so the last column gets cut off and you have to side scroll to see the entire cell. I do take account the size of the scroll bar and add it onto the outside of the table so that no columns are cut off and require side scrolling. Although visually it looks like its on the inside of the table. (I wouldn't want an ugly scroll bar throwing off the edge of my tables.)

The only reason I'm going to add side scrolling is for situations where your table is so narrow that the browser can't fit all columns in view because its run out of breaking points in the text.

^I see your point. the tables I display for work also have filters so if the user really wanted to get to a certain piece of data they'd have to use filtering. Right now we do use pagination but chances are if you saw a piece of data on page 3 that you wanted it might not be on page 3 for long. Rico LiveGrid has a pretty cool ajax buffering system.

10/3/2009 1:48:27 PM

here is the link to the blog. http://dev.mmalek.com/

Keep in mind this is still in beta and not ready to be used by others just yet but will be hopefully by tomorrow evening. It does work in IE but at the moment it doesn't because i've made some changes to the javascript. I'm having to rewrite bits and pieces at a time to follow the proper jQuery plugin standards so that it easily integrates into jQuery and you can still use noConflict() if you also use a library like prototype that utilizes the $.

Also I just threw the site together late last night at like 4am so I still need to write out proper documentation since things have changed since last night and setup a better demo. So please ignore all that garbage for now

I also need to write instructions on how to create your own styles...that is also sloshed together

10/3/2009 4:01:22 PM

updated url: http://fixedheadertable.mmalek.com

it now follows the proper jQuery plugin setup...still working on getting the autoresize options to work again...

[Edited on October 4, 2009 at 9:49 PM. Reason : .]

10/4/2009 9:48:56 PM

That's a nice WP template

10/4/2009 10:51:38 PM

^yeah it was one of the freebies from http://woothemes.com Don't have the time right now to make my own and i just wanted to get this up and running. They've got a bunch of really nice ones.

10/5/2009 12:41:34 AM

http://plugins.jquery.com/project/fixedheadertable

10/5/2009 2:14:30 AM

very cool Mark! Keeping an eye on this for sure.

10/5/2009 6:42:57 AM

You can add Google Chrome to the list of supported Browsers, btw

10/5/2009 9:16:37 AM

oh sweet. haha totally forgot about Chrome

^^Thanks!

[Edited on October 5, 2009 at 9:22 AM. Reason : .]

10/5/2009 9:22:10 AM

Just added side scrolling if the table columns can't be compressed anymore to fit them all into view.

fixed header scrolls as well (all with 1 scrollbar)

http://fixedheadertable.mmalek.com/demo/fullwindowdemo.html

10/5/2009 9:59:39 PM

Quote :

"oh sweet. haha totally forgot about Chrome "

no love for Opera?

10/5/2009 10:13:03 PM

well if it works in FF/Safari it probably works in chrome/opera/etc... its IE thats the concern

10/5/2009 10:15:13 PM

it looks cool in firefox, not so good in opera. actually in opera i just see the headings

http://i36.tinypic.com/293dp91.png

10/5/2009 10:18:46 PM

the javascript populates the tbody so thats really odd that its not firing.

10/5/2009 10:21:08 PM

I've gotten resizing the table on a browser resize working.

What are other features people would like to see in a table plugin? Anchored columns maybe with the side scrolling?

10/6/2009 4:15:29 PM

I needed the exact same thing back in 2004. There were several things people were selling to do this. Now, there are many embed excel-like things into a webpage. also, i have found that scrolling a region within a webpage is kind of a sucky UI experience.

[Edited on October 7, 2009 at 12:06 AM. Reason : d]

10/6/2009 11:59:00 PM

Quote :

"i have found that scrolling a region within a webpage is kind of a sucky UI experience."

that all depends on what you are scrolling. The way I use scrolling tables is by resizing the height of the table so that all other content fits on the page without needing a scroll bar. Fixed headers when looking at 1000's of rows of data is essential.

10/7/2009 3:10:30 PM

that's real slick man. perfect timing, i was looking all over the web for a good one - even better that its a jquery plugin.

feature request: sortable columns driven by JS.

I use http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited today. Have not tried your ish with the table sort script, but I have a feeling they wont play nicely together. If they do, then you don't have to do anything (I will report back here my findings when i get some time to test em together).

10/8/2009 4:58:33 PM

Sweet! Keep me posted and let me know if you have any issues or bugs that you find.

I've had a request to make the option to freeze a column (the first column) but haven't gotten around to that yet. I've got several ideas of how to implement it but haven't decided on one yet.

I'll also add sorting to the list.

[Edited on October 8, 2009 at 5:18 PM. Reason : .]

10/8/2009 5:17:51 PM

Whats a good way to manage open source code for users to download released version, beta versions, trunk etc... I'm getting a lot of hits and feedback on the plugin more than I expected so I'd like to have a clean way of providing different versions of the plugin to users. I was looking at google code is that the best option? I'm also using beanstalk to host my subversion tree which I believe I can make public with read only enabled?

11/13/2009 3:26:10 PM

i personally dislike google code

11/13/2009 3:32:29 PM

Why? And what would you recommend instead?

11/13/2009 3:34:33 PM

So I guess google code is fine?

11/16/2009 12:15:58 PM

I use a combination of http://tablesorter.com/docs/ and some scrollable scripts i found on the web. They work on IE 6,7,8 Firefox 2,3 and the latest levels of Chrome and Safari. I'll have to check yours out when I get some time and see how it compares.

11/16/2009 5:48:31 PM

^I actually don't do table sorting yet...thats one of the planned features though. Does that solution do fixed headers/footers? I checked out there demo and it doesn't appear to but the table is only like 4 rows of data anyway.

11/16/2009 5:53:33 PM

Tablesorter alone doesn't support any scrolling. I had to combine it with another set of scripts to get it to work properly. Those scripts didn't have the cleanest code and I had to add several hacks. I know it did headers locked in place, but I'm not sure about footers. I'd definitely be interested in upgrading to a single plugin that could do it all, and from what I've seen yours look really cool. I'm looking forward to playing around with it.

[Edited on November 16, 2009 at 11:15 PM. Reason : :]

11/16/2009 11:09:48 PM

http://webdesignledger.com/resources/12-useful-jquery-plugins-for-working-with-tables

11/24/2009 10:37:06 AM

^I saw that yesterday because I had a sudden surge in traffic from one referring site haha. Thanks for posting it though!

11/24/2009 10:37:44 AM

I really need to look into this. I thought the scripts I had on this one site worked in IE8, but they relied on setExpression, which is no longer supported. Had to use the EmulateIE7 header.

11/24/2009 11:11:07 AM

nice job Golovko

11/24/2009 11:26:27 AM

Thanks!

11/24/2009 2:46:43 PM

you've already done more updating than pretty much every other plugin author I've ever seen



time for you to fit in with everyone else and just let it stagnate for a year or two

11/24/2009 6:06:56 PM

Quote :

"Whats a good way to manage open source code for users to download released version, beta versions, trunk etc... "

Try out TFS2010 -download

Here's a great basic install guide (it's braindead simple actually).

Once you get it installed, install Visual Studio 2010 Ultimate, or just Team Explorer, which you can use to create a Team Project, branches, and manage your code

Once you get it all downloaded, you should be up and running with everything in ~1.5 hours. It's actually pretty easy

[Edited on November 24, 2009 at 6:43 PM. Reason : .]

11/24/2009 6:41:56 PM

Even though I hate your stupid guts, I'm playing with this in a project I'm working on. I'll give you notes soon.

[Edited on December 16, 2009 at 9:32 PM. Reason : Is your personal site built on Codeigniter?]

[Edited on December 16, 2009 at 9:32 PM. Reason : It's the 404 page that makes me ask that]

12/16/2009 9:27:35 PM

^yeah it is. Its really old and in desperate need of a new design, updated content, etc. New one will also be built on codeigniter. I'm a big fan of codeigniter.

Quote :

"Even though I hate your stupid guts, I'm playing with this in a project I'm working on. I'll give you notes soon."

awesome, the more feedback I get the better.

12/16/2009 9:57:27 PM

This popped up in my Google Reader this morning

http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx

2/27/2010 2:47:03 PM

Sweet! Thanks for posting it.

2/28/2010 6:44:32 PM

bttt.

Got a new release coming in the next few days that addresses performance issues when dealing with 1000's of rows of data.

3/17/2010 12:35:56 PM

whats the difference in this and extjs/gwt?

3/17/2010 2:18:23 PM

http://www.noupe.com/javascript/jquery-html-table-toolbox.html

The plus side of using analytics is that I am finding more and more blogs that seem to have interesting posts relevant to my interests. Although a lot of what i am seeing are blogs from foreign countries in different languages. Lol

^for now it's a lot simpler and lightweight if you are already using jquery. Honestly I haven't used either of those but if it's anything like the average grid plugin then I stand by my statement.

4/14/2010 11:23:43 PM

This thread remains relevant to my interests, thanks.

4/15/2010 11:18:53 AM

You're in my Google Reader again

http://cssglobe.com/post/8266/enhance-tables-using-one-of-30-functional-jquery-plugins

It bothers me, though, that your plugin is called Fixed Header Tables (plural) but your url is fixedheadertable.com (singluar)

6/6/2010 8:49:36 PM