is it possible to show a cell value as clickable link (href) in React Table v7?

[wwsskkaa]

Hi, if for every row, row.original.url stores the url, and i want to show that as a cell value as a clickable link so I can navigate to those url, is it possible to be done in react-table v7? Any help is appreciated!

[gargroh]

yes, its possible.. check 'Cell' prop on 'Columns'

[wwsskkaa]

hi! @gargroh sorry im very new to this, so im reading some easy examples on the website for example this one https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/basic?file=/src/App.js:1704-2298

which i see
columns: [
{
Header: 'Label',
accessor: 'label',
}........
so basically what i should do here is
columns: [
{
Header: 'Label',
accessor: 'label',
Cell:({ value }) => {label}
}........

but how can I access the row value for the url ?

[atreya2011]

You can do it like this 👍

Cell:({ rows, value }) => {rows["url"]}

https://react-table-omega.vercel.app/docs/api/useTable#row-properties

The callback function provided to the Cell property has a row attribute as a prop, which has a values attribute containing data of the row being rendered like this {lable: "foo", url: "bar"}

[Anurella]

That will be rows[value].url