2

Are we able to iterate through the rows of a lighting datatable and query each columns value in Javascript?

Like this, but for a lightning datatable: https://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript

I would imagine it's something like below, but this doesn't work obviously.

var rows = this.template.querySelector('my-custom-datatable');
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop
   }  
}
  • Why do you want to do this? do you want to get selected rows? – rahul gawale Nov 14 at 12:00
  • No. I do not want to get the selected rows. This is for a hotfix. I want to only change the value of particular cell(s). I know I could refactor the Apex I'm using to initially retrieve/manipulate the data but this is a larger effort. I was checking to see if I could iterate through each row and cell, compare the value of that cell and if its fulfills my condition(s), then change it's value. – DylanR Nov 14 at 12:05
  • 2
    Can you provide Playground link? also why not just use the array that you used to create table manually in JS? – Pranay Jaiswal Nov 14 at 12:21
2

Another way would be to get the lightning-datatable using template.querySelector and then access the rows attribute

 iterateOverTable(event){        
        var table = this.template.querySelector('lightning-datatable');
        var rows = table.data;
        rows.forEach(function(element){
            console.log(element.name);
        });

    }

Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/Nh9CElBEE/1/edit

  • This worked a treat, thank you. Just a thing of note for anyone using this as I easily overlooked it. Use 'element.<field-name-of-column>' to access a specific columns value. – DylanR Nov 15 at 11:11
3

You can manipulate the returned data from your apex controller and then point that property as your edited data to your lightning-datatable.

This is for aura but the idea is the same:

        action.setCallback(this, $A.getCallback(function (response) {
        let state = response.getState();
        if (state === "SUCCESS") {
            let resultData = response.getReturnValue();
            if (resultData !== null) {

                resultData.forEach(function (record) {
                    if (typeof record.Id != 'undefined') {
                        if (record.IsActive) {
                            record.displayIconName = 'utility:check';
                            record.showClass = 'greencolor'
                        } else {
                            record.displayIconName = 'utility:close';
                            record.displayIconName = 'redcolor';
                        }
                    }
                });

                component.set("v.data", resultData);
  • 1
    is this AURA, OP has asked for LWC – Pranay Jaiswal Nov 14 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.