Wednesday, June 4, 2008

Intel Mashmaker's Table widget: A wheel reinvented

This post is about the table widget developed by me for Intel. People will think what is so special about the table widget that i am blogging about it.

Table widget widget is unique in a way that it does not use any existing javascript library ie no prototype, scriptaculous, ext, jQuery etc. All features were built by using plain old javascript.

An example of Table widget done using jQuery/prototype is flexigrid.

Table widget features:
  • Swap columns
  • Resize columns
  • Sorting
  • Export to CSV
  • Copy to Clipboard
  • Hide/show column
  • Select rows
  • Alignment of data depending on their datatype.
  • Highlight row
  • Filter/Search Functionality
  • Rearranging Columns
  • Container for other widgets

I was restricted for not using any JS library as library's type can conflict with the page in which widgets would be loaded.

One major requirement for this table widget was to hold other widgets in it. For example it should be able to hold Image widget in one of its cells.

Most exciting thing was to work on features like swap columns / resize columns /export to CSV /Sorting.

It required quite a bit of work to make the widget work in both major browser .IE6, IE7, Firefox compatibility made me sweat a lot before i conquered them and made my widget to work on them. It required me to put CSS hacks for IE6 , IE7 and many javascript changes to achieve desired results.

Learning during the development
  • Develope widgets features one by one on both browsers.
  • It should not be like developing full widget on FF and then on IE or vice versa. This approach takes more time and effort.
The image below show Table widget in action on Google Search Page.

No comments: