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}
];