Set dynamically rows of a table in Lightning

Question

I am new to Lightning, and I would like to create a table that I could set (by a picklist) the number of rows that will appear. I have tried to put the number of rows by default, setting on the attribute indexVar the number of the rows, but there is no effect (it is showing all values). This is the code of the table.

<aura:attribute name="indx" type="Integer" default="5" /> 
<aura:iteration items="{!v.adressList}" var="dir" indexVar="{!v.indx}"> 
<tr>
     <td><div class="slds-truncate" title="{!dir.FE_sales_Country__c}">
          {!dir.FE_sales_Country__c}</div></td>
     <td><div class="slds-truncate" title="{!dir.FE_Sales_City__c}">
          {!dir.FE_Sales_City__c}</div></td>
     <td><a href="{!'/one/one.app?#/sObject/'+ dir.Street__c + '/view'}" 
          target="_blank">{!dir.Street__r.Name}</a></td>
</tr> 
</aura:iteration>

The code of the picklist is the next one (I still have to do doAction to set the value of the rows, I guess that I should just set the value to the indx attribute):

<lightning:select name="mySelect" label="Select an option:" aura:id="mySelect" value="{!v.rowValue}" onchange="{!c.doAction}">                
   <aura:iteration items="{!v.rowoptions}" var="item" >
         <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
   </aura:iteration>                
</lightning:select>

And in the controller I have put this code:

loadRowOptions: function (component, event, helper) {
    var opts = [
        { value: "5", label: "5" },
        { value: "10", label: "10" },
        { value: "25", label: "25" },
        { value: "50", label: "50" }
     ];
     component.set("v.rowoptions", opts);
}

So I think the main problem is that I am not able to just show the number of rows that I want.

Answer 1

That's simply not what indexVar does on <aura:iteration>:

indexVar String The variable name to use for the index of each item inside the iteration.

It stores on each loop iteration the current index in the row array.

You can control the number of rows you display by manipulating the content of v.adressList, which the iteration component is using to generate its rows. If you're trying to implement pagination, you should be setting that value to a selected sub-set of your backing data store, based upon the value of mySelect.