CODEWITHSUNDEEP
reactjshtml-table
akantoword
akantoword

Reputation: 3044

How do I place a react link on tds of a table?

I want to have all the td's from firstName to email be clickable to link to that specific contact. Do I have to put a Link wrapper on each div? Even if I do, I want the Link to wrap around the entire td, not just the text within it so that the user can click on any part of the td rather than the text itself. 

<tr key={index}>
  <td><Link to={`/${contact.id}`}><div>{contact.firstName}</div></Link></td>
  <td>{contact.lastName}</td>
  <td>{contact.city}</td>
  <td>{contact.phone}</td>
  <td>{contact.email}</td>
  <td><input type="checkbox" value="readOnly" checked={that.state.deleteList.includes(contact.id)} onClick={that.addToDeleteList.bind(that, contact.id)}/></td>
</tr>

Upvotes: 0

Views: 1522

Answers (1)

WitVault
WitVault

Reputation: 24130

For link part you are doing it correctly. Just remove <div> from Link tag.

To make whole table cell clickable irrespective of content within it set display of Link to block via css or inlinke css. e.g.

display: block

Here is CSS for the same.

td a {
    display:block;
    width:100%;
}

Upvotes: 2

Related Questions