What is the best way to implement 'Excel like column sizing' for an HTML table?

Question

Basically, I want to allow the user to resize columns in an HTML table, using the same method as you would in Excel. Drag the space between columns and size.

I did some research on this last year, and found a few hacks and kludges. Most were pretty bad, and I didn't find anything really good. Now, it looks like I need to implement this functionality, and want to do it right, so before I start this again, I just thought I'd ask if anybody else has done this, and how they did it.

I beleive I've seen a FogBugz demo video where they had this implemented. So I know it can be done well.

BTW-I'd prefer not to use any open source frameworks, since my client may sell this app in the future.

Thanks in advance.

Answer 1

I've built a html grid myself in the past and having done so my best advice would be: use someone else's.

I've looked at this jquery grid control in the past but have never got around to trying it out: http://www.trirand.com/blog/

Answer 2

Google Docs spreadsheet application does what you are looking for. That may be worth looking at, but their code is very dense.

Answer 3

The extjs framework provides the functionality you need. I can not tell (I am no lawyer) whether their license is suitable for your customer or not. However, it appears possible for you to purchase a license from them which allows you to not have to publish your customers code as open source. This may suffice.

I would suggest that you develop your application using extjs in parallel with investigating the license. if the licensing suits your customer, you're done, and you win by using a stable and high-quality platform. If your can't make the license work for your customer, then you have to port to something else, but at least you will already have a high quality first prototype to work from, so the effort to produce the product will be less. And meanwhile you have a very nice prototype while refining the interface