Tech-Today

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 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.

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
    <script src="https://unpkg.com/[email protected]/angular.js"></script>
    <script src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script>

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"></link>
    <link href="https://unpkg.com/[email protected]/bundles/ng-table.min.css" rel="stylesheet"></link>

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

        app.controller("mainController", function($scope, NgTableParams, mainControllerService) {
            console.debug('mainController.init');

            $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.page(), params.count(), sortNameValue).then(function(data) {
                        console.debug("data received length=" + data.data.RestResponse.result.length);
                        params.total(data.data.RestResponse.result.length); // set total for recalc pagination
                        return data.data.RestResponse.result;
                    });
                }
            });

            console.log('mainController.end');
        });

        app.service("mainControllerService", function($http) {
            console.debug('mainControllerService.init');

            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("http://services.groupkt.com/country/get/all", 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;
        });
    </script>
</head>

<body>
    <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">
                <tbody>
<tr ng-repeat="x in $data">
                        <td data-title="'Name'" sortable="'name'">{{ x.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>
                    </tr>
</tbody>
            </table>
</div>
</div>
</body>

</html>

Code is also available here for easier download: https://github.com/czetsuya/AngularNgTable

Maybe next article is about using typescript :-)

References:
http://ng-table.com/

- How To Download A File In Angular2
There are 2 ways I use to download a file with Angular2 or greater. For this example, we will use a Java REST service. The first approach would be taking advantage of the HTTP download, where the Angular side will just call a URL that will initiate the...

- Jquery Wait For All The Images To Be Loaded Before Calling An Action, Such As Image Caption
Recently I've just wanted a nice rollover caption implemented on our wedding invitation website, such on a list of wedding invitations, when you hover on one, a caption will be shown. Of course, there are some wedding invitation categories that would...

- How To Upload A File In An Mvc3 C# Ajax Form
It's easy to upload file in a synchronous form, where you just post the file and read a HttpPostedFile variable in the server side: In plain html form, take note of the form enctype property: //the view (index.cshtml) @using (Html.BeginForm("Upload",...

- Jquery Document.ready $("#controlid") Is Null Error
I'm working on a script that uses jquery and it's working normally on a simple page that I made. However when I create a master page in c# and put the jquery code in the page that extends the master page I get this error: $("#controlId") is null...

- Google Map Api - An Example Implementation In C#. Converts An Array Of String Addresses Into Longtitude, Latitude Pair
Objective: -To create a web application that will use the google map api to produce longtitude, latitude locations. The application will read string address values from an excel document. So it's also an excel reader. What you need: 1.) Visual Studio...

Tech-Today