<p dir="auto">I've been messing with it all night to see if I can isolate the problem.</p>
<p dir="auto">What I've come up with is it seems to fire partially, but the function call doesn't bubble up to any of the Table components.</p>
<p dir="auto">In <code class="notranslate">table-row.js</code> the following code runs when I click a TableRowColumn:<br>
(lines 179 to 183)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="_onCellClick: function _onCellClick(e, columnIndex) {
    if (this.props.selectable &amp;&amp; this.props.onCellClick) this.props.onCellClick(e, this.props.rowNumber, columnIndex);
    e.ctrlKey = true;
    this._onRowClick(e);
  },"><pre class="notranslate"><code class="notranslate">_onCellClick: function _onCellClick(e, columnIndex) {
    if (this.props.selectable &amp;&amp; this.props.onCellClick) this.props.onCellClick(e, this.props.rowNumber, columnIndex);
    e.ctrlKey = true;
    this._onRowClick(e);
  },
</code></pre></div>
<p dir="auto">This does then call <code class="notranslate">_onRowClick</code> in <code class="notranslate">table-row.js</code>:<br>
(lines 166 to 169)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="_onRowClick: function _onRowClick(e) {
    console.log(&quot;table-row&quot;) //Ignore this. My test logging.
    if (this.props.onRowClick) this.props.onRowClick(e, this.props.rowNumber);
  },"><pre class="notranslate"><code class="notranslate">_onRowClick: function _onRowClick(e) {
    console.log("table-row") //Ignore this. My test logging.
    if (this.props.onRowClick) this.props.onRowClick(e, this.props.rowNumber);
  },
</code></pre></div>
<p dir="auto">My component code looks like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Table
          fixedHeader={this.state.fixedHeader}
          selectable={this.state.selectable}
          onRowClick={this._handleClick.bind(this)}
          &gt;
          &lt;TableHeader
            enableSelectAll={this.state.enableSelectAll}
            displaySelectAll={this.state.displaySelectAll}
            adjustForCheckbox={this.state.adjustForCheckbox}&gt;
            &lt;TableRow
              displayRowCheckbox={this.state.displayRowCheckbox}
              selectable={false}&gt;
              &lt;TableHeaderColumn&gt;Filename&lt;/TableHeaderColumn&gt;
              &lt;TableHeaderColumn&gt;Experiment&lt;/TableHeaderColumn&gt;
              &lt;TableHeaderColumn&gt;Date created&lt;/TableHeaderColumn&gt;
            &lt;/TableRow&gt;
          &lt;/TableHeader&gt;
          &lt;TableBody
            showRowHover={this.state.showRowHover}
            displayRowCheckbox={this.state.displayRowCheckbox}&gt;
            {this.props.rows.map(function(row) {
              return (
                &lt;TableRow
                  selectable={this.state.selectable}
                  key={row.name}&gt;
                  &lt;TableRowColumn&gt;{row.name}&lt;/TableRowColumn&gt;
                  &lt;TableRowColumn&gt;{row.experiment}&lt;/TableRowColumn&gt;
                  &lt;TableRowColumn&gt;{row.created}&lt;/TableRowColumn&gt;
                &lt;/TableRow&gt;
              );
            }, this)} // you can pass an arg to define 'this' in the callback!
          &lt;/TableBody&gt;
        &lt;/Table&gt;"><pre class="notranslate"><code class="notranslate">&lt;Table
          fixedHeader={this.state.fixedHeader}
          selectable={this.state.selectable}
          onRowClick={this._handleClick.bind(this)}
          &gt;
          &lt;TableHeader
            enableSelectAll={this.state.enableSelectAll}
            displaySelectAll={this.state.displaySelectAll}
            adjustForCheckbox={this.state.adjustForCheckbox}&gt;
            &lt;TableRow
              displayRowCheckbox={this.state.displayRowCheckbox}
              selectable={false}&gt;
              &lt;TableHeaderColumn&gt;Filename&lt;/TableHeaderColumn&gt;
              &lt;TableHeaderColumn&gt;Experiment&lt;/TableHeaderColumn&gt;
              &lt;TableHeaderColumn&gt;Date created&lt;/TableHeaderColumn&gt;
            &lt;/TableRow&gt;
          &lt;/TableHeader&gt;
          &lt;TableBody
            showRowHover={this.state.showRowHover}
            displayRowCheckbox={this.state.displayRowCheckbox}&gt;
            {this.props.rows.map(function(row) {
              return (
                &lt;TableRow
                  selectable={this.state.selectable}
                  key={row.name}&gt;
                  &lt;TableRowColumn&gt;{row.name}&lt;/TableRowColumn&gt;
                  &lt;TableRowColumn&gt;{row.experiment}&lt;/TableRowColumn&gt;
                  &lt;TableRowColumn&gt;{row.created}&lt;/TableRowColumn&gt;
                &lt;/TableRow&gt;
              );
            }, this)} // you can pass an arg to define 'this' in the callback!
          &lt;/TableBody&gt;
        &lt;/Table&gt;
</code></pre></div>
<p dir="auto">I'm able to get onCellClick to work just fine, but onRowClick doesn't work if I place it on the <code class="notranslate">&lt;Table/&gt;, &lt;TableBody/&gt; or &lt;TableRow/&gt;</code></p>
<p dir="auto">One of the things I've noticed is that <code class="notranslate">table.js</code> doesn't make any mention of onRowClick. <code class="notranslate">table-body.js</code> makes some mention of <code class="notranslate">onRowClick</code>, but it has different intentions than the similar <code class="notranslate">onCellClick</code> code in the same file.</p>
<p dir="auto">In <code class="notranslate">table-body.js</code> lines 194 to 203:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="_onRowClick(e, rowNumber) {
    console.log(&quot;poop&quot;)
    e.stopPropagation();

    if (this.props.selectable) {
      // Prevent text selection while selecting rows.
      window.getSelection().removeAllRanges();
      this._processRowSelection(e, rowNumber);
    }
  },"><pre class="notranslate"><code class="notranslate">_onRowClick(e, rowNumber) {
    console.log("poop")
    e.stopPropagation();

    if (this.props.selectable) {
      // Prevent text selection while selecting rows.
      window.getSelection().removeAllRanges();
      this._processRowSelection(e, rowNumber);
    }
  },
</code></pre></div>
<p dir="auto">(lines 293 to 296):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  _onCellClick(e, rowNumber, columnNumber) {
    e.stopPropagation();
    if (this.props.onCellClick) this.props.onCellClick(rowNumber, this._getColumnId(columnNumber));
  },"><pre class="notranslate"><code class="notranslate">  _onCellClick(e, rowNumber, columnNumber) {
    e.stopPropagation();
    if (this.props.onCellClick) this.props.onCellClick(rowNumber, this._getColumnId(columnNumber));
  },
</code></pre></div>
<p dir="auto">I've tried messing with material-ul source a bit, but haven't yet found a fix. I'm missing something, but I don't know what I'm missing.</p>
<p dir="auto">I'm working on implementing sorting functionality and cannot for the life of me get <code class="notranslate">onClick</code> to fire for <code class="notranslate">&lt;TableHeaderColumn&gt;</code>. I see that there is an onClick prop in the docs, but no luck.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;Table
        fixedHeader={true}
        &gt;
        &lt;TableHeader adjustForCheckbox={false} displaySelectAll={false}&gt;
          &lt;TableRow&gt;
            &lt;TableHeaderColumn style={{width: '7%'}}&gt;&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn style={{width: '12%'}} tooltip=&quot;Click to sort&quot;&gt;Name&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn onClick={(row, col) =&gt; console.log(col)} style={{width: '17%'}} tooltip=&quot;Click to sort&quot;&gt;Email&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn style={{width: '7%'}} tooltip=&quot;Click to sort&quot;&gt;Role&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn style={{width: '10%'}} tooltip=&quot;Click to sort&quot;&gt;Status&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn style={{width: '2%'}}&gt;&lt;/TableHeaderColumn&gt;
          &lt;/TableRow&gt;
        &lt;/TableHeader&gt;
        &lt;TableBody selectable={true} showRowHover={true} displayRowCheckbox={false} style={{overflow: 'visible'}}&gt;
          {rows}
        &lt;/TableBody&gt;
      &lt;/Table&gt;"><pre class="notranslate"><code class="notranslate">&lt;Table
        fixedHeader={true}
        &gt;
        &lt;TableHeader adjustForCheckbox={false} displaySelectAll={false}&gt;
          &lt;TableRow&gt;
            &lt;TableHeaderColumn style={{width: '7%'}}&gt;&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn style={{width: '12%'}} tooltip="Click to sort"&gt;Name&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn onClick={(row, col) =&gt; console.log(col)} style={{width: '17%'}} tooltip="Click to sort"&gt;Email&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn style={{width: '7%'}} tooltip="Click to sort"&gt;Role&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn style={{width: '10%'}} tooltip="Click to sort"&gt;Status&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn style={{width: '2%'}}&gt;&lt;/TableHeaderColumn&gt;
          &lt;/TableRow&gt;
        &lt;/TableHeader&gt;
        &lt;TableBody selectable={true} showRowHover={true} displayRowCheckbox={false} style={{overflow: 'visible'}}&gt;
          {rows}
        &lt;/TableBody&gt;
      &lt;/Table&gt;
</code></pre></div>
<p dir="auto">This was just for testing purposes, but the third <code class="notranslate">&lt;TableHeaderColumn&gt;</code> does nothing when clicked. It also doesn't fire when passed a <code class="notranslate">this.handleClick</code> or other callback. onCellClick being passed to <code class="notranslate">&lt;Table&gt;</code> works when clicked on anything other than the header cells. This is using React 0.13.2 and Material-UI 0.11.0.</p>