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.


Behavior & Interactions

The header must always stay at the top as the user scrolls.

Data can be managed through filtering.