Material UI React Table onCellClick - reactjs

Question

I am trying to implement a simple onCellClick listener on Material UI table.
In earlier versions of it, a function in the table scope onCellClick used to give the row and column number where click was made as shown here
Currently when this function is placed -
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Table from '#material-ui/core/Table';
import TableBody from '#material-ui/core/TableBody';
import TableCell from '#material-ui/core/TableCell';
import TableHead from '#material-ui/core/TableHead';
import TableRow from '#material-ui/core/TableRow';
import Paper from '#material-ui/core/Paper';
const styles = {
}
let id = 0;
function createData(name, calories, fat, carbs, protein) {
id += 1;
return { id, name, calories, fat, carbs, protein };
}
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
function SimpleTable(props) {
const { classes } = props;
return (
<Paper className={classes.root}>
<Table className={classes.table}
onCellClick={(rowNumber,
columnId) =>
console.log(rowNumber,columnId)}>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell numeric>Calories</TableCell>
<TableCell numeric>Fat (g)</TableCell>
<TableCell numeric>Carbs (g)</TableCell>
<TableCell numeric>Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => {
return (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell numeric>{row.calories}</TableCell>
<TableCell numeric>{row.fat}</TableCell>
<TableCell numeric>{row.carbs}</TableCell>
<TableCell numeric>{row.protein}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
export default withStyles(styles)(SimpleTable);
it throws the error Unknown event handler property onCellClick. It will be ignored.This is expected because unlike previous versions no onCellClick function is passed in the table source code.
How to achieve onCellClick functionality now in Material-UI?
Any help will be highly appreciated.

Answer 1

A cell can be a th or td element (see the source code) or a custom element that you pass through the component property.
Each of these will have support for the onClick property.
So you need something like this:
handleClick = (id, column) => {
return (event) => {
console.log(`You clicked on row with id ${id}, in column ${column}.`);
}
}
render() {
return (
// ...
{this.state.rows.map((row) => (
<TableRow key={row.id}>
<TableCell onClick={this.handleClick(row.id, "calories")}>
{row.calories}
</TableCell>
// ...
<TableCell onClick={this.handleClick(row.id, "protein")}>
{row.protein}
</TableCell>
</TableRow>
)}
// ...
);
}