diff --git a/README.md b/README.md
index 388cd13..c287e86 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,7 @@ http://www.google.com/design/spec/components/data-tables.html
  - virtual-repeat
  - delete-row-callback
  - selected-row-callback
+ - clicked-row-callback
  - animate-sort-icon
  - ripple-effect
  - ! title-overflow-handler
@@ -89,6 +90,7 @@ http://www.google.com/design/spec/components/data-tables.html
 |:white_check_mark:| virtual-repeat                                 | Boolean       | optional, when set, virtual scrolling will be applied to the table. You must set a fixed height to the `.md-virtual-repeat-container` class in order to make it work properly. Since virtual scrolling is working with fixed height. |
 |:white_check_mark:| delete-row-callback                            | Function      | optional, callback function when deleting rows. The callback will be called with the array of the deleted row ids. Don't forget to specify `table-row-id` for `mdt-row`. If you do, it will return the deleted rows data. |
 |:white_check_mark:| selected-row-callback                          | Function      | optional, callback function when selecting rows. The callback will be called with the array of the selected row ids. Don't forget to specify `table-row-id` for `mdt-row`. If you do, it will return the selected rows data. |
+|:white_check_mark:| clicked-row-callback                           | Function      | optional, callback function when clicked rows. The callback will be called when the row is clicked. Don't forget to specify `table-row-id` for `mdt-row`. |
 ![alt tag](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3mOPoJlxiFhcWNyQl9xYmRkQnc/components_datatables_interaction_selectedrow.png)
 
 | Available        | Params                                         | Type          | Details       |
diff --git a/app/modules/main/directives/mdtTableDirective.js b/app/modules/main/directives/mdtTableDirective.js
index 64c0857..665c57d 100644
--- a/app/modules/main/directives/mdtTableDirective.js
+++ b/app/modules/main/directives/mdtTableDirective.js
@@ -116,6 +116,7 @@
     function mdtTableDirective(TableDataStorageFactory,
                                EditCellFeature,
                                SelectableRowsFeature,
+                               ClickableRowsFeature,
                                PaginationFeature,
                                ColumnSelectorFeature,
                                _){
@@ -128,7 +129,7 @@
                 selectableRows: '=',
                 alternateHeaders: '=',
                 deleteRowCallback: '&',
-                selectedRowCallback: '&',
+                clickedRowCallback: '&',
                 saveRowCallback: '&',
                 animateSortIcon: '=',
                 rippleEffect: '=',
@@ -220,6 +221,7 @@
 
                 _initEditCellFeature();
                 _initSelectableRowsFeature();
+                _initClickableRowsFeature();
 
                 PaginationFeature.startFeature(ctrl);
                 ColumnSelectorFeature.initFeatureHeaderValues($scope.dataStorage.header, ctrl.columnSelectorFeature);
@@ -274,6 +276,12 @@
                         ctrl: ctrl
                     });
                 }
+                function _initClickableRowsFeature(){
+                    ClickableRowsFeature.getInstance({
+                        $scope: $scope,
+                        ctrl: ctrl
+                    });
+                }
             }
         };
     }
diff --git a/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js b/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js
index 1bd3a92..051a60b 100644
--- a/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js
+++ b/app/modules/main/factories/mdtAjaxPaginationHelperFactory.js
@@ -47,7 +47,7 @@
         mdtAjaxPaginationHelper.prototype.getEndRowIndex = function(){
             var lastItem = this.getStartRowIndex() + this.rowsPerPage - 1;
 
-            if(this.totalResultCount < lastItem){
+            if((this.totalResultCount - 1) < lastItem){
                 return this.totalResultCount - 1;
             }
 
@@ -66,7 +66,6 @@
             var that = this;
             if(this.hasPreviousPage()){
                 this.fetchPage(this.page-1).then(function(){
-                    that.page--;
                 });
             }
         };
@@ -75,15 +74,12 @@
             var that = this;
             if(this.hasNextPage()){
                 this.fetchPage(this.page+1).then(function(){
-                    that.page++;
                 });
             }
         };
 
         mdtAjaxPaginationHelper.prototype.getFirstPage = function(){
-            this.page = 1;
-
-            this.fetchPage(this.page);
+            this.fetchPage(1);
         };
 
         mdtAjaxPaginationHelper.prototype.hasNextPage = function(){
@@ -95,6 +91,11 @@
         };
 
         mdtAjaxPaginationHelper.prototype.fetchPage = function(page){
+            if (page) {
+                this.page = page;
+            } else {
+                page = this.page;
+            }
             this.isLoading = true;
 
             var that = this;
diff --git a/app/modules/main/factories/mdtPaginationHelperFactory.js b/app/modules/main/factories/mdtPaginationHelperFactory.js
index dfc0d6a..7600a61 100644
--- a/app/modules/main/factories/mdtPaginationHelperFactory.js
+++ b/app/modules/main/factories/mdtPaginationHelperFactory.js
@@ -40,7 +40,7 @@
         mdtPaginationHelper.prototype.getEndRowIndex = function(){
             var lastItem = this.getStartRowIndex() + this.rowsPerPage-1;
 
-            if(this.dataStorage.storage.length < lastItem){
+            if((this.dataStorage.storage.length - 1) < lastItem){
                 return this.dataStorage.storage.length - 1;
             }
 
diff --git a/app/modules/main/features/ClickableRowsFeature.js b/app/modules/main/features/ClickableRowsFeature.js
new file mode 100644
index 0000000..95780a8
--- /dev/null
+++ b/app/modules/main/features/ClickableRowsFeature.js
@@ -0,0 +1,32 @@
+(function () {
+    'use strict';
+
+    function ClickableRowsFeatureFactory($timeout) {
+
+        function ClickableRowsFeature(params) {
+            this.$scope = params.$scope;
+            this.ctrl = params.ctrl;
+
+            this.$scope.rowClickCallBackHandler = _.bind(this.rowClickCallBackHandler, this);
+        }
+
+        ClickableRowsFeature.prototype.rowClickCallBackHandler = function (event, row) {
+            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.clickedRowCallback({rowId: row.rowId});
+            }, 0);
+        };
+
+        return {
+            getInstance: function (params) {
+                return new ClickableRowsFeature(params);
+            }
+        };
+    }
+
+    angular
+        .module('mdDataTable')
+        .service('ClickableRowsFeature', ClickableRowsFeatureFactory);
+}());
\ No newline at end of file
diff --git a/app/modules/main/templates/rows/generateRows.html b/app/modules/main/templates/rows/generateRows.html
index f194732..50732d8 100644
--- a/app/modules/main/templates/rows/generateRows.html
+++ b/app/modules/main/templates/rows/generateRows.html
@@ -1,7 +1,8 @@
 <tr class="tbodyTrRow"
     ng-repeat="rowData in mdtPaginationHelper.getRows() track by $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">
+    ng-show="(isPaginationEnabled() === false || rowData.optionList.visible === true) && rowData.optionList.deleted === false"
+    ng-click="rowClickCallBackHandler($event, rowData)">
 
     <td class="checkboxCell" ng-show="selectableRows"
         ng-include="'/main/templates/cells/generateCheckboxCell.html'"></td>
diff --git a/dist/md-data-table-templates.js b/dist/md-data-table-templates.js
index 213a0f7..9eead10 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 $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    ng-click=\"rowClickCallBackHandler($event, rowData)\">\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..1d40c47 100644
--- a/dist/md-data-table.js
+++ b/dist/md-data-table.js
@@ -223,10 +223,11 @@
      *     </mdt-table>
      * </pre>
      */
-    mdtTableDirective.$inject = ['TableDataStorageFactory', 'EditCellFeature', 'SelectableRowsFeature', 'PaginationFeature', 'ColumnSelectorFeature', '_'];
+    mdtTableDirective.$inject = ['TableDataStorageFactory', 'EditCellFeature', 'SelectableRowsFeature', 'ClickableRowsFeature', 'PaginationFeature', 'ColumnSelectorFeature', '_'];
     function mdtTableDirective(TableDataStorageFactory,
                                EditCellFeature,
                                SelectableRowsFeature,
+                               ClickableRowsFeature,
                                PaginationFeature,
                                ColumnSelectorFeature,
                                _){
@@ -239,7 +240,7 @@
                 selectableRows: '=',
                 alternateHeaders: '=',
                 deleteRowCallback: '&',
-                selectedRowCallback: '&',
+                clickedRowCallback: '&',
                 saveRowCallback: '&',
                 animateSortIcon: '=',
                 rippleEffect: '=',
@@ -331,6 +332,7 @@
 
                 _initEditCellFeature();
                 _initSelectableRowsFeature();
+                _initClickableRowsFeature();
 
                 PaginationFeature.startFeature(ctrl);
                 ColumnSelectorFeature.initFeatureHeaderValues($scope.dataStorage.header, ctrl.columnSelectorFeature);
@@ -385,6 +387,12 @@
                         ctrl: ctrl
                     });
                 }
+                function _initClickableRowsFeature(){
+                    ClickableRowsFeature.getInstance({
+                        $scope: $scope,
+                        ctrl: ctrl
+                    });
+                }
             }
         };
     }
@@ -394,6 +402,150 @@
         .directive('mdtTable', mdtTableDirective);
 }());
 
+(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';
 
@@ -444,7 +596,7 @@
         mdtAjaxPaginationHelper.prototype.getEndRowIndex = function(){
             var lastItem = this.getStartRowIndex() + this.rowsPerPage - 1;
 
-            if(this.totalResultCount < lastItem){
+            if((this.totalResultCount - 1) < lastItem){
                 return this.totalResultCount - 1;
             }
 
@@ -463,7 +615,6 @@
             var that = this;
             if(this.hasPreviousPage()){
                 this.fetchPage(this.page-1).then(function(){
-                    that.page--;
                 });
             }
         };
@@ -472,15 +623,12 @@
             var that = this;
             if(this.hasNextPage()){
                 this.fetchPage(this.page+1).then(function(){
-                    that.page++;
                 });
             }
         };
 
         mdtAjaxPaginationHelper.prototype.getFirstPage = function(){
-            this.page = 1;
-
-            this.fetchPage(this.page);
+            this.fetchPage(1);
         };
 
         mdtAjaxPaginationHelper.prototype.hasNextPage = function(){
@@ -492,6 +640,11 @@
         };
 
         mdtAjaxPaginationHelper.prototype.fetchPage = function(page){
+            if (page) {
+                this.page = page;
+            } else {
+                page = this.page;
+            }
             this.isLoading = true;
 
             var that = this;
@@ -630,7 +783,7 @@
         mdtPaginationHelper.prototype.getEndRowIndex = function(){
             var lastItem = this.getStartRowIndex() + this.rowsPerPage-1;
 
-            if(this.dataStorage.storage.length < lastItem){
+            if((this.dataStorage.storage.length - 1) < lastItem){
                 return this.dataStorage.storage.length - 1;
             }
 
@@ -685,149 +838,38 @@
         .module('mdDataTable')
         .service('mdtPaginationHelperFactory', mdtPaginationHelperFactory);
 }());
-(function(){
+(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;
-            }
+    ClickableRowsFeatureFactory.$inject = ['$timeout'];
+    function ClickableRowsFeatureFactory($timeout) {
 
-            _.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 = [];
+        function ClickableRowsFeature(params) {
+            this.$scope = params.$scope;
+            this.ctrl = params.ctrl;
 
-            _.each(rowData.data, function(aCell){
-                rawRowData.push(aCell.value);
-            });
+            this.$scope.rowClickCallBackHandler = _.bind(this.rowClickCallBackHandler, this);
+        }
 
-            return rawRowData;
+        ClickableRowsFeature.prototype.rowClickCallBackHandler = function (event, row) {
+            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.clickedRowCallback({rowId: row.rowId});
+            }, 0);
         };
 
         return {
-            getInstance: function(){
-                return new TableDataStorageService();
+            getInstance: function (params) {
+                return new ClickableRowsFeature(params);
             }
         };
     }
 
     angular
         .module('mdDataTable')
-        .factory('TableDataStorageFactory', TableDataStorageFactory);
+        .service('ClickableRowsFeature', ClickableRowsFeatureFactory);
 }());
 (function(){
     'use strict';
@@ -892,7 +934,7 @@
             this.$scope = params.$scope;
             this.ctrl = params.ctrl;
 
-            this.$scope.onCheckboxChange = _.bind(this.onCheckboxChange, this);
+            this.$scope.onRowClicked = _.bind(this.onCheckboxChange, this);
         }
 
         SelectableRowsFeature.prototype.onCheckboxChange = function(){