Not all Angular Data Grids are Created Equal

By Alexander Harding | http://github.com/aeharding

This is not...

• consuming/building a data grid
• strictly Angular
• strictly data grids

(It's just that Angular data grids are a good example)

Disclaimer

I'm biased. I use smart-table 1.x in my day job [CUI].

But it took a while to get there...

Directives

...

(4. Comments)

Element form

Pros

Web Component-y

Less obfuscated HTML w/ div, span

Transclusion

Cons

Cannot use w/ native HTML element

Multiple directive elements on same element...

Attribute

Pros

'value'... <div my-directive="val">

Multiple directives on one element

... And more, that I will get to

Cons

More obfuscated DOM -- need 'filler' div, span

A deep dive into

transclusion

index.html:

<my-wicked-button></my-wicked-button>

my-wicked-button.partial.html:

<button ng-transclude class="my-wicked-button"></button>

my-wicked-button.js:

angular.module('app').directive('myWickedButton', function() {
  return {
    restrict: 'E',
    transclude: true,
    templateUrl: 'my-wicked-button.partial.html',
    scope: {},
    link: function(scope, element, attrs) {
      console.log('intialized My WICKED BUTTON!!');
    }
  }
});

Plunkr

This works great.

For a button.

What about more complex directives?

<my-wicked-button hint="A hint when you hover">
  <i class="fa fa-flag"></i> BOOM
</my-wicked-button>

Plunkr

<my-wicked-button hint="&lt;i class=&quot;fa fa-flag&quot;&gt;&lt;/i&gt; A hint when you hover">
  <i class="fa fa-flag"></i> BOOM
</my-wicked-button>

Plunkr

<my-wicked-button hint="A hint when you hover" hint-icon="flag">
  <i class="fa fa-flag"></i> BOOM
</my-wicked-button>

Plunkr

Multi transclusion

https://github.com/angular/angular.js/issues/4357 (2013-present)

https://github.com/zachsnow/ng-multi-transclude

Hold on...

<my-wicked-button>
  <div name="hint">
    <i class="fa fa-flag"></i> A hint when you hover
  </div>
  <div name="main">
    <i class="fa fa-flag"></i> BOOM
  </div>
</my-wicked-button>

[Plunkr]

vs.

<button my-wicked-button>
  <i class="fa fa-flag"></i> BOOM

  <my-wicked-hint>
    <i class="fa fa-flag"></i> A hint when you hover
  </my-wicked-hint>
</button>

[Plunkr]

Incrementally add attribute directives as needed

Pros

Incremental enhancement

Use what you need -- not The Kitchen Sink(tm)

Cons

A little less magic

Well, duh.

However...

Some Angular devs didn't get the memo.

Polymer... Well designed, thought out for usability... But very strict styling rules.

Configuration

vs.

Declaration

Configration

<my-alerts val="alertsArr"></my-alerts>

$scope.alertsArr = [{
  type: 'danger',
  message: 'You failed to do something',
  onResolve: function() {
    console.log('closed by the user');
  }
}];

Plunker

Declaration

<div ng-repeat="alert in alertsArr"
     class="alert alert-type-{{alert.type}}"
     on-resolve="alert.onResolve()">
  {{alert.message}}
</div>

$scope.alertsArr = [{
  type: 'danger',
  message: 'You failed to do something',
  onResolve: function() {
    console.log('closed by the user');
  }
}];

Plunker

Let's talk about

Data Grids

Look at the usage

ng-grid

(outdated, but was very popular) | requires jQuery

remote paging

<div class="gridStyle" ng-grid="gridOptions">

$scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];

The API Documentation

ui-grid

(in beta) | Angular sole dependency | high performance | 'plugin architecture'

... No remote data. Load once. ...ish

<div ui-grid="{ data: myData }" class="myGrid"></div>

$scope.myData = [
        {
            "firstName": "Cox",
            "lastName": "Carney"...

smart-table 0.2.x

(outdated) | Angular sole dependency

<smart-table rows="rowCollection"></smart-table>

scope.rowCollection = [
        {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
        {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
        {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
    ];

This isn't Angular

ng-table

(stable) | sole Angular dependency

<table ng-table="tableParams" class="table">
    <tbody>
        <tr ng-repeat="user in $data">
            <td data-title="'Name'">
                {{user.name}}
            </td>
            <td data-title="'Age'">
                {{user.age}}
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="text-success text-right"><strong>Summary:</strong></td>
            <td>{{sum}}</td>
        </tr>
    </tfoot>
</table>

example

smart-table 1.x

<table st-table="rowCollection" class="table table-striped">
    <thead>
    <tr>
        <th>first name</th>
        <th>last name</th>
        <th>birth date</th>
        <th>balance</th>
        <th>email</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="row in rowCollection">
        <td>{{row.firstName}}</td>
        <td>{{row.lastName}}</td>
        <td>{{row.birthDate}}</td>
        <td>{{row.balance}}</td>
        <td>{{row.email}}</td>
    </tr>
    </tbody>
</table>

scope.rowCollection = [
    {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];

Look at the source

ng-grid pagination.js

ng-table header.html

smart-table stPagination.js

Take away

Just because it claims it 'uses Angular', doesn't mean that helps YOU during when consuming it

Shoutout: Docker rocks my world. Talk to me about it afterwards.