Allow overriding default classes on th and td (#161).

aslagle · Feb 19, 2015 · 4594572 · 4594572
1 parent d4ce0af
commit 4594572
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@ If you're updating to Meteor 0.8.0, note that reactiveTable is now a template wi
   - [Setting columns](#setting-columns)
     - [Setting column headers](#setting-column-headers)
       - [Column Header CSS class](#column-header-css-class) 
+    - [Cell CSS class](#cell-css-class)
     - [Templates](#templates)
     - [Virtual columns](#virtual-columns)
       - [HTML](#html)
@@ -185,6 +186,21 @@ To set the css class for table header **&lt;th&gt;**, use the optional *headerCl
       },
       { key: 'year', label: 'Year' }
     ] }
+
+#### Cell CSS Class
+
+To set the css class for the table cells in a column, add the *cellClass* key to the field settings. This attribute can be a String or a Function. The function arguments will be the value for this key, and the full row object.
+
+    { fields: [
+      { key: 'name', label: 'Name' , cellClass: 'col-md-4'},  // as String
+      { key: 'location', label: 'Location',
+        cellClass: function (value, object) {
+         var css = 'col-md2';
+         '/*do some logic here */
+         return css;}  // as Function
+      },
+      { key: 'year', label: 'Year' }
+    ] }
 
 #### Templates
 

diff --git a/examples/leaderboard/.meteor/versions b/examples/leaderboard/.meteor/versions
@@ -1,6 +1,6 @@
 anti:[email protected]
 [email protected]
-aslagle:[email protected].6
+aslagle:[email protected].9
 [email protected]
 [email protected]
 [email protected]

diff --git a/lib/reactive_table.html b/lib/reactive_table.html
@@ -50,7 +50,7 @@
           {{#each fields}}
             {{#if isVisible}}
               {{#if isSortKey}}
-                <th class="{{getKey}} sortable {{getHeaderClass}}" fieldid="{{getFieldFieldId}}">
+                <th class="sortable {{getHeaderClass}}" fieldid="{{getFieldFieldId}}">
                   {{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}&nbsp;&nbsp;
                   {{#if isAscending}}
                     {{#if ../useFontAwesome}}
@@ -68,9 +68,9 @@
                 </th>
               {{else}}
                 {{#if isSortable}}
-                  <th class="{{getKey}} {{getHeaderClass}} sortable" fieldid="{{getFieldFieldId}}">{{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}</th>
+                  <th class="{{getHeaderClass}} sortable" fieldid="{{getFieldFieldId}}">{{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}</th>
                 {{else}}
-                  <th class="{{getKey}} {{getHeaderClass}}" fieldid="{{getFieldFieldId}}">{{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}</th>
+                  <th class="{{getHeaderClass}}" fieldid="{{getFieldFieldId}}">{{#if labelIsTemplate}}{{#with labelData}}{{> ../label}}{{/with}}{{else}}{{getLabel}}{{/if}}</th>
                 {{/if}}
               {{/if}}
             {{/if}}
@@ -82,7 +82,7 @@
           <tr class="{{../rowClass this}}">
             {{#each ../fields}}
               {{#if isVisible}}
-                <td class="{{key}}">{{#if tmpl}}{{#with ..}}{{> ../tmpl}}{{/with}}{{else}}{{getField ..}}{{/if}}</td>
+                <td class="{{getCellClass ..}}">{{#if tmpl}}{{#with ..}}{{> ../tmpl}}{{/with}}{{else}}{{getField ..}}{{/if}}</td>
               {{/if}}
             {{/each}}
           </tr>

diff --git a/lib/reactive_table.js b/lib/reactive_table.js
@@ -329,8 +329,8 @@ Template.reactiveTable.helpers({
     },
 
     'getHeaderClass': function () {
-        if (!(this.headerClass)) {
-            return '';
+        if (_.isUndefined(this.headerClass)) {
+            return this.key;
         }
         var css;
         if (_.isFunction(this.headerClass)) {
@@ -341,6 +341,20 @@ Template.reactiveTable.helpers({
         return css;
     },
 
+    'getCellClass': function (object) {
+        if (_.isUndefined(this.cellClass)) {
+            return this.key;
+        }
+        var css;
+        if (_.isFunction(this.cellClass)) {
+            var value = get(object, this.key);
+            css = this.cellClass(value, object);
+        } else {
+            css = this.cellClass;
+        }
+        return css;
+    },
+
     'labelIsTemplate': function () {
         return this.label && _.isObject(this.label) && this.label instanceof Blaze.Template;
     },

diff --git a/package.js b/package.js
@@ -1,6 +1,6 @@
 Package.describe({
   summary: "A reactive table designed for Meteor",
-  version: "0.6.8",
+  version: "0.6.9",
   name: "aslagle:reactive-table",
   git: "https://github.com/aslagle/reactive-table.git"
 });

diff --git a/test/test_fields.js b/test/test_fields.js
@@ -189,6 +189,44 @@ Tinytest.add('Fields - header class function', function (test) {
   );
 });
 
+Tinytest.add('Fields - cell class string', function (test) {
+  testTable(
+    {
+      collection: rows,
+      settings: {
+        fields: [
+          {key: 'name', label: 'Name', cellClass: 'name-class'},
+          {key: 'score', label: 'Score', cellClass: 'score-class' }
+        ]
+      }
+    },
+    function () {
+      test.length($('.reactive-table th'), 2, "two columns should be rendered");
+      test.length($('.reactive-table td.name-class'), 6, "first column class");
+      test.length($('.reactive-table td.score-class'), 6, "second column class");
+    }
+  );
+});
+
+Tinytest.add('Fields - cell class function', function (test) {
+  testTable(
+    {
+      collection: [{name: 'test', score: 5}],
+      settings: {
+        fields: [
+          {key: 'name', label: 'Name', cellClass: function (value, object) { return value + object.score; }},
+          {key: 'score', label: 'Score', cellClass: function () { return 'score-class'; }}
+        ]
+      }
+    },
+    function () {
+      test.length($('.reactive-table th'), 2, "two columns should be rendered");
+      test.length($('.reactive-table td.test5'), 1, "first column class");
+      test.length($('.reactive-table td.score-class'), 1, "second column class");
+    }
+  );
+});
+
 
 Tinytest.add('Fields - tmpl', function (test) {
   testTable(