0 Kudos

Add a Sequence number to Invoice

Submitted by
Status: New

Would it be possible to add a column to the invoice showing a sequential number (auto-number).

In the image below, I have added a first column called "No.", which would auto-number with 1, 2, 3, etc in each row.



2 weeks ago - last edited 2 weeks ago

If anyone is interested in adding a sequential number in a first column, this is how I got it working.

Disclaimer: I am not a coder, but it works for me.


Add the code in red, and

edit the code in blue.


    <table class="items{% if invoice.pricesWithTax %}items--pricesWithTax{% endif %}">
            <th class="items__item__seq">{% trans %}No. {% endtrans %}</th>
                <th class="items__item__label">{% trans %}Description{% endtrans %}</th>
                {% if invoice.pricesWithTax %}
                    <th class="items__item__price">{% trans %}Price{% endtrans %}</th>
                    <th class="items__item__quantity">{% trans %}Quantity{% endtrans %}</th>
                    <th class="items__item__untaxed">{% trans %}Untaxed{% endtrans %}</th>
                    <th class="items__item__tax_rate">{% trans %}Tax rate{% endtrans %}</th>
                    <th class="items__item__tax">{% trans %}Tax{% endtrans %}</th>
                {% else %}
                    <th class="items__item__quantity">{% trans %}Quantity{% endtrans %}</th>
              		<th class="items__item__price">{% trans %}Unit Price{% endtrans %}</th>
                {% endif %}
              <th class="items__item__total last-child">{% trans %}Amount{% endtrans %}</th>
		{% set inc = 1 %}
        {% for item in items %}
                <tr class="items__item items__item--{{ item.type }}">
                  <td class="items__item__seq">{{inc}}</td>
                  <td class="items__item__label"><span>{{ item.label }}</span></td>
                    {% if invoice.pricesWithTax %}
                   		<td class="items__item__price">{{ item.priceUntaxed }}</td>
                     	<td class="items__item__quantity">{{ item.quantity }}</td>
                      	<td class="items__item__untaxed">{{ item.totalUntaxed }}</td>
                      	<td class="items__item__tax_rate">{{ item.taxRate }}</td>
                      	<td class="items__item__tax">{{ item.taxAmount }}</td>
                    {% else %}
                     	<td class="items__item__quantity">{{ item.quantity }}</td>
                  		<td class="items__item__price">{{ item.price }}</td>
                    {% endif %}
                    	<td class="items__item__total last-child">{{ item.total }}
                {% for child in item.children %}
                    <tr class="items__item items__item--sub items__item--{{ child.type }}">                     
                      <td class="items__item__seq"><span></span></td>  
                      <td class="items__item__label"><span>{{ child.label }}</span></td>
                        {% if invoice.pricesWithTax %}
                            <td class="items__item__price">{{ child.priceUntaxed }}</td>
                            <td class="items__item__quantity">{{ child.quantity }}</td>
                            <td class="items__item__untaxed">{{ child.totalUntaxed }}</td>
                            <td class="items__item__tax_rate">{{ child.taxRate }}</td>
                            <td class="items__item__tax">{{ child.taxAmount }}</td>
                        {% else %}
                            <td class="items__item__quantity">{{ child.quantity }}</td>
                      		<td class="items__item__price">{{ child.price }}</td>                      
                      {% endif %}                     
                        <td class="items__item__total last-child">{{ child.total }}</td>
                 {% endfor %}            
      	{% set inc = inc + 1 %}
        {% endfor %}

        <tfoot class="totals">
                <td colspan="{% if invoice.pricesWithTax %}3{% else %}2{% endif %}"></td>
                <td colspan="{% if invoice.pricesWithTax %}4{% else %}3{% endif %}">

And the css:


.items .items__item__seq {
text-align: center;
padding: 6px;
width: 5%;


Please let me know if I've done something wrong here.