如何在React Table中单击一列中的条目？

Question

我使用React Table（http://react-table.js.org）在页面中显示一个表，并使用从API调用的数据填充它。我想将其中一列显示的值作为链接（一个hrefs）。此特定列仅包含URL。如何在React Table中实现它？

    columns: [
            {
              filterable: false,
              Header: 'Click here',
              accessor: 'link',
              render: e => <a href={e.value}> {e.value} </a>,
            },
          ],

我将“e”作为正在表中显示的数据并将其包装在ahref中以将其转换为链接。但是，这种方法不起作用。

Answer 1

这很简单，如文档所示。通过Cell更改渲染。像这样：

Cell: e =><a href={e.value}> {e.value} </a>

Answer 2

最好尝试将 NavLink 添加到单元格。在文档中我找不到解决方案。 所以我创建了一个自定义的 NavLink 组件。

function NavLinkButton({
  row: data,
  }: FilterProps<Application>) { 
    const application = data.original
    return (
        <NavLink to={{pathname:RouteNames.xxxx, state: { application: application }}}>View</NavLink >
    )
  }

  export default NavLinkButton

并使用“Cell”访问该 NavLinkBut​​ton。

import NavLinkButton from '../common/NavLink';

const COLUMNS: Column<Application>[] = [
    {
        Header: 'Candidate Name',
        accessor: (j) => j.name,
        filter: 'fuzzyText',
    },
    {
        Header: 'Action',
        disableFilters: true,
        Cell: NavLinkButton
    }
];

Answer 3

来自文档; 您可以设置custom components for cells。

示例：

<ReactTable
          data={data}
          columns={[{
      Header: 'Name',
      columns: [{
        Header: 'First Name',
        accessor: 'firstName'
      }, {
        Header: 'Last Name',
        id: 'lastName',
        accessor: d => d.lastName
      }]
    }, {
      Header: 'Info',
      columns: [{
        Header: 'Profile Progress',
        accessor: 'progress',
        Cell: row => (
          <div
            style={{
              width: '100%',
              height: '100%',
              backgroundColor: '#dadada',
              borderRadius: '2px'
            }}
          >
            <div
              style={{
                width: `${row.value}%`,
                height: '100%',
                backgroundColor: row.value > 66 ? '#85cc00'
                  : row.value > 33 ? '#ffbf00'
                  : '#ff2e00',
                borderRadius: '2px',
                transition: 'all .2s ease-out'
              }}
            />
          </div>
        )
      }, {
        Header: 'Status',
        accessor: 'status',
        Cell: row => (
          <span>
            <span style={{
              color: row.value === 'relationship' ? '#ff2e00'
                : row.value === 'complicated' ? '#ffbf00'
                : '#57d500',
              transition: 'all .3s ease'
            }}>
              &#x25cf;
            </span> {
              row.value === 'relationship' ? 'In a relationship'
              : row.value === 'complicated' ? `It's complicated`
              : 'Single'
            }
          </span>
        )
      }]
    }]}
          defaultPageSize={10}
          className="-striped -highlight"
        />