1

Aim: Maintain Row Selection across the paginated data.

Problem: My data is not having any column which has unique data (for example id).

Details: I tried something like LWC Datatable - Get the Row Number when editing a column but problem here is that I don't have any unique identifier for each row. One solution I can think of is that I'll add a unique identifier on each row(programmatically using some JS methods), but I don't want to change anything in existing data, so is there any better solution available? And if adding the unique identifier to each row is the only solution then what is the best possible way to do that?

Note: For table without pagination even the method given in https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation as "getSelectedName" works even where there is no Id/unique data present in the table. When there is no pagination I'm able to get each and every row perfectly even when I'm selecting or deselecting the row. Problem is only with the pagination.

EDIT

Sample Data

this.tableData = [{"fname":"FirstName","lname":"LastName","zipcode":sampleZipCodeNumber}]

Sample Code

JS this.column = [{"label":"First Name","fieldName":"fname","type":"text"},{"label":"Last Name","fieldName":"lname","type":"text"},{"label":"ZIP Code","fieldName":"zipcode","type":"number"}]

HTML <lightning-datatable key-field={keyField} data={tableData} columns={columns} show-row-number-column={showRowNumberCol} hide-checkbox-column={hideRwSlctionChckbx} row-number-offset={rowNumberOffset} onrowselection={rwMthd}></lightning-datatable>

3
  • 2
    are you able to share some code, specifically on what the data looks like (or make up something that is similar) along with the datatable html/js? Mar 31, 2021 at 13:26
  • codethis.tableData = [{"fname":"FirstName","lname":"LastName","zipcode":sampleZipCodeNumber}] <br/><br/> this.column = [{"label":"First Name","fieldName":"fname","type":"text"},{"label":"Last Name","fieldName":"lname","type":"text"},{"label":"ZIP Code","fieldName":"zipcode","type":"number"}] <br/><br/> <lightning-datatable key-field={keyField} data={tableData} columns={columns} show-row-number-column={showRowNumberCol} hide-checkbox-column={hideRwSlctionChckbx} row-number-offset={rowNumberOffset} onrowselection={rwMthd}></lightning-datatable>`
    – user43598
    Mar 31, 2021 at 15:33
  • 1
    FYI - You can edit your own post to include that information which makes it more readable Mar 31, 2021 at 15:38

1 Answer 1

1

You must use a unique identifier in your data; this is required by LWC to efficiently update templates/virtual DOM elements, you will get odd/unpredictable behavior if you use a non-unique value. This can be as simple as assigning the index as a unique key:

this.data = this.data.map((value,index)=>({...value,index});

Where we use Array.prototype.map to copy the data and add the index as another entry. You can then use that as the keyfield:

<lightning-datatable key-field="index" ...
6
  • then should I use the same new unique value in key-field parameter of the data table?
    – user43598
    Mar 31, 2021 at 19:07
  • 1
    @user43598 Yes, you should.
    – sfdcfox
    Mar 31, 2021 at 20:36
  • In dataTable I have set 2 properties as onrowselection={getSelectedName} selected-rows={selectedRecordRows} I can see as soon as I click a checkbox "getSelectedName" is called and proper values gets set in "selectedRecordRows" (as per console.log), but on UI the checkbox is does not get checked for those selected records. If I remove ` selected-rows={selectedRecordRows}` then the dataTable shows the checkbox properly checked and also correct data in console. Here problem is, I have implemented pagination and when I traverse to different page the checkbox become blank on returning.
    – user43598
    Apr 1, 2021 at 10:57
  • @user43598 LWC data binding is one-way, so you need to save/load the selected records before updating the page records, or you'll lose your selections.
    – sfdcfox
    Apr 1, 2021 at 13:15
  • can you please suggest then what is the best possible way to maintain the selections across the pages (meaning even when the page changes) and process the selected only as the last step?
    – user43598
    Apr 1, 2021 at 14:16

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