Material UI React Table onCellClick

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.

user9903 · Accepted Answer · 2018-12-18 17:23:57Z

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>
    )}
    // ...
  );
}

answered Dec 18, 2018 at 17:23

user9903

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material UI React Table onCellClick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related