The data table is a grid layout of columns and rows showing labeled data like numbers, text, and images.
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.
Currently, only read-only tables are available in the SDK.
Data table on mobile (left) and tablet (right)
A data table contains:
A. Header Rows
Located at the top of each column is a label. 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.
Data table anatomy
The text alignment within the columns depends on the type of content to maximize legibility.
- The first column (from the left)
- Text value column
- String value column
- Numeric value column (such as currency, distance, or time duration)
Text alignment examples
Dynamic Width Column
- The dynamic column takes up all the remaining space after the widths of the other columns are determined.
- A row contains only one dynamic column.
Example of table columns with dynamic width
Maximum Width of a Column
- If there are more than two columns, any one column will have a maximum width (including padding) of 50% of the screen width to avoid a column to take too much space. 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 maximum number of lines of text is two. Users can choose to determine max-height of text line as one or two.
- If the text is longer than the maximum number of lines, the text will be truncated.
Example of a table row with maximum height
Behavior and Interaction
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 available to allow for flexibility.
Sticky Horizontal Column (for phone)
The sticky column is optional – only the first column can be set to sticky.
A. The sticky column’s maximum width is 30% of the screen width in order to not take up too much space. Any content that is longer than that will be truncated.
Example of a sticky horizontal column
The header row height is 40dp and the column header row height is 52dp . Mobile and tablet sizes are consistent.