Need to delete row from lightning datatable in lwc

Question

I have a requirement to delete the rows using utility icon in lightning datatable. Used onrowaction, but I don't have any clue what to do in JS method. Can anyone suggest a sample code for it? or explain me through a short logic?

.JS

@track deleteList = [];

handleDelete(event) {
        console.log('event.detail.row : ' + JSON.stringify(event.detail.row));
        this.deleteList = event.detail.row;
}

.HTML

<lightning-datatable key-field="id" data={mergeObjectList} columns={columnsData}
                    onrowaction={handleDelete}
                    hide-checkbox-column show-row-number-column>
                    </lightning-datatable>

Answer 1

You can either remove the element with Array.prototype.splice or by way of Array.prototype.filter.

this.mergeObjectList.splice(this.mergeObjectList.findIndex(row => row.Id === event.detail.row.id), 1);

Or:

this.mergeObjectList = this.mergeObjectList.filter(row => row.id !== event.detail.row.id);

Answer 2

I managed to delete a row with the following code, but the datatable is left with an empty row (it doesn't remove the row, it just removes the data)

handleRowAction(event) {
    const action = event.detail.action.name;    // delete
    console.log(action);
    const row = event.detail.row;   // Product2 object
    switch (action) {
        case 'delete':
            const rows = this.data;
            const rowIndex = rows.findIndex(elem => elem.Id === row.Id);
            rows.splice(rowIndex, 1);

            // LWC data binding doesn't detect a call to push.
            let temp = [];
            temp.push(rows);
            this.data = [...temp];

            break;
    }
}