ng-table in angularJs

What is ng-table? How to achieve it?

The ngTable is a simpler version of ngGrid and Its uses tables to render the data so it's get the default row height. It's very nice little library used to render simple table in angularjs.

Go to below ng-table library and download reference file as given below link

Both libraries have some drawbacks as given below.

     1.       The ng-grid is not support the variable row heights based on your content.
     2.       The ng-table create three separate tables for the header, body and footer for maintain the variable row heights.

Steps to achieve the ng-Table as given below

    1.       Add the angularjs reference file
    2.       Add ng-table reference file
    3.       Written the JavaScript code to render the ng-table data.
   4.       Written the HTML code for render the DOM with ng-table data.

 The AngularJs Reference file as given below


The ng-table Reference file as given link



The JavaScript code sample

        var app = angular.module('ngTableApp', ['ngTable']);
        app.controller('ngTableCtrl', function ($scope) {
            $scope.students = [{
                Id: 001,
                name: "Anil Singh",
                age: 29
            }, {
                Id: 002,
                name: "Sunil Singh",
                age: 25
            }, {
                Id: 003,
                name: "Sushil Singh",
                age: 20
            }, {
                Id: 004,
                name: "Dilip Singh",
                age: 29
            }, {
                name: "Upendra Singh",
                age: 30
            }];

        });

The HTML code sample

<div ng-app="ngTableApp">
    <div ng-controller="ngTableCtrl">
        <div>
            <h2>Student Detail using ngTablet</h2>
        </div>
        <table ng-table class="table">
            <tr ng-repeat="stud in students">
                <td data-title="'Id'">{{stud.Id}}</td>
                <td data-title="'Name'">{{stud.name}}</td>
                <td data-title="'Age'">{{stud.age}}</td>
            </tr>
        </table>
    </div>
</div >

The full(JavaScript + HTML) live demo code sample

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.css">
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.js"></script>
    <style>
        .ng-table {
            border: 1px solid #000;
            width: 100%;
        }
    </style>
    <script>
        var app = angular.module('ngTableApp', ['ngTable']);
        app.controller('ngTableCtrl', function ($scope) {
            $scope.students = [{
                Id: 001,
                name: "Anil Singh",
                age: 29
            }, {
                Id: 002,
                name: "Sunil Singh",
                age: 25
            }, {
                Id: 003,
                name: "Sushil Singh",
                age: 20
            }, {
                Id: 004,
                name: "Dilip Singh",
                age: 29
            }, {
                name: "Upendra Singh",
                age: 30
            }];

        });
    </script>
</head>
<body ng-app="ngTableApp">
    <div ng-controller="ngTableCtrl">
        <div>
            <h2>Student Detail using ngTablet</h2>
        </div>
        <table ng-table class="table">
            <tr ng-repeat="stud in students">
                <td data-title="'Id'">{{stud.Id}}</td>
                <td data-title="'Name'">{{stud.name}}</td>
                <td data-title="'Age'">{{stud.age}}</td>
            </tr>
        </table>
    </div>
</body>
</html>



About Blogger

ANIL SINGH

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book