Tables

Favorite Author Started Views Actions
Spacecraft Kasia Galek 20 Nov 2015 13,497
Astronaut Suits Anna Smith 29 Oct 2015 76,086
Rocket Fuel Johnny Rufus 05 Nov 2015 109,976
Potato Seeds Brian Connor 20 Nov 2015 13,497

Tables are a structured way of presenting large volumes of data in an easy to understand manner.

Width

In most cases, tables are as wide as the whole page. However, if you have limited content and excessive table width would make reading the content difficult, reduce the table width to fit the content or the general context of the page.

An example of reduced table width

Columns and rows

The number and type of columns that you choose should be based on the information needs for a majority of the use cases. To help your users read the table, order the columns by importance from left to right, with the key piece of content opening the row.

An example of using headings, inactive rows and long text
Headings:
An element above each column that describes what kind of content it includes.
Inactive rows:
If the whole row or certain options within it are inactive, the row gets disabled, and a tooltip provides an explanation.
Long Text:
There are multiple ways to handle text that does not fit into a table cell. You can use the reveal text pattern, or truncate text (the ending or in the middle). Do not mix techniques in one table.

Content alignment

Author Started Size
Arjan Helmer 20 Nov 2015 65 GB
Kasia Galek 29 Oct 2015 2134 GB
Pamela Jason SMith 05 Nov 2015 12 GB

Content should be left aligned except where using a different alignment option helps with comprehension. For example, numeric data is easier to scan when right aligned. The alignment of column headers matches its content.

Table interactions

Content sorting by column

By default, sorting is switched off. If you are dealing with a potentially long table and want to provide users with an option to speed up finding certain items, enable sorting in the relevant columns.

User Joined Comments Actions
Kasia Galek 20 Nov 2015 13,497
Brian Connor 29 Oct 2015 76,086
Pamela Jason Smith 05 Nov 2015 109,976

Inline actions

Actions that can be performed on an individual table row are displayed in the far right column and are visible at all times (no on-hover visibility). If two or more rows have the same actions, those actions should be vertically aligned.

An example of inline actions in a table
Link Button:
Used to display actions in a table row. A maximum of three link buttons can be visible at the same time.
Elipsis rows:
Used to highlight one or two main actions by collapsing less important ones under the ellipsis. The ellipsis menu itself counts against the limit of three positions to display, so if you offer four or more actions you must use it to collapse two or more link buttons.