o2b.net : Tim Murtaugh

A project I’m working on at the moment is a financial application (woo! party!) that displays huge tables of data. When I say huge, I mean it’s possible the byte-weight of the data will be greater than the weight of everything else combined.

So, in searching for a way to make these tables more usable, I came across two examples of interesting DHTML:

First is ActiveWidgets.com (Mike found this one). They sell really very sophisticated JS widgets that do a very good job of displaying and allowing you to interact with a table, in ways normally reserved for Excel or the Windows Explorer window. They work in both IE and Mozilla (not Safari, however), but cost quite a bit if you want to use them commercially.

Second is a CSS-based solution, Pure CSS Scrollable Table with Fixed Header. While I would love to make use of it, it depends on fixed column widths, which is not an option for me.

Third is this, much simpler one. It successfully locks down the header rows and column while scrolling the rest of the table. In IE only. But, that’s ok for now for two reasons: 1. The project is an internal application and is being built for IE6 only. 2. I can use Mozilla’s correct implementation of TBODY and overflow: auto to achieve the scrolling without JS.

I’m going with the third method. I’m also going to add some touches like subtly highlighting the row and column you’re hovering over, and allowing the user to click a cell to lock the highlight, so they can scroll around some more, but still find their way back.

I’ll post a prototype when I have it ready.

This entry was posted on Friday, July 29th, 2005 at 12:34 pm and is filed under Experiments, Browsers, Tech, Usability, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.