Data Table
FUIDataTable
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 is not available.
Example of data tables on iPhone (left) and iPad (right)
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 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 is always at the top of the data table. The row contains key data label of each column and always sticks to the top during scrolling.
B. Rows of Data
Each row represents one instance of data. Each column inside a row represents each attribute of the instance. The left most column can be persistent and stick to the left of the screen.
C. Persistent Column (Optional)
The first column can be set to be persistent which allows the column to stick to the left during scrolling.
Anatomy of the data table on iPad
Bulk Actions
The data table allows multiple selection. The user can choose to take further actions with the selected items.
Showing a toolbar with further actions after selecting a few rows in a data table
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.
The added data will appear at the location following the current order direction rules. For example, if the table is ordered by timestamp, then the added row will appear as the top row.
The screen will scroll to the location where the added row appears with the highlight background color. The highlight background color then fades away.
Showing the most recently added row at the top of the table
Edit a data row
An edit action can either be triggered after a drill-down to see object details, or it can be triggered after tapping tje Edit button within a row.
Showing an Edit modal after triggering the edit mode from the data table view
In compact width layout, the data table is converted to a list report by default. If this is not wanted, app developer can make changes to allow displaying a data table in a compact width layout as well.
If the data table is set to show in the compact layout, a horizontal scroll will be available.
Example of a data table the has been converted to a list picker
Related Components: Table View, List Report, Filter Feedback Bar
Development: Data Table
Your feedback has been sent to the SAP Fiori design team.