javascripthtmljsonangularjsngtable

ngTable dynamic with columns doesn't show column titles


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});

});

Solution

  • You're missing the title property within your cols:

    $scope.cols = [ {nm:'uid', title: 'User ID'}, {nm:'ugr', title: 'Group ID'} ];
    

    See this plunkr.