CODEWITHSUNDEEP
angularjsngtable
ps0604
ps0604

Reputation: 1071

Sort and Filter columns created dynamically in ngTable

In this plunk I have an ngTable with columns created dynamically. The columns are sortable and filterable, however when clicking on the title the sort doesn't work and the filter doesn't work either. Any ideas?

Javascript

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

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

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


      $scope.data = [ 
        { uid: 'aaa',ugr: '222'},
        { uid: 'bbb', ugr: '111'}
      ];

      $scope.tableParams = new NgTableParams({dataset: $scope.data});

});

HTML

<div ng-controller="myCtl" ng-app="app">

  <table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-hover">
    <tr ng-repeat="row in data">
      <td ng-repeat="col in cols">{{row[col.nm]}}</td>
    </tr>
  </table>

</div>

Upvotes: 3

Views: 1315

Answers (1)

Jaydeep Gondaliya
Jaydeep Gondaliya

Reputation: 331

1) Add references to AngularJS. EG:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>

2)Add references to ngTable's javascript and css files. EG:

<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css">
<script src="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.js"></script>

3)Where you declare your app module, add ngTable:

angular.module("myApp", ["ngTable"]);

4)In your html file within the controller where you plan to use ng-table, add:

<table ng-table="vm.tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
            {{user.name}}</td>
        <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
            {{user.age}}</td>
    </tr>
</table>

5)In your javascript file within the controller where you plan to use ng-table, declare:

var self = this;
var data = [{name: "Moroni", age: 50} /*,*/];
self.tableParams = new NgTableParams({}, { dataset: data});

demo enter link description here

Upvotes: 0

Related Questions