ngTable - Introduction

I was looking for a grid/table element with following requirements:

• In-built filtering, sorting and paging.
• Can be represented as a read only table.
• An editable grid with just text boxes.
• An editable grid with check-boxes and drop-down boxes.
• A grid with ability to add and remove rows.

I came across various implementation of angularJS tables/grids:

• ng-table 
• ng-grid 
• ui-grid

Among these I went with ng-table, only because it is very simple to use and has great documentation along with working examples (which is getting improved day by day).

Steps to use ng-table in AngularJS application:

• First download ng-table .css as well as .js file and add a reference to it.
• Add ngTable module to where the app module is being declared.

                 var myApp = angular.module("myApp", ["ngTable"])

• In the HTML file (partial view) add the following code where you want your table to appear

            <div>

               <table ng-table="employeeSkills">

                  <tr ng-repeat="skill in $data">

                    <td data-title="'#'">{{$index + 1}}</td>

                    <td data-title="'Skill Type'" >

                         <span>{{skill.type.name }}</span>

                     </td>

                     <td data-title="'Skill Name'" >

                           <span>{{skill.name }}</span>

                     </td>

                     <td data-title="'Rating '" >

                         <span>{{skill.rating }}</span>

                     </td>

                    <td data-title="'Is Primary'" >

                   <input type="checkbox" ng-model="skill.isPrimary" value="{{skill.isPrimary}}" disabled />

                   </td>

                </tr>

             </table>

          </div

• In the controller javascript file where you want to use ng-table declare ngTableParams in following way:

          myApp.controller('viewEmployeeSkillController', ['ngTableParams', '$scope', 

             function (ngTableParams, $scope) {

                var skills = [

                            {name: "Java", type: {id: 1, name: 'Technical'}, rating: 2, IsPrimary: 'false'},

                            {name: "LifeScience", type: {id: 2, name: 'Domain'}, rating: 5, IsPrimary: 'false'},

                            {name: "Communication", type: {id: 3, name: 'Personal'}, rating: 4, IsPrimary: 'false'}

                            ] ;     

                $scope.employeeSkills = new ngTableParams({}, {

                  dataset: skills,

                  counts: []

              });

          }]);