Table View Functions
Placement of Buttons for Functions | Functions Referring to Table View Columns, Sorting | Functions Referring to Table View Rows | Filtering, Shufflers | Related Controls
|
|
Figure 1: Example of a table view with different column types and an erroneous input field |
Table views not only present data in a tabular fashion, or allow for tabular data entry. They also provide a number of functions, part of which change the presentation of the data, while other functions may change the data themselves.
Table view functions may refer to the table view as a whole, to columns, to rows (= items), or to single cells. These cases are described below; in addition often-used functionalities, such as sorting and filtering are covered.
Note: Here, we do not cover functions that are included in the table view framework, such as scroll functions. See Table View for these functions.
For details on the table view control itself, see Table View.
Placement of Buttons for Functions
Location
Place buttons acting on a table view as a whole below the table view and left-aligned with the table. Place the emphasized button to the left if there is one.
Button Groups
Separate button groups by a spacer (non-breaking space).
Functions Referring to Table View Columns, Sorting
Buttons Referring to Columns
Some functions, for examples Sort, refer to certain columns. Place buttons with small icons into the column headers to speed up interaction.
If there are alternative variants of a function (e.g. different sort orders or calculations), consider to display only one icon at a time in order to save space, instead of displaying two or more icons in parallel.
Do not use more than three icons in a column header.
Links in Column Headers
If it is evident what a function does, you can also use a link in the column header text.
Functions Referring to Table View Rows
Functions referring to table rows typically refer to the item the data of which are displayed in a row. These functions can either be presented as
- Buttons,
- Icons, or
- Links
Use buttons for most functions. Use icons and links for the following exception cases:
- Icons: Web standards, such as Delete, Info, Help, or Shopping Basket
- Links: Navigation functions, such as Details (place the link in the name or ID column), additional information, etc.
As a general rule for selecting the correct control, care for the application context and the respective "Web standards".
Table Cells: Links vs. Buttons
Note that links are not self-explaining. Therefore, use links only where their purpose is evident. Add tooltips to links to support users.
See Links vs. Buttons for more information.
Filtering, Shufflers
Offer filters as much as possible. Filters help to reduce the amount of data displayed in a table view. This helps users and improves performance.
Use shufflers for creating filter statements. See the respective section on shufflers in the iView Guidelines.
Placement
Place the shuffler statement above the table view and left-align it.
Reason: A left-aligned shuffler is not hidden from view if the
window size is altered.
Button
Use a button labeled Go to start the filtering process. Use events on dropdown list boxes for simple cases only (one dropdown list box with label).
Related Controls
Tree View, Item List, List Box