ngx-datatable Adding buttons to each row

Question

I am busy learning how to use ngx data tables in Ionic apps(Using angular), and I need to be able to ad an edit and delete button to each row.

I have seen people use templates but I am not sure how this works, I make an API call and display the data as usual using

<ngx-datatable class="material"
[rows]="rowdata"
[columns]="columndata">
</ngx-datatable>

But now I need an extra column with an edit and delete button that takes the ID from each row and passes it to an edit and delete function in the .ts file.

How does one go about doing this?

Thanks R

Neha Shah · Accepted Answer · 2020-04-09 05:30:12Z

You need to define new column name Actions with prop Id as targetting value. and also need each column to be declared inside ngx-datatable

HTML code

    <ngx-datatable class="material"
      [rows]="rowdata"
      [columns]="columndata">


 <ngx-datatable-column name="Actions" prop="name">
   <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
                                    let-row="row">
                                    <button type="button" class="btn btn-outline-success"
                                        (click)='edit(value)'>Success {{rowIndex}}</button>
                                    <button type="button" class="btn btn-outline-danger"
                                        (click)='delete(value)'>Danger</button>


              </ng-template>
          </ngx-datatable-column>
  <ngx-datatable-column name="Name" prop='name' >
           </ngx-datatable-column>  // need to define each column with empty body

</ngx-datatable>

TS code

columns = [ ... { name: 'Actions', prop: 'Id' } //new column to existing column array  ***define prop to Id 
  ];


  edit(value) {
    console.log(value);
  }


  delete(value) {
    console.log(value);
  }

Collectives™ on Stack Overflow

ngx-datatable Adding buttons to each row

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related