Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 779
Bharathi Devarasu Avatar asked Oct 10 '17 11:10

Bharathi Devarasu


People also ask

How to add a react router link component?

If you want to add a simple React Router Link component, you can see the commented out code. It may be better for this situation because users are accustomed to underlined text being a link to another location. Let’s add close after timeout. The Collapse component adds an easy bit of transition for our Alert.

How to align button inside alert button in react router?

If you want to align the Button differently inside the Alert, consider using the Box component. If you want to add a simple React Router Link component, you can see the commented out code. It may be better for this situation because users are accustomed to underlined text being a link to another location.

What is an example of react router with material-UI?

It also can contain a link, give users quick, actionable info, and is easily dismissed. Here’s another example of React Router with Material-UI: Dynamically Loading Material-UI Icons Using React Router Query Params. View Code Sandbox here!

How to extend the tablerow component in react-router-Dom?

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>


1 Answers

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)
like image 50
Tsuni Avatar answered Nov 15 '22 06:11

Tsuni