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.
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.
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.
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.
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.
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.
