Clickable Rows in Data Grids

[brannytempy]

Hi Paste!

In some areas within Segment, such as Engage, our Tables have clickable rows that take the user to the individual object. They are not keyboard accessible/focusable.

CleanShot.2022-10-25.at.09.55.17.mp4

What we're running into is other designers are using this pattern for rows that have multiple anchors inside of it. Looking at Tables & Data Grid docs on Paste website doesn't have any information about clickable rows. My hunch is this isn't the best pattern, and a more bulletproof approach would be to ensure there is only 1 anchor present in a row.

I'd love some more information from you:

• Can Data Grids support linking entire rows, while still being able to tab into the children?
• Is your recommendation to always include at least 1 anchor in a cell in the row?
• Any other information about using Data Grids as a means of navigation.

[shleewhite]

Hi @brannytempy!

You are correct that the best practice is to have a cell in each row that contains a link. So for your example, maybe the text "Runners" could be a link instead.

We don't support clicking the entire row to navigate because it can't really be made accessible. In general, there is a divide between interactive elements (links/inputs/etc) and non-interactive elements (paragraphs/table rows/etc). When you add an onClick to a non-interactive element, it is difficult to communicate that it performs an action to all users and can make navigating the table more difficult.