fix(pfTableView): ng-include inside ng-repeat hurts performance

Author: abkieling

src/table/tableview/examples/table-view-basic.js

@@ -20,7 +20,8 @@
   * <ul style='list-style-type: none'>
   *   <li>.header     - (string) Text label for a column header
   *   <li>.itemField    - (string) Item field to associate with a particular column.
-  *   <li>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Ex: htmlTemplate="name_template.html".  The template will be used to render each cell of the column.
+  *   <li>.templateFn - (function) (optional) Template function used to render each cell of the column. Pro: more performant than `htmlTemplate`. Con: doesn't support AngularJS directives in the template, therefore it doesn't support things like ng-click. Example: <pre>templateFn: value => `<span class="text-danger">${value}</span>`</pre>
+  *   <li>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Pro: supports AngularJS directives in the template. Con: poor performance on large tables. Ex: htmlTemplate="name_template.html".  The template will be used to render each cell of the column.
   *        Use <code>handleColAction(key, value)</code> in the template to call the <code>colActionFn</code> callback function you specify. 'key' is the item attribute name; which should equal the itemFld of a column.
   *       'value' is the item[key] value.
   *   <pre>
@@ -31,6 +32,7 @@
   *   <li>.colActionFn - (function) (optional) Callback function used for the column. 'value' is passed as a paramenter to the
   *        callback function.
   * </ul>
+  * <p><strong>Tip:</strong> For templating, use `tempateFn` unless you really need to use AngularJS directives. `templateFn` performs better than `htmlTemplate`.</p>
   * @param {array} actionButtons List of action buttons in each row
   *   <ul style='list-style-type: none'>
   *     <li>.name - (String) The name of the action, displayed on the button
@@ -108,7 +110,7 @@
             { header: "Status", itemField: "status", htmlTemplate: "status_template.html" },
             { header: "Name", itemField: "name", htmlTemplate: "name_template.html", colActionFn: onNameClick },
             { header: "Address", itemField: "address"},
-            { header: "City", itemField: "city" },
+            { header: "City", itemField: "city", templateFn: function(value) { return '<span class="text-success">' + value + '</span>' } },
             { header: "State", itemField: "state"}
           ];
 

src/table/tableview/examples/table-view-with-toolbar.js

@@ -28,7 +28,8 @@
  * <ul style='list-style-type: none'>
  *   <li>.header     - (string) Text label for a column header
  *   <li>.itemField    - (string) Item field to associate with a particular column.
- *   <li>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Ex: htmlTemplate="name_template.html".  The template will be used to render each cell of the column.
+ *   <li>.templateFn - (function) (optional) Template function used to render each cell of the column. Pro: more performant than `htmlTemplate`. Con: doesn't support AngularJS directives in the template, therefore it doesn't support things like ng-click. Example: <pre>templateFn: value => `<span class="text-danger">${value}</span>`</pre>
+ *   <li>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Pro: supports AngularJS directives in the template. Con: poor performance on large tables. Ex: htmlTemplate="name_template.html".  The template will be used to render each cell of the column.
  *        Use <code>handleColAction(key, value)</code> in the template to call the <code>colActionFn</code> callback function you specify. 'key' is the item attribute name; which should equal the itemFld of a column.
  *       'value' is the item[key] value.
  *       <pre>
@@ -39,6 +40,7 @@
  *   <li>.colActionFn - (function) (optional) Callback function used for the column. 'value' is passed as a paramenter to the
  *        callback function.
  * </ul>
+ * <p><strong>Tip:</strong> For templating, use `tempateFn` unless you really need to use AngularJS directives. `templateFn` performs better than `htmlTemplate`.</p>
  * @param {array} actionButtons List of action buttons in each row
  *   <ul style='list-style-type: none'>
  *     <li>.name - (String) The name of the action, displayed on the button
@@ -154,11 +156,34 @@
       $scope.actionsText = "";
 
       $scope.columns = [
-        { header: "Status", itemField: "status", htmlTemplate: "status_template.html" },
-        { header: "Name", itemField: "name", htmlTemplate: "name_template.html", colActionFn: onNameClick },
-        { header: "Age", itemField: "age"},
-        { header: "Address", itemField: "address", htmlTemplate: "address_template.html" },
-        { header: "BirthMonth", itemField: "birthMonth"}
+        {
+          header: "Status",
+          itemField: "status",
+          htmlTemplate: "status_template.html"
+        },
+        {
+          header: "Name",
+          itemField: "name",
+          htmlTemplate: "name_template.html",
+          colActionFn: onNameClick
+        },
+        {
+          header: "Age",
+          itemField: "age",
+          templateFn: function(value) {
+            var className = value > 30 ? 'text-success' : 'text-warning';
+            return '<span class="' + className + '">' + value + '</span>';
+          }
+        },
+        {
+          header: "Address",
+          itemField: "address",
+          htmlTemplate: "address_template.html"
+        },
+        {
+          header: "BirthMonth",
+          itemField: "birthMonth"
+        }
       ];
 
       // dtOptions paginationType, displayLength, and dom:"p" are no longer being

src/table/tableview/table-view.component.js

@@ -12,7 +12,7 @@ angular.module('patternfly.table').component('pfTableView', {
     emptyStateActionButtons: '=?'
   },
   templateUrl: 'table/tableview/table-view.html',
-  controller: function (DTOptionsBuilder, DTColumnDefBuilder, $element, pfUtils, $log, $filter, $timeout) {
+  controller: function (DTOptionsBuilder, DTColumnDefBuilder, $element, pfUtils, $log, $filter, $timeout, $sce) {
     'use strict';
     var ctrl = this, prevDtOptions, prevItems;
 
@@ -396,21 +396,6 @@ angular.module('patternfly.table').component('pfTableView', {
       }
     };
 
-    ctrl.hasHTMLTemplate = function (key) {
-      var htmlTemplate = this.getHTMLTemplate(key);
-      return htmlTemplate.length > 0;
-    };
-
-    ctrl.getHTMLTemplate = function (key) {
-      var retVal = '';
-      var tableCol = $filter('filter')(ctrl.columns, {itemField: key});
-
-      if (tableCol && tableCol.length === 1 && tableCol[0].hasOwnProperty('htmlTemplate')) {
-        retVal = tableCol[0].htmlTemplate;
-      }
-      return retVal;
-    };
-
     ctrl.handleColAction = function (key, value) {
       var tableCol = $filter('filter')(ctrl.columns, {itemField: key});
 
@@ -489,5 +474,9 @@ angular.module('patternfly.table').component('pfTableView', {
         ctrl.dropdownClass = 'dropup';
       }
     }
+
+    ctrl.trustAsHtml = function (html) {
+      return $sce.trustAsHtml(html);
+    };
   }
 });

src/table/tableview/table-view.html

@@ -18,8 +18,9 @@
       </td>
 
       <td ng-repeat="col in $ctrl.columns" ng-init="key = col.itemField; value = item[key]">
-        <span ng-if="!$ctrl.hasHTMLTemplate(key)">{{value}}</span>
-        <span ng-if="$ctrl.hasHTMLTemplate(key)" ng-include="$ctrl.getHTMLTemplate(key)"></span>
+        <span ng-if="!col.htmlTemplate && !col.templateFn">{{value}}</span>
+        <span ng-if="col.htmlTemplate" ng-include="col.htmlTemplate"></span>
+        <span ng-if="col.templateFn" ng-bind-html="$ctrl.trustAsHtml(col.templateFn(value))"></span>
       </td>
 
       <td ng-if="$ctrl.actionButtons && $ctrl.actionButtons.length > 0" class="table-view-pf-actions" ng-repeat="actionButton in $ctrl.actionButtons">

test/table/tableview/table-view.spec.js

@@ -33,7 +33,7 @@ describe('Component: pfTableView', function () {
       {itemField: 'uuid', header: 'ID'},
       {itemField: 'name', header: 'Name', htmlTemplate: "name_template.html", colActionFn: onNameClick},
       {itemField: 'size', header: 'Size'},
-      {itemField: 'capacity', header: 'Capacity'}
+      {itemField: 'capacity', header: 'Capacity', templateFn: function(value) { return '<span class="custom-template2">' + value + '</span>' }}
     ];
 
     $scope.items = [
@@ -148,6 +148,17 @@ describe('Component: pfTableView', function () {
     expect($scope.result).toBe('You clicked on One');
   });
 
+  it('should use a template function if one is configured', function () {
+    basicSetup();
+    var customSpans = element.find('.custom-template2');
+    expect(customSpans.length).toBe(5);
+    customSpans.each(function(i) {
+      var result = $(this).parent().html();
+      var expected = '<span class="custom-template2">' + $scope.items[i].capacity + '</span>';
+      expect(result).toBe(expected);
+    });
+  });
+
   it('should not show pagination controls by default', function () {
     basicSetup();
     expect(element.find('pf-pagination').length).toBe(0);