Table - Add guidance around clickable rows, links, drill downs in tables

[mmenestr]

trafficstars

Someone in the PF slack asked whether he could use a clickable row for tables that only have one action in each row - which is to drill down for more information. I said that he shouldn't because they should be reserved for primary details, and drawer opening interactions, while drill downs should be done via linking the name in the row.

This discussion made us realize there is no mention of clickable rows in table design guidelines.

Task: Add guidelines around actions in rows via clickable rows, and links inside the row

• What should each of them be used for?
• When should one be used over the other?

This would be relatively straightforward, maybe have one picture for each scenario and a little description.

[mmenestr]

Draft here:

TO ADD UNDER [H2] USAGE

[H3] Links and actions in tables

Linking to a new page, or drilling down into a row item should be done using blue links in your tables. For example, if you would like to introduce a drill-down action that would bring a user to more a new page with more information about that item, you could link the item's name in the table.

If you only have one action in each row, you should still use a blue link pattern, and should NOT make the whole row clickable. Making the whole row clickable is reserved for actions that open up more details in a drawer, rather than in a new page.

If you would like to link to multiple different pages within the same row, you may have multiple blue links within the same row, within different columns.

TO ADD UNDER [H2] VARIATIONS:

[H3]Clickable table

1. Clickable row: Row is highlighted when clicked
2. Drawer: Drawer is opened with more information about that table row

[H4]When to use

• To present a list of objects in a Primary-detail view. Clicking on the row would open up a drawer with more information.

[H4]When not to use

• To drill down for more information that would bring you to a new page. Instead, make the row item text/icon clickable.