diff --git a/components/table/Table.jsx b/components/table/Table.jsx index ebcc2b2a..bb6448a1 100644 --- a/components/table/Table.jsx +++ b/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} diff --git a/components/table/TableHead.jsx b/components/table/TableHead.jsx index e58962ad..17b1cf3b 100644 --- a/components/table/TableHead.jsx +++ b/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 {key}; + const name = model[key].title || key; + return {name}; }); if (selectable) { diff --git a/components/table/TableRow.jsx b/components/table/TableRow.jsx index 1119a4bf..5d08be30 100644 --- a/components/table/TableRow.jsx +++ b/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 ( diff --git a/spec/components/table.jsx b/spec/components/table.jsx index e6c8739d..1b17cb61 100644 --- a/spec/components/table.jsx +++ b/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: } }; 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: }, {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, owner: true} ];