All in all, it took me a full day to figure this out. I know it's more cool to say I did it in half and hour but the truth is that I couldn't. Well I could have done so if I had used jQuery and one of it's plugins. It probably wouldn't have taken me even 5 minutes in fact because I'm quire familiar with jQuery as well as it's TableSorter plugin. Much of the time taken by this task was spent in reading the documentation and the rest, hitting the reload button on firefox and chrome.
The day spent was worth it because the UI of the YUI DataTable looks pretty good and there are many more configuration options than available with jQuery plugins. But it's not going to beat ExtJS. While I was laboring with the YUI datatable, I tweeted about it and Fahim Farook suggested that I look at ExtJS instead and I did, en passant. After a half hour diversion, I had a working data grid in Exts (there you are I am a cool geek). It looked much better than what even YUI produced. But there is a catch, the ExtJS library is more than 2MB in size.
A 2MB library for a web page that usually has less than 50kb of content would rule out ExtJS for most situations. However, you can 'trim the fat' and create a customized version of ExtJS. It would contain the bare minimum code needed to support the set of function that you are trying to make use of. However,the customized library I downloaded was still over 200Kb in size and both Firefox and Chrome immediately started complaining about undefined objects. An indication that the library file is incomplete.
So to cut a long story short the next time i need a data grid, what would I use? It depends. If the software being designed is an Air app, I would definitely insist on ExtJS. If download time and or development time really mattered it would be jQuery, else it would be YUI.