Material UI Table - How to make cells selectable - cell

Question

I am working on a week event scheduler, were you can click on one or more table cells and add events to the ones selected. However I am having problems to make each cell selectable. Also I don't know how to identify the cell that is being click on a click event.
class RegisterSchedule extends Component {
handleClick = (event) => {
if(prueba.length == 0 || !this.mismaFila(event) ){
console.log(event.target);
prueba.push(event.target);
event.target.style.backgroundColor = '#b0b0b0';
}
}
mismaFila(event){
var mismaFila = false;
prueba.map(element => {
if(element.parentElement == event.target.parentElement) {
mismaFila = true;
return mismaFila;
} else {
mismaFila = mismaFila || false;
}
});
return mismaFila;
}
Unir() {
if(prueba.length > 1){
prueba[0].rowSpan = prueba.length;
prueba.map((element, i) => {
if(i != 0){
element.remove();
}
})
prueba[0].style.backgroundColor ='#FFFFFF';
prueba = [];
}
}
Desunir() {
prueba[0].rowSpan = 1;
var row = document.createElement('TD');
console.log(prueba[0].parentElement);
prueba[0].parentElement.parentElement.appendChild(row)
}
render() {
const { classes } = this.props;
return (
<Grid container justify = 'center' >
<Grid item xs = { 8 } md = { 8 } >
<Paper className = { classes.root } >
<Table className = { classes.table } >
<TableHead >
<TableRow >
<TableCell className={classes.cell} > < /TableCell>
<TableCell className={classes.cell} > Lunes < /TableCell>
<TableCell className={classes.cell} numeric > Martes < /TableCell>
<TableCell className={classes.cell} numeric > Miercoles < /TableCell>
<TableCell className={classes.cell} numeric > Jueves< /TableCell>
<TableCell className={classes.cell} numeric > Viernes < /TableCell>
</TableRow>
</TableHead>
<TableBody > {
rows.map((row, i) => {
return (
<TableRow selectable className = { classes.row } key = { row.id } >
<TableCell className={classes.cell} component = "th" scope = "row" > 10:00 </TableCell>
<TableCell className={classes.cell} onClick = { this.handleClick }numeric > { row.calories } < /TableCell>
<TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.fat } </TableCell>
<TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.carbs } </TableCell>
<TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.protein } < /TableCell>
<TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.protein } < /TableCell>
</TableRow>
);
})
}
</TableBody>
</Table>
</Paper>
<Button onClick={this.Unir}>Unir</Button>
<Button onClick={this.Desunir}>Desunir</Button>
</Grid>
</Grid>
);
}
}
This is the way i try to handle this. I don't know if it is a good practice, but i also don't know which approach to take

Answer 1

This is exactly what you want and they have in their Component Demos in Material-UI
You need a method that handle events when user clicked on cells:
handleClick = (event, id, cell) => {
const { selected } = this.state;
const selectedCell = cell;
this.setState({ selected: selectedCell });
};
This one select a row and add it to a array
You need to add event listener to every <TableCell /> to select cells instead of rows
<TableBody>
{data
.sort(getSorting(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(n => {
const isSelected = this.isSelected(n.id);
return (
<TableRow
hover
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
>
<TableCell padding="checkbox">
<Checkbox checked={isSelected} />
</TableCell>
<TableCell component="th" scope="row"
padding="none"
onClick={event => this.handleClick(event, n.name)}
>
{n.name}
</TableCell>
<TableCell numeric
onClick={event => this.handleClick(event, n.calories)}>
{n.calories}
</TableCell>
<TableCell numeric
onClick={event => this.handleClick(event, n.id, n.fat)}>
{n.fat}</TableCell>
<TableCell numeric
onClick={event => this.handleClick(event, n.id, n.carbs)}>
{n.carbs}</TableCell>
<TableCell numeric
onClick={event => this.handleClick(event, n.id, n.protein)}>{n.protein}</TableCell>
</TableRow>
);
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
And if you want to user just select one cell in every click just remove the array part of code and just select that specific id and assign it to a varaible