Aura:iteration with Data Tables and setting the order to descending as rows are inserted

Question

So we have a client that has a form page where a Data Table is built based on input. As they enter items the table sorts them by index (i'm assuming) in ascending order. Without making the user sort the table themself is there a way to have the items sorted by index in a descending order so the newest entry into the table is always at the top?

<tbody>
               <aura:iteration items="{!v.tableLines}" var="line" indexVar="index">
                    <tr id="{!'tr_'+line.suffix+'_'+index}" aria-selected="true">
                        <td scope="row">
                            <div class="slds-truncate" id="{!index}">{!line.suffix}</div>
                        </td>
                        <td scope="row">
                            <div class="slds-truncate" id="{!index}"><ui:inputText focus="{!c.onselectFocus}" updateOn="keyup" keyup="{!c.handleLineQuantityInput}" aura:id="{!index+ '_input_6'}" class="slds-input" value="{!line.hv}"/></div>
                        </td>
                        <td scope="row">
                            <div class="slds-truncate" id="{!index}">{!line.pmt}</div>
                        </td>
                        <td scope="row">
                            <div class="slds-truncate" id="{!index}">{!line.code}</div>
                        </td>
                        <td scope="row">
                            <div class="slds-truncate" id="{!index}">{!line.description}</div>
                        </td>
                        <td scope="row">
                            <div class="slds-truncate" id="{!index + '_lineq'}"><ui:inputNumber updateOn="keyup"  keyup="{!c.handleLineQuantityInput}" class="slds-input" value="{!line.qty}"/></div>
                        </td>
                        <td scope="row">
                            <div class="slds-truncate" id="{!index}"><ui:outputCurrency value="{!line.price}" format="$####.00"/></div>
                        </td>
                        <td scope="row">
                            <div class="slds-truncate" id="{!index}"><ui:outputCurrency value="{!line.total}" format="$####.00"/></div>
                        </td>
                         <td scope="row">
                            <div style="z-index: 100000; cursor:pointer;" onclick="{!c.removeLine}" id="{!index}" aura:id="{!index}">
                                <lightning:icon iconName="utility:error" variant="error" aura:id="{!index}"/>
                            </div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>

Answer 1

Not directly; iterations always go from index 0 upwards. You could probably do this with some CSS, but why not just add new rows to the front of the array:

var tableLines = component.get("v.tableLines");
tableLines.unshift({}); // unshift adds a new item in index 0, moving all other indices up 1.