Use Link from react router in a cell about gridjs-react

[jimmybutton]

Hi @arnigunnar, just for you to know, I've switched to using React Table (https://react-table.tanstack.com/). It's a bit more work to set it up but it works great and allowes for more customization.

[jimmybutton]

I've tried a few things but still wasn't able to make this work. Here is another approach I tried:

import { useHistory } from "react-router-dom";

const CellLink = ({ item }) => {
  let history = useHistory();
  function handleClick() {
    history.push(`/jobs/${item.jobId}`);
  }
  return (
    <button onClick={handleClick} className="font-bold">
      View
    </button>
  );
};

...

<Grid
  data={data.map((item) => ({
    ...item,
    button: _(<CellLink item={item} />),
  }))}
  columns={columns}
/>

If i use CellLink outside Grid it works, but if I use it in a cell, I get TypeError: Cannot read property 'push' of undefined.

Any advice would be greatly appreciated.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[arnigunnar]

Is there any way of reopening this, as I am having exactly the same issue.

formatter: (cell) => _(<Link to="/this-should-be-the-link">{ cell }</Link>)

[a-r-i-e-l]

Send the history as a prop to CellLink

import { useHistory } from "react-router-dom";

const CellLink = ({ item, history }) => {
  function handleClick() {
    history.push(`/jobs/${item.jobId}`);
  }
  return (
    <button onClick={handleClick} className="font-bold">
      View
    </button>
  );
};

...

const WrapperComponent = () => {
  const history = useHistory();
  return (
    <Grid
      data={data.map((item) => ({
        ...item,
        button: _(<CellLink item={item} history={history} />),
      }))}
      columns={columns}
    />
  )
}

[dhoonbae]

I solved !

https://gridjs.io/docs/examples/cell-attributes

const grid = new Grid({
columns: [
{
name: 'Name',
attributes: (cell) => {
// add these attributes to the td elements only
if (cell) {
return {
'data-cell-content': cell,
'onclick': () => alert(cell),
'style': 'cursor: pointer',
};
}
}
},
'Email',
],
data: Array(5).fill().map(x => [
faker.name.findName(),
faker.internet.email(),
])
});

[ react ]
import { useHistory } from 'react-router-dom';
const history = useHistory();
...
onclick : () => history.push('/link')