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? Commented Nov 14, 2019 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
    Commented Nov 14, 2019 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? Commented Nov 14, 2019 at 12:21

2 Answers 2


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

        var table = this.template.querySelector('lightning-datatable');
        var rows = table.data;


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
    Commented Nov 15, 2019 at 11:11
  • I think this only gives visible data, right? Like if pagination is involved, then this will fail. Commented May 27, 2020 at 3:46

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);
  • 2
    is this AURA, OP has asked for LWC Commented Nov 14, 2019 at 12:20
  • Actually I found a way to do this for LWC using cellAttribute and slds-text-title_bold developer.salesforce.com/docs/component-library/bundle/… Commented Aug 18, 2022 at 11:02
  • I created a wrapper in Apex which sets .slds-text-title_bold to an @auraenabled field that is treated as a cellAttribute. in the JS controller in column just define it as they have mentioned . then in my imperative apex call from LWC JS controller I iterate throw the rows using a for . then i use an if condition to single out that row Commented Aug 18, 2022 at 11:06
  • as in if this.resultdata[i]=='thelastrow' then i add that additional attribute in the assignment eg this.rowdata=[... this.rowdata, { fieldname:result[i].fieldname, } Commented Aug 18, 2022 at 11:08

You must log in to answer this question.

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