Exploding table cell

Status tags



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

How it works

Sep-19-2019 12-22-24 pm


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


Initial width of sliding panel can vary according to content


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


  • 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

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