title: ngx-datatable: How to display value of a property on a object in a row
body: <p>I am struggling with something basic in ngx-datatable. </p>
  
  <p>In an angular-cli application I am binding an Array with 3 elements to the table and get displayed 3 (empty) rows. When I click a row I correctly get the object i have bound the row. I have used this <a href="http://swimlane.github.io/ngx-datatable/#single-selection" rel="nofollow noreferrer">http://swimlane.github.io/ngx-datatable/#single-selection</a> as a starting point </p>
  
  <p>This is how it looks in the UI. The value of property StockName should be printed in each row. But it doesn't, but the value of a select row is correctly being shown below the table.</p>
  
  <p><a href="https://i.stack.imgur.com/8YhIo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8YhIo.png" alt="I cannot see the StockName"></a></p>
  
  <pre><code> &lt;ngx-datatable
          class="material"
          [rows]="rows"
          [columnMode]="'force'"
          [columns]="columns"
          [headerHeight]="0"
          [footerHeight]="0"
          [rowHeight]="'auto'"
          [limit]="5"
          [selected]="selected"
          [selectionType]="'single'"           
          (select)='onSelect($event)'&gt;
          &lt;ngx-datatable-column name="StockName"&gt;                  
  
                  &lt;ng-template let-value="value" ngx-datatable-cell-template&gt;          
                    StockName is: '{{value.StockName}}'          
  
                  &lt;/ng-template&gt;
  
                &lt;/ngx-datatable-column&gt;
        &lt;/ngx-datatable&gt;
  
      &lt;p&gt;############&lt;/p&gt;
      &lt;div class='selected-column'&gt;
              &lt;h4&gt;Selections&lt;/h4&gt;        
              &lt;ul&gt;        
                &lt;li *ngFor='let sel of selected'&gt;        
                  Selected StockName is: {{sel.StockName}}       
                &lt;/li&gt;        
                &lt;li *ngIf="!selected"&gt;No Selections&lt;/li&gt;        
              &lt;/ul&gt;        
            &lt;/div&gt;
  </code></pre>
  
  <p>This is the code that add rows to table</p>
  
  <pre><code>rows: Array&lt;TradingConfiguration&gt; = Array&lt;TradingConfiguration&gt;();
  selected: Array&lt;TradingConfiguration&gt; = Array&lt;TradingConfiguration&gt;();
  
  colums: any[] = [ { prop: 'StockName' } ];
  
  // Add row to table
  addRows(tradingConfigurations: Array&lt;TradingConfiguration&gt;) {
  
  if (tradingConfigurations != null &amp;&amp; tradingConfigurations.length &gt; 0) {
  
    for (var i = 0; i &lt; tradingConfigurations.length; i++) {
      if (tradingConfigurations[i].IsActive == this.showActive){
        // Add a new row to the table
        this.rows.unshift(tradingConfigurations[i]);
        this.rows = this.rows.slice();
       }        
     }
   }
  }
  </code></pre>