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.
- 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.
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.
- The first column (from the left)
- Text value column
- String value column
- 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.