Merge pull request #17 from kxmas/dateformat

custom renderer

Author: liuwenchao

README.md

@@ -139,6 +139,7 @@ Attribute           | Options                   | Default               | Descri
 `data-choices`      | *Array*                   | []                    | options for select dropdown, in editing and searching.
 `hint`              | *String*                  | ''                    | this text will be displayed at the column header for instruction.
 `searchplaceholder` | *String*                  | ''                    | this text will be displayed in search filter input box.
+`renderer`          | *String*                  | undefined             | function name to format the object being displayed
 
 
 ## Browser Compatability

dist/aha-table.html

@@ -655,9 +655,13 @@
 			}
 			return classList.join(' ');
 		},
-		readContent: function(row, column) {
+		readContent: function(row, column) {            
 			var datum = row[column.name];
-			if (datum === null || datum === undefined
+            if (column.renderer !== null && column.renderer !== undefined
+                    && typeof column.renderer === 'string' && column.renderer.trim().length > 0) {
+                datum = this._render(column.renderer, datum, row, column);
+            }
+            if (datum === null || datum === undefined
 				|| typeof datum === 'string' && datum.trim().length === 0) {
 					var options = column.options;
 					var blank = column.placeholder;
@@ -1103,7 +1107,37 @@
 			e.target.classList.toggle('search');
 			e.target.classList.toggle('nosearch');
 			this.$$('#filter').classList.toggle('hide');
-		}
+		},
+        _render: function(name, datum, row, col) {
+            var args = [ datum, row, col, this ];
+            var displayValue = this._invokeRenderer(datum, name, args);
+            if (displayValue !== null) {                
+                return displayValue;                
+            }
+            displayValue = this._invokeRenderer(row, name, args);
+            if (displayValue !== null) {                
+                return displayValue;                
+            }
+            
+            displayValue = this._invokeRenderer(this, name, args);
+            if (displayValue !== null) {                
+                return displayValue;                
+            }
+            
+            displayValue = this._invokeRenderer(this.domHost, name, args);
+            if (displayValue === null || displayValue === undefined) {
+                displayValue = datum;
+            }
+            return displayValue;
+        },
+        _invokeRenderer: function (b, name, args) {
+            var fn = b[name];
+            if (fn) {                
+                return fn.apply(this, args || Polymer.nar);
+            }
+            return null;
+        }
+
 	});
 </script>
 
@@ -1188,7 +1222,11 @@
 			searchplaceholder: {
 				type: String,
 				value: ""
-			}
+			},
+            //renderer - function called to display value
+            renderer: {
+                type: String
+            }            
 		}
 	});
 </script>

index.html

@@ -137,6 +137,12 @@ <h2>Advanced usage: themed, customized columns, customized attributes, customize
 
             required
 
+            placeholder=""
+            default=""></aha-column>
+        <aha-column name="title"
+            label="Renderer"
+            type="string"
+            renderer="customRenderer"
             placeholder=""
             default=""></aha-column>
 	</aha-table>
@@ -190,6 +196,9 @@ <h2><a href="demo/performance.html">Performance Test</a></h2>
 		themed.addEventListener('after-move-up', function(e) {
 			table_log('moved one record up!');
 		});
+        themed.customRenderer = function(datum, row, col, ahaTable) {            
+            return datum.toUpperCase();
+        }
 	</script>
 </body>
 </html>

src/aha-table.html

@@ -655,9 +655,13 @@
 			}
 			return classList.join(' ');
 		},
-		readContent: function(row, column) {
+		readContent: function(row, column) {            
 			var datum = row[column.name];
-			if (datum === null || datum === undefined
+            if (column.renderer !== null && column.renderer !== undefined
+                    && typeof column.renderer === 'string' && column.renderer.trim().length > 0) {
+                datum = this._render(column.renderer, datum, row, column);
+            }
+            if (datum === null || datum === undefined
 				|| typeof datum === 'string' && datum.trim().length === 0) {
 					var options = column.options;
 					var blank = column.placeholder;
@@ -1103,7 +1107,37 @@
 			e.target.classList.toggle('search');
 			e.target.classList.toggle('nosearch');
 			this.$$('#filter').classList.toggle('hide');
-		}
+		},
+        _render: function(name, datum, row, col) {
+            var args = [ datum, row, col, this ];
+            var displayValue = this._invokeRenderer(datum, name, args);
+            if (displayValue !== null) {                
+                return displayValue;                
+            }
+            displayValue = this._invokeRenderer(row, name, args);
+            if (displayValue !== null) {                
+                return displayValue;                
+            }
+            
+            displayValue = this._invokeRenderer(this, name, args);
+            if (displayValue !== null) {                
+                return displayValue;                
+            }
+            
+            displayValue = this._invokeRenderer(this.domHost, name, args);
+            if (displayValue === null || displayValue === undefined) {
+                displayValue = datum;
+            }
+            return displayValue;
+        },
+        _invokeRenderer: function (b, name, args) {
+            var fn = b[name];
+            if (fn) {                
+                return fn.apply(this, args || Polymer.nar);
+            }
+            return null;
+        }
+
 	});
 </script>
 
@@ -1188,7 +1222,11 @@
 			searchplaceholder: {
 				type: String,
 				value: ""
-			}
+			},
+            //renderer - function called to display value
+            renderer: {
+                type: String
+            }            
 		}
 	});
 </script>