create table with dynamic rows and columns with django html template

Question

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>

Is that list from a model single queryset or it's composed by many so it need to have that order ?, can you post your view so we can help ? — jsanchezs
– jsanchezs, Commented Feb 12, 2018 at 15:52
Ok, But, how is that the column headers can change dynamically ?, if the model is already set it should be the same fields unless you change the model. — jsanchezs
– jsanchezs, Commented Feb 12, 2018 at 16:08
the backend is running a dynamic sql query. the number of columns may differ based on the conditions given. — jashuang1130
– jashuang1130, Commented Feb 12, 2018 at 16:17

jsanchezs · Accepted Answer · 2018-02-12 20:52:19Z

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

Levi Moreira · Accepted Answer · 2018-02-12 15:49:25Z

1

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.

answered Feb 12, 2018 at 15:49

Levi Moreira

12k4 gold badges35 silver badges49 bronze badges

2 Comments

jashuang1130 Over a year ago

i thought about using django tables but the table I would eventually want to build will consist of dropdowns, input textboxes, and additional buttons.

Levi Moreira Over a year ago

I see. Well, they have a column type called TemplateColumn(django-tables2.readthedocs.io/en/latest/pages/…) where you can define the column as a Template, therefore you can simply pass a dropdown template, or input template or anything you like.

Collectives™ on Stack Overflow

create table with dynamic rows and columns with django html template

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related