add Link to a react-table cell

react-table add edit/delete column link

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>
     )
  }
]

Result looks like,

ANIL SINGH

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^