How to add buttons to columns to ng2-table in angular 2

Question

I want a table in which edit button should be there in every column and I used ng2 in which I failed to put buttons at the end.

My html,

<ng-table [config]="config.sorting"
      (tableChanged)="onChangeTable(config)"
      [rows]="rows" [columns]="columns" >
</ng-table>

my ts,

rows: Array<any> = [];
columns: Array<any> = [
    {title: 'Name', name: 'accountname'},
    {title: 'Position', name: 'email', sort: false},
    {title: 'Office', name: 'phone', sort: 'asc'},
];

But I want a button at each column for edit and delete and how can I do that,can someone please suggest help.

Answer 1

We can do with help of Jquery.

Just add a extra field named Action in public column array

And then append a new action " String of html with buttons in it".

constructor(private moduleviewservice:ModuleViewService,private _router:Router){
        this.moduleviewservice.getModule().subscribe(
            data=>{
                this.model=data;  
                  this.data=data;
                    for(let i=0;i<data.length;i++){
                        this.data[+i]["action"]="<a> <span class=\"viewEmployee\" data-id="+data[+i].moduleId+"> <i class=\"fa fa-file-text\"  ></i> </span> </a> <a > <span class=\"editEmployee\"  data-id="+data[+i].moduleId+"> <i class=\"fa fa-pencil\" ></i> </span> </a> <a > <span class=\"deleteEmployee\"  data-id="+data[+i].moduleId+"> <i class=\"fa fa-trash-o\" ></i> </span> </a>";
                    }
                    this.length = this.data.length;  
                    this.data=data;                 
                    console.log(this.data);
                    
                    this.onChangeTable(this.config);            
        });   
    }
    /*NG@ TABLE */

   public columns:Array<any> = [
        {title: 'Module Name', name: 'moduleName'},
        {title: 'Module Description', name: 'moduleDesc',},            
        {title: 'Action',   name:'action', sort:false},   
  ];
  
  /*IN NG ON INIT I have used this to call in (jquery)*/
  
   ngOnInit(){
        let route=this._router;
            let moduleviewservice=this.moduleviewservice;
            $(document).on('click','.viewEmployee',function(data:any){
              
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/singleViewModule'}}]);
            });
            $(document).on('click','.editEmployee',function(data:any){
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/editModule'}}]);
            });
            $(document).on('click','.deleteEmployee',function(data:any){
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/deleteModule'}}]);
            }); 
    }

This is how it looks and redirect will work fine.

Answer 2

A button can be added simply by including it in the rows[]:

rows = [{
  id: '1',
  title: 'title test1 <button type="button" class="btn btn-primary">Test Button in ng2-table</button>'
}, {
  id: '2',
  title: 'title test2'
}, {
  id: '3',
  title: 'title test3'
}]

A button would appear in the second column of the first row. Here's a working demo:

In fact, not just button, you can include any component this way anywhere in your table (provided it is compatible with angular!)