Try the below examples to achieve add
edit/delete columns in react-table using Link,
As
an Example,
Import the Link component,
import { Link } from 'react-router-dom'
If
you want to add Edit link in React-Table Cell, Use below code,
const columns = [
...,
{
Header: 'Name',
accessor: 'name',
Cell: ({ row }) => (<Link to={{pathname:'/editpage/'+`${row.pageURL}`, state :{data : row} } }>{row.name}</Link>),
filterable : true
},
...
]
If
you want to add function/method after click on react-table cell button, Use
below code,
const columns = [
...
{
Header: '',
Cell: row => (
<div>
<button onClick={() => handleEdit(row)}>Edit</button>
<button onClick={() => handleDelete(row.id)}>Delete</button>
</div>
)
}
]
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
