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>
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.
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.
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!
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>
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With