having some problems with the crud of ng2-smart-table

i have the table already mentioned, and i have created components to be consumed from outside, the problem is, i had the table in mode: inline and when i try to update some data, the data disappears from the table, and i have to re write it again or in other case if the data comes from the server (JSON) it happens the same. So i changed the table to mode: external now the problem is, i dont know how to make the methods Create/save/edit/cancel (create: for creating a new row in the table) work, i have tried to look for some answers in google and on github too, and nothing concrete for all those methods, anyway, here it goes my code.

i have created the settings on an external service, and call it from the component

hope u guys can help me with this...

mapeo-component.ts

import { Component, EventEmitter, OnInit } from'@angular/core';
import { LocalDataSource } from'ng2-smart-table';
import { MapeoService } from'src/app/services/mapeos/mapeos.service';
import { MapeoSettingsService } from'../../../services/mapeos/mapeo-settings.service';

@Component({
selector:'app-mapeo',
templateUrl:'./mapeo.component.html',
styleUrls: ['./mapeo.component.scss']
})
exportclassMapeoComponentimplementsOnInit {

publicsettings = this.mapeoSetting.settings;
publicdataTable: LocalDataSource;

  constructor(privatemapeoSetting: MapeoSettingsService, privatemapeoService: MapeoService) { }

  ngOnInit(): void {
    this.dataTable = newLocalDataSource();
    this.getDataTable();
  }

  getDataTable() {
    this.mapeoService.getDataTable()
      .subscribe((resp) => {
         this.dataTable.load(resp);
    });
  }

  onCreate(event) {
    //
  }

  onAdd(event) {
   //
  }

  onEdit(event) {
    this.dataTable.update();
  }   

  onDelete(event) {
    this.dataTable.remove(event.data);
  } 
}

mapeo-component.html

<div class="container col-lg-12">
<div class="content-body">
    <div class="card text-center" style="padding: 30px; box-shadow: 0 1px 5px #959595;">            
        <div class="row">
            Premium Business <a class="test-color-1"></a>
        </div>
        <div class="row">
            Premium Economy <a class="test-color-2"></a>
        </div>
        <div class="row">
            Economy <a class="test-color-3"></a>
        </div>
        <div class="form-group row">
            <ng2-smart-table 
                [settings]="settings" 
                [source]="dataTable"
                (edit)="onEdit($event)"
                (delete)="onDelete($event)"
                (add)="onAdd($event)"
                (create)="onCreate($event)">
            </ng2-smart-table>
        </div>
    </div>    
</div>

mapeo-settings.service.ts

import { Injectable } from '@angular/core';
import { EconomyComponent } from 'src/app/components/home/mapeo/custom-components/economy/economy.component';
import { PremiumBusinessComponent } from 'src/app/components/home/mapeo/custom-components/premium-business/premium-business.component';
import { PremiumEconomyComponent } from 'src/app/components/home/mapeo/custom-components/premium-economy/premium-economy.component';

@Injectable({
  providedIn: 'root'
})
export class MapeoSettingsService {

  constructor() { }

  settings = {
    hideHeader: false,
    columns: {
      carrier: {
        title: 'Carrier',
        placeholder: 'Carrier',
        editor: {
          type: 'list',
          config: {
            list: [
              { value: undefined, title: 'Carrier' },
              { value: 'SCL', title: 'SCL' },
              { value: 'MIA', title: 'MIA' }
            ]
          }
        }
      },
      pais: {
        title: 'País',
      },
      od: {
        title: 'OD',
      },
      j: {
        title: 'J',
        filter: false,
        valuePrepareFunction: (cell, row) => {
          if (row.j === undefined) { return row.premiumBusiness.j; }
          return row.j;
        },
        type: 'html',
        editor: {
          type: 'custom',
          component: PremiumBusinessComponent,
        }
      },
      c: {
        title: 'C',
        filter: false,
        valuePrepareFunction: (cell, row) => {
          if (row.c === undefined) { return row.premiumBusiness.c; }
          return row.c;
        },
        type: 'html',
        editor: {
          type: 'custom',
          component: PremiumBusinessComponent,
        }
      },
      usuario: {
        title: 'Usuario',
      },
      fecha: {
        title: 'Fecha',
        filter: false
      },
    },
    pager : {
      display: true,
      perPage: 8
    },
    filter: {
      inputClass: 'size-filter'
    },
    actions: {
      position: 'right',
      columnTitle: 'Acciones'
    },
    add: {
      confirmCreate: true,
      addButtonContent: `<span class="link-add" title="Añadir Nueva fila">
                          <span class="plus-add">+</span>
                          <span class="title-add">Nuevo</span>
                         </span>`,
      createButtonContent: `<span class="link-create" title="Crear"></span>`,
      cancelButtonContent: `<span class="link-cancel" title="Cancelar"></span>`
    },
    edit: {
      confirmSave: true,
      editButtonContent: `<span class="link-edit" title="Editar"></span>`,
      saveButtonContent: `<span class="link-save" title="Guardar Cambios"></span>`,
      cancelButtonContent: `<span class="link-cancel" title="Cancelar"></span>`
    },
    delete: {
      confirmDelete: true,
      deleteButtonContent: `<span class="link-delete" title="Eliminar"></span>`,
    },
    attr: {
      class: 'table table-bordered'
    },
    mode: 'external'
  };
}

mapeo.json

[
    {
        "carrier": "CL",
        "pais": "Chile",
        "od": "Todos",
        "usuario": "Diego",
        "fecha": "10-10-2021",
        "premiumBusiness": {
            "j": "J",
            "c": "C",
        }
    }
]

akveo / ng2-smart-table

having some problems with the crud of ng2-smart-table #1282