How to onRowClick redirected to another page with mui-datatables npm package?

Question

I have a react app that uses package mui-datatables. I want to be redirected to "/edit-form" onRowClick, but it didn't work (nothing happens, no errors either).

import React, { Component } from "react";
import { Link as RouterLink } from "react-router-dom";
import Link from "@material-ui/core/Link";
import MUIDataTable from "mui-datatables";

class DataTable extends Component {
  state={...}
  redirectToForm = props => <RouterLink to="/edit-form" {...props}/>

  render() {
  const options = {
    onRowClick: rowData => this.redirectToForm(rowData)
  };
  
  return (
    <Link
      color="secondary"
      className={classes.button}
      component={this.goToDetailedTable}
    >
      Detail 
    </Link>
    <MUIDataTable
      title={title}
      columns={value.state.columnName}
      data={value.state.rowData}
      options={options}
    />
    )
  }

When I console.log(rowData), it did print out the row data:

const options = {
    onRowClick: rowData => console.log(rowData)
  };

score 4 · Answer 1 · answered Mar 15 '19 at 18:18

4

Instead of using <Link/> try calling history from the history package and then just history.push('edit/form').

answered Mar 15 '19 at 18:18

AlanP

328
1
5

Thanks! It indeed is the solution. – akl Mar 19 '19 at 14:42
this isn't a solution if you need to push props as well – toing_toing Apr 30 '19 at 12:27

How to onRowClick redirected to another page with mui-datatables npm package?

1 Answers1