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:

  1. <style>
  2. td {
  3. padding: 0.2em 1em;
  4. }
  6. th {
  7. text-align: center;
  8. }
  10. thead {
  11. border-bottom: 2px solid black;
  12. cursor: pointer;
  13. }
  14. </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.

  1. <script>
  2. var app = angular.module("myApp", []);
  3. var DisplayFieldName = "EmpCode,EmpAlias,EmpName,Department";
  4. var DisplayFieldCaption = "Emp Code,Emp Alias,Emp Name,Department";
  5. var DisplayFieldWidth = "0,200,500,300";
  7. </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:

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

  1. app.controller("datacontroller", function ($scope, $http) {
  3. });

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

  1. $scope.mydata = [{ EmpCode: 1, EmpAlias: "A001", EmpName: "Sandip", Department: "Accounts" },
  2. { EmpCode: 2, EmpAlias: "E002", EmpName: "Ashoke", Department: "HR" },
  3. { EmpCode: 3, EmpAlias: "S003", EmpName: "Mrinmay", Department: "Sales" },
  4. { EmpCode: 4, EmpAlias: "B004", EmpName: "Tapas", Department: "Marketing" }];
  6. $scope.orderField = 'EmpAlias';
  7. $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.

  1. var DispFieldName = DisplayFieldName.split(",");
  2. var DispCaption = DisplayFieldCaption.split(",");
  3. var DispWidth = DisplayFieldWidth.split(",");
  5. var columns = [];
  6. $.each(DispCaption, function (i) {
  7. columns.push({ fieldname: DispFieldName[i], caption: DispCaption[i], width: DispWidth[i] });
  8. });
  10. $scope.mycolumns = columns;

Now just after it, add the following code:

  1. $scope.getcolumnname = function (cell) {
  2. return cell.fieldname;
  3. }
  5. $scope.getcolumnwidth = function (cell) {
  6. return cell.width;
  7. }
  9. $scope.getcolumnShow = function (cell) {
  10. var a = cell.width > 0 ? true : false;
  11. return a;
  12. }
  14. $scope.fnRowClick = function (record) {
  15. alert(record.EmpCode);
  16. alert(record.EmpAlias);
  17. alert(record.EmpName);
  18. alert(record.Department);
  19. }
  21. $scope.fnSort = function (cell) {
  22. $scope.orderField = cell.fieldname;
  23. $scope.reverse = !$scope.reverse;
  24. };

Now:

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

  1. <body>
  2. <h2>Index 2</h2>
  3. <div ng-app="myApp" data-ng-controller="datacontroller">
  4. <p>
  5. Sort Seq : ColumnName : {{orderField}} order : {{reverse}}
  6. </p>
  7. <table style="width:100%;" cellspacing="0" cellpadding="0" border="1">
  8. <thead>
  9. <tr>
  10. <th data-ng-repeat="cell in mycolumns" data-ng-init="mywidth = getcolumnwidth(cell); cellvisible=getcolumnShow(cell);"
  11. ng-show="cellvisible">
  12. <a href="" data-ng-init="mycol=getcolumnname(cell);" ng-click="fnSort(cell)">{{cell.caption}}</a>
  13. </th>
  14. </tr>
  15. </thead>
  16. <tbody>
  17. <tr data-ng-repeat="record in mydata| orderBy:orderField:reverse" ng-click="fnRowClick(record)">
  18. <td data-ng-repeat="cell in mycolumns" data-ng-init="mywidth = getcolumnwidth(cell); cellvisible=getcolumnShow(cell);"
  19. ng-style="{width: {{mywidth}} + 'px'}" ng-show="cellvisible">
  20. <input type="text" data-ng-init="mycol=getcolumnname(cell);" data-ng-model="record[mycol]"
  21. readonly="readonly" />
  22. </td>
  23. </tr>
  24. </tbody>
  25. </table>
  26. </div>
  27. </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.