Responsive stuff ui table cannot get element from string

Question

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

I show it, it works very well, I try to get the object associated with the string I selected, but I did not find a way to do this, I saw the children or onRowSelection , but I can not get my object here, this is the code. How can I get the whole 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 1

UPDATE: with material-ui 0.15.4, the parameters passed to the onRowSelection handler have been changed. See Reply from @Jonathn for future reference.

onRowSelection is a property of <Table> not <TableRow> . In addition, it does not call the event handler when ( e ) is called; rather, it will call it with the key. Then you can use this to find the string. For instance:

 _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> ); } 

Answer 2

Using [Material-UI 0.15.4]

onRowSelection returns only none , all or an array containing the row number of the selected rows.

Using onCellClick , also at the <Table> level, return rowNumber , columnNumber and event . This event contains a table cell under target , and you can reference the data- tag, etc. From here.

Example:

 function handleCellClick (rowNumber, columnNumber, evt) { console.log("activityId", evt.target.dataset.myRowIdentifier); } function createTableRow (content) { let activityId = content.shift(); return ( <TableRow key={activityId}> {content.map((columnContent, i) => { return ( <TableRowColumn key={i} data-my-row-identifier={activityId} >{columnContent}</TableRowColumn> ); })} </TableRow> ); } return ( <div> <Table onCellClick={handleCellClick}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> {createHeaderRow(tableHeader)} </TableHeader> <TableBody displayRowCheckbox={false}> {filteredTable.map(createTableRow)} </TableBody> </Table> </div> ); 

My first answer on StackOverflow ... hope this helps :-)

Answer 3

 <Table onCellClick={(row, col, event) => console.log(event.target.innerHTML)}> 

Answer 4

You can use your initial dataset and reference the index based on the row number to access the selected rows and the object associated with it. This is a basic example and, obviously, depending on what you want to do with the data that might be required to add more logic.

 _onRowSelection(rows) { for (let i = 0; i < rows.length; i++) { console.log(this.state.data[rows[i]]) } }, getInitialState() { return { data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}] }; }, render() { return ( <div> <div className="col-sm-6"> <h1>MagicTableReact</h1> <Table onRowSelection={(rows) => this._onRowSelection(rows)}> <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> ); }