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.

score 5 · Accepted Answer · answered Jul 08 '19 at 08:07

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>

score 1 · Answer 2 · answered Dec 09 '21 at 17:10

1

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

answered Dec 09 '21 at 17:10

Luis

21
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 09 '21 at 17:56

How to include url in react table cell

2 Answers2