In this plunk I have two tables, one regular ng-table
and an ng-table-dynamic
with columns. Both point to the same data.
The second table doesn't show column titles, how to fix that?
HTML
<br/> Table 1
<table ng-table="tableParams" class="table table-bordered table-hover">
<tbody>
<tr ng-repeat="u in data" ng-dblclick="alert('double click')">
<td title="'User ID'">{{ u.uid }}</td>
<td title="'Group'">{{ u.ugr }}</td>
</tr>
</tbody>
</table>
<br/> Table 2
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<tr ng-repeat="row in data">
<td title="col.nm" ng-repeat="col in cols">{{row[col.nm]}}</td>
</tr>
</table>
Javascript:
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {
$scope.cols = [ {nm:'uid'}, {nm:'ugr'} ];
$scope.data = [
{ uid: 'User 1',ugr: 'Group 1'},
{ uid: 'User 2', ugr: 'Group 2'}
];
$scope.tableParams = new NgTableParams({dataset: $scope.data});
});
You're missing the title
property within your cols:
$scope.cols = [ {nm:'uid', title: 'User ID'}, {nm:'ugr', title: 'Group ID'} ];