CODEWITHSUNDEEP
javascripthtmldjangodjango-templatesfrontend
jashuang1130
jashuang1130

Reputation: 429

create table with dynamic rows and columns with django html template

I'm trying to create a table with dynamic rows and columns based on the results list with django html template. The number of records and header number could change. I am using two for loops to get the number of rows and the column number. I'm having a hard time trying to output the actual values in the table. The idea was to "index" from the second for loop and applying it to "each" of first loop. I know that the syntax is definitely wrong, but is something that django can do? If not, is there any suggestions that I can research on how to implement this? Thanks!! 

list = [
  {'header_a': foo1, 'header_b': foo2, 'header_c': foo3},
  {'header_a': foo1, 'header_b': foo2, 'header_c': foo3},
  {'header_a': foo3, 'header_b': foo3, 'header_c': foo3},
  {'header_a': foo4, 'header_b': foo4, 'header_c': foo4},
]

Sample Table
header_a | header_b | header_c
foo1     | foo1     | foo1        
foo2     | foo2     | foo2   
foo3     | foo3     | foo3   
foo4     | foo4     | foo4

or 

list_2 = [
  {'header_c': c_foo1, 'header_d': d_foo1}, 
  {'header_c': c_foo2, 'header_d': d_foo2},
]

Sample Table 2
header_c | header_d
c_foo1   | d_foo1
c_foo2   | d_foo2

<table>
<thead>
  <tr>
    {% for index in list.0 %}
    <th>{{ index }}</th>
    {% endfor %}
  </tr>
</thead>
<tbody>
  {% for each in list %}
  <tr>
    {% for index in a %}
    <td>{{ each.{{index}} }}</td>
    {% endfor %}
  </tr>
  {% endfor %}
</tbody>
</table>

Upvotes: 3

Views: 7575

Answers (2)

jsanchezs
jsanchezs

Reputation: 2070

Well, as you have a list of dicionaries in that schema, this is how you can iterate it inside the template:

<table>
    <thead>
        <tr>
        {% for item in list %}
            {% if forloop.first %}
                {% for h in item %}
                    <th>{{ h }}</th>
                {% endfor %}
            {% endif%}
        {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for item in list %}
            <tr>
                {% for key,value in item.items %}
                    <td>{{ value}}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

Assuming you have the same keys in every dictionary (column headers or fields as you name them), you first iterate only the first dicionary to get its keys, then, you iterate again the values for rows...

Not the most efficient solution tho, it would be great if you can rewrite the way you create that list.

Hope it helps and please confirm if it works

Upvotes: 1

Levi Moreira
Levi Moreira

Reputation: 12005

maybe you should check out django tables? It's a pretty known tool to creating powerful tables with django. You can create them based on a model, but you can also simply pass the data directly to them. I also once used it to create a dynamic table. It takes all the job from the template and add it to the view where things are easier to manipulate.

Upvotes: 1

Related Questions