react-table add edit/delete column link

Try the below examples to achieve add edit/delete columns in react-table using Link,

How to add Link to a react-table cell?

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,