Ngx-datatable: Delete buttons in columns, how to do it?

[tomzi8]

I'm submitting a .. (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request => Please do not submit support request here

Current behavior
tables without buttons in columns

Expected behavior
deleting rows and sending something on click of button in colum

Reproduction of the problem

What is the motivation / use case for changing the behavior?
make it more popular

Please tell us about your environment:

• Table version: 0.7.x
  

• Angular version: 2.0.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

    <ngx-datatable
      class='material'
      [columns]="columns"
      [columnMode]="'force'"
      [headerHeight]="50"
      [footerHeight]="50"
      [rowHeight]="'auto'"
      [limit]="10"
      [rows]='rows'>
      <ngx-datatable-column name="Name" [width]="300"></ngx-datatable-column>
      <ngx-datatable-column name="Gender"></ngx-datatable-column>
      <ngx-datatable-column name="Age"></ngx-datatable-column>
      <ngx-datatable-column name="Options">
        <button md-raised-button color="warn">Delete</button>
      </ngx-datatable-column>

    </ngx-datatable>

Nothings happens, can somebody write code for this? I would write ngFor and so on but this table is not very customizable and I need only this feature. Thanks in advance.

[pixelsailor]

I believe you can accomplish what you're looking for by using custom templates... https://github.com/swimlane/ngx-datatable/blob/master/demo/templates/template-dom.ts

Here's a look at the HTML I'm using to add actionable buttons per item

<ngx-datatable-column name="Actions" sortable="false" prop="id">
    <template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
        {{column.name}}
    </template>
    <template let-row="row" let-value="value" ngx-datatable-cell-template>
        <button md-icon-button (click)="blockAgents(value)" [disabled]="row['status']==='BLOCKED'">
            <i class="fa fa-ban"></i>
        </button>
        <button md-icon-button (click)="approveAgent(value)" [disabled]="row['status']==='APPROVED'">
            <i class="fa fa-check"></i>
        </button>
    </template>
</ngx-datatable-column>

I'm using the prop attribute to pass the id value through the function. Button availability is accessed via the let-row attribute

[marjan-georgiev]

Correct, use templates as @pixelsailor showed.

[aloysius-tim]

Hey guys,
I can't see any documentation on the customs templates ! Would be great to have one.

[Badhumvee]

Any working example plunker and document with custom template will be helpful.

[liambarnett]

+1 on the custom template documentation - can't find any documentation on embedding dropdown lists into cells.

[bhushangahire]

Can we just add the template for Action Column and have data column to work as is? I just want to keep code cleaner.

[jarodsmk]

Came across this issue thread while trying to look for a similar issue:

I believe you can accomplish what you're looking for by using custom templates...
https://github.com/swimlane/ngx-datatable/blob/master/demo/templates/template-dom.ts

The link is dead

I tried implementing something like:

<ng-template #actionTmpl let-column="column" let-row="row" let-value="value">

             <div class="fa fa-times" (click)="doSomething()">

                </div>

           </ng-template>

[vinyoliver]

Did any one ever made this work? Same problem here...

[m4limo]

@vinyoliver
just use the ng-tamplate:

<ngx-datatable-column name="Actions" sortable="false" prop="id">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>

            <button md-icon-button (click)="blockAgents(value)">
              <i class="fa fa-ban"></i>
            </button>

            <button md-icon-button (click)="approveAgent(value)">
              <i class="fa fa-check"></i>
            </button>

      </ng-template>
</ngx-datatable-column>

value corresponds to the property prop you define in ngx-datatable-column, in this case id

hope this helps...

[vinyoliver]

thanks @m4limo it worked!

[kevinding0218]

thanks @m4limo !, but does that mean we had to hard-code other columns in html? If I don't do that, there would only be one "Action" column in the table...

[kevinding0218]

My bad, it can still dynamically load the columns by using *ngFor

[TheSachin]

Hi here is the link for the custom templates.
https://github.com/swimlane/ngx-datatable/blob/master/demo/templates/template-obj.component.ts

[cfphpflex]

The above example worked for me on Angular 5:

        <button md-icon-button (click)="blockAgents(value)">
          <i class="fa fa-ban"></i>
        </button>

        <button md-icon-button (click)="approveAgent(value)">
          <i class="fa fa-check"></i>
        </button>

  </ng-template>

[babolinGiordano]

Hello Guys,
I tried to add a new column in the end of my table and it working, but my data are gone why?
My code is

<ngx-datatable class="bootstrap" [cssClasses]="cssClasses" [rows]="data" [columns]="columns" [columnMode]="'force'" [reorderable]="true"
            [headerHeight]="50" [footerHeight]="50" [rowHeight]="30" [externalSorting]="true" [externalPaging]="true" [limit]="search.page.size"
            [count]="search.page.totalElements" [offset]="search.page.pageNumber-1" (page)='doFooterPagination($event)' [selectionType]="'single'"
            (sort)="onSort($event)" (select)="onSelect($event)">

            <ngx-datatable-column name="Actions" sortable="false" prop="id">
              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>

                <button md-icon-button (click)="blockAgents(value)">
                  <i class="fa fa-ban"></i>
                </button>

              </ng-template>
            </ngx-datatable-column>

          </ngx-datatable>

[jarodsmk]

@babolinGiordano - is this related to having the delete button in a column?

If not, rather create an individual issue please

[babolinGiordano]

@jarodsmk yes is related to have a delete button in new column for every rows.

[jarodsmk]

Oh OK cool - from what I can tell the ng-template you've added is overriding all of your data from displaying, could you show your 'columns' variable?

[babolinGiordano]

This is my columns variable

 const columns = [
      { name: this.titoloLabel, prop: 'nomeCorso', minWidth: 380, draggable: false },
      {
        name: this.dataInizioLabel, prop: 'dataInizio', cellTemplate: this.dataTpl,
        headerClass: 'custom-datatable-header', cellClass: 'custom-datatable-cell', draggable: false
      },
      {
        name: this.dataFineLabel, prop: 'dataFine', cellTemplate: this.dataTpl,
        headerClass: 'custom-datatable-header', cellClass: 'custom-datatable-cell', draggable: false
      }
    ];
    this.columns = columns;

[babolinGiordano]

EDIT:
IF I use this code:

<ngx-datatable-column *ngFor="let col of columns" [name]="col.name">
            </ngx-datatable-column>
            <ngx-datatable-column name="Actions" sortable="false" prop="id">
              <ng-template let-row="data" let-value="value" ngx-datatable-cell-template>
                <button md-icon-button>
                  <i class="fa fa-ban"></i>
                </button>
              </ng-template>
</ngx-datatable-column>

The 'Action' column appear but only some data are presented and I don't understand why.

[Yogeshwar1992]

any update?

[Yogeshwar1992]

@babolinGiordano ,

working perfectly, thanks, for me none of the colum details missing :)
but, i want entire row on clicking on the delete button??

[ryanhalley]

@babolinGiordano I had to add [prop]="col.prop" to the ngx-datatable-column, so each col knows which field to map to, where the field name does not exactly match the column name. e.g in my columns definition I have { name: 'Subject' }, { name: 'Created at', prop: 'created_at' } - only the Subject column will appear by default until you add the code change, since the prop is implied.

[dtarvin]

Does the code discussed above actually delete the row data or just hide it? I need to actually delete the row data and send that back to the server so it's deleted there also.

[cfphpflex]

Hi Ryan,
I've had my share of obstacles with ngx, so I will start by getting us on the same page:

1. NGX can provide a unique id for each record if your data has one
   a. in case you don't have a unique data id, lets make one like this:
   let col of columns; let i = index;
2. So, there, u have an column id, IMPORTANT NOTE: you are better off passing the entire col record on the mouse click event that calls the JS Function
   Sorry, getting ahead myself...
3. here is the Example button click call to a JS function on click
   (click)="onColClickDelete(col,i)"
   kind of like this:
   type="button"
   title="delete"
   (click)="onUserManagerEdit(user,i)">
   Delete
   

Makes sense? u still with me?
if not catchup!!! ;>

1. Now to make simple AJAX call to your API that will in fact delete the record from the backend datastore

   console.log('show me the col Im deleting');
   console.log(col[0].someofyourpropdata);

   const xhr = new XMLHttpRequest();
   xhr.open(
   'GET',
   this.URLWhichYouDeclaredEarliser + thisEndpointWhichYouDeclredEarlier + '?SomeIDforYourAPIEndpoint=' + col[0].id,
   true
   );
   xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
   xhr.send();

   xhr.onreadystatechange = function() {
   // Call a function when the state changes.
   if (xhr.readyState === 4 && xhr.status === 200) {
   alert(xhr.responseText);
   }
   };

2. short of giving you fully documented and functional code, thats the best I can do a Friday night,

Cheers

[larini]

So easy to make a table using html, why this is so complicated?

[biborn]

EDIT:
IF I use this code:

<ngx-datatable-column *ngFor="let col of columns" [name]="col.name">
            </ngx-datatable-column>
            <ngx-datatable-column name="Actions" sortable="false" prop="id">
              <ng-template let-row="data" let-value="value" ngx-datatable-cell-template>
                <button md-icon-button>
                  <i class="fa fa-ban"></i>
                </button>
              </ng-template>
</ngx-datatable-column>

The 'Action' column appear but only some data are presented and I don't understand why.

@babolinGiordano You forgot to specify the prop binding in your <ngx-datatable-column> like so:

<ngx-datatable-column *ngFor="let col of columns" [name]="col.name" [prop]="col.prop"></ngx-datatable-column>

Doing that will bring back the data for each columns on every rows.

[BMLande]

https://stackblitz.com/edit/ngx-datatable-add-extra-colom-with-action

[uds214125]

@BMLande Thanks, saved my day

[rick-romero]

It doesn't work if you are using pipes on the Column object. :(

columns = [
{ prop: 'name' },
{ name: 'Gender', pipe: this.emulatePipe() },
{ name: 'Company', sortable: false }
];

emulatePipe () {
return {
transform(value){
return 'changed!';
}
};
}

[nhaancs]

https://stackblitz.com/edit/ngx-datatable-add-extra-colom-with-action

Thanks @BMLande, you save my day.
Just a little bit correction for people come after that the following code let-row="data" must be updated to let-row="row" in case you want obtain the value of the row.

Before:
<ng-template let-row="data" let-value="value" ngx-datatable-cell-template>
After:
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>