MLHR-1213 #resolve #comment added track-by attribute

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

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);

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>
 

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

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>