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.