UI Components Data Table

Intro

Data table is a grid layout of labeled data in column(s) and row(s) showing numbers, text, and images.

Data tables are available in both mobile and tablet sizes. In mobile, a horizontal scrollable data table with a sticky header is available. Alternatively, the data table will be converted to object cells by default on mobile if horizontal scrolling is disabled.

We currently only have read-only tables.

Usage

Do 

  • Use when the users need to compare multiple sets of data across items in a large data set.
  • Use as a tool to query, consume, and navigate to specific data.
  • Use if there are at least two columns or more of data parameters.

Don’t 

  • Don’t use data tables when users don’t need to compare multiple attributes across items

Structure

A data table contains:

A. Header Rows
Located at the top of the list, for the labels of the columns. It’s recommended for the data table to have at least three columns.

B. Data Rows
Follows after the header row. There is no maximum number of data rows.

Text Alignment

Text alignment within the columns depends on the type of content to maximize legibility.

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 Width of a Column

  • If there are more than two columns, any columns will have a maximum width (including padding) of 50% of the screen width to not take up too much space of the screen. This width can be overridden.
  • If the content exceeds the width of the column, the content will be truncated or switched to a two line (if data table is set to two-lines).



Maximum Height of a Row

  • The max-height of text lines is two lines. 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 stays at the top as the user scrolls. A drop shadow will appear once the user scrolls to differentiate the header and data rows.

Horizontal, vertical and diagonal scrolling are all available to allow for flexibility.





Sticky Horizontal Column (for mobile)

The sticky column is optional – only the first column can be set to sticky. Available for mobile.

  1. The sticky column’s max width will be 30% of the screen width to not take up too much space on the screen. Any content that is larger will be truncated.

Specs

Height

Header row height is 40dp and the column header row height is 52dp . Mobile and tablet sizes are consistent.

Mobile Padding

Tablet Padding

Main Colors

Sample Element Alpha Hex
Line item column text #32363A
Header column text #6A6D70
Icons #0A6ED1
Background #FFFFFF
Dividers #E5E5E5