Populate Dynamic Table With Data Using AngularJS

For creating a dynamic tabular data structure, we need to first decide the data structure. Suppose we want to create a table structure that contains the four columns EmpCode, EmpAlias, EmpName and Department. Out of these four columns, EmpCode is a hidden column, it will never be displayed in the view. But when the user clicks on a row, it returns all four column values to the user defined function. Also, we need the functionality to rearrange the table data on the click of the table header.

For doing this, we first create a Simple HTML file in the project and add the AngularJS and jQuery related JavaScript files. Now, in the header section, we create style tags and provide the following code:

<style>
     td {
         padding: 0.2em 1em;
     }

     th {
         text-align: center;
     }

     thead {
         border-bottom: 2px solid black;
         cursor: pointer;
     }
 </style>

Now just after that, we create another tag within the header section, called a script tag and initially add the following four lines of code within the script tag.

<script>
    var app = angular.module("myApp", []);
    var DisplayFieldName = "EmpCode,EmpAlias,EmpName,Department";
    var DisplayFieldCaption = "Emp Code,Emp Alias,Emp Name,Department";
    var DisplayFieldWidth = "0,200,500,300";

</script>

Now, var app is defined for the AngularJS module.

Except for these, we have also declared 3 more variables called DisplayFieldName, DisplayFieldCaption and DisplayFieldWidth. The purpose of these 3 variables is as in the following:

• DisplayFieldName: It stores all the data fields name that act as a column.
  
  
• DisplayFieldCaption: It stores all the column header names.
  
  
• DisplayFieldWidth: It stores all the column widths.

Now, we define the AngularJS Controller just after the preceding code within the script tag.

app.controller("datacontroller", function ($scope, $http) {

});

Now within the AngularJS controller, we define a mydata scope that basically stores table data in a JSON format.

 $scope.mydata = [{ EmpCode: 1, EmpAlias: "A001", EmpName: "Sandip", Department: "Accounts" },
                { EmpCode: 2, EmpAlias: "E002", EmpName: "Ashoke", Department: "HR" },
                { EmpCode: 3, EmpAlias: "S003", EmpName: "Mrinmay", Department: "Sales" },
                { EmpCode: 4, EmpAlias: "B004", EmpName: "Tapas", Department: "Marketing" }];

$scope.orderField = 'EmpAlias';
$scope.reverse = true;

Also, we define two more $scope variables named orderField and reverse.

orderField is used to store the field name on which the table will be sorted.

And reverse is used to store the sort order.

Now, we rovide the following code to populate an array collection for displaying column information with a data field and its width.

var DispFieldName = DisplayFieldName.split(",");
var DispCaption = DisplayFieldCaption.split(",");
var DispWidth = DisplayFieldWidth.split(",");

var columns = [];
$.each(DispCaption, function (i) {
    columns.push({ fieldname: DispFieldName[i], caption: DispCaption[i], width: DispWidth[i] });
});

$scope.mycolumns = columns;

Now just after it, add the following code:

$scope.getcolumnname = function (cell) {
    return cell.fieldname;
}

$scope.getcolumnwidth = function (cell) {
    return cell.width;
}

$scope.getcolumnShow = function (cell) {
    var a = cell.width > 0 ? true : false;
    return a;
}

$scope.fnRowClick = function (record) {
    alert(record.EmpCode);
    alert(record.EmpAlias);
    alert(record.EmpName);
    alert(record.Department);
}

$scope.fnSort = function (cell) {
    $scope.orderField = cell.fieldname;
    $scope.reverse = !$scope.reverse;
};

Now:

• $scope.getcolumnname() is used to return the data field name within the column collection. Actually, when we populate the <table></table> structure, it basically gets the cell elements as parameters and returns the value of a fieldname item to display that data field value.
  
  
• $scope.getcolumnwidth() is used to return the data field width within the column collection. Actually, during the population of the <table></table> structure, it basically gets the cell elements as parameters and returns the value of the field width of those items as specified in DispFieldWidth.
  
  
• $scope.getcolumnShow() is used to return the boolean value (true or false). On the basis of this value, we decide whether or not a specific column is to be displayed. The column display on/off totally depends on the column width specified in DispFieldWidth.
  
  
• $scope.fnRowClick() is used to return the selected row value to the user-defined function. It gets parameters as records that contains all the elements of the specific or selected rows including the hidden column.
  
  
• $scope.fnSort() is used to sort the data. Whenever User clicks on a table header cell, this function is called and it gets a parameter name cell that contains all the information about the cell, in other words cell name, field name and caption. This function sets the fieldname as the orderField and reverses the existing sort order.

Now it's time to create the HTML part of the code. For this, enter the following code:

<body>
    <h2>Index 2</h2>
    <div ng-app="myApp" data-ng-controller="datacontroller">
        <p>
            Sort Seq : ColumnName : {{orderField}} order : {{reverse}}
        </p>
        <table style="width:100%;" cellspacing="0" cellpadding="0" border="1">
            <thead>
                <tr>
                    <th data-ng-repeat="cell in mycolumns" data-ng-init="mywidth = getcolumnwidth(cell); cellvisible=getcolumnShow(cell);"
                        ng-show="cellvisible">
                        <a href="" data-ng-init="mycol=getcolumnname(cell);" ng-click="fnSort(cell)">{{cell.caption}}</a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="record in mydata| orderBy:orderField:reverse" ng-click="fnRowClick(record)">
                    <td data-ng-repeat="cell in mycolumns" data-ng-init="mywidth = getcolumnwidth(cell); cellvisible=getcolumnShow(cell);"
                        ng-style="{width: {{mywidth}} + 'px'}" ng-show="cellvisible">
                        <input type="text" data-ng-init="mycol=getcolumnname(cell);" data-ng-model="record[mycol]"
                               readonly="readonly" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

Here, for populating the table, we use the AngularJS directive ng-repeat. In the <th> tag, we use ng-repeat against mycolums that is basically collections of all the column's information including the column caption. The same logic is used in the <td> tag. Here the only change is to use mydata scope instead of mycolumns.