SmartAdmin DataTable Button Column

Question

Regards, I have a problem I am using the SmartAdmin DataTable and I need to put three buttons in a column to edit, view and delete an element I have already put the buttons in a Column, but until now I have not been able to make them respond to the even to click.

Thank you.

enter image description here This is the code I have in my ngOnInit

this.options = {
          dom: "Bfrtip",
          ajax: (data, callback, settings) => {
              this._usuarioService.readUsuarios()
                  .subscribe((data) => {
                          callback({
                              aaData: data
                          })
                  })
          },
          columns: [
              { data: 'id' },
              { data: 'persona.nombre' },
              { data: 'persona.apellido' },
              { data: 'persona.correo' },
              { data: 'rol.nombre' },
              { data: 'persona.sede.nombre' },
              {defaultContent: '<center><button class=\'btn btn-success btn-xs\'(click)=\'leerUnUsuario(id)\'> Ver </button> ' +
                               '<button class=\'btn btn-info btn-xs\' (click)=\'actualizarUsuario(id)\'> Editar </button> ' +
                               '<button class=\'btn btn-danger btn-xs\' (click)=\'eliminarUsuario(id)\'> Borrar </button></center>' },
          ]
      };

Answer 1

Already solved, I received help from Alain D'EURVEILHER and everything is already very well.

    ngOnInit() {
          this.options = {
              dom: "Bfrtip",
              ajax: (data, callback, settings) => {
                  this._usuarioService.readUsuarios()
                      .subscribe((data) => {
                              callback({
                                  aaData: data
                              })
                      })
              },
              columns: [
                  { data: 'id' },
                  { data: 'persona.nombre' },
                  { data: 'persona.apellido' },
                  { data: 'persona.correo' },
                  { data: 'rol.nombre' },
                  { data: 'persona.sede.nombre' },
                  {
                      render: (data, type, fullRow, meta) => {
                          return `
                              <button class="btn btn-xs btn-success accion-ver-usuario" data-usuario-id="${fullRow.id}">ver</button>
                              <button class="btn btn-xs btn-info accion-editar-usuario" data-usuario-id="${fullRow.id}">editar</button>
                              <button class="btn btn-xs btn-danger accion-borrar-usuario" data-usuario-id="${fullRow.id}">borrar</button>
                          `;
                      }
                  }
              ]
          };

ngAfterViewInit(){
        document.querySelector('body').addEventListener('click', (event)=> {
            let target = <Element>event.target;// Cast EventTarget into an Element
            if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-ver-usuario')) {
                this.verUsuario(target.getAttribute('data-usuario-id'));
            }
            if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-editar-usuario')) {
                this.editarUsuario(target.getAttribute('data-usuario-id'));
            }
            if (target.tagName.toLowerCase() === 'button' && $(target).hasClass('accion-borrar-usuario')) {
                this.borrarUsuario(target.getAttribute('data-usuario-id'));
            }
        });
    }

verUsuario(userId){
        console.log("user displayed:", userId);
    }

    editarUsuario(userId){
        console.log("user edited:", userId);
    }

    borrarUsuario(userId){
        console.log("Delete user", userId, "?");
    }