feat(data-table): remove custom message for no results & show columns…

… when empty. (closes #421) (closes #444) (#426) * way to display custom msg * feat(data-table): remove no results string and show columns when empty * feat(data-table): update docs with no results msg
Teradata · Mar 30, 2017 · e36e5a4 · e36e5a4
1 parent bb5a203
commit e36e5a4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/app/components/components/data-table/data-table.component.html b/src/app/components/components/data-table/data-table.component.html
@@ -220,6 +220,7 @@ <h4 class="md-subhead">Paging Bar / Search Box / Sortable components</h4>
         </div>
         <md-divider></md-divider>
         <td-data-table
+          #dataTable
           [data]="filteredData"
           [columns]="columns"
           [selectable]="selectable"
@@ -230,6 +231,9 @@ <h4 class="md-subhead">Paging Bar / Search Box / Sortable components</h4>
           [sortOrder]="sortOrder"
           (sortChange)="sort($event)">
         </td-data-table>
+        <div class="md-padding" *ngIf="!dataTable.hasData" layout="row" layout-align="center center">
+          <h3>No results to display.</h3>
+        </div>
         <td-paging-bar #pagingBar [pageSizes]="[5, 10, 15, 20]" [total]="filteredTotal" (change)="page($event)">
           <span td-paging-bar-label hide-xs>Row per page:</span>
           {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
@@ -253,13 +257,17 @@ <h4 class="md-subhead">Paging Bar / Search Box / Sortable components</h4>
             </div>
             <md-divider></md-divider>
             <td-data-table
+              #dataTable
               [data]="filteredData"
               [columns]="columns"
               [sortable]="true"
               [sortBy]="sortBy"
               [sortOrder]="sortOrder"
               (sortChange)="sort($event)">
             </td-data-table>
+            <div class="md-padding" *ngIf="!dataTable.hasData" layout="row" layout-align="center center">
+              <h3>No results to display.</h3>
+            </div>
             <td-paging-bar #pagingBar [pageSizes]="[5, 10, 15, 20]" [total]="filteredTotal" (change)="page($event)">
               <span td-paging-bar-label hide-xs>Row per page:</span>
               { {pagingBar.range} } <span hide-xs>of { {pagingBar.total} }</span>

diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html
@@ -1,11 +1,12 @@
-<div class="mat-table-container" *ngIf="hasData" title>
+<div class="mat-table-container" title>
   <table td-data-table
          [class.mat-selectable]="_selectable">
     <th td-data-table-column class="mat-checkbox-column" *ngIf="_selectable">
       <md-checkbox
         #checkBoxAll
         *ngIf="_multiple"
-        [checked]="areAllSelected()"
+        [disabled]="!hasData"
+        [checked]="areAllSelected() && hasData"
         (click)="selectAll(!checkBoxAll.checked)">
       </md-checkbox>
     </th>
@@ -41,7 +42,3 @@
     </tr>
   </table>
 </div>
-
-<div class="md-padding" *ngIf="!hasData" layout="row" layout-align="center center">
-  <h3>No results</h3>
-</div>