Abridged Table

Problem

You need to present a table with several columns that does not fit on the width of a device. You could reformat the table; however, the spatial relations established on the table need to be preserved.

Solution

Display the table with some of the columns hidden, but provide a method for users to toggle the visibility of the hidden columns.

An ABRIDGED TABLE is an alternative to the LINEARIZED TABLE, particularly useful when the order and relations established on the table are important for its understanding. This pattern is most suitable for responsive designs because it allows us to automatically conceal columns on a table depending on the width of the device. It should be implemented1 in a way that permits to specify the order in which columns should be hidden, so non-essential columns can be removed first. You should also provide a method that allows users to reveal the hidden columns; a button that triggers a DROPDOWN with a list of all available columns can be an solution to this problem.

***

Web Design Patterns for Mobile Devices
Responsive design tables, 06/2012

  1. The Filament Group provides thorough explanation for the implementation of this pattern, although a easier implementation can be accomplishe through a plugin