Exploding table cell

Status tags

Experimental

Implementation

Snapcraft, MAAS, JAAS

When or why to use this pattern

  • There is more relevant, contextual information to display about or related to the value provided within a cell of a table.
  • You need to perform an action(s) specific to the value contained within the cell.

When not to use this pattern

For comparing data, when multiple cells are open it breaks the format of the table.

Variations of pattern available

51

21

How it works

Sep-19-2019 12-22-24 pm

Actionable

When a link is clicked sliding panel should appear from the left hand side

Flexible

Initial width of sliding panel can vary according to content

Discoverable

Buttons should be visible without scrolling, if your items-list is long consider placing the buttons at the top, rather than the default bottom placement.

Key Components in vanilla this pattern uses

  • Sliding panel

Recommendations

  • Clicking on the overlay should close the sliding panel.
  • On mobile second level of content should appear above the first as another layer with a clear route to return to the previous screen.

This pattern in use - real product examples

https://build.snapcraft.io/user/hughesjordan

https://github.com/canonical-web-and-design/build.snapcraft.io

46 am

Known issues

  • Not mobile friendly
  • Cell and table disconnected - styling breaks when repo name wraps onto two lines
  • Not immediately clear which cell the chevrons belong to
  • Jarring when you open multiple, hard to scan the table

Demo

http://c585ef0b.ngrok.io/