Maintain Row Selection in Pagination with Data which does not have any unique Id [closed]

Question

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>

Answer 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" ...