0

I'm trying to figure out how to pre-select all of the rows in my Data-table. According to this documentation, we can select rows programmatically. However, it does not explicitly show how to select all of the rows for a Data-table. Which is basically what I'm aiming to do. For reference, here are my codes:

HTML

<template if:true={oppLines}>
    <lightning-datatable
            key-field="Id"
            data={oppLines}
            columns={columns}
            onrowselection={selectedRowsEvent}
            selected-rows={preSelectedRows} 
            resize-column-disabled=true>    
    </lightning-datatable>
</template>
<template if:true={error}>
    <p>{oppLines.error}</p>
</template>

JS

I use @wire to get data from an Apex controller and basically prepare my data for the Data-table as shown below.

@track oppLines;
@track preSelectedRows;

@wire(getOppLines, { searchKey: '$searchKey' }) wired(result) {
    this.refreshTable = result;
    if (result.data) {
      let preparedOppLines = [];
      result.data.forEach(oppLine => {
          let preparedOppLine = {};
          preparedOppLine.Id = oppLine.Id;
          preparedOppLine.Name = oppLine.Name;
          // ... bunch of other field assignments here ...
          preparedOppLines.push(preparedOppLine);
          });
          this.oppLines = preparedOppLines;

          // This is what I use to preselect my rows
          var setRows = [];
          for (var i = 0; i < oppLines.length; i++){
              setRows.push(oppLines[i].Id);
          }
          this.preSelectedRows = setRows;
     }
    if (result.error) {
        this.error = result.error;
    }
}

Please notice that the block of code you see below is what I am using to get my rows (also included part of the code above). Presumably, this is where I would get the number of rows for my Data-table which is why I've included it right after my @wire because as I understand - the table must exist first, thus we can't place it in the connectedCallback (Please correct me if I'm wrong on this) to pre-select the rows upon loading.

var setRows = [];
for (var i = 0; i < oppLines.length; i++){
    setRows.push(oppLines[i].Id);
}
this.preSelectedRows = setRows;

Sadly, I'm going nowhere with this setup. What am I doing wrong exactly? And can this get any simpler?

Any help is much appreciated. Thank you!

UPDATED with sfdcfox's answer:

// JS
@track oppLines = []; // added array
@track preSelectedRows = []; // added array

        @wire(getOppLines, { searchKey: '$searchKey' }) wired(result) {
                this.refreshTable = result;
                if (result.data) {
                  let preparedOppLines = [];
                  result.data.forEach(oppLine => {
                      let preparedOppLine = {};
                      preparedOppLine.id = oppLine.Id; // changed to lowercase id
                      preparedOppLine.Name = oppLine.Name;
                      // ... bunch of other field assignments here ...
                      preparedOppLines.push(preparedOppLine);
                      });
                      this.oppLines = preparedOppLines;

                      // This is what I use to preselect my rows
                      setTimeout(() => this.preSelectedRows = this.oppLines.map(record=>record.id)); // changed to lowercase id
                     } 
                    if (result.error) {
                        this.error = result.error;
                    }
            }

// HTML
<template if:true={oppLines}>
        <lightning-datatable
                key-field="id" // changed to lowercase id
                data={oppLines}
                columns={columns}
                onrowselection={selectedRowsEvent}
                selected-rows={preSelectedRows} 
                resize-column-disabled=true>    
        </lightning-datatable>
        </template>
        <template if:true={error}>
             <p>{oppLines.error}</p>
        </template>
1

It appears you can't select the values until after the table renders. Try the following change:

// This is what I use to preselect my rows
setTimeout(
  () => this.preSelectedRows = oppLines.map(record=>record.Id)
);

See this playground.

1
  • Thanks for sharing the playground for this. After making a few changes, it worked like a charm!! – Sid Fortunato May 7 '20 at 3:44

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.