Dynamic table with Python

Question

I am developing a small site, which must fetch some data from an API and display it in a table (I don't know how much rows I will need, it depends on the API). I selected Python as backend programming language and Flask as a web-framework. I need to make a request to API from Python on page start and display it's result in a table in HTML template. render_template with some parameters can't do that - because it can't dynamically display HTML elements, just text. How can I do it without JS/JQuery or using it minimally? This is my table code (it's Bootstrap 4)

<table class="table table-bordered" id="users">
  <thead>
    <tr>
      <th>ID</th>
      <th>Имя</th>
      <th>Фамилия</th>
      <th>Действие</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="1">3319</td>
      <td>...</td>
      <td>...</td>
      <td><a href="#">Выбрать</a></td>
  </tbody>
</table>

You can use Jinja2 when serving html files with Flask's render_template — yeg, Aug 25 '18 at 19:42

Juergen · Accepted Answer · 2018-08-28T18:34:11.550

10

When using Jinja2, you can dynamically create your table using the scripting possibilities of Jinja2, with a syntax rather similar to Python:

<table>
 <thead>
  {%- for column in columns %}
     <th>{{ column }}</th>
  {%- endfor %}
 </thead>

 <tbody>
 {%- for row in items %}
    <tr>
    {%- for column in columns %}
       <td>{{ row|attr(column) }}</td>
    {%- endfor %}
    </tr>
 {%- endfor %}
 </tbody>
 </table>

At the call of render_template, you need to provide two variables "columns" containing a list of columns of the rows and "items" containing the rows.

No need to use JS.

If you want to support some special data types, like links, you can do so by using if statements in the template.

See the reference of Jinja2 for more details: http://jinja.pocoo.org/docs/2.10/templates/

edited Aug 28 '18 at 18:34

answered Aug 25 '18 at 20:41

Juergen

12,378
7
39
55

With this piece of code Jinja2 gives me an error: `jinja2.exceptions.UndefinedError: 'attr' is undefined`, if I replace `attr(row, column)` with `row[column]` it shows just empty table with two empty rows. – crinny Aug 26 '18 at 09:22
@crinny: I think, I got that wrong -- attr is a filter. Try this: {{ row|attr(column) }} – Juergen Aug 26 '18 at 10:37
@juegern same result as with `row[column]`. My code: `return render_template('desk.html', columns=['Id', 'Test'], items=['1', 'test str'])` – crinny Aug 26 '18 at 11:04
@crinny: Items must be a list of rows. What you here have is a list of plain values. Do you use SQLAlchemy or the like? – Juergen Aug 26 '18 at 15:12
@juegern no, i don't use any DB at this moment. – crinny Aug 26 '18 at 15:54

Attack68 · Answer 2 · 2018-10-21T19:10:12.833

You might also be interested in this pattern, using python package pandas:

import pandas as pd

@app.route('/table')
def display_table():
    # do something to create a pandas datatable
    df = pd.DataFrame(data=[[1,2],[3,4]])
    df_html = df.to_html()  # use pandas method to auto generate html
    return render_template('page.html', table_html=df_html)

then inside the page.html include the following:

{{ table_html | safe }}

you need to include the safe filter so that it renders raw html without escaping any of the characters.

This will render the following, which you can also stylise with the arguments and the Styler available in pandas.

<table border="1" class="dataframe">  
<thead>    
<tr style="text-align: right;">      
<th></th>    
<th>0</th>      
<th>1</th>    
</tr>  
</thead>  
<tbody>    
<tr>      
<th>0</th>     
<td>1</td>     
<td>2</td>   
</tr>    
<tr>      
<th>1</th>    
<td>3</td>     
<td>4</td>    
</tr> 
</tbody>
</table>

EDIT: FYI this is also convenient for problems where you have complicated, or dynamic conditional formatting, that is easier to style on the python/pandas server side, and not have to worry about the html template. Of course it depends what you are doing but I argue this is more maintainable in some situations - like mine!

score 1 · Answer 3 · edited Nov 07 '21 at 03:02

I've edited @juegern's answer to work with <a> tags and now my code looks so:

<table class="table table-striped" id="users">
 <thead>
  {%- for column in columns %}
     <th>{{ column }}</th>
  {%- endfor %}
 </thead>

 <tbody>
 {%- for row in items %}
    <tr>
    {%- for column in columns %}
        {% if row[column]['link'] %}
            <td><a href="{{ row[column]['link'] }}">{{ row[column]['text'] }}</a></td>
        {% else %}
            <td>{{ row[column] }}</td>
        {% endif %}
    {%- endfor %}
    </tr>
 {%- endfor %}
 </tbody>
 </table>

Code to apply some data to this table from Flask: items_list = [{'1': 'Hello', '2': 'World', '3': {'link': '#', 'text': 'Open'}}, {'1': 'World', '2': 'Hello', '3': {'link': '#', 'text': 'Open'}}] return render_template('your_file_name.html', columns=['1', '2', '3'], items=items_list)

Dynamic table with Python

3 Answers3