add key

README.md

@@ -38,7 +38,7 @@ npm start
 
 http://localhost:8000/examples/
 
-online example: http://react-component.github.io/table/build/examples/
+online example: http://react-component.github.io/table/examples/
 
 ## Usage
 
@@ -65,13 +65,15 @@ React.renderComponent(
 
 ### property
 
-#### keyField
+#### keyFn
 
-* key value of each row
+`Function(recode):string`
+
+* get key value of each row from each row record data
 
 #### columns
   * The columns config of table
-
+    * key : key of this column
     * title : The title of column
     * dataIndex : display the data field
     * width : The width of column. The width of the specific proportion calculation according to the width of the columns

examples/key.js

@@ -42,16 +42,20 @@ var MyTable = React.createClass({
     return <a href="#" onClick={this.handleClick(index)}>删除</a>;
   },
 
+  getKey(record){
+    return record.a;
+  },
+
   render: function() {
     var state = this.state;
     var columns = [
-      { title: '表头1', dataIndex: 'a', width: 100, renderer: this.checkbox },
-      { title: '表头2', dataIndex: 'b', width: 100},
-      { title: '表头3', dataIndex: 'c', width: 200},
-      { title: '操作', dataIndex: '', renderer: this.renderAction }
+      { title: '表头1', dataIndex: 'a', key:'a', width: 100, renderer: this.checkbox },
+      { title: '表头2', dataIndex: 'b', key:'b',  width: 100},
+      { title: '表头3', dataIndex: 'c', key:'c',  width: 200},
+      { title: '操作', dataIndex: '',  key:'x', renderer: this.renderAction }
     ];
     return (
-      <Table columns={columns} data={state.data} className="table" keyField="a"/>
+      <Table columns={columns} data={state.data} className="table" keyFn={this.getKey}/>
     );
   },
 

src/Table.jsx

@@ -26,7 +26,7 @@ class TableRow extends React.Component {
       if (renderer) {
         text = renderer(text, record, index);
       }
-      cells.push(<td key={i}>{text}</td>);
+      cells.push(<td key={col.key}>{text}</td>);
     }
     return (<tr>{cells}</tr>);
   }
@@ -39,7 +39,7 @@ class Table extends React.Component {
       rst = [];
     for (var i = 0; i < columns.length; i++) {
       var col = columns[i];
-      rst.push(<TableColumn title={col.title} dataIndex={col.dataIndex} width={col.width} key={i}/>);
+      rst.push(<TableColumn title={col.title} dataIndex={col.dataIndex} width={col.width} key={col.key}/>);
     }
     return rst;
   }
@@ -50,10 +50,10 @@ class Table extends React.Component {
       columns = self.props.columns,
       rst = [];
 
-    var keyField = this.props.keyField;
+    var keyFn = this.props.keyFn;
     for (var i = 0; i < data.length; i++) {
       var record = data[i];
-      var key = keyField ? record[keyField] : i;
+      var key = keyFn ? keyFn(record, i) : undefined;
       rst.push(<TableRow record={record} index={i} columns={columns} key={key}/>);
     }
     return rst;