title: ngx-datatable - custom columns with action buttons
body: <p>I have a table (<a href="https://github.com/swimlane/ngx-datatable" rel="noreferrer">ngx-datatable</a>) in which I want to define an "actions" column in which buttons will then be placed for CRUD operations.</p>
  
  <p>Creating the column and placing the buttons worked, but I have the problem that the selected row and the values ​​in its columns are no longer recognized inside my triggered function.</p>
  
  <p>Here is my template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-12"&gt;
    &lt;ngx-datatable
      #table
      class="material"
      [rowHeight]="'auto'"
      [columns]="columns"
      [columnMode]="'force'"
      [headerHeight]="50"
      [footerHeight]="50"
      [limit]="10"
      [rows]="cars?.content"
      [selected]="selected"
      [selectionType]="'multi'"&gt;
    &lt;/ngx-datatable&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my custom template with the buttons:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-template #buttonsTemplate let-row="row" let-value="value" let-button="column.actions"&gt;
    &lt;button class="btn btn-transparent" (click)='onSelect($event)'&gt;&lt;i class="rb-ic rb-ic-add-frame"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;button class="btn bt n-transparent" (click)='onSelect($event)&gt;&lt;i class="rb-ic rb-ic-abort-frame"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;button class="btn btn-transparent" (click)='onSelect($event)&gt;&lt;i class="rb-ic rb-ic-reset"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;button class="btn btn-transparent" (click)='onSelect($event)&gt;&lt;i class="rb-ic rb-ic-agility"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>My component (.ts file) is structured like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MyComponent implements OnInit, OnDestroy {
    @ViewChild('buttonsTemplate') buttonsTemplate: TemplateRef&lt;any&gt;;
    columns = [];
  
    ngOnInit() {
      this.columns = [
      {prop: 'id', name: 'Id'},
      {prop: 'serial_number', name: 'Serial Number'},
      {prop: 'actions', name: 'Actions', cellTemplate: this.buttonsTemplate}
      ];
    }
  
    // This method should be called after clicking an action button
    onSelect({selected}) {
      console.log('Array of selected vehicles', selected);
    }
  }
  </code></pre>
  
  <p>Currently this error occurs in the console:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'serial_number'
    of undefined</p>
  </blockquote>
  
  <p>What am I doing wrong? The <a href="https://swimlane.gitbook.io/ngx-datatable/" rel="noreferrer">official documentation</a> and <a href="http://swimlane.github.io/ngx-datatable/" rel="noreferrer">demo page</a> doesn't helped me..</p>
  
  <hr>
  
  <p>Approach from @wentjun (not working: button not visibile inside column)</p>
  
  <p>The Template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ngx-datatable-column *ngFor="let column of columns; let i = index;" name="{{column.name}}" prop="{{column.prop}}"&gt;
    &lt;ng-template #buttonsTemplate let-row="row" let-value="value" ngx-datatable-cell-template&gt;
      &lt;button class="btn btn-transparent" (click)='onSelect(row)'&gt;&lt;i class="rb-ic rb-ic-add-frame"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/ng-template&gt;
  &lt;/ngx-datatable-column&gt;
  </code></pre>
  
  <p>The Component (function):</p>
  
  <pre class="lang-js prettyprint-override"><code>onSelect({selected}) {
    console.log('Array of selected vehicles', selected);
  }
  </code></pre>