Clickable table rows are a bad idea

I wrote about hierarchy in tables a while back, and deliberately avoided talking about clickable table rows; well, now’s the time to tackle them! Clickable table rows can be used for all sorts of things: opening a modal, revealing more rows, or taking the user to a new page. Whatever they do, making the whole row clickable is a problem. To understand why, let’s walk through how we might approach it. Make the row clickable The first thing that’s likely to come to mind is to attach a click event to the <tr>. Now mouse users can click the table row. But how will they know it’s clickable? A :hover state for the whole row, perhaps with a change in cursor style A visual affordance like a chevron icon; this is important so that we’re not reliant on that hover state, which mouse users may miss, and touch users can’t know is there Beyond affordances, what about functionality; specifically right-click behaviour? For me, adding a right-click menu to a link manually is a hard stop so, in that…