I am trying to render two different tables, side-by-side, that are passed together as dataframes in Flask with
return render_template('rankings.html', tables=[df1.to_html(index=False, classes='data'), df2.to_html(index=False, classes='data')], titles=['hof','recent'])
As the below Jinja template doesn't specify which table to render in each of the for loops, it renders both, with the first table stacked on top of the second table.
Ideally, I'd only have the first dataframe rendered in the first table, and the second dataframe rendered in the second table.
I am looking for a way to iterate through the items in the for loop.
table[1], and table.1 both usually just give me 't' (and table[2] gives 'a', table[3] gives 'b, etc), so iterating isn't working or I'm doing something wrong here.
I realise there are other (and likely better) ways of avoiding a for loop altogether, as well but as I'm relatively new to Jinja, I'm struggling to come up with something that works - any help is hugely appreciated.
A shortened version of my Jinja template as follows.
<html>
<head>
<title>Test</title>
<style>
.tab {
display: inline-block;
margin-left: 4em;
}
body {
background-image: linear-gradient(to bottom right, red, white);
}
.column {
display:inline-block;
width:50%;
float:left;
}
</style>
</head>
<body><center>
<div class="column"><p><h2>Hall of fame</h2></p>{% for table in tables %}{{ table|safe }}{% endfor %}</div>
<div class="column"><p><h2>Most recent</h2></p>{% for table in tables %}{{ table|safe }}{% endfor %}</div>
</center></body>
</html>
If you cannot change the code that provides you with tables, you can just hardcode. (Which is a pretty bad practice)
Something like this:
{% for table in tables[:1] %} # For HoF
{% for table in tables[1:2] %} # For Most recent
Though, if you were to change the number of tables, or even their positions — it may break your response.
Though, I believe that the preferred solution would be to pass those tables as two separate properties.
Something like:
return render_template('rankings.html', hof_table=df1.to_html(index=False, classes='data'), most_recent_table=df2.to_html(index=False, classes='data'), titles=['hof','recent'])
And change the template accordingly, using those new variables.