From e2a71447c3cc6a5ce1752cf5992aded1c06a4039 Mon Sep 17 00:00:00 2001
From: aaronlisman <donkey00>
Date: Wed, 2 Nov 2016 15:28:53 -0400
Subject: [PATCH] add columnFormatter property to table, allowing devs to
 assign components to render cells

add tests for columnFormatters
---
 build/reactable.js       | 15 ++++++++---
 lib/reactable/table.js   |  2 +-
 lib/reactable/td.js      |  6 +++++
 lib/reactable/tr.js      |  7 +++--
 src/reactable/table.jsx  |  2 +-
 src/reactable/td.jsx     |  2 ++
 src/reactable/tr.jsx     |  9 +++++--
 test.html                | 32 ++++++++++++++++++-----
 tests/reactable_test.jsx | 55 ++++++++++++++++++++++++++++++++++++++++
 9 files changed, 114 insertions(+), 16 deletions(-)

diff --git a/build/reactable.js b/build/reactable.js
index 92b762b5..341e3942 100644
--- a/build/reactable.js
+++ b/build/reactable.js
@@ -475,6 +475,12 @@ window.ReactDOM["default"] = window.ReactDOM;
                 if ((0, _unsafe.isUnsafe)(this.props.children)) {
                     return _react['default'].createElement('td', _extends({}, mergedProps, {
                         dangerouslySetInnerHTML: { __html: this.props.children.toString() } }));
+                } else if (typeof this.props.formatter !== 'undefined') {
+                    return _react['default'].createElement(
+                        'td',
+                        mergedProps,
+                        _react['default'].createElement(this.props.formatter, _extends({}, mergedProps, { text: this.props.children }))
+                    );
                 } else {
                     return _react['default'].createElement(
                         'td',
@@ -537,6 +543,9 @@ window.ReactDOM["default"] = window.ReactDOM;
                     }
 
                     children = children.concat(this.props.columns.map((function (column, i) {
+
+                        var formatter = this.props.columnFormatters ? this.props.columnFormatters[column.key] : undefined;
+
                         if (this.props.data.hasOwnProperty(column.key)) {
                             var value = this.props.data[column.key];
                             var props = {};
@@ -548,11 +557,11 @@ window.ReactDOM["default"] = window.ReactDOM;
 
                             return _react['default'].createElement(
                                 _td.Td,
-                                _extends({ column: column, key: column.key }, props),
+                                _extends({ column: column, formatter: formatter, key: column.key }, props),
                                 value
                             );
                         } else {
-                            return _react['default'].createElement(_td.Td, { column: column, key: column.key });
+                            return _react['default'].createElement(_td.Td, { column: column, formatter: formatter, key: column.key });
                         }
                     }).bind(this)));
                 }
@@ -1448,7 +1457,7 @@ window.ReactDOM["default"] = window.ReactDOM;
                             }
                         }
 
-                        return _react['default'].createElement(_tr.Tr, _extends({ columns: columns, key: i, data: data }, props));
+                        return _react['default'].createElement(_tr.Tr, _extends({ columns: columns, key: i, data: data, columnFormatters: this.props.columnFormatters }, props));
                     }).bind(this)));
                 }
 
diff --git a/lib/reactable/table.js b/lib/reactable/table.js
index e2235b66..2084a27e 100644
--- a/lib/reactable/table.js
+++ b/lib/reactable/table.js
@@ -462,7 +462,7 @@ var Table = (function (_React$Component) {
                         }
                     }
 
-                    return _react2['default'].createElement(_tr.Tr, _extends({ columns: columns, key: i, data: data }, props));
+                    return _react2['default'].createElement(_tr.Tr, _extends({ columns: columns, key: i, data: data, columnFormatters: this.props.columnFormatters }, props));
                 }).bind(this)));
             }
 
diff --git a/lib/reactable/td.js b/lib/reactable/td.js
index 28449fa1..8b3dad9d 100644
--- a/lib/reactable/td.js
+++ b/lib/reactable/td.js
@@ -69,6 +69,12 @@ var Td = (function (_React$Component) {
             if ((0, _unsafe.isUnsafe)(this.props.children)) {
                 return _react2['default'].createElement('td', _extends({}, mergedProps, {
                     dangerouslySetInnerHTML: { __html: this.props.children.toString() } }));
+            } else if (typeof this.props.formatter !== 'undefined') {
+                return _react2['default'].createElement(
+                    'td',
+                    mergedProps,
+                    _react2['default'].createElement(this.props.formatter, _extends({}, mergedProps, { text: this.props.children }))
+                );
             } else {
                 return _react2['default'].createElement(
                     'td',
diff --git a/lib/reactable/tr.js b/lib/reactable/tr.js
index c91e872c..332869d4 100644
--- a/lib/reactable/tr.js
+++ b/lib/reactable/tr.js
@@ -46,6 +46,9 @@ var Tr = (function (_React$Component) {
                 }
 
                 children = children.concat(this.props.columns.map((function (column, i) {
+
+                    var formatter = this.props.columnFormatters ? this.props.columnFormatters[column.key] : undefined;
+
                     if (this.props.data.hasOwnProperty(column.key)) {
                         var value = this.props.data[column.key];
                         var props = {};
@@ -57,11 +60,11 @@ var Tr = (function (_React$Component) {
 
                         return _react2['default'].createElement(
                             _td.Td,
-                            _extends({ column: column, key: column.key }, props),
+                            _extends({ column: column, formatter: formatter, key: column.key }, props),
                             value
                         );
                     } else {
-                        return _react2['default'].createElement(_td.Td, { column: column, key: column.key });
+                        return _react2['default'].createElement(_td.Td, { column: column, formatter: formatter, key: column.key });
                     }
                 }).bind(this)));
             }
diff --git a/src/reactable/table.jsx b/src/reactable/table.jsx
index 82601180..4ca5cbac 100644
--- a/src/reactable/table.jsx
+++ b/src/reactable/table.jsx
@@ -424,7 +424,7 @@ export class Table extends React.Component {
                 }
 
                 return (
-                    <Tr columns={columns} key={i} data={data} {...props} />
+                    <Tr columns={columns} key={i} data={data} columnFormatters={this.props.columnFormatters} {...props} />
                 );
             }.bind(this)));
         }
diff --git a/src/reactable/td.jsx b/src/reactable/td.jsx
index 23c22d1d..3569242f 100644
--- a/src/reactable/td.jsx
+++ b/src/reactable/td.jsx
@@ -34,6 +34,8 @@ export class Td extends React.Component {
         if (isUnsafe(this.props.children)) {
             return <td {...mergedProps}
                 dangerouslySetInnerHTML={{__html: this.props.children.toString()}}/>
+        } else if (typeof this.props.formatter !== 'undefined') {
+           return <td {...mergedProps}><this.props.formatter {...mergedProps} text={this.props.children} /></td>;
         } else {
           return <td {...mergedProps}>
                 {stringifiedChildProps || this.props.children}
diff --git a/src/reactable/tr.jsx b/src/reactable/tr.jsx
index 5374f96a..2ecfbc89 100644
--- a/src/reactable/tr.jsx
+++ b/src/reactable/tr.jsx
@@ -14,7 +14,11 @@ export class Tr extends React.Component {
         ) {
             if (typeof(children.concat) === 'undefined') { console.log(children); }
 
+
             children = children.concat(this.props.columns.map(function(column, i) {
+
+                const formatter = (this.props.columnFormatters) ? this.props.columnFormatters[column.key] : undefined;
+
                 if (this.props.data.hasOwnProperty(column.key)) {
                     var value = this.props.data[column.key];
                     var props = {};
@@ -28,9 +32,10 @@ export class Tr extends React.Component {
                         value = value.value;
                     }
 
-                    return <Td column={column} key={column.key} {...props}>{value}</Td>;
+
+                    return <Td column={column} formatter={formatter} key={column.key} {...props}>{value}</Td>;
                 } else {
-                    return <Td column={column} key={column.key} />;
+                    return <Td column={column} formatter={formatter} key={column.key} />;
                 }
             }.bind(this)));
         }
diff --git a/test.html b/test.html
index e45d78ef..7cbed9f8 100644
--- a/test.html
+++ b/test.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <script src="https://fb.me/react-0.13.3.js"></script>
-        <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
+        <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
+        <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
         <script src="build/reactable.js" type="text/javascript"></script>
         <script type="text/jsx">
             /** @jsx React.DOM */ 
@@ -13,11 +14,28 @@
                 Td = Reactable.Td,
                 unsafe = Reactable.unsafe;
 
-            React.render(
-                <Table className="table" id="table" data={[
-                    { Name: Reactable.unsafe('<span id="griffins-name">Griffin Smith</span>'), Age: '18'},
-                    { Age: '28', Position: Reactable.unsafe('<span id="who-knows-job">Developer</span>')},
-                    { Age: '23', Name: Reactable.unsafe('<span id="lees-name">Lee Salminen</span>')},
+
+            class Cell extends React.Component {
+
+                handleClick(){
+                    alert(this.props.text);
+                }
+
+                render() {
+                    if (this.props.text) {
+                        return <button onClick={this.handleClick.bind(this)}>{this.props.text}</button>;
+                    } else {
+                        return null;
+                    }
+
+                }
+            }
+
+            ReactDOM.render(
+                <Table className="table" columnFormatters={ { 'Name' : Cell, 'Position': Cell } } id="table" data={[
+                    { Name: 'Griffin Smith', Age: '18'},
+                    { Age: '28', Name:'Aaron Lisman', Position:'Developer'},
+                    { Age: '23', Name: <i>Lee Salminen</i> },
                 ]} sortable={['Name']} />,
                 document.getElementById('test-div')
             );
diff --git a/tests/reactable_test.jsx b/tests/reactable_test.jsx
index 3f633411..4c8e14cd 100644
--- a/tests/reactable_test.jsx
+++ b/tests/reactable_test.jsx
@@ -98,6 +98,61 @@ describe('Reactable', function() {
         });
     });
 
+
+    describe('directly passing a data array and columnFormatters', function() {
+        before(function() {
+
+            // class Cell extends React.Component {
+            //     render() {
+            //         if (this.props.text) {
+            //             return <button className="testButton" onClick={this.handleClick.bind(this)}>{this.props.text}</button>;
+            //         } else {
+            //             return null;
+            //         }
+            //     }
+            // }
+
+            var Cell = React.createClass({
+               render(){
+                   if (this.props.text) {
+                       return <button className="testButton">{this.props.text}</button>;
+                   } else {
+                       return null;
+                   }
+               }
+
+            });
+
+            ReactDOM.render(
+                <Reactable.Table className="table" id="table" data={[
+                    { Name: 'Griffin Smith', Age: '18'},
+                    { Age: '23', Name: 'Lee Salminen'},
+                    { Age: '30', Position: 'Developer'},
+                    { Name: <i>Leonor Hyatt</i>, Position: null}
+                ]} columnFormatters={{Name:Cell}}/>,
+                ReactableTestUtils.testNode()
+            );
+        });
+
+        after(ReactableTestUtils.resetTestEnvironment);
+
+        it('uses component to render cells in a column', function() {
+            expect($('.testButton').size()).to.equal(3);
+        });
+
+
+        it('handles absence of corresponding data property', function() {
+            ReactableTestUtils.expectRowText(2, ['', '30', 'Developer']);
+        });
+
+        it('handles jsx in data', function() {
+            expect($('td button i').text()).to.equal('Leonor Hyatt');
+        });
+
+    });
+
+
+
     describe('adding <Tr>s to the <Table>', function() {
         before(function() {
             ReactDOM.render(