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.