I'm trying to use an URL as hyperlink to another field in the table.
ticketurl
and ticketid
are two different name value pairs in my JSON response. I'm trying to display ticketid
, which is a hyperlink to ticketurl
:
data is json array
[
{
"index": 2,
"empId": "ammy",
"requestorId": null,
"profile": "a",
"request": "b",
"ticketId": "abc-12345",
"createdTime": "2019-07-07 18:01:15.0",
"updatedTime": "2019-07-07 18:56:26.0",
"statusurl": "www.xyz.com",
"ticketurl": "www.abc.com",
"status": "Open",
"description": "The issue is open"
}
]
<ReactTable
data={data}
columns={[
{
columns: [
{
Header: "Employee Id",
accessor: "empId"
},
{
Header: "Requestor Id",
accessor: "requestorId"
},
{
Header: "Profile",
accessor: "profile"
},
{
Header: "Request",
accessor: "request"
},
{
Header: "Ticket",
id: "link",
accessor: d => d.ticketurl,
Cell: ({ row }) => <a href={row.ticketurl}>{row.ticketid}</a>
},
{
Header: "Created Time",
accessor: "createdTime"
},
{
Header: "Updated Time",
accessor: "updatedTime"
},
{
Header: "Status",
accessor: "status"
},
{
Header: "Description",
accessor: "description"
}
]
}
]}
defaultPageSize={10}
className="-striped -highlight"
/>
I'm getting an empty cell.
First of all, your columns object inside the ReactTable should directly have a list of your column objects, not a list of a columns list. It should look like this :
columns={[
{
Header: "Employee Id",
accessor: "empId"
},
{
Header: "Requestor Id",
accessor: "requestorId"
},
[...]
]}
Then, in your Cell
content, row.ticketid
won't return any value, since all the values are stored in row.original
, and that you have a typo on ticketid
, it should be ticketId
(capital letter on the I
).
Hence, to display the ticketId content, your Cell
should be like this :
Cell: ({ row }) => <a href={row.original.ticketurl}>{row.original.ticketId}</a>