Material-ui: [TableHeaderColumn] onClick not firing

[johnnygames]

I'm working on implementing sorting functionality and cannot for the life of me get onClick to fire for <TableHeaderColumn>. I see that there is an onClick prop in the docs, but no luck.

<Table
        fixedHeader={true}
        >
        <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
          <TableRow>
            <TableHeaderColumn style={{width: '7%'}}></TableHeaderColumn>
            <TableHeaderColumn style={{width: '12%'}} tooltip="Click to sort">Name</TableHeaderColumn>
            <TableHeaderColumn onClick={(row, col) => console.log(col)} style={{width: '17%'}} tooltip="Click to sort">Email</TableHeaderColumn>
            <TableHeaderColumn style={{width: '7%'}} tooltip="Click to sort">Role</TableHeaderColumn>
            <TableHeaderColumn style={{width: '10%'}} tooltip="Click to sort">Status</TableHeaderColumn>
            <TableHeaderColumn style={{width: '2%'}}></TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody selectable={true} showRowHover={true} displayRowCheckbox={false} style={{overflow: 'visible'}}>
          {rows}
        </TableBody>
      </Table>

This was just for testing purposes, but the third <TableHeaderColumn> does nothing when clicked. It also doesn't fire when passed a this.handleClick or other callback. onCellClick being passed to <Table> works when clicked on anything other than the header cells. This is using React 0.13.2 and Material-UI 0.11.0.

[kamek-pf]

Same here, I'm not able to use onClick.
As OP said, it doesn't work for <TableHeaderColumn>, but I can't get it to work with <TableRowColumn> either. (and yes, I know about then onCellClick event :p)

It's a bit strange that onClicks never get triggered. Maybe we're no supposed to use them at all with Material UI ? Or are we missing something ?

[oliviertassinari]

@kamek-pf Are you using the latest verion of material-ui?
Have a look at https://github.com/callemall/material-ui/blob/master/src/table/table-header-column.jsx#L126. It should be working.

[oliviertassinari]

Turns out, that the TableRow component is overiding the onClick property (https://github.com/callemall/material-ui/blob/master/src/table/table-row.jsx#L145). You have to use onCellClick. Let me know if this solve you issue.

[kamek-pf]

Yup, it fixed my issue, thanks @oliviertassinari.

[oliviertassinari]

@kamek-pf I'm wondering if this is in the doc. Feel free to submit a PR to enhance if it's not the case.

[kamek-pf]

I just checked, it's not in the doc. I'll send a PR tonight.

[kamek-pf]

Done, see https://github.com/callemall/material-ui/pull/2138.

[oliviertassinari]

The format of the docs has changed considerably, and onCellClick is now documented (automatically from comments in the source code).

I'll close this issue, but if you feel anything isn't clear in the new docs, feel free to reopen this issue.

[ccomb]

This issue is exactly the same as #1783 and I've submitted PR #3492 as an attempt to fix both

[Sundin]

Hello, any update on how to get onClick to work for TableHeaderColumns?

[ccomb]

It's ongoing in #3812 but I've currently no time to improve QA on the PR, help appreciated until I can work again on it

[skbailey]

I'm also interested in this, I'm not getting click events to work on <TableHeaderColumn />, the onCellClick callback works for columns in the table body but I'm not getting any click events triggered for the header columns.

Ideally, I'd like to sort the table by clicking the TableHeaderColumns, I'm on the latest version of material-ui 0.15.0. Any word on when this update might get in?

[vyushin]

@skbailey, I had the same problem when I was trying sort my table. I found only one solution for this case — onCellClick for the header column must be set on the TableRow.

<TableHeader>
    <TableRow onCellClick={(event) => (console.log(event.target))}>
        <TableHeaderColumn>Col 1</TableHeaderColumn>
        <TableHeaderColumn>Col 2</TableHeaderColumn>
        <TableHeaderColumn>Col 3</TableHeaderColumn>
    </TableRow>
</TableHeader>

I tryed this solution on Material UI 0.16.1. It worked. :)

[zhuhan0]

@vyushin you saved my day!