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!

SuleymanSah · Accepted Answer · 2019-10-28T08:29:27.693

6

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

edited Oct 28 '19 at 08:29

answered Oct 28 '19 at 06:31

SuleymanSah

17,153
5
33
54

Hey! Thanks for the response. I actually don’t want a specific text to be the link. I want to click anywhere in the row and have it link somewhere. – Strawberly Oct 28 '19 at 07:43
@Strawberly I edited answer and the sample codesandbox, can you check? – SuleymanSah Oct 28 '19 at 08:30

score 1 · Answer 2 · answered Jul 30 '20 at 13:55

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.

score 1 · Answer 3 · answered Jan 07 '21 at 03:03

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')
}

lueenavarro · Answer 4 · 2022-05-07T22:41:38.813

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

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

4 Answers4