CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
EdG
EdG

Reputation: 2351

Material UI React Table onCellClick not working on TableRow

I have material UI Table in my react component. I want to add onCellClick event to each of the row of my table. But when I add onCellClick to each TableRow then it doesn't get fired. But when I add it to my Table Tag then it get's fired. The problem with this is when I add it to Table tag the only one type of action can be taken for all the rows. What if I want to do different things with each row whenever I click them. That's why I want to have all the TableRow tags their own onClick type of event. How can I do this?

Here is my code with onCellClick event on Table Tag, which I don't want. 

class TagDetailTable extends Component {
        handleButtonClick() {
            browserHistory.push("TagList")
        }

        handleCellClick(){
            console.log("cell clicked")
        }

        render() {
            return (
                <MuiThemeProvider>
                <div>
                    <Table onCellClick= {this.handleCellClick}>
                        <TableHeader>
                            <TableRow>
                                <TableHeaderColumn>ID</TableHeaderColumn>
                                <TableHeaderColumn>Type</TableHeaderColumn>
                                <TableHeaderColumn>Category</TableHeaderColumn>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            <TableRow>
                                <TableRowColumn>1</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>2</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>3</TableRowColumn>
                                <TableRowColumn>Cigarette</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>4</TableRowColumn>
                                <TableRowColumn>Alcohol</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            <TableRow >
                                <TableRowColumn>5</TableRowColumn>
                                <TableRowColumn>Alcohol</TableRowColumn>
                                <TableRowColumn>Compliance</TableRowColumn>
                            </TableRow>
                            {/*<TableRow>*/}
                                {/*<TableRowColumn>4</TableRowColumn>*/}
                                {/*<TableRowColumn>Alcohol</TableRowColumn>*/}
                                {/*<TableRowColumn>Compliance</TableRowColumn>*/}
                            {/*</TableRow>*/}
                            {/*<TableRow>*/}
                                {/*<TableRowColumn>4</TableRowColumn>*/}
                                {/*<TableRowColumn>Alcohol</TableRowColumn>*/}
                                {/*<TableRowColumn>Compliance</TableRowColumn>*/}
                            {/*</TableRow>*/}
                            {/*<TableRow>*/}
                                {/*<TableRowColumn>4</TableRowColumn>*/}
                                {/*<TableRowColumn>Alcohol</TableRowColumn>*/}
                                {/*<TableRowColumn>Compliance</TableRowColumn>*/}
                            {/*</TableRow>*/}
                        </TableBody>
                    </Table>
                    <div className="backButton">
                        <RaisedButton backgroundColor="#293C8E" label="Back" onClick={this.handleButtonClick}
                                      labelColor="white">

                        </RaisedButton>
                    </div>
                </div>
                </MuiThemeProvider>

            );
        }
    }

Upvotes: 4

Views: 43148

Answers (3)

Svet Angelov
Svet Angelov

Reputation: 799

For those looking for this at the end of 2019, this did not work for me. At the moment you can just put onClick on TableCell or TableRow e.g.

<TableCell
  key={column.id}
  align={column.align}
  onClick={() => handleClick(row.id)}
>

Upvotes: 20

saran3h
saran3h

Reputation: 14122

export interface TableRowProps {
        // <tr/> is element that get the 'other' properties
        className?: string;
        displayBorder?: boolean;
        hoverable?: boolean;
        hovered?: boolean;
        /** @deprecated Instead, use event handler on Table */
        onCellClick?(e: React.MouseEvent<{}>, row: number, column: number): void;
        /** @deprecated Instead, use event handler on Table */
        onCellHover?(e: React.MouseEvent<{}>, row: number, column: number): void;
        /** @deprecated Instead, use event handler on Table */
        onCellHoverExit?(e: React.MouseEvent<{}>, row: number, column: number): void;
        /** @deprecated Instead, use event handler on Table */
        onRowClick?(e: React.MouseEvent<{}>, row: number): void;
        /** @deprecated Instead, use event handler on Table */
        onRowHover?(e: React.MouseEvent<{}>, row: number): void;
        /** @deprecated Instead, use event handler on Table */
        onRowHoverExit?(e: React.MouseEvent<{}>, row: number): void;
        rowNumber?: number;
        selectable?: boolean;
        selected?: boolean;
        striped?: boolean;
        style?: React.CSSProperties;
    }
export class TableRow extends React.Component<TableRowProps> {
    }

There is an onRowClick function which I used on <TableRow/> rather than defining handlers on Table itself. It's deprecated though so the solution may not be reliable. I've used material-ui v0.20 so not sure if it still works but you can give it a try.

Upvotes: 1

Elangovan
Elangovan

Reputation: 1464

Attaching OnCellClick to Row is not supported. See https://github.com/callemall/material-ui/issues/2819 for more details.

However, you could use the function parameter of the handleCellClick. The signature of the function receiving the event is:

handleCellClick(row,column,event)
{
    if(row ==0)
       console.log('Cigarette row clicked');

}

Upvotes: 2

Related Questions