Description
Tables display information in a tabular structure of rows and columns, allowing users to see multiple points of data at once, and to read their contents to find patterns, draw valuable insights, and take meaningful action.
This article focuses on the distinct use of a , as opposed to it being used as a component. While the same general Fiori specifications apply to both instances, they need to be optimized differently to support their use cases better. How does one decide whether they need a table as a floorplan or a component?
Usage
Use tables to organize information that needs to have its precise values looked at, inspected, and referenced. Tables have a wide range of application depending on the use case and are commonly used for databases, spreadsheets, repositories, and other complex multi-column lists.
- You need to organize data into rows and columns.
- Your main workflow focuses on a homogenous volume of data.
- You need a structure to populate with data, either manually or through upload.
- You need to display precise numbers or interact with the same.
- You need to view and manage a multi-column list or repository of records and files.
- Your table requires a toolbar independent from the application toolbar.
- You need to display more than one table in the screen. Use tables as a component in an application page floorplan instead.
Anatomy
- Application shell; required
- Table floorplan header
Required. Choose from either an application toolbar or header toolbar. On the other hand, table toolbars are used exclusively with tables as components. - Table; required
- Column header; required
- Row numbers; optional
- Cell; optional
Styles
Density
General table specifications by Fiori offer two density options for desktop tables: compact and condensed. density allows rows to appear closer to each other, but the shorter row height will reduce the table’s readability. Use density at default and for most standard cases, and when possible, offer the option to change density settings. density is reserved touchscreen devices.
Grid
Horizontal and vertical lines are used to form a grid and create the clearest separation between data values in the form of data cells. This heavy structure can feel cluttered and makes rows difficult to read line by line. This style is the most suitable for dense tables with high volumes of data.
Horizontal Lines
Horizontal lines reduce the noise and lessens the impact of a full grid. This style relies on white space and continuous border lines to help users stay in place when scanning a table line by line. This style is the most useful when a table doesn’t require sideways-scrolling.
Zebra Stripes
Zebra stripes are used similarly to horizontal lines. However, they can cause difficulties where interactive states compete with the stripes. And in low quality monitors where the slight colour variance is difficult to perceive by users with visual impairments.
Zebra stripes become the most useful when paired up with horizontal lines or for read-only tables.
Behavior & Interactions
Scroll
Tables can be scrolled in up-down or left-right orientations. When scrolling large tables with high volumes of data, consider employing sticky headers that follow the users when scrolling vertically, and make the first column follow the users when scrolling horizontally.
Sort
Tables can be sorted to arrange data values on display in a different order. If there are more than 20 columns in a table, use a P13n dialog for this action. Additionally, one or both methods below may also be used:
- Column level: Sort in ascending or descending order by interacting with the corresponding button at the column header. This button is hidden from view until the column is on hover or selected.
- Table level: The entire table may be sorted to a preconfigured setting using a menu button in the menu bar.
Filter
Filtering a table allow users to focus on a specific set of values and remove from view everything else that is irrelevant. If there are more than 20 columns in a table, use a P13n dialog for this action. If there are less, use a filter bar above the table. For tables that require filtering based on a few categories, use a menu with a checklist at the table header section.
Show and Hide
Use show and hide to configure the columns on display at any given time. If there are more than 20 columns in a table, use a P13n dialog for this action. If there are less, use a menu with a checklist at the table header section to turn on or off the columns in shown on view.
Resize Column
Columns should show as much of a value as possible. When needed, a column’s width can be enlarged by dragging the border line between two columns. Employ cap limits on min and max widths to avoid situations where a column is completely hidden into obscurity or blown up to an unmanageable size. Ensure that data values are truncated when the column is resized.
This interaction can be used in tables with visible transparent vertical borders.
In-Line Actions
Table may contain icon-only buttons to trigger actions directly on the row or cell itself. This is useful for simple or common actions such as ranking, favouriting, sharing, or flagging a row or cell item with a marking. See content level actions for more information.
Favoriting a file in the File Repository
Selection
Below is a list of the most common selection behaviors and interactions used in table floorplans today.
Hover
Mouse over an item to show where the mouse pointer is positioned.
Select
Click on a value to select it. The bottom border line is needed for accessibility.
Select Editable
Click on a value to select it. Active cells that support text input are shown by highlighting the cell border and text.
Drag Select
Click, hold, and drag to select more than one cell at once.
Batch Select
Click on a value, and all other cells with the same value are also selected.
Shift Select
Select a second value while pressing the shift key to select all values in between.
Ctrl / Command Select
Press the Ctrl (Windows) or command (Mac) key while clicking to add additional values to your selection.
Row / Multi Select
Select one or more rows by enlisting a column of checkboxes on the left-most side of a table.
Select All Rows
The Select All button selects or deselects all rows. Found on the column header.
Select Column
Click on a column header to select the entire column. Can also be Shift selected, or Ctrl / Command selected
Select All Rows and Columns
Select all rows and columns by by clicking on the Select All button on the top-left corner of the table.
Best Practices
Design for Scannability
Well-designed tables use a variety of strategies to ensure the table is easy to read, scan, and parse through data. Some strategies to ensure a table is easier to scan:
Select the most appropriate row density and style for the volume of data the table will need to support. When uncertain, offer users the option of configuring this for themselves.
When possible, table columns are organized in order of most important to least important columns, from left to right, to reduce the need for horizontal scrolling.
Leave enough space for the "bigger picture", use truncation when necessary so that despite how long the item in each column may be, the table retains an organized look. Users can resize columns at their own will.
Text values are commonly left-aligned, numeric values are commonly right-aligned. Not only is this consistent with industry standards, but it makes numbers easier to read, identify their quantity or monetary value, and compare it between other rows. Column headers should align with column data.
Text values are left-aligned, numeric values are right-aligned.
Column headers align with the data.
Design for Findability
Tables are ideal for showing multiple points of data at once, but it is frustrating to users when they can’t find the data they are looking for. Consider the following best practices to improve findability:
Promote higher levels of findability in tables by offering the ability to search, sort, filter, and show and hide columns. The higher the volume of data in a table, the more crucial these features become. Different patterns for each are covered in this guideline, or use the P13n dialog for tables of 20 columns of more.
Employ an optional index column with row numbers or use optional pagination to help users orient themselves within the table to reference rows and pages by number.
Design for Efficiency
With the potential of hundreds of columns and thousands of rows, table floorplans need to be optimized for a high degree of efficiency.
Users can skim through data columns much more quickly than horizontal rows. Additionally, vertically aligned content is easier to compare than horizontal. If there is no way getting around a wide table, give users the option to pivot the table when and where possible.
Tables are used precisely because users need to see multiple entries at once, so preserve that context so they don't have to leave their place in order to perform an action or look at additional detail. This can be done in a variety of ways using existing patterns and components:
- Allow users to take action in-line and in-place, instead of always having to rely in the table header area or in another component; in-cell editing, in-line buttons, contextual tile toolbars, and so on.
- Provide additional detail to the user selection with side panels and other non-modal (non-blocking) components, such as quick views, popovers, and non-modal dialogs. Not only will these components reduce clutter in the UI, they also act contextually to the user's selection.
- Anchor headers and/or the first column/row by making them sticky. This will prevent users from getting lost and having to scroll all the way back to the top or to the left in order to see where they are. See Fiori Visual Core wiki for more info.
Preserving the context with sticky columns and column headers
Help users save time by allowing them to act on multiple values at the same time. A classic example uses checkboxes to select multiple rows and acting on them all at once. Another example are the contextual toolbars used in data wrangling that allow users to perform a data transformation on an entire selection, be it a column, multiple rows, or multiple values.
Using the tile toolbar for performing a data transformation on an entire column of data.
Optimize tables to accommodate different ways of executing repetitive tasks or actions. This will allow users to pick whichever method they are most comfortable with without sacrificing the experience. Consider undo/redo as an example; there are several ways that this function can be executed:
- Icon buttons can be reached from a menu bar
- Side panel with an accurate undo stack or history log
- Keyboard shortcuts as accelerators
Not only does this promote a high level of flexibility and ease of use, but also accommodates novice and more advanced users alike.
Specifications
If you are not using UI5, please follow all Table general specifications as outlined by Fiori's Visual Core wiki.
Rows and Cells
Normal
Zebra Stripe
Or alternating row colours
Column Headers
For fixed column and headers, please see Freeze / Fixed Column and Rowin the Visual Core Wiki. Follow the same specifications for first column with row numbers.
Links & Resources
Fiori Guidelines: Table (Component Overview)
Visual Core Design Specs: Table General Specifications