1

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>
1

1 Answer 1

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.
2
  • i was looking at the lightning:datatable specifications as well and noticed the ability to set the sort order with an html attribute. Any preference in your experience?
    – weytani
    Feb 4, 2019 at 19:31
  • 1
    @davidjryan it's not an HTML attribute, it's an attribute of lightning:datatable; when you change the sort order, it's doing the same thing; reordering the internal state of the table so that they are rendered in reverse. See salesforce.stackexchange.com/a/219416 and my manual sorting demo.
    – sfdcfox
    Feb 4, 2019 at 19:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .