How to create a data table in angular using ngTable

I'm trying to evaluate front end frameworks since it's becoming more and more popular lately (I'm more of a backend developer us...

I'm trying to evaluate front end frameworks since it's becoming more and more popular lately (I'm more of a backend developer using primefaces). And so I'm looking at angular2 and react, but in this tutorial we will be trying to develop a data table from angular2.

What surprises me is, though there are a lot of ui frameworks, available production ready made components are lacking compared to primefaces.

Let the code talk for itself. Note though that I didn't use typescript yet since ngTable doesn't have a documentation yet on its website.

Also notice that the original web service that I use supported paging and sorting, that's why I have some extra parameters in the request: Page, RecsOnPage and SortBy. I did not bother to provider client side paging because it's already in the docs and is easy to understand.


    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

    <link href="" rel="stylesheet"></link>
    <link href="" rel="stylesheet"></link>

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

        app.controller("mainController", function($scope, NgTableParams, mainControllerService) {

            $scope.tableParams = new NgTableParams({
                page: 1, // show first page
                count: 10 // count per page
            }, {
                total: 0, // length of data
                getData: function(params) {
                    var sortNameValue = "";
                    for (var keyName in params.sorting()) {
                        sortNameValue = keyName;
                        sortNameValue = sortNameValue + "_" + params.sorting()[keyName];
                    return mainControllerService.getData(, params.count(), sortNameValue).then(function(data) {
                        console.debug("data received length=" +;
              ; // set total for recalc pagination


        app.service("mainControllerService", function($http) {

            var service = {
                cachedData: [],
                getData: function(page, count, sorting) {
                    console.debug("fetching page=" + page + ", count=" + count + ", sorting=" + JSON.stringify(sorting));
                    var params = {
                        Page: page,
                        RecsPerPage: count,
                        SortBy: sorting
                    var config = {
                        params: params
                    var promise = $http.get("", config)
                        .success(function(response) {
                            console.debug('downloaded ' + response.RestResponse.result.length + ' records');
                            angular.copy(response.RestResponse.result, service.cachedData);
                    return promise.then(function(result) {
                        return result;

            return service;

    <div ng-app="ngTableTest" ng-controller="mainController">
        <div loading-container="tableParams.settings().$loading">
            <table class="table table-condensed table-bordered table-striped" ng-table="tableParams" showfilter="false">
<tr ng-repeat="x in $data">
                        <td data-title="'Name'" sortable="'name'">{{ }}</td>
                        <td data-title="'Alpha2 Code'" sortable="'alpha2_code'">{{ x.alpha2_code }}</td>
                        <td data-title="'Alpha3 Code'" sortable="'alpha3_code'">{{ x.alpha3_code }}</td>


Code is also available here for easier download:

Maybe next article is about using typescript :-)



frontend 6747336413294588207

Post a Comment Default Comments