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.
The horizontal scrollable data table with a sticky header and column is available in both compact and regular screen sizes. Alternatively, the data table will be converted to a list report by default in compact width if horizontal scrolling not available.
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 right accessory column, it allows the users to tap the chevron to drill down for more details which are not presented in the row.
If a row of data contains a left accessory column, it allows the users to see the sync icon to understand syncing status.
Read-only and Editable Tables
In read-only tables, the rows of data are read-only for the users. The user can tap to view the data in a modal sheet, but the user cannot edit the data. On the contrary, Editable tables surface an edit mode to the modal sheet.
Select for Actions
After tapping the select button, the checkboxes in the left accessory column 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 drill-down tables, the users can tap on the row to edit the data in a modal.
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 a list report. The app designer can decide which columns of information will be presented in the list report. Normally, there won’t be more than 6 types of information in the list report.
Header
The height of the header row adapts to the text size, the padding of the top and bottom is 8 pt. When the data table scrolling and rows start sliding under, the shadow appears under the header.
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 16 pt. By default, each data table cell allows only 1 line of data. But the developer can set to allow wrapping to 2 lines. Avoid using multiple lines within a row since it makes it more difficult to scan the data in the table.
For the regular width, without horizontal scroll, if there is more than 1 column, any columns can have a maximum width (include paddings) of 50% of the Data Table container width. The developer can override max-width. If the width of a column is not set, by default, the column width adapts to the width of the widest content in the column. When the width exceeds the maximum width, the content gets truncated. By default, the first column (Title) will expand to fill the space.
For Horizontal Fit, a limited number of columns can be shown. By default, in the column in which the content gets truncated, the minimum width of the column will be 25% of the container. Developers can override minimum width. Data Table will try to fit as many columns as possible. The columns that cannot fit into the container will be omitted; then the rest will re-adjust to fill the space. Image content always has a fixed width and does not shrink.
For the regular width, with horizontal scroll, the Left Accessory always sticks to the left side. If the sticky first column is enabled, when scrolling, the first column will start shrinking until reaching the sticky panel width (25% of the container). Only the first column can be set sticky, which is optional. If the Right Accessory is available, it will be shown with a fading background and stick to the right side.
Column on Compact Width
The text alignment and column height on the compact width is the same as the regular width. The compact data table also follows the rules of horizontal fit and horizontal scroll in regular width.
If the content width is small, the column can shrink to fit. If the content width is truncated. The column can shrink to a minimum width. The minimum column width is 25% of the container; the maximum column width is 50% of the container.
Your feedback has been sent to the SAP Fiori design team.