How to build a reusable data table from JSON

Web development projects often call for building a tabular summary of data. This task is easily accomplished using HTML and JavaScript. Further, it can then be visually styled using CSS. Better still is if you can have the table data returned from the web server as JSON as part of an AJAX response. And finally, as a programmer, it occurs to me that if we use an agnostic process to build the table and abstract the code which consumes the JSON in a library it becomes reusable. This is win, win, win.

While I run into this scenario often, I've never really summarized it for consumption by others. This page is an effort to do just that. Hopefully this can help demonstrate how easily a good JavaScript programmer with basic knowledge of HTML can build and maintain their own builder rather than falling for the wiles of a framework such as ExtJS. (In my opinion, ExtJS brings a lot to the table, but at a significant cost that can be difficult to explain to inexperienced front-end developers.)

Look through the code to see the example. Here are a few points I think warrant calling out.

Clicking the button will call the buildSummaryTable function (shown in the code sample below) and pass a reference to the data and the HTML element where the output should be rendered. While this example doesn't currently use AJAX to get the JSON, the buildSummaryTable function call would go in the success callback function. (As time permits I'll try to provide extensions to this example to demonstrate that more clearly.)

Thanks for your time, and as always, feedback is appreciated. (You can contact me via the "contact the author" link.) Be sure to check out some of my other examples and give our sponsors consideration--their support helps us keep this site running. Best wishes!