如何使一列中的條目可以在React Table中單擊？

Im使用React Table（http://react-table.js.org）在頁面中顯示錶格並使用從API調用的數據填充表格。我想將其中一列的值顯示爲鏈接（hrefs）。這個特定的列僅包含URL。如何在React Table中實現這個？如何使一列中的條目可以在React Table中單擊？

我以「e」作爲正在顯示在表中的數據並將其封裝在ahref中以將其轉換爲鏈接。但是，這種方法不起作用。

來源

2017-09-06 SeaWarrior404

這是簡單的文檔所示。按單元更改渲染。像這樣：

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

來源

2017-09-06 11:20:46

啊！我使用渲染而不是Cell。並且在你的回答中，你在開頭添加了一個額外的e =>。謝謝！ – SeaWarrior404

耶，e刪除。 –

從文檔;您可以設置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" 
     />

來源

2017-09-06 11:15:06 bennygenel

如何使一列中的條目可以在React Table中單擊？

回答

相關問題