How to include url in react table cell

Question

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.

Answer 1

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>

Answer 2

 {
    Header: "Header1",
    Cell: ({ row }) => (
       
          <Link
            color="inherit"
            to={`/gestion-documentos/estudiante/${row.original.cedula}`}
          >
            <AiOutlineFileDone size={25} />
          </Link>
       
    ),
  },