I was working on an enhancment on the UI for a web application.
Among the to-do that I have in mind is to make the data tables more useful.
Data tables are really one of the key views that a user will see. They search for something, and the results is returned in a table format with relevant items listed.
However, for web applications, if you do not resort to Javascript to manipulate the DOM, plugins, it is unlikely that you can manipulate your data table.
I decide to spend some time looking through what the current AJAX (Web 2.0) implementations offers.
My to-do is simple: Allow sorting and filtering of data table without making calls back to the server.
My candidates for evaluation includes:
- Yahoo UI
- Open Rico
- SortTable
Each attract different amount of community support, ease of use and dependencies.
For me, Yahoo UI offers the best documentation and community support. However, its ‘DataTable’ control is still in beta. This means that its API is still subjected to change and is not final.
Yahoo UI rely a lot on Javascript (naturally for AJAX stuffs). To implement a sortable table, my database results needs to be serialize for Javascript use; adding yet another layer to browser based developments.
OpenRico, gain my attention couple of years back, as its early released was backed by Sabre Airline Solutions. I am really using the ‘if Sabre uses it, do take a look’ mindset in approaching this.
OpenRico looks promising, but I feel that its documentation pales in comparison with what Yahoo offers. Though, its 2.0 release candidates looks pretty promising. OpenRico, also has an interesting planned feature in the latest release. The LiveGrid. Further digging throws out an article from Bill Scott, who was involved with both the OpenRico and Yahoo UI project.
In his article, Death to Paging - Rico LiveGrid released , Bill has challenged the need for ‘Paging’ for large datasets. Instead, he proposed that LiveGrid can easily allows you to scroll through large datasets instead of dividing it into pages. As you scroll, data can be updated into the table view. Definitely a pretty good suggestion… and if you can add Filter and Sorting in it, much better UI can definitely be achieved than Paging.
By now, having gone through 2 AJAX framework to do table sorting, I am feeling that this is too much work. I was hoping to look for something that requires 2 lines change at most. 1 to include the library and another line to include in the ‘table’.
That is when I come across ‘SortTable‘. SortTable is a clever Javascript implementation. It fulfills my requirements of 2 lines of change. And it does the sorting that I am looking for.
See screenshot below to see before and after sort of SortTable
I ended up using SortTable for this little enhancement that I am working on. Not because Yahoo UI or OpenRico is not good. In fact, they are fantastic and gives development team a good entry point to standardize on some great UI framework. Rather, with Yahoo UI and OpenRico still in beta for some of my needs, I would rather stick to minimal change to attain this enhancement.
Add to that, Yahoo UI and OpenRico requires that I add another layer of code to convert database results set into Javascript arrays for manipulation. To me, going down this route requires significant changes. And in going towards Rich Internet Applications, I know that there are others like REBOL and not just AJAX.