|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.
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.
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 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.
|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.
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.
|Kasia Galek||20 Nov 2015||13,497|
|Brian Connor||29 Oct 2015||76,086|
|Pamela Jason Smith||05 Nov 2015||109,976|
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.
- 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.