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.

The build function should know nothing specific about the data that it can't discover -from- the data. (This will lend to reusing this in a variety of contexts...all specifics being driven by the data itself rather than the function.)
By passing "column_headings" to describe the table columns in the data the build function can support tables of varying sizes and complexity.
By including an extra field in the "column_headings" data, you can describe the type of data the builder should expect to find for each column--this helps to support an additional layer of abstraction allowing you to present numbers, currency, percentages, and dates in a variety of ways. In fact this allows you to abstract a rich set of information types which scale independently from the data driving the builder. (For beginning programmers, this aspect represents a learning milestone which can serve you well during your career.)
Technically the <style> section shown in the code example is supposed to go into the <head> section of your HTML page.
My example provides a hint for how to apply special formatting based on our own custom notion of "types". This formatting is done without polluting the initial JSON data; this is important because converting 100.123 into "$100.12" in the JSON will change the way .sort() works...instead of sorting numerically, we'd be sorting as a string, which might not do what you think. JavaScript has its own notion of types, data types that is; these generally aren't sufficiently granular to differentiate how we want to present currency vs a number with greater decimal precision. So, by providing our own informational types for presentation, and keeping intact the original data to allow JavaScript's own internal data typing to function we get look/feel and proper sorting. (Data types can be confusing for beginning programmers...if that's you, you should consider getting a good JavaScript programming book.)

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!