1

When getting data via wire method, selected-rows does not work, even when hard coding a record id to be passed to it. See below:

myDataTableCmp.js:

    import { LightningElement, wire } from "lwc";
    import getContacts from "@salesforce/apex/MyDataTableCtrl.getContacts";
    
    const columns = [
      { label: "Contact name", fieldName: "Name", type: "text" },
      { label: "Contact email", fieldName: "Email", type: "text" }
    ];
    
    export default class MyDataTable extends LightningElement {
      columns = columns;
      contacts = [];
    
      preselectedContactRow = ["0035w00003oJ5KQAA0"];
    
      @wire(getContacts)
      wiredContacts(result) {
        if (result.data) {
          this.contacts = result.data;
        }
      }
    }

myDataTableCmp.html:

    <template>
      <div class="slds-p-horizontal_small">
        <lightning-datatable
          key-field="id"
          columns={columns}
          data={contacts}
          selected-rows={preselectedContactRow}
        >
        </lightning-datatable>
      </div>
    </template>

However, if I hard code the data (instead of querying it) and not use wire, it works (and selects the row):

    import { LightningElement, wire } from "lwc";
    
    const columns = [
      { label: "Contact name", fieldName: "Name", type: "text" },
      { label: "Contact email", fieldName: "Email", type: "text" }
    ];
    
    const contacts = [
      {
        id: "0065w00002BRfvJAAT",
        Name: "Roy Goodman",
        Email: "[email protected]"
      },
      {
        id: "0065w00002BRupJAAT",
        Name: "Tracy Smith",
        Email: "[email protected]"
      }
    ];
    
    export default class MyDataTable extends LightningElement {
      columns = columns;
      contacts = contacts;
      preselectedContactRow = ["0065w00002BRfvJAAT"];
    }

How can I get it to select the row when using wire method to get the data?

1 Answer 1

2

Since contacts is setted in a wired function, it is not available in the first rendering cycle, so the datatable receives an invalid array of selected rows, therefore ignored.
Once the wired function returns its data and set contacts, just the data property of the datatable is updadated, preselectedContactRow doesn't change, so the standard component doesn't run the method to automatically select some rows.

To fix this issue you should render the datatable only when contacts hold some values:

<template>
    <div class="slds-p-horizontal_small" lwc:if={contacts.length}>
        <lightning-datatable
            key-field="Id"
            columns={columns}
            data={contacts}
            selected-rows={preselectedContactRow}>
        </lightning-datatable>
    </div>
</template>

Please prefer lwc:if directive over if:true since the latter is no longer recommended because Salesforce intends to deprecate it.

By the way, the key-field attribute should be Id since Javascript is case-sensitive.

When you hardcode contacts, those data are available since the first rendering cycle, so everything works fine.

3
  • Still not working, after applying that change. What could it be you think?
    – snippet69
    Apr 2, 2023 at 15:29
  • Does getContacts return a list of SObject (Contact)? If so, the key-field attribute should be Id since Javascript is case sensitive
    – RubenDG
    Apr 2, 2023 at 20:11
  • Ah, that was it. Working now, thanks!
    – snippet69
    Apr 3, 2023 at 2:48

You must log in to answer this question.

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