I recently started working with angular datatables and I have a table that displays different dog breeds. Users can toggle between read-only and editable fields, as well as delete entries. Additionally, I need to export this data to excel or pdf formats. The issue I'm facing is that after editing or deleting an entry (which triggers an API call to update the database), the changes are not reflected in the exported file. Only the original data from when the page first loaded is included in the export...
This is how it currently functions: there's an edit icon that allows the user to make changes -> user edits the field and confirms -> API call is made through the module service -> data is updated in the backend -> however, the Excel/Pdf export still shows the old data.HTML

<table datatable [dtOptions]="dtExportButtonOptions" class="table table-bordered table-striped mb-0">
            <thead>
                <tr>
                    <th class="text-center">Breed Name</th>
                    <th class="text-center">Options</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let breed of BREEDS">
                    <td class="text-center">
                        <input class="form-control" type="text" placeholder="Insert Breed Name"
                            [(ngModel)]="breed.BREED_NAME" [readonly]="!breed.Edit">
                        <span style="display: none;" >{{breed.BREED_NAME}}</span>
                    </td>

                    <td class="text-center">
                        <div class="row align-items-center m-l-0">
                            <div class="col-sm-6 text-right">
                                <button *ngIf="!breed.Edit" type="button" class="btn btn-icon btn-outline-info mr-2"
                                    (click)="ToggleEdit(breed)"><i class="feather icon-edit-2"></i></button>
                                <button *ngIf="breed.Edit" type="button" class="btn btn-icon btn-outline-success mr-2"
                                    (click)="EditBreed(breed)"><i class="feather icon-check-circle"></i></button>
                            </div>
                            <div class="col-sm-6 text-left">
                                <button *ngIf="!breed.Edit" type="button" class="btn  btn-icon btn-outline-danger"
                                    (click)="OpenDeleteModal(breed)"><i class="feather icon-trash-2"></i></button>
                                <button *ngIf="breed.Edit" type="button" class="btn  btn-icon btn-outline-danger"
                                    (click)="ToggleEdit(breed)"><i class="feather icon-slash"></i></button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

TYPESCRIPT

addCusForm: FormGroup;
  dtExportButtonOptions: any = {};
  DeletedBreed: Breed;
  _params_EditBreed: Breed = new Breed();
  _params_DeleteBreed: Params_Delete_Breed = new Params_Delete_Breed();
constructor(
    private proxy: Proxy,
    private fb: FormBuilder,
    private CmSvc: CommonService,
    private GSSVC: GeneralsetService
  ) { }

  ngOnInit(): void {
    this.addCusForm = this.fb.group({
      BREED_ID: [-1],
      OWNER_ID: [1],
      BREED_NAME: [, [Validators.required]],
    });

    var buttonCommon = {
      exportOptions: {
        // format: {
        //   body: function (data, row, column, node) {
        //     return node.firstChild.tagName === "INPUT" ?
        //       node.firstElementChild.value :
        //       data;
        //   }
        // },
        columns: [0],
      }
    };

    this.dtExportButtonOptions = {
      dom: 'Bfrtip',
      buttons: [
        $.extend(true, {}, buttonCommon, {
          extend: 'copyHtml5'
        }),
        $.extend(true, {}, buttonCommon, {
          extend: 'excelHtml5',
          titleAttr: 'Export to Excel',
        }),
        $.extend(true, {}, buttonCommon, {
          extend: 'print',
          titleAttr: 'Print',
        }),
      ]
    };
  }
ToggleEdit(breed) {
    breed.Edit = !breed.Edit;
  }

  EditBreed(breed: Breed) {
    if (breed.BREED_NAME.length > 0) {
      this._params_EditBreed = breed;
      console.log(this._params_EditBreed);

      this.proxy.Edit_Breed(this._params_EditBreed).subscribe((result) => {
        if (result) {
          this.CmSvc.ShowMessage('Breed ' + this._params_EditBreed.BREED_NAME + ' has been successfully Updated.',
            3500);
          this.addCusForm.get('BREED_NAME').reset();
          this.GSSVC.resolve();
        }
      });
      this.ToggleEdit(breed);
    }
  }

  SubmitBreed() {
    if (this.addCusForm.valid) {
      this._params_EditBreed = this.addCusForm.getRawValue() as Breed;
      console.log(this._params_EditBreed);

      this.proxy.Edit_Breed(this._params_EditBreed).subscribe((result) => {
        if (result) {
          this.CmSvc.ShowMessage('Breed ' + this._params_EditBreed.BREED_NAME + ' has been successfully submitted.',
            3500);
          this.addCusForm.get('BREED_NAME').reset();
          this.GSSVC.resolve();
        }
      });
    }
  }

DeleteBreed() {
    this._params_DeleteBreed.BREED_ID = this.DeletedBreed.BREED_ID;
    this.proxy.Delete_Breed(this._params_DeleteBreed).subscribe((result) => {
      if (!result) {
        this.CmSvc.ShowMessage(
          'Breed ' + this.DeletedBreed.BREED_NAME + ' has been successfully removed.',
          3500
        );
        this.modalDelete.hide();
        this.DeletedBreed = null;
        //this.ToggleEdit(breed);
        this.GSSVC.resolve();
      }
    })
  }

It's worth noting that I added a hidden span in the table HTML to display input fields properly. It served as a workaround for the display issue. I also attempted another solution mentioned in the TypeScript file comments but it didn't allow for sorting or searching functionalities.
Here's a link to a "non-working" stackblitz example for a better understanding of the overall structure: https://stackblitz.com/edit/angular-bppwap?embed=1&file=src/app/hello.component.html
I hope this provides enough information, and thank you in advance for any assistance.