Material-ui: [Table] OnCellClick not working for a <TableRow> inside of <TableBody>

[tsaifi9]

Versions:
[email protected]_
[email protected]_

Seeing a strange issue where OnCellClick is not firing for a TableRow located inside of a TableBody. Though, the OnCellClick _will work_ if the Row is located inside TableHeader.

Ex

var Table = require('material-ui/lib/table/table');
var TableBody = require('material-ui/lib/table/table-body');
var TableHeader = require('material-ui/lib/table/table-header');
var TableHeaderColumn = require('material-ui/lib/table/table-header-column');
var TableRow = require('material-ui/lib/table/table-row');
var TableRowColumn = require('material-ui/lib/table/table-row-column');

var TableExample = React.createClass({
  cellClicked: function(rowNumber, columnId) {
    console.log('cell clicked!');
  },

  render: function() {
    return (
      <Table>
        <TableHeader>
          <TableRow onCellClick={this.cellClicked}>
            <TableHeaderColumn>event will fire</TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow onCellClick={this.cellClicked}>
            <TableRowColumn>event will NOT fire</TableRowColumn>
          </TableRow>
        </TableBody>
      </Table>
    );
  }
});

module.exports = TableExample;

@oliviertassinari thoughts on this?

[zachguo]

have you tried attach onCellClick to TableHeaderColumn or TableRowColumn?

um, current docs indicate that onCellClick is an event for Table, have your tried Table?

[tsaifi9]

@zachguo yup that did it. Attaching the onCellClick to Table worked. Thanks :+1:

[nathanmarks]

@oliviertassinari @newoga

I know the original poster closed this issue, but I wanted to highlight it quickly as I encountered the same issue myself.

It feels counterintuitive to have a composable component that only lets you tap into events at the very top. When you click on the cell, you can currently only access that event from the <Table /> component, however the docs and components are full of props on themselves (onRowClick, etc) which leads one to believe we can hook into events that way. Nope.

I spent about 30 minutes trying to figure out why I couldn't get row clicks working, and ended up having to read through the code from cell > row > body > table to figure out where I could get a row click (ended up with onCellClick on <Table /> after some wrestling).

Think at some point a refactor of sorts is needed here.

[ghodss]

I am inclined to agree with @nathanmarks that something is wrong about the documentation. I also just spent an hour trying to get onRowClick and/or onCellClick working on TableRow inside of a TableBody without success until I found this issue, which seems to indicate that the only handler that really works is onCellClick on Table. The docs should be updated to indicate that the only prop that actually works is onCellClick on Table.

[diegoaguilar]

How did you @nathanmarks and @ghodss achieved to get a ref to the _row_ or _cell_ being clicked?

I've found out this is the signature of the funtion receiving the event:

  onClick(row,column,event) {
    ...
  }

I'm actually rendering the table from an array of objects and I just use map to render the rows. How could I could try to get a direct ref to the _row_ (object) or _cell_ (object property)

[lucasbento]

@diegoaguilar I'm encountering the same issue, did you find out a way to solve it?

[diegoaguilar]

@lucasbento I placed the listener property at <Table /> level