Here's a tough one for ya... Scrollable tables with locking cols/rows.

[lorren.biffin]

I've got this tool, that has a 'workbook editor', which is sort-of like a simplified spreadsheet editor. Within this tool, I've got this table with a massive amount of editable tabular data inside of it.

Currently, I've got the entire table inside a div with the scroll set to overflow. Unfortunately, this causes a number of problems...

The main concern for our marketing department (the people who will be using the tool on a regular basis) is that when you end up with a good number of columns and rows, it's difficult to edit the schedule, because you can't maintain a view on thee 4 left columns and top row (which include the labels they use when entering data).

The solution seems to be to allow them to lock a variable number of columns and rows of the table, so they will always be visible upon scrolling. Unfortunately, the only few solutions I can come up with are very hack-happy and will require a performance degrading amount of JavaScript to complete.

Question: What would be your best, most efficient solution to this problem?

(The kick-off meeting to hand over the tool is tomorrow morning, so I need to wrap this up today. Any help is greatly appreciated. Thanks! :)..)

Screenshot of the interface - http://dl-client.getdropbox.com/u/18386/screenshots/vb.jpg

[simplistik]

I had to troubleshoot this about a month ago, and you can't do it with one table, the "best" solution is to have a row div with a table in it, a column div with a table in it, both of those are fixed positions, and then have your main body content div, with table ... of course the hard part in all of this is getting all those to properly interact with each other and the scroll. So in short your best shot at doing this is looking at Google Docs and replicating a system similar to theirs.

[lorren.biffin]

Thanks Simp.

That's the direction I ended up going. My only problem now is (as you said) getting the different divs to play nice together. It's a tough one because the interface allows any number of columns, with any different widths to be locked. So, it's not as simple as setting a left and right column with static widths and such. I'm likely going to end up using some Javascript to read the width of the left div and give the right div that value for a 'left-margin'. Next step is to figure out the logic to make both divs scroll vertically using only the right div's scroll bar, while ignoring the horizontal scroll for the left div..

Anyhow, I'm rambling now. Needless to say, it's gonna be a late night.

[simplistik]

Well, if you were to use any of the newer JS frameworks, jQuery (my fav), mootools or scriptaculous it should be relatively easy to determine positions of the scrollbar and widths of cells.

But with that said you should always lock them down to x amount of cols and rows at the start of the app, and only account for the width of the new ones IF they manually add it, then on change manipulate the width of your main content container.

Good luck w/ your app :)

[lorren.biffin]

Right, jQuery is my favorite also. :P It's coming along surprisingly fast after my last post.

Now once all of this column stuff is done, I get to build in Row locking as well.. Whole new can of worms.. lol

[lorren.biffin]

Figured it out. :) Gotta love jQuery.

Although, this was a big re-enforcement for me to always account for future "feature creep", and ALWAYS code with scalability and functionality changes in mind, regardless of time-constraints. Could have saved myself a lot of time... :(