Using React Router's <Link /> to wrap a table row

[LydiaF]

Hi there,

Thank you for such a great library.

I am running into a strange issue when I wrap a row with the component from react router. I have tried to see how to do this but I can't find something. I apologise if I missed something.

Thank you for any help :)

Before:

After:

<tr {...row.getRowProps()} className="cursor-pointer hover:bg-gray-50">
                    <Link to={`/use-cases/${row.original.id}`}>
                      {row.cells.map(cell => {
                        if (cell.column.Header === 'Level') {
                          return (
                            <td {...cell.getCellProps()} className="px-6">
                              <Badge text={useCaseLevels[cell.value]} />
                            </td>
                          )
                        } else if (cell.column.Header === 'Epics') {
                          return (
                            <td {...cell.getCellProps()} className="px-6">
                              {cell.value.map(v => <Badge text={v.epic.name} key={v.epic.name} />)}
                            </td>
                          )
                        } else {
                          return (
                            <td
                              {...cell.getCellProps()}
                              className={`${cell.column.Header === 'Name' ? 'text-indigo-600 font-medium' : 'text-gray-500'} px-6 py-4 whitespace-no-wrap text-sm leading-5`}
                            >
                              {cell.render('Cell')}
                            </td>
                          )
                        }
                      })}
                    </Link>
                  </tr>

[dbertella]

Maybe try giving the Link 100% width? It's hard to say without a working example

[LydiaF]

Dear @dbertella Thank you for your suggestion but Gupta's below did the trick!

[GuptaSiddhant]

Unfortunately you can't do this. This is not react-table's issue.
This is an HTML issue which requires td to be direct children of tr. All other elements like div or Link should be inside td.

But as I can you want link the whole row. You can use the onClick prop on tr to achieve the same result. The catch is you have to use history api to manipulate your browser.

import { useHistory } from "react-router-dom";

const Table = () => {
  ...
  const history = useHistory();
  const handleRowClick = (row) => {
    history.push(`/use-cases/${row.original.id}`);
  }  

  return (
    ...
    <tr onClick={()=> handleRowClick(row)}}>
      ...
    </tr>
    ...
  );
}

[Siymiel]

Thank you GuptaSiddhant for the simple solution. Very helpful.

[Ahmadhonnee]

I really appreciate your efforts :) thanks a loot

[Ahmadhonnee]

But I think now it is replaced with useNavigate()

[gjj]

If you use onClick, wouldn't that mean you can't ctrl+click, or even have the contextual menu actions? It's kinda bad for user experience. Haven't really found a way to use onClick and yet still have the entire tr clickable.

[Billy19191]

This is still working, but useHistory is deprecated, change to useNavigate instead. Some syntax change like

const history = useHistory(); 
history.push(`/use-cases/${row.original.id}`);

to

const navigate = useNavigate(); 
navigate(`/use-cases/${row.original.id}`);

[jackbridger]

GuptaSiddhant thanks for your solution.

In case anyone is trying to enable a cmd/ctrl click to open in a new tab

Checking the event for a cmd/ctrl click worked for me.

<tr
    key={row.id}
    className={styles.row}
    {...row.getRowProps()}
    onClick={(event) =>{
        if (event.metaKey || event.ctrlKey){
            const win = window.open( `/audio-content/${row.original.id}`, "_blank");
            win?.focus();
        }
        else {
            history.push(
                `/audio-content/${row.original.id}`,
            )
        }
    }
    }>

[TheRealPiotrP]

Thanks @jackbridger I was looking for this as well :D

[TomNewton1]

@jackbridger would you be able to explain what win?.focus() does? I've removed it and the functionality stays the same. It seems that default functionality of window.open is to open the new tab in the"background" already without the need to include the win?.focus()?

The reason I am asking is because I would like to have the same functionality for a cmd/ctrl click when the middle mouse button is clicked. Replicating the above when listening for a middle mouse click doesn't seem to work. Any suggestions appreciated :)

[iamivansantana]

In React Router Dom V.6. you can do the following

import { useNavigate } from "react-router-dom";

const Table = () => {
  ...
  const navigate = useNavigate();
  const goRouteId = (id) => {
   navigate(`/${id}`);
  }  

  return (
    ...
    <tr onClick={()=> goRouteId(id)}}>
      ...
    </tr>
    ...
  );
}

[tannerlinsley]

After more thought on this subject, I’m pretty sure my first recommendation would be to not make the entire row a clickable link. Instead, I would make one or two main elements of the row like the first two cells clickable links and make it obvious that they are clickable. Only after considering that, would I recommend conditionally rendering special markup and event handlers for links.

[MarcosAlanya19]

Espero le sirva esto a la comunidad que usa TS:
En mi caso, yo tengo que consumir un api, en este caso cree una de prueba, para simular su consumo

Luego cree su interface:

Ya, ahora si vamos a lo que necesitamos, en mi caso estoy usando la Plantilla básica que te da React-Table v8

Lo que hice fue colocar mi tipado en la solicitud, para luego consumirla en Accesor, simplemente dando un recorrido

Y por ultimo, para colocar el link, solo en una columna, hice lo siguiente:

Teniendo en mente que cell tiene todos los valores, le di un recorrido hasta conseguir hasta conseguir el id de mi fila, claramente la etiqueta ancle, la puedes cambiar por Link de React y asimismo la parte de /test/ la cambiar al lugar que te quiera dirigir,
ESTE ES EL RESULTADO FINAL: (Claramente si le doy click al row2, el test cambiaria a /test/2 y así sucesivamente)

[ami-momo]

This helped me: stackoverflow.com/a/62451524/15172167
Solution: wrap each row and add onClick event with onRow prop

[dlibis]

@amir2mi that solution is for antd table, how do you use it with tanStack table?

[rbasto1]

You shouldn't wrap the tr with a Link or vice-versa. Instead, just render the Link as an element that behaves like a table row:

<Link {...row.getRowProps()} className="hover:bg-gray-50 table-row" href="/some/place">