Add noDataTmpl option.

aslagle · Apr 26, 2015 · 24f4662 · 24f4662
1 parent ddb676c
commit 24f4662
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -76,6 +76,7 @@ The reactiveTable helper accepts additional arguments that can be used to config
 * `showColumnToggles`: Boolean. Adds a 'Columns' button to the top right that allows the user to toggle which columns are displayed. (Note: there aren't translations for this button yet - please [add one](#internationalization) if you're using it.) Add `hidden` to fields to hide them unless toggled on, see below. Add `hideToggle` to a field to exclude it from the toggle list. Default `false`.
 * `useFontAwesome`: Boolean. Whether to use [Font Awesome](http://fortawesome.github.io/Font-Awesome/) for icons. Requires the `fortawesome:fontawesome` package to be installed. Default `true` if `fortawesome:fontawesome` is installed, else `false`.
 * `enableRegex`: Boolean. Whether to use filter text as a regular expression instead of a regular search term. When true, users won't be able to filter by special characters without escaping them. Default `false`. (Note: Setting this option on the client won't affect server-side filtering - see [Server-side pagination and filtering](#server-side-pagination-and-filtering-beta))
+* `noDataTmpl`: Template. Template to render in place of the table when the collection is empty or filtered to 0 rows. Default none (renders table header with no rows).
 * `class`: String. Classes to add to the table element in addition to 'reactive-table'. Default: 'table table-striped table-hover col-sm-12'.
 * `id`: String. Unique id to add to the table element. Default: generated with [_.uniqueId](http://underscorejs.org/#uniqueId).
 * `rowClass`: String or function returning a class name. The row element will be passed as first parameter.

diff --git a/lib/reactive_table.html b/lib/reactive_table.html
@@ -33,69 +33,73 @@
         {{/if}}
       </div>
     </div>
-    <table id="{{id}}" class="{{class}} reactive-table">
-      <thead>
-        <tr>
-          {{#each fields}}
-            {{#if isVisible}}
-              {{#if isSortKey}}
-                <th class="sortable {{getHeaderClass}}" fieldid="{{getFieldFieldId}}">
-                  {{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}&nbsp;&nbsp;
-                  {{#if isAscending}}
-                    {{#if ../useFontAwesome}}
-                      <i class="fa fa-sort-asc"></i>
+    {{#unless noData}}
+      <table id="{{id}}" class="{{class}} reactive-table">
+        <thead>
+          <tr>
+            {{#each fields}}
+              {{#if isVisible}}
+                {{#if isSortKey}}
+                  <th class="sortable {{getHeaderClass}}" fieldid="{{getFieldFieldId}}">
+                    {{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}&nbsp;&nbsp;
+                    {{#if isAscending}}
+                      {{#if ../useFontAwesome}}
+                        <i class="fa fa-sort-asc"></i>
+                      {{else}}
+                        &#x25B2;
+                      {{/if}}
                     {{else}}
-                      &#x25B2;
+                      {{#if ../useFontAwesome}}
+                        <i class="fa fa-sort-desc"></i>
+                      {{else}}
+                        &#x25BC;
+                      {{/if}}
                     {{/if}}
+                  </th>
+                {{else}}
+                  {{#if isSortable}}
+                    <th class="{{getHeaderClass}} sortable" fieldid="{{getFieldFieldId}}">{{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}</th>
                   {{else}}
-                    {{#if ../useFontAwesome}}
-                      <i class="fa fa-sort-desc"></i>
-                    {{else}}
-                      &#x25BC;
-                    {{/if}}
+                    <th class="{{getHeaderClass}}" fieldid="{{getFieldFieldId}}">{{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}</th>
                   {{/if}}
-                </th>
-              {{else}}
-                {{#if isSortable}}
-                  <th class="{{getHeaderClass}} sortable" fieldid="{{getFieldFieldId}}">{{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}</th>
-                {{else}}
-                  <th class="{{getHeaderClass}}" fieldid="{{getFieldFieldId}}">{{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}</th>
                 {{/if}}
               {{/if}}
-            {{/if}}
-          {{/each}}
-        </tr>
-      </thead>
-      <tbody>
-        {{#each sortedRows}}
-          <tr class="{{../rowClass this}}">
-            {{#each ../fields}}
-              {{#if isVisible}}
-                <td class="{{getCellClass ..}}">{{#if tmpl}}{{#with ..}}{{> ../tmpl}}{{/with}}{{else}}{{getField ..}}{{/if}}</td>
-              {{/if}}
             {{/each}}
           </tr>
-        {{/each}}
-      </tbody>
-    </table>
-    {{#if showNavigation}}
-      <div class="reactive-table-navigation">
-        {{#if showNavigationRowsPerPage}}
-          <div class="form-inline form-group rows-per-page">
-            <label>{{i18n 'reactiveTable.show'}}&nbsp;<input class="form-control" type="text" value="{{getRowsPerPage}}">&nbsp;{{i18n 'reactiveTable.rowsPerPage'}}</label>
-          </div>
-        {{/if}}
-        <div class="form-inline form-group page-number">
-          {{#if isntFirstPage}}
-            <label class="previous-page">&lt;</label>&nbsp;&nbsp;
-          {{/if}}
-          <label>{{i18n 'reactiveTable.page'}}&nbsp;<input class="form-control" type="text" value="{{getCurrentPage}}" />&nbsp;{{i18n 'reactiveTable.of'}} {{getPageCount}}</label>
-          {{#if isntLastPage}}
-            <label class="next-page">&nbsp;&nbsp;&gt;</label>
+        </thead>
+        <tbody>
+          {{#each sortedRows}}
+            <tr class="{{../rowClass this}}">
+              {{#each ../fields}}
+                {{#if isVisible}}
+                  <td class="{{getCellClass ..}}">{{#if tmpl}}{{#with ..}}{{> ../tmpl}}{{/with}}{{else}}{{getField ..}}{{/if}}</td>
+                {{/if}}
+              {{/each}}
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+      {{#if showNavigation}}
+        <div class="reactive-table-navigation">
+          {{#if showNavigationRowsPerPage}}
+            <div class="form-inline form-group rows-per-page">
+              <label>{{i18n 'reactiveTable.show'}}&nbsp;<input class="form-control" type="text" value="{{getRowsPerPage}}">&nbsp;{{i18n 'reactiveTable.rowsPerPage'}}</label>
+            </div>
           {{/if}}
+          <div class="form-inline form-group page-number">
+            {{#if isntFirstPage}}
+              <label class="previous-page">&lt;</label>&nbsp;&nbsp;
+            {{/if}}
+            <label>{{i18n 'reactiveTable.page'}}&nbsp;<input class="form-control" type="text" value="{{getCurrentPage}}" />&nbsp;{{i18n 'reactiveTable.of'}} {{getPageCount}}</label>
+            {{#if isntLastPage}}
+              <label class="next-page">&nbsp;&nbsp;&gt;</label>
+            {{/if}}
+          </div>
         </div>
-      </div>
-    {{/if}}
+      {{/if}}
+    {{else}}
+      {{> noDataTmpl}}
+    {{/unless}}
   {{/if}}
   {{/with}}
 </template>
diff --git a/lib/reactive_table.js b/lib/reactive_table.js
@@ -294,6 +294,7 @@ var setup = function () {
     } else {
         context.useFontAwesome = this.data.useFontAwesome;
     }
+    context.noDataTmpl = this.data.noDataTmpl || this.data.settings.noDataTmpl;
     context.enableRegex = getDefaultFalseSetting('enableRegex', this.data);
 
     context.ready = new ReactiveVar(true);
@@ -492,6 +493,11 @@ Template.reactiveTable.helpers({
         }
     },
 
+    'noData': function () {
+        var pageCount = getPageCount.call(this);
+        return (pageCount === 0) && this.noDataTmpl;
+    },
+
     'getPageCount' : getPageCount,
 
     'getRowsPerPage' : function () {

diff --git a/package.js b/package.js
@@ -1,6 +1,6 @@
 Package.describe({
   summary: "A reactive table designed for Meteor",
-  version: "0.7.3",
+  version: "0.7.4",
   name: "aslagle:reactive-table",
   git: "https://github.com/aslagle/reactive-table.git"
 });
@@ -48,6 +48,7 @@ Package.on_test(function (api) {
     api.use(['tinytest', 'test-helpers'], 'client');
     api.add_files('test/helpers.js', ['client', 'server']);
     api.add_files('test/test_collection_argument.js', 'client');
+    api.add_files('test/test_no_data_template.html', 'client');
     api.add_files('test/test_settings.js', 'client');
     api.add_files('test/test_fields_tmpl.html', 'client');
     api.add_files('test/test_fields.js', 'client');

diff --git a/test/test_no_data_template.html b/test/test_no_data_template.html
@@ -0,0 +1,3 @@
+<template name="noData">
+  <div class="no-data">No data found</div>
+</template>
diff --git a/test/test_settings.js b/test/test_settings.js
@@ -262,6 +262,47 @@ Tinytest.add('Settings - id', function (test) {
   );
 });
 
+testAsyncMulti('Settings - noDataTmpl', [function (test, expect) {
+  var collection = new Mongo.Collection();
+  var id;
+
+  var table = Blaze.renderWithData(
+    Template.reactiveTable,
+    {collection: collection, noDataTmpl: Template.noData, fields: ['name', 'score']},
+    document.body
+  );
+
+  var expectNoData = expect(function () {
+    test.length($('.no-data'), 1, "no data template should be rendered");
+    test.length($('.reactive-table'), 0, "table should not be rendered");
+
+    Blaze.remove(table);
+  });
+
+  var expectFilteredToNoData = expect(function () {
+    test.length($('.no-data'), 1, "no data template should be rendered");
+    test.length($('.reactive-table'), 0, "table should not be rendered");
+
+    collection.remove(id);
+    Meteor.setTimeout(expectNoData, 0);    
+  })
+
+  var expectTable = expect(function () {
+    test.length($('.no-data'), 0, "no data template should not be rendered");
+    test.length($('.reactive-table tbody tr'), 1, "second page should have one rows");
+
+    $('.reactive-table-filter input').val('g');
+    $('.reactive-table-filter input').trigger('input');
+    Meteor.setTimeout(expectFilteredToNoData, 1000);
+  });
+
+  test.length($('.no-data'), 1, "no data template should be rendered");
+  test.length($('.reactive-table'), 0, "table should not be rendered");
+
+  id = collection.insert({name: 'Ada Lovelace', score: 5});
+  Meteor.setTimeout(expectTable, 0);
+}]);
+
 testAsyncMulti('Settings - currentPage var updates table', [function (test, expect) {
   var page = new ReactiveVar(0);