Как включить URL в ячейку таблицы реакции - PullRequest
Новая
       13

Как включить URL в ячейку таблицы реакции

1 голос
/ 07 июля 2019

Я пытаюсь использовать URL в качестве гиперссылки на другое поле в таблице.

ticketurl и ticketid - две разные пары значений имени в моем ответе JSON. Я пытаюсь отобразить ticketid, который является гиперссылкой на ticketurl:

данные массива json 

[
{  
        "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"
/>

У меня пустая клетка.

1 Ответ

0 голосов
/ 08 июля 2019

Прежде всего, ваш объект столбцов внутри ReactTable должен иметь непосредственно список объектов ваших столбцов, а не список списка столбцов. Это должно выглядеть так: 

columns={[
  {
    Header: "Employee Id",
    accessor: "empId"
  },
  {
    Header: "Requestor Id",
    accessor: "requestorId"
  },
  [...]
]}

Тогда, в вашем Cell контенте, row.ticketid не вернет никакого значения, так как все значения хранятся в row.original, и что у вас есть опечатка на ticketid, это должно быть ticketId (заглавная буква I).

Следовательно, для отображения содержимого ticketId ваш Cell должен выглядеть следующим образом: 

Cell: ({ row }) => <a href={row.original.ticketurl}>{row.original.ticketId}</a>
...