0

Is it possible to remove rows from custom datatable within JS controller that is without making server call.

 <th scope="row" class="slds-text-align_left" style="width:3.25rem;">
                                    <div class="slds-form-element">
                                        <div class="slds-form-element__control">
                                            <label class="slds-checkbox">
                                                <ui:inputCheckbox text="{!pObj.Name}"
                                                                  value="{!pObj.isChecked}"
                                                                  change="{!c.pdcncheckboxSelect}"
                                                                  aura:id="PDCNcheckBox"/>
                                                <span class="slds-checkbox_faux"></span> 
                                                <span class="slds-form-element__label text"></span>
                                            </label>
                                        </div>
                                    </div>
                                </th>

The Controller Function is

var getAllPdcns = component.find("PDCNTablecheckBox");
    if(! Array.isArray(getAllPdcns)){
        if (getAllPdcns.get("v.value") == true) {
            delId.push(getAllPdcns.get("v.text"));
        }
    }else{
        for (var i = 0; i < getAllPdcns.length; i++) {
            if (getAllPdcns[i].get("v.value") == true) {
                delId.push(getAllPdcns[i].get("v.text"));
            }
        }
    }
    console.log("delId->",delId);
    var allPdcn = component.get("v.pdcnTableData");
    var finalPdcns =[];
    for(var i=0; i<allPdcn.length;i++){
        for(var j=0; j<delId.length;j++){
            if(allPdcn[i].Name != delId[j]){
                finalPdcns.push(allPdcn[i]);//break; 
            }
        }
    }
    console.log("Final PDCNs-->",finalPdcns);

I am getting duplicate rows on the click of Remove button. Basically I just took array of each row(as Object) and iterated it, took array of selected rows as well, I am just wondering if it is possible to match both and remove selected rows from all rows array.

2 Answers 2

1

You can use Array.prototype.filter for this task:

var finalPdcns = allPdcn.filter(row => delId.indexOf(row.Name) === -1);

Here, we check each row to see if the Name exists, and if not, we retain that row.

This isn't the only alternative, as other methods exist. You'll want to take a look at the Array methods available in JavaScript.

2
  • Worked Like a charm!! Just one thing , can you explain me that line of code or give me a link for reference where I can get concep. Thanks! Commented Jun 11, 2019 at 6:01
  • @ThomasPete I added a link to Array.prototype.filter. Basically, it's an array method that takes a callback function that has a single parameter (the element in the array), and we return true or false based on the element's data. Filter keeps only the values that return true. The return value is a new array (the original is unmodified) that contains all of the elements we returned true for.
    – sfdcfox
    Commented Jun 11, 2019 at 12:39
0

updated based on comments.

controller.js

  var getAllPdcns = component.find("PDCNTablecheckBox");
if(! Array.isArray(getAllPdcns)){
    if (getAllPdcns.get("v.value") == true) {
        delId.push(getAllPdcns.get("v.text"));
    }
}else{
    for (var i = 0; i < getAllPdcns.length; i++) {
        if (getAllPdcns[i].get("v.value") == true) {
            delId.push(getAllPdcns[i].get("v.text"));
        }
    }
}
console.log("delId->",delId);
var allPdcn = component.get("v.pdcnTableData");
var finalPdcns = allPdcn.filter(row => !delId.includes(row.Name));
console.log("Final PDCNs-->",finalPdcns);

component.set("v.pdcnTableData",finalPdcns);

6
  • Apologies and Thanks, Your Code Snippet works flawlessly for single row But I need to remove multiple rows using checkbox and a remove button,Could you kindly provide a solution for that..!!! Commented Jun 3, 2019 at 15:02
  • why your not using lightning:datatable instead normal HTMl table? lightning:datatable gives functionality what ever you expecting
    – sdandamud1
    Commented Jun 3, 2019 at 15:06
  • It conflicts with other functionalities I have, as I have implemented search box for that table as well and lghtning:datatable doesn't work well with those. Should I implement a for loop for this? Commented Jun 3, 2019 at 15:14
  • Also where is noalist defined? Commented Jun 3, 2019 at 15:17
  • edited, can you updated your question with table code also, it'll help to replicate your issue.
    – sdandamud1
    Commented Jun 3, 2019 at 15:24

You must log in to answer this question.

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