Angular

Responsive Table Using AngularJS And Bootstrap

In today’s world, responsiveness is one of the main key advantage in web development. Since we need to open the same page in different type of device like desktop, tab or mobile. Due to the different screen size, it is important when we design a page either in html format or aspx format for web development, that design must be responsive i.e. it automatically adjusts all type of screen designs. In this article, I am going to display how to create a responsive table using bootstrap and AngularJS.
 
For it, we first need to create some stylesheet. For this, add a stylesheet file in the project and write down the following code:
  1. body: not(.fixed - sidebar): not(.canvas - menu).mini - navbar.nav - second - level  
  2. {  
  3.     display: none;  
  4. }  
  5. /* TABLES */  
  6. .table - bordered  
  7. {  
  8.     border: 1 px solid# EBEBEB;  
  9. }.table - bordered > thead > tr > th, .table - bordered > thead > tr > td  
  10. {  
  11.     background - color: #FFF;  
  12.     border - bottom - width: 1 px;  
  13. }.table - bordered > thead > tr > th, .table - bordered > tbody > tr > th, .table - bordered > tfoot > tr > th, .table - bordered > thead > tr > td, .table - bordered > tbody > tr > td, .table - bordered > tfoot > tr > td  
  14. {  
  15.     border: 1 px solid# e7e7e7;border - width: 1 px 1 px 0 1 px;  
  16. }.table > thead > tr > th  
  17. {  
  18.     border - bottom: 1 px solid# DDDDDD;  
  19.     vertical - align: bottom;  
  20. }.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td  
  21. {  
  22.     border - top: 1 px solid# e7eaec;  
  23.     line - height: 1.42857;  
  24.     padding: 5 px;  
  25.     vertical - align: top;  
  26. }  
  27. /* GLOBAL  */  
  28. .ibox  
  29. {  
  30.     clear: both;margin - bottom: 10 px;margin - top: 0;padding: 0;  
  31. }.ibox.collapsed.ibox - content  
  32. {  
  33.     display: none;  
  34. }.ibox.collapsed.fa.fa - chevron - up: before  
  35. {  
  36.     content: "\f078";  
  37. }.ibox.collapsed.fa.fa - chevron - down: before  
  38. {  
  39.     content: "\f077";  
  40. }.ibox: after, .ibox: before  
  41. {  
  42.     display: table;  
  43. }.ibox - title  
  44. {  
  45.     -moz - border - bottom - colors: none; - moz - border - left - colors: none; - moz - border - right - colors: none; - moz - border - top - colors: none;  
  46.     background - color: #ffffff;  
  47.     border - color: #e7eaec;  
  48.     border - image: none;  
  49.     border - style: solid solid none; /*border-width: 3px 0 0;*/  
  50.     border - width: 0 px 0 0;  
  51.     color: inherit;  
  52.     margin - bottom: 0;  
  53.     padding: 10 px 15 px 0; /* min-height: 35px;*/  
  54.     min - height: 28 px;  
  55. }.ibox - content  
  56. {  
  57.     background - color: #ffffff;  
  58.     color: inherit; /* padding: 0px 10px 10px;*/  
  59.     padding: 10 px 10 px 10 px;  
  60.     border - color: #e7eaec;  
  61.     border - image: none;  
  62.     border - style: solid solid none; /* border-width: 1px 0px;*/  
  63.     border - width: 0 px 0 px;  
  64. }.ibox - footer  
  65. {  
  66.     color: inherit;border - top: 1 px solid# e7eaec;font - size: 90 % ;background: #ffffff;padding: 10 px 15 px;  
  67. }  
  68. table.table - mail tr td  
  69. {  
  70.     padding: 12 px;  
  71. }.table - mail.check - mail  
  72. {  
  73.     padding - left: 20 px;  
  74. }.table - mail.mail - date  
  75. {  
  76.     padding - right: 20 px;  
  77. }.ibox - content  
  78. {  
  79.     clear: both;  
  80. }.ibox - heading  
  81. {  
  82.     background - color: #f3f6fb;  
  83.     border - bottom: none;  
  84. }.ibox - heading h3  
  85. {  
  86.     font - weight: 200;  
  87.     font - size: 24 px;  
  88. }.ibox - title h5  
  89. {  
  90.     display: inline - block;font - size: 14 px;margin: 0 0 7 px;padding: 0;text - overflow: ellipsis;float: left;color: #1ab394; font-weight:bold; }    
  91.     .ibox-title .label { float: left; margin-left: 4px; }    
  92.     .ibox-tools { display: block; float: none; margin-top: 0; position: relative; padding: 0; text-align: right; }    
  93.     .ibox-tools a { cursor: pointer; margin-left: 5px; color: # c4c4c4;  
  94. }.ibox - tools a.btn - primary  
  95. {  
  96.     color: #fff;  
  97. }.ibox - tools.dropdown - menu > li > a  
  98. {  
  99.     padding: 4 px 10 px;font - size: 12 px;  
  100. }.ibox.ibox - tools.open > .dropdown - menu  
  101. {  
  102.     left: auto;right: 0;  
  103. }.ibox.fullscreen  
  104. {  
  105.     z - index: 2030;  
  106.     position: fixed;  
  107.     top: 0;  
  108.     left: 0;  
  109.     right: 0;  
  110.     bottom: 0;  
  111.     overflow: auto;  
  112.     margin - bottom: 0;  
  113. }.ibox.fullscreen.collapse - link  
  114. {  
  115.     display: none;  
  116. }.ibox.fullscreen.ibox - content  
  117. {  
  118.     min - height: calc(100 % -48 px);  
  119. }  
  120. /*Responsive Table*/  
  121. .ibox - table  
  122. { /*margin-bottom:10px;*/  
  123.     position: relative;  
  124. }.ibox - table.responsive - table  
  125. {  
  126.     width: 100 % ;  
  127. }.ibox - table.responsive - table th, .ibox - table.responsive - table td  
  128. {  
  129.     padding: 7 px;  
  130. }  
  131. @media screen and(max - width: 992 px)  
  132. {.ibox - table.responsive - table thead  
  133. {  
  134.     display: none;  
  135. }.ibox - table.responsive - table tr  
  136. {  
  137.     display: block;border - bottom: 1 px solid# ddd;  
  138. }.ibox - table.responsive - table td  
  139. {  
  140.     display: block;text - align: left;padding: 7 px 5 px 7 px 50 % !important;  
  141. }.ibox - table.responsive - table td: last - child  
  142. {  
  143.     border - bottom: 0;  
  144. }.ibox - table.responsive - table td: before  
  145. {  
  146.     content: attr(data - label);text - align: right;width: 45 % ;position: absolute;left: 2 px;font - weight: bold;white - space: pre - wrap;padding: 0 px 0 5 px;  
  147. }.minimalize - styl - 2.fa - bars  
  148. {  
  149.     display: inline - block;  
  150. }.minimalize - styl - 2.fa - chevron - left  
  151. {  
  152.     display: none;  
  153. }  
  154. body.mini - navbar.minimalize - styl - 2.fa - chevron - left  
  155. {  
  156.     display: inline - block;  
  157. }  
  158. body.mini - navbar.minimalize - styl - 2.fa - bars  
  159. {  
  160.     display: none;  
  161. }  
Now add a html file named index.html and add the following code:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Responsive Data Grid in Angular Js</title>  
  5.     <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />  
  6.     <link href="Style.css" rel="stylesheet" />  
  7.     <script src="../../Scripts/angular.min.js"></script>  
  8.     <script src="IndexController.js"></script>  
  9. </head>  
  10. <body data-ng-app="TestApp" data-ng-controller="IndexController as model">  
  11.     <div class="row animated fadeInRight">  
  12.         <div class="col-lg-12">  
  13.             <div class="rowDiv">  
  14.                 <h3>{{model.message}}</h3>  
  15.             </div>  
  16.         </div>  
  17.         <div class="ibox-content">  
  18.             <div class="ibox-table">  
  19.                 <div class="table-responsive">  
  20.                     <table class="responsive-table table-striped table-bordered table-hover">  
  21.                         <thead>  
  22.                             <tr>  
  23.                                 <th data-ng-repeat="header in model.headerData" data-ng-switch on="header.caption">  
  24.                                     <span data-ng-switch-when="chkBox">  
  25.                                         <input id="chkHeader" type="checkbox" class="i-checks" name="input[]" data-ng-init="model.assignControlProperty(-1);">  
  26.                                     </span>  
  27.                                     <span data-ng-switch-when="btnInfo"></span>  
  28.                                     <span data-ng-switch-default>{{header.caption}}</span>  
  29.                             </tr>  
  30.                         </thead>  
  31.                         <tbody>  
  32.                             <tr data-ng-repeat="item in model.gridData">  
  33.                                 <td data-ng-repeat="field in model.columnField" data-ng-switch on="field.fieldName" data-label="{{field.dataLabel}}" data-ng-click="model.gridRowClick(item,$parent.$index,field);">  
  34.                                     <span data-ng-switch-default>{{item[field.fieldName]}}</span>  
  35.                                 </td>  
  36.                             </tr>  
  37.                         </tbody>  
  38.                     </table>  
  39.                 </div>  
  40.             </div>  
  41.         </div>  
  42. </body>  
  43. </html>  
Now add a JavaScript file and add the following code: 
  1. 'use strict';  
  2. var testApp = angular.module('TestApp', []);  
  3. testApp.controller('IndexController', ['$http', function ($http, urlService)  
  4. {  
  5.     var self = this;  
  6.     self.message = 'Responsive Bootstrap Based Table';  
  7.     var gridData = [  
  8.     {  
  9.         Id: 1,  
  10.         Code: 'A001',  
  11.         EmployeeName: 'Sumit Sharma',  
  12.         Dept: 'Accounts',  
  13.         Desig: 'Manager',  
  14.         City: 'Kolkata',  
  15.         Salary: 25000  
  16.     },  
  17.     {  
  18.         Id: 2,  
  19.         Code: 'A002',  
  20.         EmployeeName: 'Ramesh Sharma',  
  21.         Dept: 'Sales',  
  22.         Desig: 'Agent',  
  23.         City: 'New Delhi',  
  24.         Salary: 15000  
  25.     },  
  26.     {  
  27.         Id: 3,  
  28.         Code: 'A003',  
  29.         EmployeeName: 'Arun Roy',  
  30.         Dept: 'Accounts',  
  31.         Desig: 'Clerk',  
  32.         City: 'Mumbai',  
  33.         Salary: 22000  
  34.     },  
  35.     {  
  36.         Id: 4,  
  37.         Code: 'D001',  
  38.         EmployeeName: 'Swapan Das',  
  39.         Dept: 'HR',  
  40.         Desig: 'Admin',  
  41.         City: 'Kolkata',  
  42.         Salary: 40000  
  43.     },  
  44.     {  
  45.         Id: 5,  
  46.         Code: 'S021',  
  47.         EmployeeName: 'Akash Srivastava',  
  48.         Dept: 'Marketing',  
  49.         Desig: 'Manager',  
  50.         City: 'Pune',  
  51.         Salary: 32000  
  52.     },  
  53.     {  
  54.         Id: 6,  
  55.         Code: 'A004',  
  56.         EmployeeName: 'Nilesh Roy',  
  57.         Dept: 'Sales',  
  58.         Desig: 'Executive',  
  59.         City: 'Kolkata',  
  60.         Salary: 17000  
  61.     }];  
  62.     var gridHeader = 'Code,Employee Name,Department,Designation,Salary Amount';  
  63.     var displayField = 'Code,EmployeeName,Dept,Desig,Salary';  
  64.     self.gridData = gridData;  
  65.     self.headerArray = gridHeader.split(',')  
  66.     self.headerData = [];  
  67.     angular.forEach(self.headerArray, function (field, i)  
  68.     {  
  69.         self.headerData.push(  
  70.         {  
  71.             caption: self.headerArray[i]  
  72.         });  
  73.     });  
  74.     var returnDataLabel = function (index)  
  75.     {  
  76.         return self.headerArray[index];  
  77.     }  
  78.     var colData = displayField.split(',');  
  79.     self.columnField = [];  
  80.     angular.forEach(colData, function (field, i)  
  81.     {  
  82.         self.columnField.push(  
  83.         {  
  84.             fieldName: colData[i],  
  85.             dataLabel: returnDataLabel(i)  
  86.         });  
  87.     });  
  88.     var returnDataLabel = function (index)  
  89.     {  
  90.         return self.headerArray[index];  
  91.     }  
  92.     self.gridRowClick = function (item, index, column)  
  93.     {  
  94.         alert('grid row click for ' + item.EmployeeName);  
  95.     }  
  96. }]);  
The above mentioned table is totally dynamic. Since the grid source data (i.e. self.source) contains menu fields like id etc but in the table it only shows those fields which are mentioned in the displayField variable. Firstly, we run the above written code and below is the output.
 

The following output for small screen device.
 
 
Now, I want to remove the city field from the table. For that, just change the following two line of code and check:
  1. var gridHeader = 'Code,Employee Name,Department,Designation,Salary Amount';  
  2.    var displayField = 'Code,EmployeeName,Dept,Desig,Salary';  
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs