React-table: How to add Link to a cell?

[friedpine]

Is it possible to add link(in react-router) to the cells of a column?

[witbybit]

How did you manage to solve it?
I am trying to use react-router with react-table.

[tannerlinsley]

In the Cell renderer just use the react router Link component
On Wed, May 24, 2017 at 11:28 AM nikhilag [e-mail] wrote:

How did you manage to solve it?
I am trying to use react-router with react-table.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/89#issuecomment-303794598,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCWZHatkUxuo4abwaj0U2VLqCfr1Jks5r9GimgaJpZM4MFIit
.

[mikedevita]

something like this will work quite fine.

Note: I didn't test this code so it probably has syntax errors but should give you sufficient information to get started.

import { Link } from 'react-router';

const columns = [
  {
    header: '',
    id: 'links',
    render: ({ row }) => (<Link to={{ pathname: `/foo/${row.id}` }}>{row.name}</Link>)
  }
];

[witbybit]

Thanks @tannerlinsley and @mikedevita .
Is it possible to use Link when clicking on a row instead of just a cell?

[Skylsmoi]

@nikhilag

I've managed to do it by overriding TrGroupComponent prop
Here's my code :

<ReactTable
  data={searchResult}
  columns={[{
    Header: 'Libellé matière',
    accessor: 'materialDescription'
  }, {
    Header: 'Code thème',
    accessor: 'themeCode'
  }, {
    Header: 'Libellé thème',
    accessor: 'themeDescription'
  }, {
    Header: 'Marque',
    accessor: 'brand'
  }, {
    Header: 'Nature',
    accessor: 'nature'
  }, {
    Header: 'Typologie',
    accessor: 'type'
  }, {
    Header: 'Code Bdd',
    accessor: 'codeBdd'
  }, {
    Header: 'Code Sap',
    accessor: 'codeSap'
  }, {
    Header: 'VariationId',
    accessor: 'variationId',
    headerStyle: {display: 'none'},
    style: {display: 'none'}
  }]}
  TrGroupComponent={((compClass, displayName) => {
    if (!displayName) {
      throw new Error('No displayName found for template component:', compClass)
    }
    const cmp = ({ children, className, ...rest }) =>
      Array.isArray(children) // if the array is empty, children isn't an array, use standard react-table display fallback
       ? <Link
         to={`${PAGE_LIST.VIEW_MATERIAL}/${children[0].props.children[6].props.children + '/' + children[0].props.children[8].props.children}`}
         className={classnames('searchresult__item', compClass, className)} {...rest}>
         {children}
       </Link>
      : <div className={classnames(compClass, className)} {...rest}>
        {children}
      </div>
    cmp.displayName = displayName
    return cmp
  })('rt-tr-group', 'TrGroup')}
/>

The overriding function is a copy of makeTemplateComponent as an IIFE, I only rewrited cmd

As you can see, I generate the href (prop 'to') with the data from the children (which are the cells). Here, I use the column accessor: 'codeBdd' but I also required an info that shouldn't be in the table (accessor: 'variationId',), so I added it with display: 'none'.

It feels a bit hacky but it works.

I'm looking forward for a better solution

[aaronschwartz]

@Skylsmoi Why does it have to be a <Link/> component?
I think it would be cleaner to just do something like this:

getTrProps: (state, rowInfo)=> {
  return {
    onClick: ()=> this.props.history.push(`${PAGE_LIST.VIEW_MATERIAL}/${rowInfo.row.[columnName]}}`)
  }
}

You may need to wrap your entire component with the withRouter HOC from react-router.

[Skylsmoi]

@aaronschwartz It doesn't, your solution works and is way cleaner !
Thx !

[ghost]

Cell: ({ row }) => (<Link to={{ pathname:/foo/${row.name}}}>{row.name}</Link>)

I simply changed 'render' to 'cell' in the code snippet from mikedevita's answer and it worked for me.

[cullsin]

Hi,
I am using react router dom & the below snippet is not working.

import { Link } from 'react-router-dom'

this.state.columns = [
{
Header: 'Name',
accessor: 'name',
id: 'links',
render: ({ row }) => (/foo/${row.account_no} }}>{row.name})
}]

Can you please suggest me what went wrong.

[bocodigital]

None of these solutions work. I have tried them all. I think there is an issue with React Table and the router.

[arkn98]

Cell: ({ row }) => (<Link to={{ pathname:/foo/${row.name}}}>{row.name}</Link>)

I simply changed 'render' to 'cell' in the code snippet from mikedevita's answer and it worked for me.

I'm doing exactly the same thing. But for some reason, links are not clickable. I can hover over them & I can go to the link using right click menu and the enter keys. But primary click is not taking me anywhere. Can anyone help? It's a simple table that loads data from props (redux).

[arkn98]

Okay. I sorted things out. I was using react-onclickoutside from here on some components. It had an onClick listener on the entire page which was not propagating clicks to the DOM elements. But it is weird that only the links inside react-table were un-clickable; all other things were normal.

[anilsingh581]

I have tried the above solutions but need a bit modification i.e.

const columns = [
  ...,
  {
    Header: 'Name',
    accessor: 'name',
    Cell: ({ row }) => (<Link to={{pathname:'/editpage/'+`${row.id}`, state :{data : row} } }>{row.name}</Link>),
    filterable : true
  },
  ...
]

[skyrbs]

Hello Everyone,

i am not able to pass e.id or my dataset id.. Can you please let me know what i am missing ?
Note: Proper Link is ready but not able to pass product id at end or url..

const columns =[
{
Header: "Name",
accessor: "name",
filterable: true
},
{
Header: "Action",
Cell: e =>/admin/product/update/${e.id}}>

,
filterable: false,
sortable:false
}
]

columns={columns}
data = {products}
filterable
sortable
defaultPageSize={5}
noDataText={"Please wait ...loading"}
>

[ankitparsana]

@TreborOB Thanks for your solution works for me.
a slight change for the display cell and get a cell id name here.
Cell: ({ row }) => (
/brand/edit-brand/${row.values.id} }}
{row.values.name}

),

[sibiyan]

@TreborOB Thanks for your solution works for me.
a slight change for the display cell and get a cell id name here.
Cell: ({ row }) => (
/brand/edit-brand/${row.values.id} }}
{row.values.name}

),

this helped me too