I am trying to do the client-side pagination using the data table. The pagination works fine, however when i select a row and update the data attribute of lightning datatable with more values than old data attribute values, the selection is not going away.

enter image description here

i selected the first row in above picture. When i changed the row per page from 10 to 15, the first row was still selected although i updated the lightning datatable data attribute with new set of value. enter image description here

my lightning datatable look like below.

            <lightning-datatable key-field="id" data={data} columns={columns} onrowselection={getSelectedRecord}>

Corressponding javascript on rowselection-

    this.selectedRows = event.detail.selectedRows;        

Record per page Html look like below-

                <div class="slds-float_left slds-var-m-around_medium">
                    <lightning-combobox name="progress" label="Record per page" value={comboboxValue} options={comboboxOption} onchange={handleComboboxChange} ></lightning-combobox>

corressponding javascript on value change for combobox-

    this.comboboxValue = event.detail.value;
    this.pageSize = event.detail.value;
    this.totalPage = Math.ceil(this.totalRecountCount/this.pageSize);
    this.data = this.items.slice(0,this.pageSize);
    this.endingRecord = this.pageSize;
    this.page = 1;
    this.startingRecord = 1;

1 Answer 1


You have to clear the selectedRows:

this.template.querySelector("lightning-datatable").selectedRows = [];

You must log in to answer this question.

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