Added total rows and a message for no results

front/core/components/smart-table/index.html

@@ -1,5 +1,5 @@
 <div class="vn-pa-md">
-    <vn-horizontal>
+    <vn-horizontal class="actions">
         <div class="actions-left">
             <vn-button icon="view_column"
                 ng-if="$ctrl.options.activeButtons.shownColumns"
@@ -7,6 +7,13 @@
                 vn-tooltip="Shown columns">
             </vn-button>
             <div ng-transclude="actions"></div> <!-- transcluded actions -->
+            <div class="totalRows" ng-if="$ctrl.model.data"> 
+                < 
+                <span translate>Showing</span>
+                {{model.data.length}} 
+                <span translate>rows</span> 
+                >
+            </div>
         </div>
         <div class="actions-right">
             <vn-button icon="search"

front/core/components/smart-table/index.js

@@ -13,6 +13,8 @@ export default class SmartTable extends Component {
         this.sortCriteria = [];
         this.columns = [];
         this.autoSave = false;
+
+        this.transclude();
     }
 
     get options() {
@@ -37,7 +39,6 @@ export default class SmartTable extends Component {
         this._model = value;
         if (value) {
             this.$.model = value;
-            this.transclude();
         }
     }
 
@@ -95,6 +96,34 @@ export default class SmartTable extends Component {
         return null;
     }
 
+    transclude() {
+        const slotTable = this.element.querySelector('#table');
+        this.$transclude(($clone, $scope) => {
+            const table = $clone[0];
+            slotTable.appendChild(table);
+            this.registerColumns();
+
+            const header = this.element.querySelector('thead > tr');
+            const columns = header.querySelectorAll('th');
+            const tbody = this.element.querySelector('tbody');
+            if (tbody) {
+                const noSearch = this.$compile(`
+                    <tr ng-if="!model.data">
+                        <td class="empty-rows" colspan="${columns.length}" translate>Enter a new search</td>
+                    </tr>
+                `)($scope);
+                tbody.appendChild(noSearch[0]);
+
+                const noRows = this.$compile(`
+                    <tr ng-if="model.data.length == 0">
+                        <td class="empty-rows" colspan="${columns.length}" translate>No data</td>
+                    </tr>
+                `)($scope);
+                tbody.appendChild(noRows[0]);
+            }
+        }, null, 'table');
+    }
+
     saveViewConfig() {
         const userViewModel = this.$.userViewModel;
         const [viewConfig] = userViewModel.data;
@@ -155,17 +184,6 @@ export default class SmartTable extends Component {
         }
     }
 
-    // Creo que se puede hacer directamente desde ng-transclude
-    transclude() {
-        const slotTable = this.element.querySelector('#table');
-        this.$transclude(($clone, $scope) => {
-            const table = $clone[0];
-            $scope.hasChanges = this.hasChanges;
-            slotTable.appendChild(table);
-            this.registerColumns();
-        }, null, 'table');
-    }
-
     orderHandler(element) {
         const field = element.getAttribute('field');
         const existingCriteria = this.sortCriteria.find(criteria => {

front/core/components/smart-table/locale/es.yml

@@ -3,4 +3,6 @@ Add new row: Añadir nueva fila
 Undo: Deshacer
 Save data: Guardar datos
 Shown columns: Columnas visibles
-Check the columns you want to see: Marca las columnas que quieres ver
+Check the columns you want to see: Marca las columnas que quieres ver
+Showing: Mostrando
+rows: filas

front/core/components/smart-table/style.scss

@@ -38,9 +38,14 @@ smart-table {
         @extend %clickable;
     }
 
+    .totalRows {
+        color: $color-font-secondary;
+    }
+
     .actions-left, 
     .actions-right {
         display: flex;
+        align-items: center;
 
         .button-group {
             display: flex;