diff --git a/app/modules/main/directives/mdtTableDirective.js b/app/modules/main/directives/mdtTableDirective.js
index 64c0857..ccb1aed 100644
--- a/app/modules/main/directives/mdtTableDirective.js
+++ b/app/modules/main/directives/mdtTableDirective.js
@@ -127,6 +127,7 @@
                 tableCard: '=',
                 selectableRows: '=',
                 alternateHeaders: '=',
+                onInitTableCallback: '=',
                 deleteRowCallback: '&',
                 selectedRowCallback: '&',
                 saveRowCallback: '&',
@@ -221,6 +222,10 @@
                 _initEditCellFeature();
                 _initSelectableRowsFeature();
 
+                if ($scope.onInitTableCallback) {
+                    $scope.onInitTableCallback(ctrl, $scope);
+                }
+
                 PaginationFeature.startFeature(ctrl);
                 ColumnSelectorFeature.initFeatureHeaderValues($scope.dataStorage.header, ctrl.columnSelectorFeature);
 
diff --git a/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js b/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js
index 1bd3a92..f279e74 100644
--- a/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js
+++ b/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js
@@ -58,6 +58,10 @@
             return this.totalResultCount;
         };
 
+        mdtAjaxPaginationHelper.prototype.trackBy = function(item, $index) {
+            return item.rowId || $index;
+        };   
+
         mdtAjaxPaginationHelper.prototype.getRows = function(){
             return this.dataStorage.storage;
         };
diff --git a/app/modules/main/factories/mdtPaginationHelperFactory.js b/app/modules/main/factories/mdtPaginationHelperFactory.js
index dfc0d6a..9c7a18b 100644
--- a/app/modules/main/factories/mdtPaginationHelperFactory.js
+++ b/app/modules/main/factories/mdtPaginationHelperFactory.js
@@ -3,8 +3,9 @@
 
     function mdtPaginationHelperFactory(PaginatorTypeProvider, _){
 
-        function mdtPaginationHelper(dataStorage, paginationSetting){
+        function mdtPaginationHelper(dataStorage, paginationSetting, rowOptions){
             this.paginatorType = PaginatorTypeProvider.ARRAY;
+            this.rowOptions = rowOptions;
 
             this.dataStorage = dataStorage;
 
@@ -51,6 +52,10 @@
             return this.dataStorage.storage.length;
         };
 
+        mdtPaginationHelper.prototype.trackBy = function(item, $index) {
+            return item.rowId || $index;
+        };
+
         mdtPaginationHelper.prototype.getRows = function(){
             this.calculateVisibleRows();
 
@@ -85,8 +90,8 @@
         };
 
         return {
-            getInstance: function(dataStorage, isEnabled){
-                return new mdtPaginationHelper(dataStorage, isEnabled);
+            getInstance: function(dataStorage, isEnabled, rowOptions){
+                return new mdtPaginationHelper(dataStorage, isEnabled, rowOptions);
             }
         };
     }
diff --git a/app/modules/main/templates/rows/generateRows.html b/app/modules/main/templates/rows/generateRows.html
index f194732..eb1b279 100644
--- a/app/modules/main/templates/rows/generateRows.html
+++ b/app/modules/main/templates/rows/generateRows.html
@@ -1,5 +1,5 @@
 <tr class="tbodyTrRow"
-    ng-repeat="rowData in mdtPaginationHelper.getRows() track by $index"
+    ng-repeat="rowData in mdtPaginationHelper.getRows() track by mdtPaginationHelper.trackBy(rowData, $index)"
     ng-class="{'selectedRow': rowData.optionList.selected, '{{rowData.optionList.className}}': rowData.optionList.className }"
     ng-show="(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false">
 
diff --git a/dist/md-data-table-templates.js b/dist/md-data-table-templates.js
index 213a0f7..2778467 100644
--- a/dist/md-data-table-templates.js
+++ b/dist/md-data-table-templates.js
@@ -1,21 +1,21 @@
-angular.module("mdtTemplates", []).run(["$templateCache", function($templateCache) {$templateCache.put("/main/templates/generateTable.html","<md-virtual-repeat-container class=\"md-virtual-repeat-container\" ng-if=\"virtualRepeat\">\r\n    <table cellpadding=\"0\" cellspacing=\"0\">\r\n        <thead mdt-generated-header-row></thead>\r\n        <tbody ng-include src=\"\'/main/templates/rows/generateRowsVirtualRepeat.html\'\"></tbody>\r\n    </table>\r\n</md-virtual-repeat-container>\r\n\r\n<table ng-if=\"!virtualRepeat\" cellpadding=\"0\" cellspacing=\"0\">\r\n    <thead mdt-generated-header-row></thead>\r\n    <tbody ng-include src=\"\'/main/templates/rows/generateRows.html\'\"></tbody>\r\n</table>\r\n");
-$templateCache.put("/main/templates/largeEditDialog.html","<md-dialog style=\"min-width: 300px;\" layout-padding>\r\n    <md-dialog-content style=\"margin-left:16px;margin-right:16px;\" layout-align=\"column\">\r\n        <form ng-submit=\"saveRow()\" name=\"editFieldForm\">\r\n            <h2>{{cellData.attributes.editableFieldTitle}}</h2>\r\n            <md-input-container md-no-float style=\"margin-bottom:0;width:100%\">\r\n\r\n                <!-- TODO getting placeholder -->\r\n                <input type=\"text\"\r\n                       ng-model=\"cellData.value\"\r\n                       placeholder=\"\"\r\n                       md-maxlength=\"{{cellData.attributes.editableFieldMaxLength}}\" />\r\n            </md-input-container>\r\n        </form>\r\n    </md-dialog-content>\r\n\r\n    <md-dialog-actions>\r\n        <md-button class=\"md-raised md-primary\" ng-click=\"saveRow()\">{{mdtTranslations.largeEditDialog.saveButtonLabel}}</md-button>\r\n        <md-button class=\"md-raised\" ng-click=\"cancel()\">{{mdtTranslations.largeEditDialog.cancelButtonLabel}}</md-button>\r\n    </md-dialog-actions>\r\n</md-dialog>\r\n");
-$templateCache.put("/main/templates/mdtAlternateHeaders.html","<div class=\"mdt-header-alternate\" layout=\"row\" layout-align=\"start center\">\r\n    <span class=\"alternate-text\" flex>{{getNumberOfSelectedRows()}} item selected</span>\r\n    <md-button class=\"md-icon-button md-primary\" ng-click=\"deleteSelectedRows()\" aria-label=\"Delete selected rows\">\r\n        <ng-md-icon icon=\"delete\" size=\"24\"></ng-md-icon>\r\n    </md-button>\r\n\r\n    <md-button class=\"md-icon-button md-primary\" aria-label=\"More options\">\r\n        <ng-md-icon icon=\"more_vert\" size=\"24\"></ng-md-icon>\r\n    </md-button>\r\n</div>");
-$templateCache.put("/main/templates/mdtCardFooter.html","<div class=\"mdt-footer\" layout=\"row\" ng-show=\"isPaginationEnabled()\">\r\n    <div class=\"mdt-pagination\"\r\n         layout=\"row\"\r\n         layout-align=\"end center\"\r\n         flex>\r\n\r\n        <span layout-margin>{{mdtTranslations.rowsPerPage}}</span>\r\n        <md-input-container>\r\n            <md-select ng-model=\"rowsPerPage\" aria-label=\"rows per page\">\r\n                <md-option ng-value=\"pageSize\" ng-repeat=\"pageSize in mdtPaginationHelper.rowsPerPageValues\">{{pageSize}}</md-option>\r\n            </md-select>\r\n        </md-input-container>\r\n\r\n        <span layout-margin>\r\n            <span ng-if=\"mdtPaginationHelper.getTotalRowsCount() != 0\" style=\"margin:0;\">{{mdtPaginationHelper.getStartRowIndex()+1}}-</span>{{mdtPaginationHelper.getEndRowIndex()+1}} of {{mdtPaginationHelper.getTotalRowsCount()}}\r\n        </span>\r\n\r\n        <md-button class=\"md-icon-button md-primary\" ng-class=\"{\'md-inactive\': !mdtPaginationHelper.hasPreviousPage()}\" aria-label=\"Previous page\" ng-click=\"mdtPaginationHelper.previousPage()\">\r\n            <ng-md-icon icon=\"keyboard_arrow_left\" size=\"24\"></ng-md-icon>\r\n        </md-button>\r\n\r\n        <md-button class=\"md-icon-button md-primary\" ng-class=\"{\'md-inactive\': !mdtPaginationHelper.hasNextPage()}\" aria-label=\"Next page\" ng-click=\"mdtPaginationHelper.nextPage()\">\r\n            <ng-md-icon icon=\"keyboard_arrow_right\" size=\"24\"></ng-md-icon>\r\n        </md-button>\r\n    </div>\r\n</div>");
-$templateCache.put("/main/templates/mdtCardHeader.html","<div class=\"mdt-header\" layout=\"row\" layout-align=\"start center\" ng-show=\"isTableCardEnabled\">\r\n    <span flex>{{tableCard.title}}</span>\r\n<!--\r\n    <md-button class=\"md-icon-button md-primary\" aria-label=\"Filter\">\r\n        <ng-md-icon icon=\"filter_list\" size=\"24\"></ng-md-icon>\r\n    </md-button>\r\n    <md-button class=\"md-icon-button md-primary\" aria-label=\"More options\">\r\n        <ng-md-icon icon=\"more_vert\" size=\"24\"></ng-md-icon>\r\n    </md-button>\r\n-->\r\n\r\n    <!-- columnSelectorFeature -->\r\n    <md-button class=\"md-icon-button md-primary mdt-column-chooser-button\"\r\n               aria-label=\"Choose columns\"\r\n               ng-if=\"::columnSelectorFeature.isEnabled\"\r\n               ng-click=\"handleColumnChooserButtonClick()\">\r\n        <ng-md-icon icon=\"settings\" size=\"24\"></ng-md-icon>\r\n    </md-button>\r\n\r\n    <mdt-column-selector ng-if=\"columnSelectorFeature.isEnabled && columnSelectorFeature.isActive\"></mdt-column-selector>\r\n</div>");
-$templateCache.put("/main/templates/mdtCheckboxColumnFilter.html","<div class=\"filter-dropdown\">\r\n    <div class=\"md-whiteframe-z2\">\r\n        <md-content class=\"md-body-1\">\r\n            <div layout=\"row\" layout-align=\"end center\" class=\"b-b p-smd md-caption\" ng-if=\"::headerRowData.columnSort.isEnabled\">\r\n                <a href=\"#\" ng-click=\"sortingCallback($event, sortingData)\">Sort A-Z <mdt-sorting-icons size=\"20\" data=\"sortingData\" class=\"p-l-sm\"></mdt-sorting-icons></a>\r\n            </div>\r\n\r\n            <div layout=\"row\" layout-align=\"start center\" class=\"selectall_clearall p-l-md p-t-md p-b-sm\">\r\n                <a href=\"#\" ng-click=\"selectAll($event)\" ng-class=\"{\'disabled\' : selectedItems.length === selectableItems.length}\">Select all</a> <span>-</span> <a href=\"#\" ng-class=\"{\'disabled\' : selectedItems.length === 0}\" ng-click=\"clearAll($event)\">Clear</a>\r\n\r\n                <div class=\"selected_items p-r-md\" flex ng-if=\"selectedItems.length\">{{selectedItems.length}} Selected</div>\r\n            </div>\r\n\r\n            <div layout=\"column\" class=\"p-b-n p-t-sm p-l-md p-r-md filter__scroll\">\r\n                <md-checkbox class=\"md-primary\"\r\n                             ng-repeat=\"item in selectableItems\"\r\n                             ng-checked=\"exists(item)\"\r\n                             ng-click=\"toggle(item)\">\r\n                    {{ transformChip(item) }}\r\n                </md-checkbox>\r\n            </div>\r\n\r\n            <div class=\"p-b-sm p-t-sm p-l-sm\" layout=\"row\" layout-align=\"start center\">\r\n                <md-button class=\"md-raised md-primary\" ng-click=\"confirmCallback({selectedItems: selectedItems, sortingData: sortingData, event: $event})\">Ok</md-button>\r\n                <md-button class=\"md-raised\" ng-click=\"cancelCallback({event: $event})\">Cancel</md-button>\r\n            </div>\r\n        </md-content>\r\n    </div>\r\n</div>\r\n");
-$templateCache.put("/main/templates/mdtChipsColumnFilter.html","<div class=\"filter-dropdown\">\r\n    <div class=\"md-whiteframe-z2\">\r\n        <md-content class=\"md-body-1\">\r\n            <div layout=\"row\" layout-align=\"end center\" class=\"b-b p-smd md-caption\" ng-if=\"::headerRowData.columnSort.isEnabled\">\r\n                <a href=\"#\" ng-click=\"sortingCallback($event, sortingData)\">Sort A-Z <mdt-sorting-icons size=\"20\" data=\"sortingData\" class=\"p-l-sm\"></mdt-sorting-icons></a>\r\n            </div>\r\n\r\n            <div class=\"p-md filter__scroll\">\r\n                <md-chips ng-model=\"selectedItems\"\r\n                          md-require-match=\"true\">\r\n\r\n                    <md-autocomplete md-delay=\"300\"\r\n                                     md-autofocus=\"true\"\r\n                                     md-search-text=\"searchText\"\r\n                                     md-items=\"item in headerRowData.columnFilter.valuesProviderCallback(searchText)\"\r\n                                     md-item-text=\"transformChip(item)\"\r\n                                     placeholder=\"{{placeholderText}}\">\r\n\r\n                        <span md-highlight-text=\"searchText\">{{transformChip(item)}}</span>\r\n\r\n                        <md-not-found>\r\n                            No results found.\r\n                        </md-not-found>\r\n                    </md-autocomplete>\r\n\r\n                    <md-chip-template>\r\n                        <span>\r\n                          <strong>{{transformChip($chip)}}</strong>\r\n                        </span>\r\n                    </md-chip-template>\r\n\r\n                </md-chips>\r\n            </div>\r\n\r\n            <div class=\"p-b-sm p-t-sm p-l-sm\" layout=\"row\" layout-align=\"start center\">\r\n                <md-button class=\"md-raised md-primary\" ng-click=\"confirmCallback({selectedItems: selectedItems, sortingData: sortingData, event: $event})\">Ok</md-button>\r\n                <md-button class=\"md-raised\" ng-click=\"cancelCallback({event: $event})\">Cancel</md-button>\r\n            </div>\r\n        </md-content>\r\n    </div>\r\n</div>\r\n");
-$templateCache.put("/main/templates/mdtColumnSelector.html","<!-- TODO: change classname -->\r\n<div class=\"mdt-column-selector\">\r\n    <div class=\"md-whiteframe-z2\">\r\n        <md-content class=\"md-body-1\">\r\n            <div class=\"md-subhead p-t-md p-l-md mdt-column-selector-title\" layout=\"row\">\r\n                Columns\r\n            </div>\r\n            <div layout=\"row\" layout-align=\"start center\" class=\"selectall_clearall p-l-md p-t-md p-b-sm\">\r\n                <a href=\"#\" ng-click=\"selectAll($event)\" ng-class=\"{\'disabled\' : isAllSelected()}\">Select all</a> <span>-</span> <a href=\"#\" ng-class=\"{\'disabled\' : isNothingSelected()}\" ng-click=\"clearAll($event)\">Clear</a>\r\n\r\n                <div class=\"selected_items p-r-md\" flex ng-if=\"selectedItems.length\">{{selectedItems.length}} Selected</div>\r\n            </div>\r\n\r\n            <div layout=\"column\" class=\"p-b-n p-t-sm p-l-md p-r-md filter__scroll\">\r\n                <md-checkbox class=\"md-primary mdt-checbox-column-items\"\r\n                             ng-if=\"item.isExcluded == false\"\r\n                             ng-repeat=\"item in headerRowsData\"\r\n                             ng-checked=\"checked(item)\"\r\n                             ng-click=\"toggle(item)\">\r\n                    {{item.columnName}}\r\n                </md-checkbox>\r\n            </div>\r\n\r\n            <div class=\"p-b-sm p-t-sm p-l-sm\" layout=\"row\" layout-align=\"start center\">\r\n                <md-button class=\"md-raised md-primary\" ng-click=\"confirmCallback({paginator: mdtPaginationHelper})\">Ok</md-button>\r\n                <md-button class=\"md-raised\" ng-click=\"cancelCallback()\">Cancel</md-button>\r\n            </div>\r\n        </md-content>\r\n    </div>\r\n</div>\r\n");
-$templateCache.put("/main/templates/mdtDropdownColumnFilter.html","<div class=\"filter-dropdown\">\r\n    <div class=\"md-whiteframe-z2\">\r\n        <md-content class=\"md-body-1\">\r\n            <div layout=\"row\" layout-align=\"end center\" class=\"b-b p-smd md-caption\" ng-if=\"::headerRowData.columnSort.isEnabled\">\r\n                <a href=\"#\" ng-click=\"sortingCallback($event, sortingData)\">Sort A-Z <mdt-sorting-icons size=\"20\" data=\"sortingData\" class=\"p-l-sm\"></mdt-sorting-icons></a>\r\n            </div>\r\n\r\n            <div class=\"p-md\">\r\n                <md-input-container class=\"md-block\" flex-gt-sm>\r\n                    <md-select ng-model=\"oneSelectedItem\" placeholder=\"{{placeholderText}}\" ng-change=\"selectedItem()\">\r\n                        <md-option ng-repeat=\"item in selectableItems\" value=\"{{transformChip(item)}}\">\r\n                            {{transformChip(item)}}\r\n                        </md-option>\r\n                    </md-select>\r\n                </md-input-container>\r\n            </div>\r\n\r\n            <div class=\"p-b-sm p-t-sm p-l-sm\" layout=\"row\" layout-align=\"start center\">\r\n                <md-button class=\"md-raised md-primary\" ng-click=\"confirmCallback({selectedItems: selectedItems, sortingData: sortingData, event: $event})\">Ok</md-button>\r\n                <md-button class=\"md-raised\" ng-click=\"cancelCallback({event: $event})\">Cancel</md-button>\r\n            </div>\r\n        </md-content>\r\n    </div>\r\n</div>\r\n");
-$templateCache.put("/main/templates/mdtGeneratedHeaderCellContent.html","<div class=\"p-r no-outline column-header-content\" ng-class=\"{\'clickable\': headerRowData.columnSort.isEnabled}\" ng-click=\"columnClickHandler()\">\r\n    <mdt-chips-column-filter\r\n        ng-if=\"headerRowData.columnFilter.isActive && headerRowData.columnFilter.type === \'chips\'\"\r\n        confirm-callback=\"columnFilterFeature.confirmFilterDialog\"\r\n        cancel-callback=\"columnFilterFeature.cancelFilterDialog(event)\"\r\n        header-row-data=\"headerRowData\">\r\n    </mdt-chips-column-filter>\r\n\r\n    <mdt-dropdown-column-filter\r\n        ng-if=\"headerRowData.columnFilter.isActive && headerRowData.columnFilter.type === \'dropdown\'\"\r\n        confirm-callback=\"columnFilterFeature.confirmFilterDialog\"\r\n        cancel-callback=\"columnFilterFeature.cancelFilterDialog(event)\"\r\n        header-row-data=\"headerRowData\">\r\n    </mdt-dropdown-column-filter>\r\n\r\n\r\n    <mdt-checkbox-column-filter\r\n        ng-if=\"headerRowData.columnFilter.isActive && headerRowData.columnFilter.type === \'checkbox\'\"\r\n        confirm-callback=\"columnFilterFeature.confirmFilterDialog\"\r\n        cancel-callback=\"columnFilterFeature.cancelFilterDialog(event)\"\r\n        header-row-data=\"headerRowData\">\r\n    </mdt-checkbox-column-filter>\r\n\r\n    <div ng-if=\"headerRowData.columnSort.isEnabled\">\r\n        <md-tooltip ng-show=\"headerRowData.columnDefinition\">{{headerRowData.columnDefinition}}</md-tooltip>\r\n\r\n        <mdt-sorting-icons size=\"16\" data=\"headerRowData\" ng-show=\"headerRowData.alignRule == \'right\' && !headerRowData.columnFilter.isEnabled\"></mdt-sorting-icons>\r\n\r\n        <span ng-include src=\"\'/main/templates/cells/generateCellValue.html\'\"></span>\r\n\r\n        <mdt-sorting-icons size=\"16\" data=\"headerRowData\" ng-show=\"headerRowData.alignRule == \'left\' && !headerRowData.columnFilter.isEnabled\"></mdt-sorting-icons>\r\n    </div>\r\n    <div ng-if=\"!headerRowData.columnSort.isEnabled\">\r\n        <md-tooltip ng-show=\"headerRowData.columnDefinition\">{{headerRowData.columnDefinition}}</md-tooltip>\r\n\r\n        <span ng-include src=\"\'/main/templates/cells/generateCellValue.html\'\" class=\"no-outline\"></span>\r\n    </div>\r\n</div>");
-$templateCache.put("/main/templates/mdtGeneratedHeaderRow.html","<tr class=\"theadTrRow\"\r\n    mdt-animate-sort-icon-handler>\r\n\r\n    <!-- TODO: fix text-align:left, in theory it should not be there to make it work -->\r\n    <th class=\"checkboxCell\"\r\n        style=\"text-align:left;\"\r\n        ng-show=\"selectableRows\"\r\n        mdt-select-all-rows-handler>\r\n\r\n        <md-checkbox aria-label=\"select all\" ng-model=\"selectAllRows\" ng-change=\"onCheckboxChange()\"></md-checkbox>\r\n    </th>\r\n\r\n    <th class=\"column\"\r\n        ng-repeat=\"headerRowData in dataStorage.header track by $index\"\r\n        ng-if=\"!headerRowData.columnSelectorFeature || headerRowData.columnSelectorFeature.isVisible\"\r\n\r\n        mdt-add-align-class=\"headerRowData.alignRule\"\r\n        ng-click=\"clickHandler($index, headerRowData)\"\r\n        md-ink-ripple=\"{{ rippleEffectCallback() }}\">\r\n\r\n        <mdt-generated-header-cell-content index=\"{{$index}}\"></mdt-generated-header-cell-content>\r\n    </th>\r\n</tr>\r\n");
-$templateCache.put("/main/templates/mdtTable.html","<md-content class=\"mdtTableContainer md-whiteframe-z1\" ng-cloak>\r\n    <!-- table card -->\r\n    <mdt-card-header ng-hide=\"alternateHeaders && dataStorage.isAnyRowSelected()\"></mdt-card-header>\r\n\r\n    <!-- alternate headers -->\r\n    <mdt-alternate-headers ng-show=\"alternateHeaders && dataStorage.isAnyRowSelected()\"></mdt-alternate-headers>\r\n    <!-- alternate headers end -->\r\n\r\n    <md-content class=\"mdtTable\" layout=\"column\">\r\n        <!-- parsing transcluded content in order to be executed -->\r\n        <div class=\"mdtTable-reader\" style=\"display:none;\"></div>\r\n\r\n        <md-progress-linear md-mode=\"indeterminate\" class=\"loading-indicator\" ng-class=\"{\'loading-is-active\': mdtPaginationHelper.isLoading}\"></md-progress-linear>\r\n\r\n        <ng-include src=\"\'/main/templates/generateTable.html\'\"></ng-include>\r\n    </md-content>\r\n\r\n    <!-- table card -->\r\n    <mdt-card-footer></mdt-card-footer>\r\n    <!-- table card end -->\r\n</md-content>\r\n\r\n<style ng-if=\"::mdtLoadingIndicator\">\r\n    md-progress-linear.loading-indicator .md-bar{\r\n        background: {{mdtLoadingIndicator[\'color\']}};\r\n    }\r\n</style>");
-$templateCache.put("/main/templates/smallEditDialog.html","<md-dialog aria-label=\"edit field modal\" layout-padding>\r\n    <md-dialog-content style=\"margin-left:16px;margin-right:16px;\">\r\n        <form ng-submit=\"saveRow()\" name=\"editFieldForm\">\r\n            <md-input-container md-no-float style=\"margin-bottom:0;width:100%;\">\r\n\r\n                <!-- TODO getting placeholder -->\r\n                <input type=\"text\"\r\n                       ng-model=\"cellData.value\"\r\n                       placeholder=\"\"\r\n                       md-maxlength=\"{{cellData.attributes.editableFieldMaxLength}}\" />\r\n            </md-input-container>\r\n        </form>\r\n    </md-dialog-content>\r\n</md-dialog>\r\n");
-$templateCache.put("/main/templates/cells/generateCell.html","<!-- editable field -->\r\n<ng-md-icon icon=\"edit\" size=\"16\"\r\n            style=\"cursor:pointer;float:right;height:16px;padding-left:5px;outline: none;\"\r\n            ng-if=\"cellData.attributes.editableField\"\r\n            ng-click=\"showEditDialog($event, cellData, rowData)\"></ng-md-icon>\r\n\r\n<span mdt-add-html-content-to-cell=\"cellData\"\r\n      style=\"cursor:pointer;outline: none;\"\r\n      ng-if=\"cellData.attributes.editableField\"\r\n      ng-click=\"showEditDialog($event, cellData, rowData)\"></span>\r\n\r\n<!-- non editable field -->\r\n<span mdt-add-html-content-to-cell=\"cellData\" ng-if=\"cellData.attributes.editableField == false\"></span>\r\n");
-$templateCache.put("/main/templates/cells/generateCellValue.html","<span ng-if=\"!headerRowData.columnFilter.isEnabled\">\r\n    {{headerRowData.columnName}}\r\n</span>\r\n\r\n<span ng-if=\"headerRowData.columnFilter.isEnabled\"\r\n      class=\"filter-select\"\r\n      ng-class=\"{\'is-active\': headerRowData.columnFilter.filtersApplied.length}\">\r\n     {{headerRowData.columnName}}\r\n     <ng-md-icon icon=\"arrow_drop_down\" size=\"24\"></ng-md-icon>\r\n</span>");
-$templateCache.put("/main/templates/cells/generateCheckboxCell.html","<md-checkbox aria-label=\"select\" ng-model=\"rowData.optionList.selected\" ng-change=\"onCheckboxChange()\"></md-checkbox>\r\n");
-$templateCache.put("/main/templates/cells/generateSortingIcons.html","<span class=\"hoverSortIcons\" ng-if=\"data.columnSort.sort == false\">\r\n    <ng-md-icon icon=\"arrow_forward\" size=\"{{size}}\"></ng-md-icon>\r\n</span>\r\n\r\n<span class=\"sortedColumn\" ng-if=\"data.columnSort.sort !== false\" ng-class=\"data.columnSort.sort === ColumnSortDirectionProvider.ASC ? \'ascending\' : \'descending\'\">\r\n    <ng-md-icon icon=\"arrow_forward\" size=\"{{size}}\"></ng-md-icon>\r\n</span>");
-$templateCache.put("/main/templates/rows/errorIndicator.html","<td colspan=\"999\" class=\"errorMessage\">\r\n    <ng-bind-html ng-bind-html=\"mdtPaginationHelper.mdtRowPaginatorErrorMessage\"></ng-bind-html>\r\n</td>\r\n");
-$templateCache.put("/main/templates/rows/generateRows.html","<tr class=\"tbodyTrRow\"\r\n    ng-repeat=\"rowData in mdtPaginationHelper.getRows() track by $index\"\r\n    ng-class=\"{\'selectedRow\': rowData.optionList.selected, \'{{rowData.optionList.className}}\': rowData.optionList.className }\"\r\n    ng-show=\"(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false\">\r\n\r\n    <td class=\"checkboxCell\" ng-show=\"selectableRows\"\r\n        ng-include=\"\'/main/templates/cells/generateCheckboxCell.html\'\"></td>\r\n\r\n    <td class=\"column\"\r\n        ng-repeat=\"cellData in rowData.data track by $index\"\r\n        ng-if=\"!dataStorage.header[$index].columnSelectorFeature || dataStorage.header[$index].columnSelectorFeature.isVisible\"\r\n        mdt-add-align-class=\"dataStorage.header[$index].alignRule\"\r\n        style=\"position:relative;\"\r\n        ng-include src=\"\'/main/templates/cells/generateCell.html\'\">\r\n        <!-- generate cell content -->\r\n    </td>\r\n</tr>\r\n\r\n<tr ng-show=\"mdtPaginationHelper.isLoadError\"\r\n    ng-include src=\"\'/main/templates/rows/errorIndicator.html\'\"></tr>\r\n\r\n<tr ng-show=\"mdtPaginationHelper.isNoResults && !mdtPaginationHelper.isLoadError\"\r\n    ng-include src=\"\'/main/templates/rows/noResultIndicator.html\'\"></tr>\r\n");
-$templateCache.put("/main/templates/rows/generateRowsVirtualRepeat.html","<tr md-virtual-repeat=\"rowData in mdtPaginationHelper.getRows()\"\r\n    ng-class=\"{\'selectedRow\': rowData.optionList.selected}\"\r\n    ng-show=\"(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false\">\r\n\r\n    <td class=\"checkboxCell\" ng-show=\"selectableRows\"\r\n        ng-include=\"\'/main/templates/cells/generateCheckboxCell.html\'\"></td>\r\n\r\n    <td class=\"column\"\r\n        ng-repeat=\"cellData in rowData.data track by $index\"\r\n        mdt-add-align-class=\"dataStorage.header[$index].alignRule\"\r\n        style=\"position:relative;\"\r\n        ng-include src=\"\'/main/templates/cells/generateCell.html\'\">\r\n\r\n        <!-- generate cell content -->\r\n    </td>\r\n</tr>\r\n\r\n<tr ng-show=\"mdtPaginationHelper.isLoadError\"\r\n    ng-include src=\"\'/main/templates/rows/errorIndicator.html\'\"></tr>\r\n\r\n<tr ng-show=\"mdtPaginationHelper.isNoResults && !mdtPaginationHelper.isLoadError\"\r\n    ng-include src=\"\'/main/templates/rows/noResultIndicator.html\'\"></tr>\r\n");
-$templateCache.put("/main/templates/rows/noResultIndicator.html","<td colspan=\"999\" class=\"noResultMessage\">\r\n    <ng-bind-html ng-bind-html=\"mdtPaginationHelper.mdtRowPaginatorNoResultsMessage\"></ng-bind-html>\r\n</td>\r\n");}]);
\ No newline at end of file
+angular.module("mdtTemplates", []).run(["$templateCache", function($templateCache) {$templateCache.put("/main/templates/generateTable.html","<md-virtual-repeat-container class=\"md-virtual-repeat-container\" ng-if=\"virtualRepeat\">\n    <table cellpadding=\"0\" cellspacing=\"0\">\n        <thead mdt-generated-header-row></thead>\n        <tbody ng-include src=\"\'/main/templates/rows/generateRowsVirtualRepeat.html\'\"></tbody>\n    </table>\n</md-virtual-repeat-container>\n\n<table ng-if=\"!virtualRepeat\" cellpadding=\"0\" cellspacing=\"0\">\n    <thead mdt-generated-header-row></thead>\n    <tbody ng-include src=\"\'/main/templates/rows/generateRows.html\'\"></tbody>\n</table>\n");
+$templateCache.put("/main/templates/largeEditDialog.html","<md-dialog style=\"min-width: 300px;\" layout-padding>\n    <md-dialog-content style=\"margin-left:16px;margin-right:16px;\" layout-align=\"column\">\n        <form ng-submit=\"saveRow()\" name=\"editFieldForm\">\n            <h2>{{cellData.attributes.editableFieldTitle}}</h2>\n            <md-input-container md-no-float style=\"margin-bottom:0;width:100%\">\n\n                <!-- TODO getting placeholder -->\n                <input type=\"text\"\n                       ng-model=\"cellData.value\"\n                       placeholder=\"\"\n                       md-maxlength=\"{{cellData.attributes.editableFieldMaxLength}}\" />\n            </md-input-container>\n        </form>\n    </md-dialog-content>\n\n    <md-dialog-actions>\n        <md-button class=\"md-raised md-primary\" ng-click=\"saveRow()\">{{mdtTranslations.largeEditDialog.saveButtonLabel}}</md-button>\n        <md-button class=\"md-raised\" ng-click=\"cancel()\">{{mdtTranslations.largeEditDialog.cancelButtonLabel}}</md-button>\n    </md-dialog-actions>\n</md-dialog>\n");
+$templateCache.put("/main/templates/mdtAlternateHeaders.html","<div class=\"mdt-header-alternate\" layout=\"row\" layout-align=\"start center\">\n    <span class=\"alternate-text\" flex>{{getNumberOfSelectedRows()}} item selected</span>\n    <md-button class=\"md-icon-button md-primary\" ng-click=\"deleteSelectedRows()\" aria-label=\"Delete selected rows\">\n        <ng-md-icon icon=\"delete\" size=\"24\"></ng-md-icon>\n    </md-button>\n\n    <md-button class=\"md-icon-button md-primary\" aria-label=\"More options\">\n        <ng-md-icon icon=\"more_vert\" size=\"24\"></ng-md-icon>\n    </md-button>\n</div>");
+$templateCache.put("/main/templates/mdtCardFooter.html","<div class=\"mdt-footer\" layout=\"row\" ng-show=\"isPaginationEnabled()\">\n    <div class=\"mdt-pagination\"\n         layout=\"row\"\n         layout-align=\"end center\"\n         flex>\n\n        <span layout-margin>{{mdtTranslations.rowsPerPage}}</span>\n        <md-input-container>\n            <md-select ng-model=\"rowsPerPage\" aria-label=\"rows per page\">\n                <md-option ng-value=\"pageSize\" ng-repeat=\"pageSize in mdtPaginationHelper.rowsPerPageValues\">{{pageSize}}</md-option>\n            </md-select>\n        </md-input-container>\n\n        <span layout-margin>\n            <span ng-if=\"mdtPaginationHelper.getTotalRowsCount() != 0\" style=\"margin:0;\">{{mdtPaginationHelper.getStartRowIndex()+1}}-</span>{{mdtPaginationHelper.getEndRowIndex()+1}} of {{mdtPaginationHelper.getTotalRowsCount()}}\n        </span>\n\n        <md-button class=\"md-icon-button md-primary\" ng-class=\"{\'md-inactive\': !mdtPaginationHelper.hasPreviousPage()}\" aria-label=\"Previous page\" ng-click=\"mdtPaginationHelper.previousPage()\">\n            <ng-md-icon icon=\"keyboard_arrow_left\" size=\"24\"></ng-md-icon>\n        </md-button>\n\n        <md-button class=\"md-icon-button md-primary\" ng-class=\"{\'md-inactive\': !mdtPaginationHelper.hasNextPage()}\" aria-label=\"Next page\" ng-click=\"mdtPaginationHelper.nextPage()\">\n            <ng-md-icon icon=\"keyboard_arrow_right\" size=\"24\"></ng-md-icon>\n        </md-button>\n    </div>\n</div>");
+$templateCache.put("/main/templates/mdtCardHeader.html","<div class=\"mdt-header\" layout=\"row\" layout-align=\"start center\" ng-show=\"isTableCardEnabled\">\n    <span flex>{{tableCard.title}}</span>\n<!--\n    <md-button class=\"md-icon-button md-primary\" aria-label=\"Filter\">\n        <ng-md-icon icon=\"filter_list\" size=\"24\"></ng-md-icon>\n    </md-button>\n    <md-button class=\"md-icon-button md-primary\" aria-label=\"More options\">\n        <ng-md-icon icon=\"more_vert\" size=\"24\"></ng-md-icon>\n    </md-button>\n-->\n\n    <!-- columnSelectorFeature -->\n    <md-button class=\"md-icon-button md-primary mdt-column-chooser-button\"\n               aria-label=\"Choose columns\"\n               ng-if=\"::columnSelectorFeature.isEnabled\"\n               ng-click=\"handleColumnChooserButtonClick()\">\n        <ng-md-icon icon=\"settings\" size=\"24\"></ng-md-icon>\n    </md-button>\n\n    <mdt-column-selector ng-if=\"columnSelectorFeature.isEnabled && columnSelectorFeature.isActive\"></mdt-column-selector>\n</div>");
+$templateCache.put("/main/templates/mdtCheckboxColumnFilter.html","<div class=\"filter-dropdown\">\n    <div class=\"md-whiteframe-z2\">\n        <md-content class=\"md-body-1\">\n            <div layout=\"row\" layout-align=\"end center\" class=\"b-b p-smd md-caption\" ng-if=\"::headerRowData.columnSort.isEnabled\">\n                <a href=\"#\" ng-click=\"sortingCallback($event, sortingData)\">Sort A-Z <mdt-sorting-icons size=\"20\" data=\"sortingData\" class=\"p-l-sm\"></mdt-sorting-icons></a>\n            </div>\n\n            <div layout=\"row\" layout-align=\"start center\" class=\"selectall_clearall p-l-md p-t-md p-b-sm\">\n                <a href=\"#\" ng-click=\"selectAll($event)\" ng-class=\"{\'disabled\' : selectedItems.length === selectableItems.length}\">Select all</a> <span>-</span> <a href=\"#\" ng-class=\"{\'disabled\' : selectedItems.length === 0}\" ng-click=\"clearAll($event)\">Clear</a>\n\n                <div class=\"selected_items p-r-md\" flex ng-if=\"selectedItems.length\">{{selectedItems.length}} Selected</div>\n            </div>\n\n            <div layout=\"column\" class=\"p-b-n p-t-sm p-l-md p-r-md filter__scroll\">\n                <md-checkbox class=\"md-primary\"\n                             ng-repeat=\"item in selectableItems\"\n                             ng-checked=\"exists(item)\"\n                             ng-click=\"toggle(item)\">\n                    {{ transformChip(item) }}\n                </md-checkbox>\n            </div>\n\n            <div class=\"p-b-sm p-t-sm p-l-sm\" layout=\"row\" layout-align=\"start center\">\n                <md-button class=\"md-raised md-primary\" ng-click=\"confirmCallback({selectedItems: selectedItems, sortingData: sortingData, event: $event})\">Ok</md-button>\n                <md-button class=\"md-raised\" ng-click=\"cancelCallback({event: $event})\">Cancel</md-button>\n            </div>\n        </md-content>\n    </div>\n</div>\n");
+$templateCache.put("/main/templates/mdtChipsColumnFilter.html","<div class=\"filter-dropdown\">\n    <div class=\"md-whiteframe-z2\">\n        <md-content class=\"md-body-1\">\n            <div layout=\"row\" layout-align=\"end center\" class=\"b-b p-smd md-caption\" ng-if=\"::headerRowData.columnSort.isEnabled\">\n                <a href=\"#\" ng-click=\"sortingCallback($event, sortingData)\">Sort A-Z <mdt-sorting-icons size=\"20\" data=\"sortingData\" class=\"p-l-sm\"></mdt-sorting-icons></a>\n            </div>\n\n            <div class=\"p-md filter__scroll\">\n                <md-chips ng-model=\"selectedItems\"\n                          md-require-match=\"true\">\n\n                    <md-autocomplete md-delay=\"300\"\n                                     md-autofocus=\"true\"\n                                     md-search-text=\"searchText\"\n                                     md-items=\"item in headerRowData.columnFilter.valuesProviderCallback(searchText)\"\n                                     md-item-text=\"transformChip(item)\"\n                                     placeholder=\"{{placeholderText}}\">\n\n                        <span md-highlight-text=\"searchText\">{{transformChip(item)}}</span>\n\n                        <md-not-found>\n                            No results found.\n                        </md-not-found>\n                    </md-autocomplete>\n\n                    <md-chip-template>\n                        <span>\n                          <strong>{{transformChip($chip)}}</strong>\n                        </span>\n                    </md-chip-template>\n\n                </md-chips>\n            </div>\n\n            <div class=\"p-b-sm p-t-sm p-l-sm\" layout=\"row\" layout-align=\"start center\">\n                <md-button class=\"md-raised md-primary\" ng-click=\"confirmCallback({selectedItems: selectedItems, sortingData: sortingData, event: $event})\">Ok</md-button>\n                <md-button class=\"md-raised\" ng-click=\"cancelCallback({event: $event})\">Cancel</md-button>\n            </div>\n        </md-content>\n    </div>\n</div>\n");
+$templateCache.put("/main/templates/mdtColumnSelector.html","<!-- TODO: change classname -->\n<div class=\"mdt-column-selector\">\n    <div class=\"md-whiteframe-z2\">\n        <md-content class=\"md-body-1\">\n            <div class=\"md-subhead p-t-md p-l-md mdt-column-selector-title\" layout=\"row\">\n                Columns\n            </div>\n            <div layout=\"row\" layout-align=\"start center\" class=\"selectall_clearall p-l-md p-t-md p-b-sm\">\n                <a href=\"#\" ng-click=\"selectAll($event)\" ng-class=\"{\'disabled\' : isAllSelected()}\">Select all</a> <span>-</span> <a href=\"#\" ng-class=\"{\'disabled\' : isNothingSelected()}\" ng-click=\"clearAll($event)\">Clear</a>\n\n                <div class=\"selected_items p-r-md\" flex ng-if=\"selectedItems.length\">{{selectedItems.length}} Selected</div>\n            </div>\n\n            <div layout=\"column\" class=\"p-b-n p-t-sm p-l-md p-r-md filter__scroll\">\n                <md-checkbox class=\"md-primary mdt-checbox-column-items\"\n                             ng-if=\"item.isExcluded == false\"\n                             ng-repeat=\"item in headerRowsData\"\n                             ng-checked=\"checked(item)\"\n                             ng-click=\"toggle(item)\">\n                    {{item.columnName}}\n                </md-checkbox>\n            </div>\n\n            <div class=\"p-b-sm p-t-sm p-l-sm\" layout=\"row\" layout-align=\"start center\">\n                <md-button class=\"md-raised md-primary\" ng-click=\"confirmCallback({paginator: mdtPaginationHelper})\">Ok</md-button>\n                <md-button class=\"md-raised\" ng-click=\"cancelCallback()\">Cancel</md-button>\n            </div>\n        </md-content>\n    </div>\n</div>\n");
+$templateCache.put("/main/templates/mdtDropdownColumnFilter.html","<div class=\"filter-dropdown\">\n    <div class=\"md-whiteframe-z2\">\n        <md-content class=\"md-body-1\">\n            <div layout=\"row\" layout-align=\"end center\" class=\"b-b p-smd md-caption\" ng-if=\"::headerRowData.columnSort.isEnabled\">\n                <a href=\"#\" ng-click=\"sortingCallback($event, sortingData)\">Sort A-Z <mdt-sorting-icons size=\"20\" data=\"sortingData\" class=\"p-l-sm\"></mdt-sorting-icons></a>\n            </div>\n\n            <div class=\"p-md\">\n                <md-input-container class=\"md-block\" flex-gt-sm>\n                    <md-select ng-model=\"oneSelectedItem\" placeholder=\"{{placeholderText}}\" ng-change=\"selectedItem()\">\n                        <md-option ng-repeat=\"item in selectableItems\" value=\"{{transformChip(item)}}\">\n                            {{transformChip(item)}}\n                        </md-option>\n                    </md-select>\n                </md-input-container>\n            </div>\n\n            <div class=\"p-b-sm p-t-sm p-l-sm\" layout=\"row\" layout-align=\"start center\">\n                <md-button class=\"md-raised md-primary\" ng-click=\"confirmCallback({selectedItems: selectedItems, sortingData: sortingData, event: $event})\">Ok</md-button>\n                <md-button class=\"md-raised\" ng-click=\"cancelCallback({event: $event})\">Cancel</md-button>\n            </div>\n        </md-content>\n    </div>\n</div>\n");
+$templateCache.put("/main/templates/mdtGeneratedHeaderCellContent.html","<div class=\"p-r no-outline column-header-content\" ng-class=\"{\'clickable\': headerRowData.columnSort.isEnabled}\" ng-click=\"columnClickHandler()\">\n    <mdt-chips-column-filter\n        ng-if=\"headerRowData.columnFilter.isActive && headerRowData.columnFilter.type === \'chips\'\"\n        confirm-callback=\"columnFilterFeature.confirmFilterDialog\"\n        cancel-callback=\"columnFilterFeature.cancelFilterDialog(event)\"\n        header-row-data=\"headerRowData\">\n    </mdt-chips-column-filter>\n\n    <mdt-dropdown-column-filter\n        ng-if=\"headerRowData.columnFilter.isActive && headerRowData.columnFilter.type === \'dropdown\'\"\n        confirm-callback=\"columnFilterFeature.confirmFilterDialog\"\n        cancel-callback=\"columnFilterFeature.cancelFilterDialog(event)\"\n        header-row-data=\"headerRowData\">\n    </mdt-dropdown-column-filter>\n\n\n    <mdt-checkbox-column-filter\n        ng-if=\"headerRowData.columnFilter.isActive && headerRowData.columnFilter.type === \'checkbox\'\"\n        confirm-callback=\"columnFilterFeature.confirmFilterDialog\"\n        cancel-callback=\"columnFilterFeature.cancelFilterDialog(event)\"\n        header-row-data=\"headerRowData\">\n    </mdt-checkbox-column-filter>\n\n    <div ng-if=\"headerRowData.columnSort.isEnabled\">\n        <md-tooltip ng-show=\"headerRowData.columnDefinition\">{{headerRowData.columnDefinition}}</md-tooltip>\n\n        <mdt-sorting-icons size=\"16\" data=\"headerRowData\" ng-show=\"headerRowData.alignRule == \'right\' && !headerRowData.columnFilter.isEnabled\"></mdt-sorting-icons>\n\n        <span ng-include src=\"\'/main/templates/cells/generateCellValue.html\'\"></span>\n\n        <mdt-sorting-icons size=\"16\" data=\"headerRowData\" ng-show=\"headerRowData.alignRule == \'left\' && !headerRowData.columnFilter.isEnabled\"></mdt-sorting-icons>\n    </div>\n    <div ng-if=\"!headerRowData.columnSort.isEnabled\">\n        <md-tooltip ng-show=\"headerRowData.columnDefinition\">{{headerRowData.columnDefinition}}</md-tooltip>\n\n        <span ng-include src=\"\'/main/templates/cells/generateCellValue.html\'\" class=\"no-outline\"></span>\n    </div>\n</div>");
+$templateCache.put("/main/templates/mdtGeneratedHeaderRow.html","<tr class=\"theadTrRow\"\n    mdt-animate-sort-icon-handler>\n\n    <!-- TODO: fix text-align:left, in theory it should not be there to make it work -->\n    <th class=\"checkboxCell\"\n        style=\"text-align:left;\"\n        ng-show=\"selectableRows\"\n        mdt-select-all-rows-handler>\n\n        <md-checkbox aria-label=\"select all\" ng-model=\"selectAllRows\" ng-change=\"onCheckboxChange()\"></md-checkbox>\n    </th>\n\n    <th class=\"column\"\n        ng-repeat=\"headerRowData in dataStorage.header track by $index\"\n        ng-if=\"!headerRowData.columnSelectorFeature || headerRowData.columnSelectorFeature.isVisible\"\n\n        mdt-add-align-class=\"headerRowData.alignRule\"\n        ng-click=\"clickHandler($index, headerRowData)\"\n        md-ink-ripple=\"{{ rippleEffectCallback() }}\">\n\n        <mdt-generated-header-cell-content index=\"{{$index}}\"></mdt-generated-header-cell-content>\n    </th>\n</tr>\n");
+$templateCache.put("/main/templates/mdtTable.html","<md-content class=\"mdtTableContainer md-whiteframe-z1\" ng-cloak>\n    <!-- table card -->\n    <mdt-card-header ng-hide=\"alternateHeaders && dataStorage.isAnyRowSelected()\"></mdt-card-header>\n\n    <!-- alternate headers -->\n    <mdt-alternate-headers ng-show=\"alternateHeaders && dataStorage.isAnyRowSelected()\"></mdt-alternate-headers>\n    <!-- alternate headers end -->\n\n    <md-content class=\"mdtTable\" layout=\"column\">\n        <!-- parsing transcluded content in order to be executed -->\n        <div class=\"mdtTable-reader\" style=\"display:none;\"></div>\n\n        <md-progress-linear md-mode=\"indeterminate\" class=\"loading-indicator\" ng-class=\"{\'loading-is-active\': mdtPaginationHelper.isLoading}\"></md-progress-linear>\n\n        <ng-include src=\"\'/main/templates/generateTable.html\'\"></ng-include>\n    </md-content>\n\n    <!-- table card -->\n    <mdt-card-footer></mdt-card-footer>\n    <!-- table card end -->\n</md-content>\n\n<style ng-if=\"::mdtLoadingIndicator\">\n    md-progress-linear.loading-indicator .md-bar{\n        background: {{mdtLoadingIndicator[\'color\']}};\n    }\n</style>");
+$templateCache.put("/main/templates/smallEditDialog.html","<md-dialog aria-label=\"edit field modal\" layout-padding>\n    <md-dialog-content style=\"margin-left:16px;margin-right:16px;\">\n        <form ng-submit=\"saveRow()\" name=\"editFieldForm\">\n            <md-input-container md-no-float style=\"margin-bottom:0;width:100%;\">\n\n                <!-- TODO getting placeholder -->\n                <input type=\"text\"\n                       ng-model=\"cellData.value\"\n                       placeholder=\"\"\n                       md-maxlength=\"{{cellData.attributes.editableFieldMaxLength}}\" />\n            </md-input-container>\n        </form>\n    </md-dialog-content>\n</md-dialog>\n");
+$templateCache.put("/main/templates/cells/generateCell.html","<!-- editable field -->\n<ng-md-icon icon=\"edit\" size=\"16\"\n            style=\"cursor:pointer;float:right;height:16px;padding-left:5px;outline: none;\"\n            ng-if=\"cellData.attributes.editableField\"\n            ng-click=\"showEditDialog($event, cellData, rowData)\"></ng-md-icon>\n\n<span mdt-add-html-content-to-cell=\"cellData\"\n      style=\"cursor:pointer;outline: none;\"\n      ng-if=\"cellData.attributes.editableField\"\n      ng-click=\"showEditDialog($event, cellData, rowData)\"></span>\n\n<!-- non editable field -->\n<span mdt-add-html-content-to-cell=\"cellData\" ng-if=\"cellData.attributes.editableField == false\"></span>\n");
+$templateCache.put("/main/templates/cells/generateCellValue.html","<span ng-if=\"!headerRowData.columnFilter.isEnabled\">\n    {{headerRowData.columnName}}\n</span>\n\n<span ng-if=\"headerRowData.columnFilter.isEnabled\"\n      class=\"filter-select\"\n      ng-class=\"{\'is-active\': headerRowData.columnFilter.filtersApplied.length}\">\n     {{headerRowData.columnName}}\n     <ng-md-icon icon=\"arrow_drop_down\" size=\"24\"></ng-md-icon>\n</span>");
+$templateCache.put("/main/templates/cells/generateCheckboxCell.html","<md-checkbox aria-label=\"select\" ng-model=\"rowData.optionList.selected\" ng-change=\"onCheckboxChange()\"></md-checkbox>\n");
+$templateCache.put("/main/templates/cells/generateSortingIcons.html","<span class=\"hoverSortIcons\" ng-if=\"data.columnSort.sort == false\">\n    <ng-md-icon icon=\"arrow_forward\" size=\"{{size}}\"></ng-md-icon>\n</span>\n\n<span class=\"sortedColumn\" ng-if=\"data.columnSort.sort !== false\" ng-class=\"data.columnSort.sort === ColumnSortDirectionProvider.ASC ? \'ascending\' : \'descending\'\">\n    <ng-md-icon icon=\"arrow_forward\" size=\"{{size}}\"></ng-md-icon>\n</span>");
+$templateCache.put("/main/templates/rows/errorIndicator.html","<td colspan=\"999\" class=\"errorMessage\">\n    <ng-bind-html ng-bind-html=\"mdtPaginationHelper.mdtRowPaginatorErrorMessage\"></ng-bind-html>\n</td>\n");
+$templateCache.put("/main/templates/rows/generateRows.html","<tr class=\"tbodyTrRow\"\n    ng-repeat=\"rowData in mdtPaginationHelper.getRows() track by mdtPaginationHelper.trackBy(rowData, $index)\"\n    ng-class=\"{\'selectedRow\': rowData.optionList.selected, \'{{rowData.optionList.className}}\': rowData.optionList.className }\"\n    ng-show=\"(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false\">\n\n    <td class=\"checkboxCell\" ng-show=\"selectableRows\"\n        ng-include=\"\'/main/templates/cells/generateCheckboxCell.html\'\"></td>\n\n    <td class=\"column\"\n        ng-repeat=\"cellData in rowData.data track by $index\"\n        ng-if=\"!dataStorage.header[$index].columnSelectorFeature || dataStorage.header[$index].columnSelectorFeature.isVisible\"\n        mdt-add-align-class=\"dataStorage.header[$index].alignRule\"\n        style=\"position:relative;\"\n        ng-include src=\"\'/main/templates/cells/generateCell.html\'\">\n        <!-- generate cell content -->\n    </td>\n</tr>\n\n<tr ng-show=\"mdtPaginationHelper.isLoadError\"\n    ng-include src=\"\'/main/templates/rows/errorIndicator.html\'\"></tr>\n\n<tr ng-show=\"mdtPaginationHelper.isNoResults && !mdtPaginationHelper.isLoadError\"\n    ng-include src=\"\'/main/templates/rows/noResultIndicator.html\'\"></tr>\n");
+$templateCache.put("/main/templates/rows/generateRowsVirtualRepeat.html","<tr md-virtual-repeat=\"rowData in mdtPaginationHelper.getRows()\"\n    ng-class=\"{\'selectedRow\': rowData.optionList.selected}\"\n    ng-show=\"(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false\">\n\n    <td class=\"checkboxCell\" ng-show=\"selectableRows\"\n        ng-include=\"\'/main/templates/cells/generateCheckboxCell.html\'\"></td>\n\n    <td class=\"column\"\n        ng-repeat=\"cellData in rowData.data track by $index\"\n        mdt-add-align-class=\"dataStorage.header[$index].alignRule\"\n        style=\"position:relative;\"\n        ng-include src=\"\'/main/templates/cells/generateCell.html\'\">\n\n        <!-- generate cell content -->\n    </td>\n</tr>\n\n<tr ng-show=\"mdtPaginationHelper.isLoadError\"\n    ng-include src=\"\'/main/templates/rows/errorIndicator.html\'\"></tr>\n\n<tr ng-show=\"mdtPaginationHelper.isNoResults && !mdtPaginationHelper.isLoadError\"\n    ng-include src=\"\'/main/templates/rows/noResultIndicator.html\'\"></tr>\n");
+$templateCache.put("/main/templates/rows/noResultIndicator.html","<td colspan=\"999\" class=\"noResultMessage\">\n    <ng-bind-html ng-bind-html=\"mdtPaginationHelper.mdtRowPaginatorNoResultsMessage\"></ng-bind-html>\n</td>\n");}]);
\ No newline at end of file
diff --git a/dist/md-data-table.js b/dist/md-data-table.js
index e7cbf0d..4f3e384 100644
--- a/dist/md-data-table.js
+++ b/dist/md-data-table.js
@@ -238,6 +238,7 @@
                 tableCard: '=',
                 selectableRows: '=',
                 alternateHeaders: '=',
+                onInitTableCallback: '=',
                 deleteRowCallback: '&',
                 selectedRowCallback: '&',
                 saveRowCallback: '&',
@@ -332,6 +333,10 @@
                 _initEditCellFeature();
                 _initSelectableRowsFeature();
 
+                if ($scope.onInitTableCallback) {
+                    $scope.onInitTableCallback(ctrl, $scope);
+                }
+
                 PaginationFeature.startFeature(ctrl);
                 ColumnSelectorFeature.initFeatureHeaderValues($scope.dataStorage.header, ctrl.columnSelectorFeature);
 
@@ -394,6 +399,238 @@
         .directive('mdtTable', mdtTableDirective);
 }());
 
+(function(){
+    'use strict';
+
+    PaginationFeature.$inject = ['mdtPaginationHelperFactory', 'mdtAjaxPaginationHelperFactory'];
+    function PaginationFeature(mdtPaginationHelperFactory, mdtAjaxPaginationHelperFactory){
+        var service = this;
+
+        service.initFeature = initFeature;
+        service.startFeature = startFeature;
+
+        function initFeature(scope, ctrl){
+            if(!scope.mdtRowPaginator){
+                ctrl.mdtPaginationHelper = scope.mdtPaginationHelper = mdtPaginationHelperFactory
+                    .getInstance(ctrl.dataStorage, scope.paginatedRows, scope.mdtRow);
+            }else{
+                ctrl.mdtPaginationHelper = scope.mdtPaginationHelper = mdtAjaxPaginationHelperFactory.getInstance({
+                    dataStorage: ctrl.dataStorage,
+                    paginationSetting: scope.paginatedRows,
+                    mdtRowOptions: scope.mdtRow,
+                    mdtRowPaginatorFunction: scope.mdtRowPaginator,
+                    mdtRowPaginatorErrorMessage: scope.mdtRowPaginatorErrorMessage,
+                    mdtRowPaginatorNoResultsMessage: scope.mdtRowPaginatorNoResultsMessage,
+                    mdtTriggerRequest: scope.mdtTriggerRequest
+                });
+            }
+
+            scope.isPaginationEnabled = function(){
+                if(scope.paginatedRows === true ||
+                    (scope.paginatedRows && scope.paginatedRows.hasOwnProperty('isEnabled') && scope.paginatedRows.isEnabled === true)){
+                    return true;
+                }
+
+                return false;
+            };
+
+            ctrl.paginationFeature = {
+                startPaginationFeature: function() {
+                    if (scope.mdtRowPaginator) {
+                        scope.mdtPaginationHelper.fetchPage(1);
+                    }
+                }
+            };
+        }
+
+        function startFeature(ctrl){
+            ctrl.paginationFeature.startPaginationFeature();
+        }
+    }
+
+    angular
+        .module('mdDataTable')
+        .service('PaginationFeature', PaginationFeature);
+}());
+(function(){
+    'use strict';
+
+    SelectableRowsFeatureFactory.$inject = ['$timeout'];
+    function SelectableRowsFeatureFactory($timeout){
+
+        function SelectableRowsFeature(params){
+            this.$scope = params.$scope;
+            this.ctrl = params.ctrl;
+
+            this.$scope.onCheckboxChange = _.bind(this.onCheckboxChange, this);
+        }
+
+        SelectableRowsFeature.prototype.onCheckboxChange = function(){
+            var that = this;
+            // we need to push it to the event loop to make it happen last
+            // (e.g.: all the elements can be selected before we call the callback)
+            $timeout(function(){
+                that.$scope.selectedRowCallback({
+                    rows: that.ctrl.dataStorage.getSelectedRows()
+                });
+            },0);
+        };
+
+        return {
+            getInstance: function(params){
+                return new SelectableRowsFeature(params);
+            }
+        };
+    }
+
+    angular
+        .module('mdDataTable')
+        .service('SelectableRowsFeature', SelectableRowsFeatureFactory);
+}());
+(function(){
+    'use strict';
+
+    TableDataStorageFactory.$inject = ['$log', '_'];
+    function TableDataStorageFactory($log, _){
+
+        function TableDataStorageService(){
+            this.storage = [];
+            this.header = [];
+            this.customCells = {};
+        }
+
+        TableDataStorageService.prototype.addHeaderCellData = function(ops){
+            this.header.push(ops);
+        };
+
+        TableDataStorageService.prototype.addRowData = function(explicitRowId, rowArray, className){
+            if(!(rowArray instanceof Array)){
+                $log.error('`rowArray` parameter should be array');
+                return;
+            }
+
+            this.storage.push({
+                rowId: explicitRowId,
+                optionList: {
+                    selected: false,
+                    deleted: false,
+                    visible: true,
+                    className: className || false
+                },
+                data: rowArray
+            });
+        };
+
+        TableDataStorageService.prototype.getRowData = function(index){
+            if(!this.storage[index]){
+                $log.error('row is not exists at index: '+index);
+                return;
+            }
+
+            return this.storage[index].data;
+        };
+
+        TableDataStorageService.prototype.getRowOptions = function(index){
+            if(!this.storage[index]){
+                $log.error('row is not exists at index: '+index);
+                return;
+            }
+
+            return this.storage[index].optionList;
+        };
+
+        TableDataStorageService.prototype.setAllRowsSelected = function(isSelected, isPaginationEnabled){
+            if(typeof isSelected === 'undefined'){
+                $log.error('`isSelected` parameter is required');
+                return;
+            }
+
+            _.each(this.storage, function(rowData){
+                if(isPaginationEnabled) {
+                    if (rowData.optionList.visible) {
+                        rowData.optionList.selected = isSelected ? true : false;
+                    }
+                }else{
+                    rowData.optionList.selected = isSelected ? true : false;
+                }
+            });
+        };
+
+        TableDataStorageService.prototype.isAnyRowSelected = function(){
+            return _.some(this.storage, function(rowData){
+                return rowData.optionList.selected === true && rowData.optionList.deleted === false;
+            });
+        };
+
+        TableDataStorageService.prototype.getNumberOfSelectedRows = function(){
+            var res = _.countBy(this.storage, function(rowData){
+                return rowData.optionList.selected === true && rowData.optionList.deleted === false ? 'selected' : 'unselected';
+            });
+
+            return res.selected ? res.selected : 0;
+        };
+
+        TableDataStorageService.prototype.deleteSelectedRows = function(){
+            var deletedRows = [];
+
+            _.each(this.storage, function(rowData){
+                if(rowData.optionList.selected && rowData.optionList.deleted === false){
+
+                    if(rowData.rowId){
+                        deletedRows.push(rowData.rowId);
+
+                    //Fallback when no id was specified
+                    } else{
+                        deletedRows.push(rowData.data);
+                    }
+
+                    rowData.optionList.deleted = true;
+                }
+            });
+
+            return deletedRows;
+        };
+
+        TableDataStorageService.prototype.getSelectedRows = function(){
+            var selectedRows = [];
+
+            _.each(this.storage, function(rowData){
+                if(rowData.optionList.selected && rowData.optionList.deleted === false){
+
+                    if(rowData.rowId){
+                        selectedRows.push(rowData.rowId);
+
+                    //Fallback when no id was specified
+                    } else{
+                        selectedRows.push(rowData.data);
+                    }
+                }
+            });
+
+            return selectedRows;
+        };
+
+        TableDataStorageService.prototype.getSavedRowData = function(rowData){
+            var rawRowData = [];
+
+            _.each(rowData.data, function(aCell){
+                rawRowData.push(aCell.value);
+            });
+
+            return rawRowData;
+        };
+
+        return {
+            getInstance: function(){
+                return new TableDataStorageService();
+            }
+        };
+    }
+
+    angular
+        .module('mdDataTable')
+        .factory('TableDataStorageFactory', TableDataStorageFactory);
+}());
 (function(){
     'use strict';
 
@@ -455,6 +692,10 @@
             return this.totalResultCount;
         };
 
+        mdtAjaxPaginationHelper.prototype.trackBy = function(item, $index) {
+            return item.rowId || $index;
+        };   
+
         mdtAjaxPaginationHelper.prototype.getRows = function(){
             return this.dataStorage.storage;
         };
@@ -491,7 +732,7 @@
             return this.page > 1;
         };
 
-        mdtAjaxPaginationHelper.prototype.fetchPage = function(page){
+        mdtAjaxPaginationHelper.prototype.fetchPage = function(page, allowChangePage){
             this.isLoading = true;
 
             var that = this;
@@ -517,6 +758,9 @@
                     that.isLoadError = false;
                     that.isLoading = false;
 
+                    if (allowChangePage) {
+                        that.page = page;
+                    }
                 }, function(){
                     that.dataStorage.storage = [];
 
@@ -593,8 +837,9 @@
     mdtPaginationHelperFactory.$inject = ['PaginatorTypeProvider', '_'];
     function mdtPaginationHelperFactory(PaginatorTypeProvider, _){
 
-        function mdtPaginationHelper(dataStorage, paginationSetting){
+        function mdtPaginationHelper(dataStorage, paginationSetting, rowOptions){
             this.paginatorType = PaginatorTypeProvider.ARRAY;
+            this.rowOptions = rowOptions;
 
             this.dataStorage = dataStorage;
 
@@ -641,6 +886,10 @@
             return this.dataStorage.storage.length;
         };
 
+        mdtPaginationHelper.prototype.trackBy = function(item, $index) {
+            return item.rowId || $index;
+        };
+
         mdtPaginationHelper.prototype.getRows = function(){
             this.calculateVisibleRows();
 
@@ -675,8 +924,8 @@
         };
 
         return {
-            getInstance: function(dataStorage, isEnabled){
-                return new mdtPaginationHelper(dataStorage, isEnabled);
+            getInstance: function(dataStorage, isEnabled, rowOptions){
+                return new mdtPaginationHelper(dataStorage, isEnabled, rowOptions);
             }
         };
     }
@@ -688,238 +937,6 @@
 (function(){
     'use strict';
 
-    TableDataStorageFactory.$inject = ['$log', '_'];
-    function TableDataStorageFactory($log, _){
-
-        function TableDataStorageService(){
-            this.storage = [];
-            this.header = [];
-            this.customCells = {};
-        }
-
-        TableDataStorageService.prototype.addHeaderCellData = function(ops){
-            this.header.push(ops);
-        };
-
-        TableDataStorageService.prototype.addRowData = function(explicitRowId, rowArray, className){
-            if(!(rowArray instanceof Array)){
-                $log.error('`rowArray` parameter should be array');
-                return;
-            }
-
-            this.storage.push({
-                rowId: explicitRowId,
-                optionList: {
-                    selected: false,
-                    deleted: false,
-                    visible: true,
-                    className: className || false
-                },
-                data: rowArray
-            });
-        };
-
-        TableDataStorageService.prototype.getRowData = function(index){
-            if(!this.storage[index]){
-                $log.error('row is not exists at index: '+index);
-                return;
-            }
-
-            return this.storage[index].data;
-        };
-
-        TableDataStorageService.prototype.getRowOptions = function(index){
-            if(!this.storage[index]){
-                $log.error('row is not exists at index: '+index);
-                return;
-            }
-
-            return this.storage[index].optionList;
-        };
-
-        TableDataStorageService.prototype.setAllRowsSelected = function(isSelected, isPaginationEnabled){
-            if(typeof isSelected === 'undefined'){
-                $log.error('`isSelected` parameter is required');
-                return;
-            }
-
-            _.each(this.storage, function(rowData){
-                if(isPaginationEnabled) {
-                    if (rowData.optionList.visible) {
-                        rowData.optionList.selected = isSelected ? true : false;
-                    }
-                }else{
-                    rowData.optionList.selected = isSelected ? true : false;
-                }
-            });
-        };
-
-        TableDataStorageService.prototype.isAnyRowSelected = function(){
-            return _.some(this.storage, function(rowData){
-                return rowData.optionList.selected === true && rowData.optionList.deleted === false;
-            });
-        };
-
-        TableDataStorageService.prototype.getNumberOfSelectedRows = function(){
-            var res = _.countBy(this.storage, function(rowData){
-                return rowData.optionList.selected === true && rowData.optionList.deleted === false ? 'selected' : 'unselected';
-            });
-
-            return res.selected ? res.selected : 0;
-        };
-
-        TableDataStorageService.prototype.deleteSelectedRows = function(){
-            var deletedRows = [];
-
-            _.each(this.storage, function(rowData){
-                if(rowData.optionList.selected && rowData.optionList.deleted === false){
-
-                    if(rowData.rowId){
-                        deletedRows.push(rowData.rowId);
-
-                    //Fallback when no id was specified
-                    } else{
-                        deletedRows.push(rowData.data);
-                    }
-
-                    rowData.optionList.deleted = true;
-                }
-            });
-
-            return deletedRows;
-        };
-
-        TableDataStorageService.prototype.getSelectedRows = function(){
-            var selectedRows = [];
-
-            _.each(this.storage, function(rowData){
-                if(rowData.optionList.selected && rowData.optionList.deleted === false){
-
-                    if(rowData.rowId){
-                        selectedRows.push(rowData.rowId);
-
-                    //Fallback when no id was specified
-                    } else{
-                        selectedRows.push(rowData.data);
-                    }
-                }
-            });
-
-            return selectedRows;
-        };
-
-        TableDataStorageService.prototype.getSavedRowData = function(rowData){
-            var rawRowData = [];
-
-            _.each(rowData.data, function(aCell){
-                rawRowData.push(aCell.value);
-            });
-
-            return rawRowData;
-        };
-
-        return {
-            getInstance: function(){
-                return new TableDataStorageService();
-            }
-        };
-    }
-
-    angular
-        .module('mdDataTable')
-        .factory('TableDataStorageFactory', TableDataStorageFactory);
-}());
-(function(){
-    'use strict';
-
-    PaginationFeature.$inject = ['mdtPaginationHelperFactory', 'mdtAjaxPaginationHelperFactory'];
-    function PaginationFeature(mdtPaginationHelperFactory, mdtAjaxPaginationHelperFactory){
-        var service = this;
-
-        service.initFeature = initFeature;
-        service.startFeature = startFeature;
-
-        function initFeature(scope, ctrl){
-            if(!scope.mdtRowPaginator){
-                ctrl.mdtPaginationHelper = scope.mdtPaginationHelper = mdtPaginationHelperFactory
-                    .getInstance(ctrl.dataStorage, scope.paginatedRows, scope.mdtRow);
-            }else{
-                ctrl.mdtPaginationHelper = scope.mdtPaginationHelper = mdtAjaxPaginationHelperFactory.getInstance({
-                    dataStorage: ctrl.dataStorage,
-                    paginationSetting: scope.paginatedRows,
-                    mdtRowOptions: scope.mdtRow,
-                    mdtRowPaginatorFunction: scope.mdtRowPaginator,
-                    mdtRowPaginatorErrorMessage: scope.mdtRowPaginatorErrorMessage,
-                    mdtRowPaginatorNoResultsMessage: scope.mdtRowPaginatorNoResultsMessage,
-                    mdtTriggerRequest: scope.mdtTriggerRequest
-                });
-            }
-
-            scope.isPaginationEnabled = function(){
-                if(scope.paginatedRows === true ||
-                    (scope.paginatedRows && scope.paginatedRows.hasOwnProperty('isEnabled') && scope.paginatedRows.isEnabled === true)){
-                    return true;
-                }
-
-                return false;
-            };
-
-            ctrl.paginationFeature = {
-                startPaginationFeature: function() {
-                    if (scope.mdtRowPaginator) {
-                        scope.mdtPaginationHelper.fetchPage(1);
-                    }
-                }
-            };
-        }
-
-        function startFeature(ctrl){
-            ctrl.paginationFeature.startPaginationFeature();
-        }
-    }
-
-    angular
-        .module('mdDataTable')
-        .service('PaginationFeature', PaginationFeature);
-}());
-(function(){
-    'use strict';
-
-    SelectableRowsFeatureFactory.$inject = ['$timeout'];
-    function SelectableRowsFeatureFactory($timeout){
-
-        function SelectableRowsFeature(params){
-            this.$scope = params.$scope;
-            this.ctrl = params.ctrl;
-
-            this.$scope.onCheckboxChange = _.bind(this.onCheckboxChange, this);
-        }
-
-        SelectableRowsFeature.prototype.onCheckboxChange = function(){
-            var that = this;
-            // we need to push it to the event loop to make it happen last
-            // (e.g.: all the elements can be selected before we call the callback)
-            $timeout(function(){
-                that.$scope.selectedRowCallback({
-                    rows: that.ctrl.dataStorage.getSelectedRows()
-                });
-            },0);
-        };
-
-        return {
-            getInstance: function(params){
-                return new SelectableRowsFeature(params);
-            }
-        };
-    }
-
-    angular
-        .module('mdDataTable')
-        .service('SelectableRowsFeature', SelectableRowsFeatureFactory);
-}());
-(function(){
-    'use strict';
-
     ColumnAlignmentHelper.$inject = ['ColumnOptionProvider'];
     function ColumnAlignmentHelper(ColumnOptionProvider){
         var service = this;
diff --git a/package.json b/package.json
index 2bf1455..8e794b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-data-table",
-  "version": "2.2.0",
+  "version": "2.2.7",
   "author": "Istvan Fodor <programtervezo@gmail.com>",
   "registry": "github",
   "repository": {