July 23, 2011

Chromatable JQuery Plugin

A couple of days ago I wrote a lengthy tutorial about creating scrolling tables with fixed headers. I thought I could take the exercise a step further by creating a jQuery plugin to keep the code contained in one location and allow users to call the "chromatable()" method on any table, or many tables on the same page.

Check out this header	Look here's another one	Wow, look at me!
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy
Some content goes in here	Praesent vitae ligula nec orci pretium vestibulum	Maecenas tempus dictum libero
Quisque in wisi quis orci tincidunt fermentum	Mauris aliquet mattis metus	Etiam eu ante non leo egestas nonummy

How to use?

To make the plugin work, you'll need to add the following to the head of your HTML:

	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="jquery.chromatable.js"></script>

Then, call the chromatable() method on any table within your code, for example:

	$(document).ready(function(){
		$("#yourTableID").chromatable();
	});

You can modify the table's height and width by adding the following lines:

	$("#yourTableID2").chromatable({
 
		width: "900px",
		height: "400px",
		scrolling: "yes"
 
	});

For the first release of this plugin, the table width is limited to being calculated as a pixel dimension, percentage values will not work. Version 1.2.0 supports table widths set to a fixed pixel dimension, auto, or 100%. You may see unexpected formatting results if you specify the table too narrow to accommodate your columns.

In the download package, you will see an example.html file of how to setup the chromatable properly, in most cases it should work perfectly out of the box. That's it, you should be ready to rock with your new Chromatables! Please feel free to send me your feedback or questions regarding implementation. This is one of my first plugins I've written for public use so I'm sure folks might have some insight on how to improve upon the idea for future releases.

Download

Latest source

Known problems

Some peeps have reported issues in IE6 and Opera. Although I don't plan to support IE6 in the near future, I will be looking into a future release to fix problems in Opera.

Speak your mind

Comments

Would it be possible to use this on all tables of a given class, instead of by table name? Reason being I generate table names at runtime. There could theoretically be any number of tables on a page, however they would all be of the same class.

that's good

I'm using this on an internal site for work, love it, looks great, except one detail (We use IE8) When I work in VS2008, I'm getting about a 5 pixel gap on the th's at the far right side. If you are interested, I can send a screen shot of what I have and show you.

I know it's in the css somewhere, but can't find it right now.

In IE7 scrollbar is not visible in second table when the page is first opened,but data gets scrolled.But then get displayed properly when "Expand Table" is clicked.

One enhancement suggestion: rather than assuming a width for the scroll bar of 17px, you may want to calculate a scrollbar width. I do it using an off-screen check:

function getScrollbarWidth() {
var div = $('

Nice solution, thanks.

This plugin doesn't work with multiple tables on the same page

It should work fine with multiple tables while using a unique table ID. Can you give an example of how you're using the code?

Thanks for your library. =)
Unfortunately, I think it's not working with master pages. Do you have any suggestions ?

Thanks in advance.

Thank you for the resource code and letting me know it can do it like that ,thank you

Looks great and easy to use too. Thanks for sharing this.

@Tarek To get an ASP.Net gridview to render the headers over ride the DataBound event. So, for a grid with an Id of MyGrid do the following:

protected void grdMyGrid_DataBound(object sender, EventArgs e) {
MyGrid.UseAccessibleHeader = true; if (MyGrid.Rows.Count != 0) {
MyGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
MyGrid.FooterRow.TableSection = TableRowSection.TableFooter;
}
}

Hello Paul,

I have shown how to render the Headers inside the gridview. I think you have worked out with asp.net integration, So can u just put the sample code out. Cause i am not able to work it out,

Thanks
Rick

Wow. I'm impressed by this demo. Now i'll go and figure out, how to use this plugin.

Keep up the good work.

Question:
Is there is a way to do it without the thead?

Some jsps, or asp.net, when spitting out html tables,
they dont generate the thead tag..

Is there is a way to override that? may be reference the table header with a class?

Let me know, and thanks for all your efforts and your help.

If you do a print preview and/or print the page the table is still in its scroll state and any of the data that's not shown will not print. When someone prints the page, the plugin should turn off the scrolling so the printout contains the entire table. Other than that it looks pretty interesting.

Excellent! Now all I need is to figure out how to merge tablesorter, and chromatable to have what I'm looking for, a sortable table with a fixed header.

You should perhaps take a close look at the datatables plugin. The table columns are sortable as well as searchable, you can add pagination, and the author has created an extension plugin that handles fixed headers as well, although it works a little differently than Chromatables.

Does it support horizontal scrolling as well?

If you meant you would want the table to scroll horizontally and have a fixed column, the answer is no unfortunately. I would consider adding that feature to a new release if enough people requested it though...

Thanks for the great plugin. But like the others, I'd like to have horizontal scrolling as well.
With this version, if the table overflows horizontally, the table body content is hidden but all headers appear above the table. I've posted a screenshot at http://i369.photobucket.com/albums/oo134/modyvishal/ScreenShot00046.jpg.

I would really like to see this feature. I have a a lot of data to display.

... and I would like to see this too :)

I would like to see horizontal scrolling feature as well. It should allow the first column to stay fixed, optionally.

I would like to see that feature as well. excellent work!

Problem for Opera10 exists for Internet Explorer 6 , too.

I have the same problem with Firefox 3.5.5, the header disappear as I scroll down

Try downloading the latest release — Firefox should work reliably for PC and Mac versions.

It doesn't work on Opera 10. Clever technique... duplicating the header and use CSS to maintain it's position.
Is it what Google uses on it's Adwords interface?

Thank you for the feedback and letting me know about Opera 10. I will work on supporting Opera 10 in the next release. A workaround for now you could probably resolve the issue with some CSS, more than likely it's a float issue.

How well does Chromatable hold up when the table is initially hidden or, if the table contents (cell widths) change dynamically? Will your plugin support the sizing changes okay? I have had issues with other JQuery plugins that do not handle tables very well where the cell contents change causing the width of the table go grow.

@J.D., you would probably need to re-init the plugin's main function call in order for the sizing changes to be recognized. I assume you are updating content within the table via some Ajax method? If that's the case, you could simply re-init the plugin on an Ajax data success callback.

Chromaloop

Chromatable JQuery Plugin

How to use?

Download

Known problems

Speak your mind

Filtered HTML

Plain text

Comments

Howdy!

Tags

Recent Posts

Archives