Basic Table

Interaction Specs

Interaction Specs: 

1. View brief table title.

Clearly indicate the purpose and content of Table.

Capitalize first letter of each word for table title.

The table title may be omitted when a single table is the only component in the content area, and the content area reflects the table contents.

2. Select column sorting.

For Alternative sorting, one click on column header to sort from A to Z.

Another click on column header sorts from Z to A. When a column is sorted, the column background is highlighted.

5. Set truncating content.

Set the table cell default to truncate the content.

Using truncation will allow the user to quickly scan and compare data within cells over a range of rows rather than scanning a wrapped content with line breaks.

Table Cell Truncation Interaction: When truncated, an ellipsis will be shown at the end of the truncated text to indicate the text is truncated. Hovering anywhere above the truncated content will display a tool tip containing the complete paragraph.

The tool tip is a mandatory requirement for truncated text to provide a complete view of the content.

In case the table cell is associated with a quick view, a combination of an ellipsis and a quick view access arrow should be displayed (i.e. truncated text + ellipsis + Quick View access icon).

6. Use content wrapping.

Use wrapped content for 'Description' and 'Notes' columns.

This will allow the user to view the entire content at a glance.

7. Limit Icon cell size.

Icon cell size should be limited.

Set to 16x16 pixels. It is recommended to include description next to each icon in one cell.

Alternative solution is to provide tool tips to describe what the icons represent if no description can be included on the same cell.

8. Manage the columns.

Choose to show or hide certain columns from the 'Manage columns' dropdown menu.

By default, all columns are selected. Once the setting is changed, it is automatically saved in browser cookie.

When the user visits the same page the next time, the same setting will be kept until user cleans the cache.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

Table basics provides structure and guidelines for the establishment and management of the table and cell design.

What is the Solution

Planning the structure, and understanding the guidelines to Table Basics ensures use of sorting, colors, navigation, truncation, wrapping, icons, and column management.  Some solutions that are at all levels of the development;

  • Alternate sorting; one click may sort A-Z, another click reverses sort to Z-A.
  • Column being worked is highlighted, as well as highlighting of alternate rows.
  • Global Search Tool capabilities.
  • Table cell truncation allows the user to quickly scan the contents of the columns.
  • Table cell wrap for necessary descriptions or notes.

When to Use This Pattern

Use to ensure full operability of table structure.

Do Not Use This Pattern

Except for table identity and management. Not for use with HTML frames.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015