ngx-datatable: How to display value of a property on a object in a row
16,318
I got it to work :)
I needed to change this from:
colums: any[] = [ { prop: 'StockName' } ];
to:
{ name: 'StockName', prop: 'StockName' }
and remove:
<ngx-datatable-column name="StockName">
<ng-template let-value="value" ngx-datatable-cell-template>
StockName is: '{{value.StockName}}'
</ng-template>
</ngx-datatable-column>
Related videos on Youtube
Author by
Tony
Full stack programmer. Programming .net since it was called asp+. Know my way around SharePoint. Now mostly doing Azure
Updated on June 04, 2022Comments
-
Tony almost 2 years
I am struggling with something basic in ngx-datatable.
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 http://swimlane.github.io/ngx-datatable/#single-selection as a starting point
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.
<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)'> <ngx-datatable-column name="StockName"> <ng-template let-value="value" ngx-datatable-cell-template> StockName is: '{{value.StockName}}' </ng-template> </ngx-datatable-column> </ngx-datatable> <p>############</p> <div class='selected-column'> <h4>Selections</h4> <ul> <li *ngFor='let sel of selected'> Selected StockName is: {{sel.StockName}} </li> <li *ngIf="!selected">No Selections</li> </ul> </div>
This is the code that add rows to table
rows: Array<TradingConfiguration> = Array<TradingConfiguration>(); selected: Array<TradingConfiguration> = Array<TradingConfiguration>(); colums: any[] = [ { prop: 'StockName' } ]; // Add row to table addRows(tradingConfigurations: Array<TradingConfiguration>) { if (tradingConfigurations != null && tradingConfigurations.length > 0) { for (var i = 0; i < 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(); } } } }