Updated: May 22, 2018

Data Table

Intro

A data table is a range of labeled columns and rows used to present numbers, text, or even images. Generally, data tables are a grid layout of columns and rows.

Data tables are available only on regular screen sizes. On compact screen sizes, the data is displayed in the table view of object cells.

 

Usage

Dos

  • Use data tables when the users need to compare multiple attributes across items in a large data set.
  • Use data tables in regular screen sizes.

Don’ts

  • Don’t use data tables in compact screen sizes.
  • Don’t use data tables in any preview views.
  • Don’t use data tables when the users don’t need to compare multiple attributes across the items.

 

Structure

A data table contains:

A. Header Row

A header row at the top of the list, for the labels of the columns. There are normally at least 3 columns in a data table.

B. Rows of Data

Rows of data follow the header row. If a row of data contains a chevron, it allows the users to see more details which are not presented in the row.

 

Types

Read-only Tables

In read-only tables, the rows of data are read-only for the users and the accessory column is empty. This type of table can be useful for object floorplans.

 

Editable Tables

Editable tables allow users to edit the data in the rows by providing disclosure icons in the accessory column. If the row items have a few more details that cannot be presented in the table, disclosure icons can also be used for displaying additional information.

 

Drill-down Table

When the table contains objects with a large amount of additional information that cannot be presented on the table, use drill-down tables to allow the users to drill down to see more details. Drill-down tables use chevrons in the accessory column.

 

Guidelines

Header

Avoid using long header titles. Keep the header title short and clear to communicate the content in the column. If there are no shorter alternatives, use two lines for longer header titles. Avoid truncating the titles when there’s no way to see the whole text.

Indicate the units for numeric data in the header titles, such as “Price ($)”, “Protein (g)”, and “Time (hrs)”. Avoid repeating the units in each row. However, units like % can be an exception if they help the users read the data faster.

 

Column

Text alignment:

Right-aligned numeric columns

Left-aligned text columns

The data row is a fixed height (54pt). Avoid using multiple lines within a row since it makes it more difficult to quickly scan the data in the table.

Image column has a fixed width of 45pt.

Choose an appropriate width for each column. The column that contains the longest text (L) will take over whatever is left on the screen after other columns are defined. The minimum column width is 60pt. Most data will fit in the column without being truncated.

Recommended column width (W):

n*20 <= W <= (n+1)*20 ;

n>=3, n is an integer.

Behavior & Interaction

Note: Not all behaviour and interaction is available on read-only tables.

In the edit mode, the checkboxes that show up in each row allow users to select that row of data for further actions.

 

Add a data row

The “+” button, which can appear on the navigation bar or in an inline cell button, allows the users to add a new data row to the current data table.

 

Edit a data row in the Editable Tables

The disclosure icon in each row allows the users to edit the data row in a modal. For Drill-down Tables, the users would need to go to the item detail screen in order to edit the data.

 

Filter and Sort

Users will use the Filter button on the navigation bar or toolbar to bring out the Filter modal to filter the data in the table.

Compact

In compact screen size, the Data Table will be converted into object cells. The app designer can decide which columns of information will be presented in the object cells. Normally, there won’t be more than 6 types of information in the object cells.

 

Resources