tabular data visualization with jqGrid and jQuery

In my post Data Scientist Makes Peace with Web Programming, I argued that web programming skills belong in data scientists’ repertoire. Essentially, my thesis went that data consumers primarily use web browsers to interact with data, so data scientists should develop proficiency with the medium. With that in mind, I’ll periodically showcase core web development techniques from a data scientist’s point of view.

Today I’ll demonstrate the presentation of tabular data within a web browser using the jqGrid jQuery plugin. I’ll also show how to set all the jqGrid display features (header names, number of columns, row data, etc.) from the server side. (The jqGrid documentation primarily details client-side configuration of these parameters).

jqGrid in action:

Here the web browser retrieves content from the server in a serialized format (e.g. JSON), and jqGrid organizes it into the nice display pictured above. Refreshing the table updates the data, provided the server sends updated JSON.

jqGrid doesn’t stop there though—if it did we would just use the table HTML tag instead to display our data—it provides automatic scrollbars, cell and row editing, non-scrolling headers, and many more features.

Demonstration Code

To make this work, we first load jQuery and jqGrid, and then create an HTML container for the table: