ExtJS , YUI and jQuery

I needed to build a data grid, and even though I am a big fan of jQuery, I thought of using YUI instead. It’s just a matter of keeping up with the Joneses (I wasn’t familiar with YUI at the time this was started). A data grid has many names, the geeks at Yahoo! call it a DataTable. Call it by any name but what I am talking about is an HTML table that can be sorted on the client side and the columns can be reordered by drag and drop. It should also be possible to hide and display columns as well and preferably edit cells too. That’s asking a lot but that’s what a JTable in an applet can do (but it does take a lot of code). And now, there are several JavaScript libraries that can provide this functionality and coding with them is a lot easier than using a JTable.

The jQuery Table Sorter at work.

Grid created using the jQuery tablesorter plugin

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.

A table created with the YUI DataTable

A YUI DataTable.

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.

ExtJS grid with bells and whistles

ExtJS Data Grid

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.

related: jQuery TableSorter and XSL Transformation

May 3rd, 2010 | Posted in Uncategorized
  1. ikokostya
    Aug 19th, 2010 at 14:18 | #1

    Flexgrid for jQuery http://flexigrid.info/

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>