Table

Tables are a fundamental UX design tool for organizing and displaying data. They are used throughout space applications and may take many forms. The principal table interactions and styles are illustrated below and demonstrated in the GRM and TTC sample applications.

Header

A table can be configured with a tall header with large hero numbers (if the count of some type is important to know at a glance) or with a compact header if vertical space is at a premium.

table with tall header

table with tall header

Table with tall header
 

table with compact header

table with compact header

Table with compact header

Filters

Filters, to narrow what is displayed in the table, may be presented in the header as Drop Down menus, as a Segmented Button, or as an Input Field. If it is critical that the user knows that not all data is displayed, a warning may be shown when filters are applied.

While filters are often related to the data types displayed in columns, it is not recommended that filters be activated directly from the column headers or displayed there. Filters selected through a combination UI elements in the header can be more expressive and focused by combining and highlighting key data types.

filters as pop ups and input field

filters as pop ups and input field

Table with filters as Drop Down menus and wildcard Input Field
 

filters as segmented button and input field

filters as segmented button and input field

Table with filters as Segmented Buttons and wildcard Input Field

Sorting

Sorting is accomplished by clicking in a column header. The sort order (ascending or descending) is indicated by a arrow. A second click in the currently sorted column changes the sort order.

Selection and Action

Tables use a familiar Selection/Action model. Selection is accomplished by clicking in a row. Multiple selection can be enabled by adding a selection column of Checkboxes. Action Buttons may appear in an inline detail area or in a footer.

table inline action cms

table inline action cms

Table with inline action
 

table with multiple selection and footer actions

table with multiple selection and footer actions

Table with multiple selection and actions in footer

×