Semantic UI React - Table - Make whole row selectable and link somewhere

Question

I have tried making a row selectable but I want to be able to click anywhere inside the row and have it link somewhere. Each row should have a different link.

This way below puts all my Table.Cells into one cell even if I specify multiple cells.

<Table selectable color={'black'} >
   <Table.Body>
      <Table.Row positive>
         <Link to={'/ticker/'}> 
            <Table.Cell></Table.Cell>
            <Table.Cell></Table.Cell>
            <Table.Cell></Table.Cell>
            etc...

This way below solves the problem but makes each cell have a hover, instead of the whole row hovering.

<Table selectable color={'black'} >
   <Table.Body>
      <Table.Row positive>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         <Table.Cell selectable><Link to={'/ticker/'}></Link></Table.Cell>
         etc...

I want to make just each row selectable and hover the same color, and have each row link to a different link.

Thank you!

Answer 1

You need to handle onClick in row like this:

   <Table.Row
          positive
          onClick={() => {
            handleClick("1");
          }}
        >

You can see a working example here:

https://codesandbox.io/s/semantic-ui-example-5izhs

Answer 2

While SuleymanSah's answer works, there is one downside to it. Since he is using an onclick event, instead of a link/anchor, the browser will not let you open the "link" in a new tab/window, or render the right cursor.

After looking in to this, as far as I can tell there is no proper way to have the entire row clickable, while also telling the browser that it's a link.

Answer 3

Not using Link but perhaps this is acceptable also.

If you pass a row identifier to the key property:

<Table.Row key={id} onClick={() => onRowClick(id)}>
  <Table.Cell>...</Table.Cell>
  <Table.Cell>...</Table.Cell>
</Table.Row>

It'll then be passed to the onRowClick function and (assuming you use React Router) you can navigate to the page by pushing the url onto the history:

const onRowClick = (id) => {
  console.log(id)  // or push to the Redux store or something like that
  history.push('/page/scan')
}

Answer 4

If you really need an anchor row so you can open each row in a new tab, I think I found a trick.

        <Table.Body>
          {customers.map((customer, i) => {
            return (
              <Table.Row key={i} className={styles.row}>
                <Table.Cell>{formatName(customer)}</Table.Cell>
                <Table.Cell>{formatAddress(customer)}</Table.Cell>
                <Table.Cell>{formatContact(customer)}</Table.Cell>
                <Table.Cell>{formatBirthdate(customer)}</Table.Cell>
                )}
                <Table.Cell className={styles['link-cell']}>
                  <Link href={`/customers/${customer.id}`} passHref>
                    <a className={styles.link}></a>
                  </Link>
                </Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>

then in my css module

.row {
  cursor: pointer;
  position: relative;
}

.link-cell {
  padding: 0 !important;
  border: 0 !important;
}

.link {
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

The idea is to make the tag spread to the whole row. This would be ideal if you do not have any other clickable elements inside your row