HTML Print Format Reverse Table

Good day All

I am trying to make an HTML Table in the Print Format, but the rows of the table would be in reverse order.
Sample Image of the Final Goal:


In addition, this is the code I wrote so far:

<table width=100% border="1">

    {%- for row in doc.review_table -%}
    <tr>
        <td>{{loop.index}}</td>
        <td>{{ row.issued_for }}</td>
        <td>{{ row.prepared_by }}</td>
        <td>{{ row.checked_by }}</td>
        <td>{{ row.date }}</td>
    </tr>
    {% endfor %}

    <tr>
        <th>Rev. </th>
        <th>Issued For</th>
        <th>Prepared</th>
        <th>Checked</th>
        <th>Date</th>
    </tr>
</table>

This is the result of my code:

Can anyone help me with this?
Thank you :slight_smile:

you can just reverse the doc.review_table using {%- for row in doc.review_table|reverse -%}

Thank you @bahaou

Your code worked, however, the {{loop.index}} remained as is, the numbers didn’t reverse with the rest of the data.
Before:


After:

#1 became #3 and #3 became #1

you can ignore the loop.index and create an index of your own .
before the loop assign a variable with the length of the items . on each row you can show it and then change it minus 1 .
example :

{% set i=[doc.review_table | length]%}

{%- for row in doc.review_table -%}
tr
<td {{i[0]}} /td
{% if i.append(i.pop()-1) -%}{% endif %}
<td {{ row.issued_for }} /td
<td {{ row.prepared_by }} /td
<td {{ row.checked_by }} /td
<td {{ row.date }} /td
/tr
…

1 Like

@bahaou
It worked.

Although, don’t forget to type the “|reverse” in the Jinja block:
{% set i=[doc.review_table | length]%}

{%- for row in doc.review_table|reverse -%}
tr

<td {{i[0]}} /td {% if i.append(i.pop()-1) -%}{% endif %} <td {{ row.issued_for }} /td <td {{ row.prepared_by }} /td <td {{ row.checked_by }} /td <td {{ row.date }} /td /tr

Thank you so much :smiley:

I m gonna ask you a stupid question here :slight_smile:
how to write html here ? cauz it’s reading my reply as pure html so I deleted the < in the tags :rofl:

It’s simple.
First you paste the HTML code as is in the text editor, next, highlight the HTML code and press on the button icon ( </> )
Just like this:

thanks
<div> test </div> :rofl: