Merge pull request #324 from Kosta-Github/table-enhancements

[Table] enhancements

components/table/Table.jsx

@@ -69,7 +69,7 @@ class Table extends React.Component {
           index={index}
           key={index}
           model={this.props.model}
-          onChange={this.handleRowChange.bind(this, index)}
+          onChange={this.props.onChange ? this.handleRowChange.bind(this) : undefined}
           onSelect={this.handleRowSelect.bind(this, index)}
           selectable={this.props.selectable}
           selected={this.props.selected.indexOf(index) !== -1}

components/table/TableHead.jsx

@@ -5,7 +5,8 @@ import style from './style';
 const TableHead = ({model, onSelect, selectable, selected}) => {
   let selectCell;
   const contentCells = Object.keys(model).map((key) => {
-    return <th key={key}>{key}</th>;
+    const name = model[key].title || key;
+    return <th key={key}>{name}</th>;
   });
 
   if (selectable) {

components/table/TableRow.jsx

@@ -7,6 +7,7 @@ import style from './style';
 class TableRow extends React.Component {
   static propTypes = {
     data: React.PropTypes.object,
+    index: React.PropTypes.number,
     model: React.PropTypes.object,
     onChange: React.PropTypes.func,
     onSelect: React.PropTypes.func,
@@ -14,9 +15,10 @@ class TableRow extends React.Component {
     selected: React.PropTypes.bool
   };
 
-  handleInputChange = (key, type, event) => {
+  handleInputChange = (index, key, type, event) => {
     const value = type === 'checkbox' ? event.target.checked : event.target.value;
-    this.props.onChange(key, value);
+    const onChange = this.props.model[key].onChange || this.props.onChange;
+    onChange(index, key, value);
   };
 
   renderSelectCell () {
@@ -37,7 +39,13 @@ class TableRow extends React.Component {
 
   renderCell (key) {
     const value = this.props.data[key];
-    if (this.props.onChange) {
+
+    // if the value is a valid React element return it directly, since it
+    // cannot be edited and should not be converted to a string...
+    if (React.isValidElement(value)) { return value; }
+
+    const onChange = this.props.model[key].onChange || this.props.onChange;
+    if (onChange) {
       return this.renderInput(key, value);
     } else if (value) {
       return value.toString();
@@ -45,13 +53,14 @@ class TableRow extends React.Component {
   }
 
   renderInput (key, value) {
+    const index = this.props.index;
     const inputType = utils.inputTypeForPrototype(this.props.model[key].type);
     const inputValue = utils.prepareValueForInput(value, inputType);
     const checked = inputType === 'checkbox' && value ? true : null;
     return (
       <input
         checked={checked}
-        onChange={this.handleInputChange.bind(null, key, inputType)}
+        onChange={this.handleInputChange.bind(null, index, key, inputType)}
         type={inputType}
         value={inputValue}
       />

spec/components/table.jsx

@@ -3,15 +3,16 @@ import Table from '../../components/table';
 
 const UserModel = {
   name: {type: String},
-  twitter: {type: String},
+  twitter: {type: String, title: '@twitter'},
   birthdate: {type: Date},
-  cats: {type: Number},
+  cats: {type: Number, onChange (...args) { console.log('changes:', ...args); } },
   dogs: {type: Number},
-  owner: {type: Boolean}
+  owner: {type: Boolean },
+  image: {title: <img src='https://pbs.twimg.com/profile_images/579415786994839552/aE3uhPPr.jpg' width={50} height={50}/>}
 };
 
 const users = [
-  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1},
+  {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1, image: <img src='http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg' width={50} height={50}/>},
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, owner: true}
 ];