Update an already edited cell in lightning:datatable

Question

I have a lightning:datatable and this has two columns: start date and end date. The functionality is that when you edit the start date, the end date updates in the table with the same value as the start date + 20 minutes. The same is applied for the end date, if you edit it, the start date follows it - 20 minutes.

The thing is that, if you first edit the start date, the end date updates in the table by updating the List that the table is using, but, if you then edit the end date, the start date which i previously edited doesn't update, the variable is updated in the list but the table, for some reason, doesn't update an already edited cell. This happens too if you start with the end date and then edit the start date.

I update the fields on the oncellchange method

I don't know how to solve this or what exactly is happening, maybe this is something about the table itself but I'm not sure.

Any help is appreciated.

Answer 1

You need to update the table's draftValues in order to override the value, or delete the value from the table's draftValues property. I'd recommend overriding the value, as demonstrated below, assuming you want to save this data later.

  handleCellChange(event) {
    const table = this.template.querySelector('lightning-datatable');
    const draftValues = table.draftValues;
    const cellEdit = event.detail.draftValues[0];
    // Find the correct row in the table's draft values
    let draftCell = draftValues.find((draftValue)=>draftValue.id === cellEdit.id);
    if(!draftCell) {
      // Create a new row if not found
      draftCell = {id:cellEdit.id};
      draftValues.push(draftCell);
    }
    if('start' in cellEdit) {
      // start changed, we update the end
      draftCell.end = parseInt(cellEdit.start)+20;
    } else {
      // end changed, we update the start
      draftCell.start = parseInt(cellEdit.end)-20;
    }
    // Copy the array and elements to a new array, give it to the table
    table.draftValues = draftValues.map((value)=>({...value}));
  }

This is just a simple demonstration to show the technique, you'll have to adapt it to handle dates instead.

Demo.