Updated: April 9, 2019
Version 0.2
Data Table
Intro
Data table is a set of labeled data in column(s) and row(s) showing numbers, text, and images. In general, data table is a grid layout of columns and rows. Data table is available only on tablet to fit different types of data into a screen. On the mobile version, the data is displayed as the table view of object cells.
Usage
- Use data table when the users need to compare multiple sets of data across items in a large data set.
- Use data table as a tool to query, consume, and navigate to specific data.
- Use data table for tablet only (both portrait and landscape).
- Use data table if there at least 2 columns or more of data parameters.
Structure
A. Header Row
A header row is located at the top of the list and functions as the label of each column.
B. Data Row(s)
Data row(s) go after the header row. If a row of data contains a chevron, a user may tap on it to see more details regarding that data.

Baseline Rule
Text Alignment
Left aligned:
- The first column (from the left)
- Text value column
- String value column
Right aligned:
- Numeric value column (such as currency, distance, or time duration)

Dynamic Width Column
- The column width of row takes up all the remaining space after the widths of the other columns of row are determined.
- A row contains only one Dynamic column.

Maximum Height of a Row
- We limit the max-height of text line as two lines. End-users can choose to determine max-height of text line as one or two.
- If the text is longer than max-height, the text will be truncated.
