How to render a python dict as an html table with vertical columns

Question

I've got a python dict with where each key corresponds to a heading, and the list associated with each heading contains an arbitrary number of values:

data = { 
    "heading1": ['h1-val1', 'h1-val2', 'h1-val3', ],
    "heading2": ['h2-val1', ],
    "heading3": ['h3-val1', 'h3-val2', 'h3-val3', 'h3-val4', ],
}

I need to render this in a Django template as a table, where the values are listed vertically beneath each heading, with any missing values rendered as an empty table cell:

<table>
<thead>
    <tr>
    <th>heading1</th>
    <th>heading2</th>
    <th>heading3</th>
    </tr>
</thead>
<tbody>
    <tr>
    <td>h1-val1</td>
    <td>h2-val1</td>
    <td>h3-val1</td>
    </tr>
    <tr>
    <td>h1-val2</td>
    <td></td>
    <td>h3-val2</td>
    </tr>
    <tr>
    <td>h1-val3</td>
    <td></td>
    <td>h3-val3</td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td>h3-val4</td>
    </tr>
</tbody>
</table>

What's the best way to achieve this?

My first inclination is to rearrange the original dict into a 2D matrix, and just pass that into the template. I'm sure I'm not the first to run into this kind of problem, though, and I'm curious how others have solved this problem.

UPDATE: Just for reference, here's my original solution to this problem (which I'm not very happy with).

# Using the data dict from the question:
size = max(len(data['heading1']), len(data['heading2']), len(data['heading3']))
matrix = [[None, None, None] for i in range(size)] # initialize an empty matrix

# manually copy the data into the appropriate column :(
i = 0
for item in data['heading1']:
    matrix[i][0] = item
    i += 1
i = 0
for item in data['heading2']:
    matrix[i][1] = item
    i += 1
i = 0
for item in data['heading3']:
    matrix[i][2] = item
    i += 1

I then passed the matrix into the template which looked like this:

<table>
<thead><tr>
    <th>heading1</th>
    <th>heading2</th>
    <th>heading3</th>
</tr></thead>
<tbody>
{% for row in matrix %}
    <tr>
    {% for col in row %}
        <td>{% if col %}{{ col }}{% else %}&nbsp;{% endif %}</td>
    {% endfor %}
    </tr>
{% endfor %}
</tbody>
</table>

Owen Nelson · Accepted Answer · 2011-07-30 23:33:44Z

5

If we change the game a little bit, it's actually a snap to turn this around (so long as your lists are None filled...)

from django.template import Context, Template

data = {
    "heading1": ['h1-val1', 'h1-val2', 'h1-val3', ],
    "heading2": ['h2-val1', ],
    "heading3": ['h3-val1', 'h3-val2', 'h3-val3', 'h3-val4', ],
}

# we'll need to split the headings from the data
# rather than using keys() I'm just hard coding so I can control the order
headings = ["heading1", "heading2", "heading3"]

columns = [data[heading] for heading in headings]

# get the length of the longest column
max_len = len(max(columns, key=len))

for col in columns:
    # padding the short columns with None
    col += [None,] * (max_len - len(col))

# Then rotate the structure...
rows = [[col[i] for col in columns] for i in range(max_len)]


dj_template ="""
<table>
{# headings #}
    <tr>
    {% for heading in headings %}
        <th>{{ heading }}</th>
    {% endfor %}
    </tr>
{# data #}
{% for row in data %}
    <tr>
        {% for val in row %}
        <td>{{ val|default:'' }}</td>
        {% endfor %}
    </tr>
{% endfor %}
</table>
"""

# finally, the code I used to render the template:
tmpl = Template(dj_template)
tmpl.render(Context(dict(data=rows, headings=headings)))

For me, this produces the following (blank lines stripped):

<table>
    <tr>
        <th>heading1</th>
        <th>heading2</th>
        <th>heading3</th>
    </tr>
    <tr>
        <td>h1-val1</td>
        <td>h2-val1</td>
        <td>h3-val1</td>
    </tr>
    <tr>
        <td>h1-val2</td>
        <td></td>
        <td>h3-val2</td>
    </tr>
    <tr>
        <td>h1-val3</td>
        <td></td>
        <td>h3-val3</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td>h3-val4</td>
    </tr>
</table>

edited Jul 30, 2011 at 23:33

answered Jul 30, 2011 at 18:26

Owen Nelson

8666 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Owen Nelson Over a year ago

Should have mentioned this above, but the reason you'll need to split the headings and the data are as arunkumar mentioned: you can't expect dict.items() to give you the keys in a predictable order. It just so happens that splitting headings from data also simplifies the template structure.

Owen Nelson Over a year ago

I've updated the code to take care of padding the lists. Should remove the need to initialize the empty matrix (up front).

Brad Montgomery · Accepted Answer · 2011-07-31 03:38:57Z

2

Kenneth Reitz suggested that you could also solve this problem using tablib, so I thought I'd include that here as well:

import tablib

d = tablib.Dataset()
d.append_col(['h1-val1', 'h1-val2', 'h1-val3', ''], header="heading1")
d.append_col(['h2-val1', 'h2-val2', '', ''], header="heading2")  
d.append_col(['h3-val1', 'h3-val2', 'h3-val3', 'h3-val4', ], header="heading3") 
d.headers = ['heading1', 'heading2', 'heading3']

This dumps all the pertinent data in a Dataset, which you could then render in a template with the following:

{{ d.html }}

Which produces html that looks like this:

<table>
<thead>
<tr><th>heading1</th>
<th>heading2</th>
<th>heading3</th></tr>
</thead>
<tr><td>h1-val1</td>
<td>h2-val1</td>
<td>h3-val1</td></tr>
<tr><td>h1-val2</td>
<td>h2-val2</td>
<td>h3-val2</td></tr>
<tr><td>h1-val3</td>
<td></td>
<td>h3-val3</td></tr>
<tr><td></td>
<td></td>
<td>h3-val4</td></tr>
</table>

answered Jul 31, 2011 at 3:38

Brad Montgomery

2,6711 gold badge24 silver badges24 bronze badges

1 Comment

Brad Montgomery Over a year ago

I really needed a to do a bit more customization to the html, which is about the only reason I didn't use this solution. That, and Owen's solution below works very well.

arunkumar · Accepted Answer · 2011-07-30 16:24:20Z

0

Try the code below. Note that since you are using associative array for data, the order in which the headings appears cannot be guaranteed.

print "<table>"

print "<thead><tr>"
order = []
for k in data.keys():
    print "<td>" + k + "</td>"
    order.append(k)
print "</tr></thead>"

print "<tbody>"
for k in order:
    print "<tr>"
    for v in data[k]:
        print "<td>" + v + "</td>"
    print "</tr>"
print "</tbody>"
print "</table>"

answered Jul 30, 2011 at 16:24

arunkumar

34.4k4 gold badges36 silver badges47 bronze badges

1 Comment

Brad Montgomery Over a year ago

This doesn't work. First, I need the data organized so I can pass it off to a Django template (of course, I could store this in a string instead of printing it, but I'd prefer all of the presentation be done in the template). The second point is, this prints all the data associated with each header in it's own row. I want that info in a column.

Collectives™ on Stack Overflow

How to render a python dict as an html table with vertical columns

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related