Products tab is where I can put my own <tr>
style. The preview PDF does not show the changes made on the Products tab, so I had to generate invoice PDF to view the changes. That was the source of my confusion.
Having said that, I would like not to have to use the <table id="product-table"></table>
to show products but build my own table with custom columns and such. For example:
<!-- Body Tab -->
<table>
<thead>
<tr>
<!-- custom header -->
<!-- numerated product items (1,2,3,...) -->
<th class="uk-text-right">#</th>
<!-- have the label as a variable -->
<th class="uk-text-left">$product.item_label</th>
<th class="uk-text-center">+</th>
</tr>
</thead>
<tbody id="products">
<!-- here would be rows from the "Products" tab -->
</tbody>
</table>
<!-- Products Tab -->
<tr>
<!-- item array index (1,2,3,...) -->
<td class="uk-text-left">$product.index</td>
<td class="uk-text-right uk-text-nowrap">$product.item</td>
<!-- custom value same for all rows -->
<td class="uk-text-center">+</td>
</tr>
This would allow maximum flexibility with the design.
Opinions?