Styjun

I am looking to obtain the rowData from an event triggered on the material-UI table component. The application I am building is very basic and thus needs just a basic table.

I have tried passing event handlers to numerous components (Table, TableCell, and TableRow) with no luck. In the past, it appears that the table component had a prop of onRowSelection, but that does not seem to be available anymore.

I am sure there is a very simple way to do this, and I have to be missing something extremely trivial, however, I have searched everywhere, and cannot find the basic solution and or methodology to make this happen.

let id = 0;
function createData(instrument, price, volume, rsi) 
 id += 1;
 return id, instrument, price, volume, rsi ;


const rows = [
 createData('TSLA', 283.65, 8.6, 13.2, 22),
 createData('AMZN', 1638.78, 9.0, 23, 46),
 createData('APPL', 172.91, 16.0, 24, 37),
 createData('AMRN', 21.36, 3.7, 67, 73),
 createData('PLUG', 1.71, 16.0, 49, 32),
];

class BasicTable extends React.Component 

render() 
 const classes = this.props;

 return (
 <Paper className=classes.root>
 <Table onRowSelection = (event) => console.log(event) className=classes.table>
 <TableHead>
 <TableRow>
 <TableCell className=classes.tableHeaderCell>Instrument</TableCell>
 <TableCell className=classes.tableHeaderCell align="right">Price</TableCell>
 <TableCell className=classes.tableHeaderCell align="right">Volume</TableCell>
 <TableCell className=classes.tableHeaderCell align="right">RSI</TableCell>
 </TableRow>
 </TableHead>
 <TableBody>
 rows.map(row => (
 <TableRow selected=true hover className=classes.tableRow
 key=row.id>
 <TableCell className=classes.tableCell component="th" scope="row">
 row.instrument
 </TableCell>
 <TableCell align="right">row.price</TableCell>
 <TableCell align="right">row.volume</TableCell>
 <TableCell align="right">row.rsi</TableCell>
 </TableRow>
 ))
 </TableBody>
 </Table>
 </Paper>
 );



BasicTable.propTypes = 
 classes: PropTypes.object.isRequired,
;

export default withStyles(styles)(BasicTable);

you can write a onClick event and call the function like below

https://codesandbox.io/s/wwq0r9nn8?fontsize=14