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.
These results were a bit surprising. I definitely didn’t expect to see Firefox beating Chrome in Javascript performance in a such a clear way, but it did. Firefox lost a bit of its luster to Chrome but, at least to me, this specific situation made me rethink the way I looked at Firefox. As to IE, it seems that no matter how much Microsoft tries to advertise as a fast, reliable browser, every day use shows it still lacks the robustness its rivals show – even considering this is a very specific situation and we didn’t mean this to be a test in browser performance. However, my own experience helping users on the Windows Secrets Lounge, shows that IE still lags behind its major competitors in reliability.
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.