The venerable HTML table, although less used than it once was, has still its place, especially when showing, well, tabular data. Recently, whenever there is has been a need has to use tables with column sorting, searching or having tables with fixed headers or columns, Data Tables has been of great use. Data Tables is an excellent, flexible and versatile jQuery plug-in, authored by Allan Jardine of SpryMedia, that I can strongly recommend to anyone needing to use tables in a web app.
An example of the use of Data Tables in the CFOlytics financial management web app.
While working on a recent web project with Data Tables, we found ourselves in a situation where a table with around 900 hundred rows had to be displayed and, in our first try, paging was not an option – the plug-in allows the use of both vertical and horizontal scrollbars, enabling an experience that is somewhat similar to Excel, so this high number of rows wasn’t really an initial concern. Having used the plug-in in similar circumstances before (although not quite with as many rows), we weren’t expecting any unpleasant surprises, in terms of browser behavior.
The first test with Chrome confirmed a previous experience – data download wasn’t a problem, time wise, but getting the browser to display the table was another matter altogether. Chrome took its time to display the data, probably 3 to 4 times the amount of time needed to get the data from the server using Ajax. IE was next in line for testing and we started with IE 11 on Windows 8. Surprisingly, or maybe not, 3 out 4 times, IE couldn’t handle the table without crashing. IE 10 on Windows 7 was even worse. Not only did it crash as well, but when it didn’t, the table didn’t display correctly. The good surprise was left to the end. When we tried the page with Firefox, the page display correctly, but performance was clearly better than Chrome or IE. With Firefox, the response time, both in terms of download and display was perfectly acceptable.
As to the situation that brought about this unexpected browser performance test, we solved the problems that prevented us from using Data Tables paging features, so the use of paging ensures a good behavior from all modern browsers while displaying the table in question.