LWC Lightning Data Table - Save All Records(Rows) in the Table upon Save Button Click

Question

I have a requirement to be able to save all records present in the Editable Lightning data table and not just the ones that are edited. Is there a way yo achieve this. I see we can only fetch the drat values and not all the rows/records on Save

Please assist

Answer 1

possible solution could look like (id is a key-field)

handleSave(event) {
    const updatedRecords = event.detail.draftValues

    const updatedData = this.data.map(row => {
        const newRow = Object.assign({}, row);
        const changes = updatedRecords.find(changedElement => changedElement.id === row.id);
        return changes ? Object.assign(newRow, changes) : newRow;
    });

    console.log(updatedData);
}

You need to merge draftValues with the original data, therefore you will have all records with changes

Thanks

Answer 2

For fetching all the rows in the table, we need to get 'data' attribute

A modified version of your code to fetch data from table

handleSave(event)
{
const updatedFields = event.detail.data;
<your rest of the code logic>
}

lightning datatable documentation: https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/specification