feat(action): hide action column when there are no visible actions

SpoonX · Nov 11, 2016 · d1dfb96 · d1dfb96
1 parent 3e4af2b
commit d1dfb96
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/bootstrap/datatable.html b/src/bootstrap/datatable.html
@@ -44,7 +44,7 @@
         </th>
 
         <!-- Actions -->
-        <th if.bind="showActions()" t="Actions">Actions</th>
+        <th if.bind="showActions() && hasVisibleActions" t="Actions">Actions</th>
       </tr>
     </thead>
     <tbody>
@@ -61,7 +61,7 @@
         </td>
 
         <!-- Actions -->
-        <td style="white-space: nowrap; width: 1px;" if.bind="showActions()">
+        <td style="white-space: nowrap; width: 1px;" show.bind="showActions() && hasVisibleActions">
           <button if.bind="edit !== null" class="btn btn-sm btn-white" click.delegate="doEdit(row)">
             <i class="fa fa-pencil"></i>
           </button>

diff --git a/src/datatable.js b/src/datatable.js
@@ -35,7 +35,8 @@ export class DataTable {
   @bindable pages;
   @bindable footer;
 
-  loading = false;
+  loading           = false;
+  hasVisibleActions = false;
 
   constructor(router, element, entityManager) {
     this.router        = router;
@@ -137,18 +138,26 @@ export class DataTable {
 
   checkDisabled(action, row) {
     if (typeof action.disabled === 'function') {
+      this.hasVisibleActions = true;
+
       return action.disabled(row);
     }
 
     return false;
   }
 
   checkVisibility(action, row) {
-    if (typeof action.visible === 'function') {
-      return action.visible(row);
+    if (typeof action.visible !== 'function') {
+      return true;
+    }
+
+    let isVisible = action.visible(row);
+
+    if (isVisible) {
+      this.hasVisibleActions = true;
     }
 
-    return true;
+    return isVisible;
   }
 
   showActions() {