title: How do you programmatically focus on a column/row in ngx-datatable?
body: <p>Table version: 11.3.2</p>
  
  <p>Angular version: 5.2.4</p>
  
  <p>I am adding a new row to edit at the bottom of the table when a user clicks tab AND they are on the last column/row however I cannot get the focus to be set to the first column of the new row. Any advice on how I can focus programmatically on the first column of the new row?</p>
  
  <p>My HTML is :</p>
  
  <pre><code>&lt;div class="haulsScreen"&gt;
    &lt;h2 class="mat-h2"&gt;Hauls&lt;/h2&gt;
    &lt;ngx-datatable
      #mydatatable
      class="material"
      [headerHeight]="50"
      [limit]="20"
      [columnMode]="'force'"
      [footerHeight]="50"
      [rowHeight]="'auto'"
      [rows]="rows"&gt;
      &lt;ngx-datatable-column name="Haul"&gt;
        &lt;ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row"&gt;
  
          &lt;input
            autofocus
            (blur)="updateValue($event, 'haul', rowIndex)"
            type="text"
            [value]="value"
          /&gt;
        &lt;/ng-template&gt;
      &lt;/ngx-datatable-column&gt;
      &lt;ngx-datatable-column name="Gender"&gt;
        &lt;ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value"&gt;
          &lt;select
            (blur)="updateValue($event, 'gender', rowIndex)"
            [value]="value"&gt;
            &lt;option value="male"&gt;Male&lt;/option&gt;
            &lt;option value="female"&gt;Female&lt;/option&gt;
          &lt;/select&gt;
        &lt;/ng-template&gt;
      &lt;/ngx-datatable-column&gt;
  
    &lt;/ngx-datatable&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my TS file is:</p>
  
  <pre><code>import { Component, HostListener, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-hauls',
    templateUrl: './hauls.component.html',
    styleUrls: ['./hauls.component.scss']
  })
  export class HaulsComponent implements OnInit {
    rows = [];
    lastRowLastColumn = false;
  
    constructor(private obsStateService: ObsStateService) {
      this.fetch(data =&gt; {
        this.rows = data;
      });
  
    }
  
    @HostListener('window:keyup', ['$event'])
      keyEvent(event: KeyboardEvent) {
  
        if (event.key === 'Tab' &amp;&amp; this.lastRowLastColumn) {
          this.rows = [...this.rows,{}];
        }
    }
  
    ngOnInit() {
    }
  
    fetch(cb) {
      const req = new XMLHttpRequest();
      req.open('GET', `assets/data.json`);
  
      req.onload = () =&gt; {
        cb(JSON.parse(req.response));
  
      };
  
      req.send();
    }
  
  
    updateValue(event, cell, rowIndex) {
      // console.log('inline editing rowIndex', rowIndex);
      // console.log('inline editing cell', cell);
      // console.log(event);
  
      this.rows[rowIndex][cell] = event.target.value;
      this.rows = [...this.rows];
      if(cell==='gender' &amp;&amp; (this.rows.length-1) == rowIndex)
        this.lastRowLastColumn = true;
      else
        this.lastRowLastColumn = false;
  
      // console.log('UPDATED!', this.rows[rowIndex][cell]);
  
  
    }
  }
  </code></pre>