From d806cd4c6703c19f535ea144056b7fba781b028b Mon Sep 17 00:00:00 2001
From: Andy Perlitch <andyperlitch@gmail.com>
Date: Tue, 8 Jul 2014 17:38:45 -0700
Subject: [PATCH] MLHR-1213 #resolve #comment added track-by attribute

---
 README.md                       | 1 +
 app/scripts/controllers/main.js | 2 +-
 app/views/main.html             | 1 +
 src/mlhr-table.js               | 9 +++++++--
 src/mlhr-table.tpl.html         | 3 ++-
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 2d73ad2..1f7e351 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ The `mlhr-table` tag can have the following attributes:
 | rows        | Array  | yes      | An array of data to be displayed. See the note on maintaining $$hashKeys in order to allow for more performant data updates |
 | table-class | String | no       | A string of classes to be attached to the actual `<table>` element that gets created                                        |
 | selected    | Array  | no       | This should be provided when using the `selector` built-in format. See the *Row Selection* section below.                   |
+| track-by    | String | yes      | This string should be the unique key on data objects that ng-repeat should use to keep track of rows in the table           |
 
 
 Options Object
diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
index 2f3f83b..f169bae 100644
--- a/app/scripts/controllers/main.js
+++ b/app/scripts/controllers/main.js
@@ -70,7 +70,7 @@ angular.module('datatorrent.mlhrTable.ghPage')
     };
 
     setInterval(function() {
-      $scope.my_table_data = HashKeyCopier.copyHashKeys( $scope.my_table_data, genRows(30) );
+      $scope.my_table_data = genRows(30);
       // $scope.my_table_data = genRows(30);
       $scope.$apply();
     }, 1000);
diff --git a/app/views/main.html b/app/views/main.html
index 605b2c8..ab19efc 100644
--- a/app/views/main.html
+++ b/app/views/main.html
@@ -6,6 +6,7 @@
   selected="my_selected_rows"
   class="col-sm-9"
   options="my_table_options"
+  track-by="id"
   table-class="table">
 </mlhr-table>
 
diff --git a/src/mlhr-table.js b/src/mlhr-table.js
index ba198ca..6f781bb 100644
--- a/src/mlhr-table.js
+++ b/src/mlhr-table.js
@@ -825,7 +825,11 @@ angular.module('datatorrent.mlhrTable', [
 
 .directive('mlhrTable', ['$log', '$timeout', function ($log, $timeout) {
 
-  function link(scope, elem) {
+  function link(scope, elem, attrs) {
+    // Specify default track by
+    if (typeof scope.trackBy === 'undefined') {
+      scope.trackBy = 'id';
+    }
 
     // Look for built-in filter, sort, and format functions
     if (scope.columns instanceof Array) {
@@ -954,7 +958,8 @@ angular.module('datatorrent.mlhrTable', [
       rows: '=',
       classes: '@tableClass',
       selected: '=',
-      options: '=?'
+      options: '=?',
+      trackBy: '@?'
     },
     controller: 'TableController',
     link: link
diff --git a/src/mlhr-table.tpl.html b/src/mlhr-table.tpl.html
index c225204..7740be1 100644
--- a/src/mlhr-table.tpl.html
+++ b/src/mlhr-table.tpl.html
@@ -57,7 +57,8 @@
           | tableRowFilter:columns:searchTerms:filterState 
           | tableRowSorter:columns:sortOrder:sortDirection 
           | limitTo:options.rowOffset - filterState.filterCount 
-          | limitTo:options.row_limit">
+          | limitTo:options.row_limit
+        track by row[trackBy]">
         <td ng-repeat="column in columns">
           <span ng-if="column.format && (column.format.trustAsHtml || column.trustFormat)" mlhr-table-dynamic="row | tableCellFilter:column" row="row" column="column" selected="selected"></span>
           <span ng-if="!column.format || !(column.format.trustAsHtml || column.trustFormat)" ng-bind="row | tableCellFilter:column"></span>