React Tableでクリック可能な項目を1列にするには？

Question

Imリアクションテーブル（http://react-table.js.org）を使用して、ページにテーブルを表示し、APIから呼び出されたデータを入力します。私は値をリンク（hrefs）として列の1つに表示したい。この特定の列にはURLのみが含まれています。どのようにこれをリアクションテーブルに実装するのですか？

​​

Imがテーブルに表示されているデータとして「e」を取り、リンクとしてそれを変換するためにAHREFでそれを包みます。しかし、このアプローチは機能しません。

Answer 1

これは文書が示すように簡単です。セル単位でレンダリングを変更する。このように：

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

Answer 2

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