Angularjs Custom Directive for table creation

Question

I want to create a angularjs directive which can be used in many pages, The directive should handle the html table creation, It can have different columns depending upon the requirement of the page. What should be the starting point to write this directive where user we can have different columns in different pages but having one directive only.

Example can be for home page

 <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>

for about page

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Address</th> 
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Please follow this link hope it helps you adrianmejia.com/blog/2016/04/08/… — Anil Samal
– Anil Samal, Commented Dec 24, 2016 at 9:18

vaqifrv · Accepted Answer · 2016-12-24 09:53:17Z

2

var tableDirective = function(){
    return {
       restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        scope: {
            data: '='         
            },
            templateUrl: 'table-directive.html',
        }
};

angular.module('myModule').directive('tableDirective', tableDirective);

table-directive.html:

<table style="width:100%">
  <tr>
    <th ng-repeat="item in data.headList">{{ item.name }}</th>
  </tr>
  <tr ng-repeat="item in data.rowList">
    <td>{{ item.name }}</td>
    <td>{{ item.surname }}</td> 
    <td>{{ item.propertyName }}</td>
  </tr>
</table>

Then, you can use directive and pass data :

<table-directive data="data"></table-directive>

Here data come from controller:

...
$scope.data = {
   headList: [{ name: 'Company' }, { name: 'Address' }, { name: 'City' }],
   rowList: // here will be your data
}
...

answered Dec 24, 2016 at 9:53

vaqifrv

7941 gold badge6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zm10 Over a year ago

There are multiple tables in different pages and couple of pages will have text and text box in the same cell of the table but other tables wont have, one table will have text and icon in the same cell of the row so the behavior of table cells change with respect to page plus headers of tables are different from what we get in $scope.data, so i'm wondering if we can achieved this kind of customization using one angular js custom directive.

vaqifrv Over a year ago

@zumuhu, I understood

zm10 Over a year ago

Would you suggest/advise me for the last question: "There are multiple tables in different pages and couple of pages will have text and text box in the same cell of the table but other tables wont have, one table will have text and icon in the same cell of the row so the behavior of table cells change with respect to page plus headers of tables are different from what we get in $scope.data, so i'm wondering if we can achieved this kind of customization using one angular js custom directive. "

Collectives™ on Stack Overflow

Angularjs Custom Directive for table creation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related