Data Table
Intro
A data table is a range of labeled columns and rows used to present numbers, text, or even images. Generally, data tables are a grid layout of columns and rows.
Data tables are available on both compact and regular screen sizes. On compact screen sizes, a horizontal scrollable data table with a sticky header is available. Alternatively, users can choose the table view of the object cell for displaying data.
Use data tables when the users need to compare multiple attributes across items in a large data set.
Use the data table in compact screen sizes with horizontal scrolling and sticky headers.
Don’t use data tables in any preview views.
Don’t use data tables when the users don’t need to compare multiple attributes across the items.
A data table contains:
A. Header Row
A header row at the top of the list, for the labels of the columns. There are normally at least 3 columns in a data table.
B. Rows of Data
Rows of data follow the header row. If a row of data contains a chevron, it allows the users to see more details which are not presented in the row.
Read-only Tables
In read-only tables, the rows of data are read-only for the users and the accessory column is empty. This type of table can be useful for object floorplans. Read-only tables are available on both compact and regular screen sizes.
Editable Tables
Editable tables allow users to edit the data in the rows by providing edit icons in the accessory column. Editable tables are available only on regular screen sizes.
Drill-down Tables
When the table contains objects with a large amount of additional information that cannot be presented on the table, use drill-down tables to allow the users to drill down to see more details. Drill-down tables use chevrons in the accessory column to indicate tapping on the row to drill down. Drill-down tables are available only on regular screen sizes.
Edit Mode
In the edit mode, the checkboxes that show up in each row allow users to select that row of data for further actions.
Add a data row
The “+” button, which can appear on the navigation bar or in an inline cell button, allows the users to add a new data row to the current data table.
Edit a data row in the Editable Tables
The edit icon in each row allows the users to edit the data row in a modal. For Drill-down Tables, the users would need to tap on the row to the item detail screen in order to edit the data.
Filter and Sort
Users will use the Filter button on the navigation bar or toolbar to bring out the Filter modal to filter the data in the table.
Interaction on Compact Width
The Data Table on compact width allows horizontal and vertical scrolling. If horizontal scrolling is not available, the Data Table will be converted into object cells.
In compact screen size, a horizontal scrollable data table with a sticky header is available. If horizontal scrolling is not available, the Data Table will be converted into object cells. The app designer can decide which columns of information will be presented in the object cells. Normally, there won’t be more than 6 types of information in the object cells.
Header
The height of the header row adapts to the text size, the padding of the top and bottom is 8 pt. Avoid using long header titles. Keep the header title short and clear to communicate the content in the column. If there are no shorter alternatives, use two lines for longer header titles. Avoid truncating the titles when there’s no way to see the whole text.
Indicate the units for numeric data in the header titles, such as “Price ($)”, “Protein (g)”, and “Time (hrs)”. Avoid repeating the units in each row. However, units like % can be an exception if they help the users read the data faster.
Column on Regular Width
Text alignment:
Right-aligned numeric columns
Left-aligned text columns
The height of the data row adapts to the text size, the padding of the top and bottom is 11 pt. Avoid using multiple lines within a row since it makes it more difficult to scan the data in the table.
Image column has a fixed width of 45pt.
Choose an appropriate width for each column. The column that contains the longest text (L) will take over whatever is left on the screen after other columns are defined. The minimum column width is 60pt. Most data will fit in the column without being truncated.
Recommended column width (W):
n*20 <= W <= (n+1)*20 ;
n>=3, n is an integer.
Column on Compact Width
The text alignment and column height on the compact width is the same as the regular width. The first column on the compact width has an option of flexible width, which can be different from the rest columns. The rest columns have the same width. If the width of the text is longer than the column width, the text will be cropped. The minimum column width is 26% of the screen width; the maximum column width is 50% of the screen width.
Recommended column width (W):
35% of screen width <= W <= 39% of screen width.
Your feedback has been sent to the SAP Fiori design team.