Need to navigate link while clicking material ui table row in React Router 4

Question

I am using react router 4 and React Material UI while clicking react material table row I can able to trigger the event by using onCellClick Event but I need to navigate another page while clicking table row.

Could you please suggest the best way to do?

<Table  onCellClick={()=> { alert("Table Row Clicked!! ")}} >

 <TableHeader displaySelectAll={false}
        adjustForCheckbox={false}>
        <TableRow>
          <TableHeaderColumn> First</TableHeaderColumn> 
          <TableHeaderColumn>Last</TableHeaderColumn>
        </TableRow>
 </TableHeader>
<TableBody displayRowCheckbox={false}>
        <TableRow>
          <TableRowColumn>Randal</TableRowColumn>
          <TableRowColumn>White</TableRowColumn>
        </TableRow>
 </TableBody>
</Table>

Tsuni Tsuni · Accepted Answer · 2018-08-02T21:55:14

One possible solution is to use the Link component in react-router-dom. You could "extend" the Table Row component with a Link component. Such as:

 <TableRow component={Link} to="/pathGoesHere">
      <TableRowColumn>Randal</TableRowColumn>
      <TableRowColumn>White</TableRowColumn>
 </TableRow>

Another possible way is to wrap your component with the withRouter HoC in react-router-dom. This allows you to access the history object as a prop. This approch will allow you a bit more control and flexibility.

const TableView = ({ history }) => {
   return (
       <TableRow hover onClick={() => history.push("/pathGoesHere")}>
         <TableRowColumn>Randal</TableRowColumn>
         <TableRowColumn>White</TableRowColumn>
       </TableRow>
     )
}

export default withRouter(TableView)

Need to navigate link while clicking material ui table row in React Router 4

1 Answers