fandro fandro - 2 months ago 7
React JSX Question

React material ui table can't get element from row

I want to use a table from the material ui library for react :
http://www.material-ui.com/#/components/table

I display it, it works very well, I m trying to get the object associated with the row I selected, but I don't find the way to do that, I saw the property

children
or
onRowSelection
but I can't get my object here is y code.
How can I get the entire object of my selected line ?

import React, { PropTypes, Component } from 'react'

import Table from 'material-ui/lib/table/table';
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
import TableRow from 'material-ui/lib/table/table-row';
import TableHeader from 'material-ui/lib/table/table-header';
import TableRowColumn from 'material-ui/lib/table/table-row-column';
import TableBody from 'material-ui/lib/table/table-body';


export default class MagicTableReact extends Component {
constructor(props) {
super(props);
this.state = {
data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
fixedHeader: true,
fixedFooter: true,
stripedRows: false,
showRowHover: true,
selectable: true,
multiSelectable: false,
enableSelectAll: false,
deselectOnClickaway: true,
height: '300px',
};
};


_onRowSelection(e){
console.log(e)

}


render() {

return (

<div>
<div className="col-sm-6">
<h1>MagicTableReact</h1>
<Table
height={this.state.height}
fixedHeader={this.state.fixedHeader}
fixedFooter={this.state.fixedFooter}
selectable={this.state.selectable}
multiSelectable={this.state.multiSelectable}
>
<TableHeader>
<TableRow>
<TableHeaderColumn>ID</TableHeaderColumn>
<TableHeaderColumn>Name</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody
>
{this.state.data.map((user, i) =>
<TableRow key={i}
onRowSelection={this._onRowSelection.bind(this)}>
<TableRowColumn>{user.id}</TableRowColumn>
<TableRowColumn>{user.name}</TableRowColumn>
</TableRow>
)}
</TableBody>
</Table>
</div>
</div>
)
}
}

MagicTableReact.propTypes = {

};

Answer

onRowSelection is a property of <Table> not <TableRow>. Also, it doesn't call the handler with an event when called (e), rather, it will call it with the key. You can then use that to find the row. Like so:

_onRowSelection(key) {
  console.log(key, this.state.data[key])
},

getInitialState() {
  return {
    data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
    fixedHeader: true,
    fixedFooter: true,
    stripedRows: false,
    showRowHover: true,
    selectable: true,
    multiSelectable: false,
    enableSelectAll: false,
    deselectOnClickaway: true,
    height: '300px',
  };
},

render() {
  return (
    <div>
      <div className="col-sm-6">
        <h1>MagicTableReact</h1>
        <Table
          height={this.state.height}
          fixedHeader={this.state.fixedHeader}
          fixedFooter={this.state.fixedFooter}
          selectable={this.state.selectable}
          multiSelectable={this.state.multiSelectable}
          onRowSelection={this._onRowSelection}
        >
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Name</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
          >
            {this.state.data.map((user, i) =>
              <TableRow key={i} value={user}>
                <TableRowColumn>{user.id}</TableRowColumn>
                <TableRowColumn>{user.name}</TableRowColumn>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}