Suggestions of outputting JSON as a table - jQuery.tmpl? Something else?

Question

I've got JSON being returned from the server. I'll paste the 2 first records here (long), but in theory it could be 100's.

{
"1": {
    "text": "First Thoughts and Feelings",
    "filters": {
        "2": {
            "text": "% Postive",
            "banners": {
                "2": {
                    "text": "Ontario",
                    "val": "46.1907"
                },
                "3": {
                    "text": "Quebec",
                    "val": "47.9016"
                },
                "1": {
                    "text": "Total Respondents",
                    "val": "52.9057"
                }
            }
        },
        "1": {
            "text": "Net Positive",
            "banners": {
                "2": {
                    "text": "Ontario",
                    "val": "51.9106"
                },
                "3": {
                    "text": "Quebec",
                    "val": "50.7760"
                },
                "1": {
                    "text": "Total Respondents",
                    "val": "47.9157"
                }
            }
        }
    }
},
"2": {
    "text": "Purchase Intent",
    "filters": {
        "2": {
            "text": "% Postive",
            "banners": {
                "2": {
                    "text": "Ontario",
                    "val": "54.5407"
                },
                "3": {
                    "text": "Quebec",
                    "val": "53.9017"
                },
                "1": {
                    "text": "Total Respondents",
                    "val": "49.7267"
                }
            }
        },
        "1": {
            "text": "Net Positive",
            "banners": {
                "2": {
                    "text": "Ontario",
                    "val": "51.7294"
                },
                "3": {
                    "text": "Quebec",
                    "val": "52.7261"
                },
                "1": {
                    "text": "Total Respondents",
                    "val": "52.9762"
                }
            }
        }
    }
}
}

I want to put this data into a table, where there is basically a column for question (the root text), the filter, and then each banner. I'd create a thead like this

<thead>
    <tr>
        <th>Question</th> 
        <th>Filter</th>
        <th>Ontario</th>
        <th>Quebec</th>
        <th>Total</th>
    </tr>...

I'm trying to figure out the best way to populate this table given that the number of banners is dynamic, could be 2, could be 20.

If there are 2 questions, 2 filters, with 3 banners each, I need a table consisting of 5 columns, 4 rows (excluding headers).

Row 1 -> Q1 -> filter1 -> banner1 -> banner2 -> banner3
Row 2 -> Q1 -> filter2 -> banner1 -> banner2 -> banner3
Row 3 -> Q2 -> filter1 -> banner1 -> banner2 -> banner3
Row 4 -> Q2 -> filter2 -> banner1 -> banner2 -> banner3

Ideally sortable too I guess, but any column, though I know I can add that type of functionality with jQueury afterwards.

Looking for suggestions on how to get this done as I'm having trouble wrapping my head around it.

Answer 1

I have had great results with SlickGrid.

Some highlights:

• Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
• Extremely fast rendering speed
• Supports jQuery UI Themes
• Background post-rendering for richer cells
• Configurable & customizable
• Full keyboard navigation
• Column resize/reorder/show/hide
• Column autosizing & force-fit
• Pluggable cell formatters & editors
• Support for editing and creating new rows.
• Grouping, filtering, custom aggregators, and more!
• Advanced detached & multi-field editors with undo/redo support.
• “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

And they have a link to SO questions.

Answer 2

One of the best solutions I've used for quick and easy sortable, searchable tables is http://datatables.net/