CODEWITHSUNDEEP
angularjsngtable
ps0604
ps0604

Reputation: 1071

ngTable grouping not working

In this plunk I have an ngTable that contains a list of users, grouped by area. I took the example from this ngTable grouping demo. Still, the table is displayed empty and doesn't show any rows or grouping. What's wrong with this code?

HTML

    <table ng-table="tableParams" class="table table-bordered table-hover">
        <colgroup>
          <col width="50%" />
          <col width="30%" />
          <col width="20%" />
        </colgroup>
        <tr class="ng-table-group" ng-repeat-start="group in $groups">
          <td colspan="3">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
              <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
              <strong>{{ group.value }}</strong>
            </a>
          </td>
        </tr>
        <tr ng-repeat="u in data" ng-repeat-end>
            <td title="'User ID'">{{ u.uid }}</td>
            <td title="'Name'">{{ u.name }}</td>
            <td title="'Area'" groupable="'area'">{{ u.area }}</td>
        </tr>
    </table>

Javascript

var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope,NgTableParams) {

          $scope.data = [ 
             { uid: 'User 11', name: 'Name 11', area: 'Area 1'},
             { uid: 'User 12', name: 'Name 12', area: 'Area 1'},
             { uid: 'User 21', name: 'Name 21', area: 'Area 2'},
             { uid: 'User 22', name: 'Name 22', area: 'Area 2'}
          ];

          $scope.tableParams = new NgTableParams({
              // initial grouping
              group: "area"
            },{
              dataset: $scope.data
            });
});

Upvotes: 2

Views: 1690

Answers (2)

Kumar Rakesh
Kumar Rakesh

Reputation: 2708

I know the @greenshade answer is done. But as like @greenshade, i have checked that plunker and i see that you have used the old ng-table library link. If you want to work in CDNjs's library then you should use latest script URL:

https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js

Script src is :

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.min.js"></script>

Thanks

Upvotes: 3

bottaio
bottaio

Reputation: 5093

Your code seems perfectly fine. I have just changed one script and got some results on the page. Just replace

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>

with

<script src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script>

This is the version that I use daily.

Upvotes: 1

Related Questions