Lightning Component Aura Iteration Show/Hide

Question

I am trying to implement inline-search in the HTML table inside my aura lightning component. As the table is dynamically rendered using aura iteration, each row has a dynamic aura id, and hence I am unable to perform slds-hide using component.find, which is returning null/undefined.

Any idea how can I achieve this? Thanks.

Answer 1

You'd pop records in and out of a filtered collection in the helper. IE: if you are using an aura:iteration, and the page had some kind of filter dropdown, the controller would have something like this:

            var filteredDetails = [];
            if(selected == "All") {
                filteredDetails = details;
            }
            if(selected == "Errors") {
                for(var i = 0; i < details.length; i++){
                    if(details[i].HasError){
                        filteredDetails.push(details[i]);
                    }
                }
            }

this.updatePageDetails(component, filteredDetails);

Our case was a little different, but this approach should work. Have the helper filter the results and shrink the table data.