Table Display Manipulation Usage Guideline Bookmark this Guideline Printable Page


RCUX Document Version 5.1.2 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 04-Feb-2011

Tables are the principal method for displaying and interacting with data in FusionFX applications. This guideline provides detailed descriptions of the methods used to manipulate the appearance of tables and their data.

Guideline Contents
Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines
Guideline For Information About
Graph Tabular data display is a common alternative to graphical data display.
PivotTable Pivot Tables share much of the same design and behaviors as tables.
Table Overview Introduction to table design and interaction.
Table Information Design Range of layout options, include grid lines and banding, row and column span, totals, and alignment of cell contents.
Table Elements Range of possible controls and other components in each area of a table, such as menus, toolbars, rows, columns, and status bar.
Common Table Actions Describes common data-specific actions, such as Create, Delete, and Duplicate.
Table Interaction Methods Provides heuristics for use of different interaction methods within a table, such as use of select and act methods, editing within tables, functional icons, and drill-down.

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:column  
af:panelCollection  
af:table  

General Principles Bookmark this Heading Return to Top

Manipulation of table display encompasses all actions that affect the appearance of the table, but without modifying data. For information on actions that affect data, see the Common Table Actions guideline.

Unless otherwise indicated in specific sections of this guideline, the following principles apply to all manipulation actions:

  • If a table supports direct manipulation, such as drag and drop, it must also provide a menu or toolbar method to perform the same action.
  • If the number of available commands is limited, product teams may use a toolbar instead of a menu bar.
  • If an action has a default keyboard shortcut, the shortcut is listed in the section for that action. If no key is listed, a default key has not been assigned or the action does not support keyboard shortcuts.
  • Some actions are selection dependent. If a table does not support selection then the action is also not supported.
  • Manipulation commands are off by default. Each section provides usage recommendations.
  • In most cases, display changes to an instance of a table persist across sessions (as a user profile) until explicitly changed by the user. No explicit 'save' action by the user is required. The only exception is the Detach command, which is limited to the current session.
Note: For an introduction to tables, see the Tables Overview guideline. For further details on the different aspects of table design and interaction, see the links in the Related Guidelines section above.

Resize Bookmark this Heading Return to Top

Resize Column Bookmark this Heading Return to Top

Purpose:

Make a column wider or narrower.

Resize a column using direct manipulation by dragging a column's right-hand border.

Resize Column: Direct Manipulation

Description:
  • The Resize Column action should be available as follows:
    • Direct manipulation: By dragging the column's right-hand border (left in right-to-left languages).
    • Menu: By selecting a column and using the Format: Resize Column command and dialog (see Format Menu in the Table Elements guideline).
    • Context Menu: By right-clicking the column, and using the Resize Column command and dialog.
  • When a user resizes a column, all other columns retain their size unless the product team has set a column to stretch as needed to avoid leaving a blank area at the end of the table. In that case, the column set to stretch is also resized.
  • If the table width is less than 100 percent and the user makes a column wider, the table width expands to 100 percent (or whatever percentage is necessary) to accommodate the larger column.
  • Resize is supported for columns groups:
    • Resizing a column group via the column group header automatically adds width to or removes width from the last child column in the group.
    • Resizing a child column within a column group is supported. The parent column in the column group grows/shrinks as the child column is resized. Other child columns in the group are not affected.
  • When multiple columns are selected contiguously or non-contiguously, resizing one column automatically sets all other selected columns to the new width of the resized column.
  • Users cannot resize a column to a size so small that it is hidden. The minimum horizontal width is 12px.
  • If users resize a column to be smaller than fixed width elements such as web widgets, those elements appear truncated.
  • If a column is resized to be shorter than the length of the string of characters in the column header text AND wrap is set to 'on', the text is wrapped. See Column Headers in the Table Elements guideline for details.
  • If a column is resized by the user to be shorter than the length of the string of characters in the column header text AND wrap is set to 'off', the text is truncated. See Text Flow for details.
  • When using the menu bar and dialog to resize, it is necessary to select a column first; the selected column's current width is reflected in the dialog.
  • If text wrap is on, resizing the column by using drag and drop or by specifying width in percent or pixels may increase or decrease the height of rows with wrapped content.
  • Resized columns in an instance of the table persist across sessions (as a user profile) until explicitly changed by the user. No explicit 'save' action by the user is required.

The Resize column dialog, which features a spinbox for entering column width values

Resize Column Dialog

The Resize column dialog showing the spinbox that allows users to set column width values, plus the choice list of corresponding options for resizing (pixels or percent).

Resize Column Dialog Options

Usage:
  • Consider using Resize Column in tables with the following characteristics:
    • Variable length object names or attribute strings may result in disproportionately wide columns.
    • Users may need to focus more on one or more columns and less on other columns.
    • The table is intended for intermediate to advanced users.
  • If product teams enable direct manipulation to resize columns, they must also provide menu or toolbar support so the action is available for keyboard users.

Detach/Attach Table Bookmark this Heading Return to Top

Purpose:

Expands the table to fill the entire page.

Showing a table at normal size in the content region of a page

Table at Normal Size

Showing a detached table, which makes the table fill the entire page region.

Detached Table

Description:
  • The Detach/Attach action should be available as follows:
    • Menu: With the View > Detach/Attach command (see View Menu in the Table Elements guideline).
    • Toolbar: With the Detach toggle button.
  • The View > Detach/Attach commands are dynamic antonyms. The toolbar button is a toggle button. Once the user detaches a table, the Attach command or Detach toggle button can be used to return the table to the previous size.
Usage:
  • Consider using Detach/Attach for tables with the following characteristics:
    • More than 20 rows.
    • Column resizing or reordering is enabled.
    • The table is intended for intermediate to advanced users.
  • Product teams may place a header above the detached table so that users do not lose context with the current task.
  • If Detach/Attach is used in a table with a toolbar, it is recommended to include the Detach button on the toolbar, unless space is too limited.

Freeze/Unfreeze Columns Bookmark this Heading Return to Top

Purpose:

Locks one or more columns in view, so they remain visible when scrolling horizontally.

Showing the Freeze Columns menu, which will cause the selected columns to remain visible when the table is scrolled horizontally.

Freeze Columns

Description:
  • The Freeze/Unfreeze action should be available as follows:
    • Menu: By selecting the column, and using the View > Freeze/Unfreeze command (see View Menu in the Table Elements guideline).
    • Context Menu: By right-clicking the column, and using the Freeze/Unfreeze command.
    • Toolbar: By selecting the column, and clicking the Freeze toggle button.
  • The menu command is a dynamic antonym: Freeze/Unfreeze. The toolbar button is a toggle button. Once the user freezes columns, the Unfreeze command or Freeze toggle button can be used to return the columns to the unfrozen state.
  • If users want to freeze a different column, they must first unfreeze the current column.
  • The Freeze command locks the selected column along with any columns before the selected column. If multiple columns are selected, the last column determines the freeze location.
  • A child column in a column group cannot be frozen independently. The parent can be frozen along with all of its children.
  • If one or more columns are frozen, the status bar displays the number of frozen columns with the syntax, "Columns Frozen: n".
  • Frozen columns may be reordered within a frozen zone or outside a frozen zone. For example:
    • If columns A, B, and C are frozen and the user moves column C between column F and G, only column A and B are frozen.
    • If columns A, B, and C are frozen and the user moves column G between column A and B, G becomes B. Now A, B, C, and D are frozen.
    • If columns A, B, and C are frozen and the user moves column C between A and B, column A, B, and C are still frozen.
  • Frozen columns may be hidden or shown within a frozen zone or outside a frozen zone. For example:
    • If columns A, B, and C are frozen and the user hides column C, A and B are frozen.
    • If columns A, B, and C are frozen and the user hides all other columns, D-N, freeze remains on. Subsequently, if user shows columns D, E, and F, columns A, B, and C are still frozen.
    • If columns A, B, and C are frozen and the user hides columns A, B, and C, freeze remains on. Subsequently, if user shows columns A, B, and C, columns A, B, and C are still frozen.
  • Frozen and unfrozen columns in an instance of a table persist across sessions (as a user profile) until explicitly changed by the user. No explicit 'save' action by the user is required.

The Freeze Columns toggle text button on a table toolbar.

Freeze Columns Toggle Button

Usage:
  • Freeze Columns is recommended whenever horizontal scrolling is likely to occur.
  • Freeze Columns is intended for intermediate to advanced users.
  • For more information on when to allow horizontal scrolling, see Table Width in the Table Information Design guideline.
  • If Freeze Columns is used in a table with a toolbar, it is recommended to include the Freeze Columns button on the toolbar, unless space is limited.

Reorder Bookmark this Heading Return to Top

Reorder Columns Bookmark this Heading Return to Top

Purpose:

Reposition columns to focus on different attributes or facilitate actions with columns of functional icons.

Showing how direct manipulation of columns can cause them to be repositioned by dragging a chosen column header to another table location.

Reorder Columns: Direct Manipulation

Description:
  • The Reorder Columns action should be available as follows:
    • Direct manipulation: By dragging a column header to any other location in the table.
    • Menu: With the View > Reorder Columns command and dialog (see View Menu in the Table Elements guideline).
    • Keyboard: The accelerator keys Ctrl+Shift+left/right arrow move the active column in the direction of the arrow key.
  • Direct manipulation interaction for Reorder Columns changes slightly when column selection and marquee selection are supported.
  • Frozen columns can be reordered. See Freeze/Unfreeze Columns above.
  • Column Groups:
    • Reordering a column group (parent and children together) is supported.
    • A child column cannot be moved outside its parent column.
  • Reordered columns in an instance of a table persist across sessions (as a user profile) until explicitly changed by the user. No explicit 'save' action by the user is required.

Reorder columns dialog, providing a list of column choices to select from to reorder.

Reorder Columns Dialog

Usage:

Consider using Reorder Columns in tables with the following characteristics:

  • Variable length object names or attribute strings may result in disproportionately wide columns.
  • Column resizing is enabled.
  • Users may need to focus more on one or more columns and less on other columns.
  • Horizontal scrolling is likely to occur. For more information on when horizontal scrolling is acceptable, see Table Width in the Table Information Design guideline.
  • The table is intended for intermediate to advanced users.
  • Column reorder animation is on by default. Users may turn the animation on or off themselves.

Reorder Rows Bookmark this Heading Return to Top

Purpose:

Repositions rows within the table.

Note: Row reorder functionality is not a built-in feature of the table component, but can be implemented by product teams.

Description:
  • The Reorder Rows action may be provided in different ways:
    • Menu: With the Reorder Objects command and dialog from an object-specific actions menu (see Object-Specific Actions Menu in the Table Elements guideline).
    • Keyboard: By selecting a row and pressing Ctrl+Shift+Up/Down arrow keys.
  • Reordering a row group (parent and children together) should be supported.
  • Reordering a row within the parent row should be supported.
  • Moving a child row outside the parent row should not be supported.
  • The Reorder Objects command and dialog may be renamed to Reorder [objectTypes], such as Reorder Employees.
  • The Save model for reordered rows depends on whether row order is purely for display purposes or whether it is an attribute of each object in the table:
    • Order for Display Only: In this case, reordered rows in an instance of a table should persist across sessions (as a user profile) until explicitly changed by the user. No explicit 'save' action by the user should be required.
    • Order as Object Attribute: This occurs when a table consists of a list of numbered process steps, sections of a contract, or other 'ordered' list. In this case, row reorder must be explicitly saved using an action button.

Reorder ojects dialog, providing a list of object choices to select from to reorder.

Reorder Objects Dialog

Usage:

The Reorder Rows action is recommended when the order of the table data is relevant to the user and the user benefits by being able to manipulate the order.

The methods used depend on the expected skill level of the product's users, and the number of rows in the table:

  • The Reorder Objects dialog method is recommended only when there are fewer than 50 rows in the table to reorder.
  • The direct manipulation and keyboard methods are recommended only for intermediate to advanced users.

Sort Bookmark this Heading Return to Top

Purpose:

Reorders the sequence of rows based on the contents of one or more columns.

Showing a table column being sorted by direct manipulation, using the Sort Ascending or Sort Descending icon in column headers.

Sort: Direct Manipulation

Description:
  • The Sort action should be available as follows:
    • Direct manipulation: By clicking the Sort section of a column header. See Column Headers and Sorting in the Table Elements guideline.
    • Menu: By selecting the column, opening the View > Sort submenu (see View: Sort Submenu in the Table Elements guideline), and selecting Ascending or Descending to sort the active column, or using the Advanced Sort command and dialog.
    • Context menu: By right-clicking the column, and using the Sort submenu.
  • Scope: Sorting applies to a table's entire dataset, and not just to the rows currently displayed in the table or the current batch of records being retrieved.
  • Selected Rows: If one or more rows are selected when the user performs a sort, the table scrolls if necessary to keep the first selected row in view.
  • Editable Tables: If a user edits content in a sorted column, the table re-sorts only after saving the page.
Usage:
  • Consider using Sort in tables with the following characteristics:
    • The position of individual objects within a list is significant to the user.
    • The table contains more than 10 rows.
    • Users are intermediate to advanced.
  • Sorting should be disabled when it does not benefit users and would produce poorly performing queries. See When to Disable Sorting for details.
  • Provide default sorts on columns that users are likely to sort on.
    • The default sort order should correspond with user expectations. For example, alphabetic sorts are generally expected to be ascending, while numeric sorts are often expected to be descending.
    • User needs may differ for fields with the same data type. For example, a Revenue column would be sorted descending (from larger to smaller amounts), but a Rank column would be sorted ascending (from smaller to larger), because for Rank, lower numbers indicate "better" and users typically wish to see the "better" items first.
  • Sorting a table with editable content is supported. If users attempt to sort a table before saving changes to it (such as editing existing rows or adding new rows), a warning message should be displayed. See Column Sort Warning Message below.
  • Sorting a table with subtotals should sort each group of rows between subtotals independently. Subtotal rows should never change vertical position in the table as they are not part of the sort. See Subtotals in the Table Information Design guideline for more information.
  • For performance reasons, consider indexing fields that users will frequently sort on, especially if they contain a large number of values.

Default sorts for different types of numeric data in a table

Default Sorts for Different Types of Numeric Data

Ascending sort with subtotals

Ascending Sort with Subtotals

Sort Order and Data Types Bookmark this Heading Return to Top

The following matrix shows the effect of ascending and descending sorts on different data types:

Data Type Ascending Sort Result Descending Sort Result
Text A to Z
apple
banana
carrot
Z to A
zucchini
yam
watermelon
Numeric Data Smallest to Greatest (0 to 9)
10
55
100
Greatest to Smallest (9 to 0)
100
55
10
Dates Earliest to Latest
05-Feb-1979
03-Jan-1995
01-Dec-2004
Latest to Earliest
01-Dec-2004
03-Jan-1995
05-Feb-1979

Advanced Sort Bookmark this Heading Return to Top

Purpose:

Sorts using criteria from up to three columns.

Description:
  • Advanced Sort is available from the View: Sort submenu when sorting is enabled in a table.
  • After running an Advanced Sort, only the Sort icon in the primary column changes state to reflect the new sort order.

Advanced sort dialog, which offers a select choice list for the user to choose the elements of a table to sort, plus radio buttons from which the user can  choose whether to sort the element in ascending or descending order.

Advanced Sort Dialog

Custom Sorts Bookmark this Heading Return to Top

Purpose:

Sort using criteria that are not based on the data in the column.

Examples:

Examples of custom sorts include sorting on a column of icons or on days of the week.

Usage:

When sorting on a Status column, the sort must order the rows based on severity or importance, not alphabetically based on value names or icon tooltip text.

The image below shows incorrect and correct ways to sort on a column of Status icons. The table on the left shows the Status icons sorted alphabetically using the tooltip text for each icon, resulting in the incorrect sort order: Confirmation, Error, Warning. The table on the right used a programmatically assigned value to produce the correct sort order: Error, Warning, Confirmation.

Two examples of a table with custom sort of status icons; the first one is incorrect, the one on the right is the correct sort, as described in the text preceding the image.

Custom Sort of Status Icons

When to Disable Sorting Bookmark this Heading Return to Top

Sort is not recommended for the following types of fields:

  • Data types other than text, numbers, and dates, such as:
    • Fields with data type CLOB (Character Large Objects) that contain very large amounts of text.
    • Fields with data type BLOB (Binary Large Objects) that contain, for example, documents for data processing, CAD program files, spreadsheet files, graphics and images, videos, music files, and so on.
  • Fields containing multiple values, which are separated using semi-colons.
  • Long text fields containing more than 30 characters, unless they are used to display object names or key object attributes that may be used to group the object with similar objects.
    • Examples of long text fields that should not be sortable include description, notes, comments, and concatenated addresses (entire address in a single field).
    • Examples of object names that may be sortable include the names of a person, product, or organization.
    • Examples of key object attributes that may be sortable include title, region, or shipping method fields.

An example of a table that should not be sorted: it has a text description column with long text strings

Description Column with Long Text Strings (should not be sorted)

An example of a table that should not be sorted, because it has a fields containing multiple values

Fields Containing Multiple Values (should not be sorted)

Column Sort Warning Message Bookmark this Heading Return to Top

Purpose:

Warns the user that action is needed to save changes to table data.

A sort warning message dialog

Sort Warning Message

Usage:
  • Product teams should provide a warning message if any of the following conditions exist:
    • The table being sorted is editable.
    • The database table contains more than 200 rows.
    • The user tries to sort AFTER making changes (updating rows or adding new rows) to the table.
  • The Sort Warning should be a modal, page-level validation message.
  • The message dialog should contain the following elements:
    • Text: Pending changes must be saved. Save and sort?
    • "No" button: Dismisses the Sort message and cancels the sort action without saving any pending changes.
    • "Yes" button: Dismisses the Sort message, saves pending changes, and performs the sort action as specified.

Text Flow Bookmark this Heading Return to Top

Product teams have the ability to toggle text flow in table cells, and row and column headers using wrapped text or truncation.

Wrap Text Bookmark this Heading Return to Top

Purpose:

Allows users to toggle table cells between wrapped text and truncated text.

Description:
  • The Wrap Text action should be available as follows:
    • Menu: With the Format > Wrap command (see the Format Menu in the Table Elements guideline).
    • Context menu: With the Wrap command.
    • Toolbar: With the Wrap toggle button.
  • When wrap is turned off, longer strings are truncated, but displayed in full in a tooltip on hover.
  • If cells containing numbers have wrap turned off, and there is not enough horizontal space to display the entire number, the pound sign '#' repeats to fill the cell.
  • The Wrap action appears disabled for rows or columns where every cell in the selection (including the header) contains a web widget or icon. If a row or column contains a mix of text or links, and web widgets or icons, the wrap action is enabled, but only affects the text and links.
  • Wrap settings can only be changed at the table or column level. Wrap settings cannot be changed as a row-based action.
  • Wrapped cell contents, row headers, or column headers in an instance of a table persist across sessions (as a user profile) until explicitly changed by the user. No explicit 'save' action by the user is required.
Note: Regardless of whether the Wrap Text action is provided, product teams can set cell contents and header text to wrap or be truncated on page load. Unless changed by product teams, Wrap is turned on by default.
Usage:
  • It is recommended to turn wrap off by default (on page load) when one or more columns of text would be difficult to read or misleading if broken across multiple lines.
  • Consider providing the Wrap Text command in tables with the following characteristics:
    • The table is intended for intermediate to advanced users.
    • The table is likely to scroll horizontally. This is common when strings are long and wrap is turned off. For more information on when horizontal scrolling is acceptable, see Table Width in the Table Information Design guideline.
    • Strings are so long that, when wrapped, they significantly reduce the number of rows that can be displayed at the same time.
    • Column resizing is enabled. Users may want to change the wrap setting in conjunction with selective column resizing.
    • Users may need to focus more on columns containing shorter strings, and less on columns with longer strings.
  • If Wrap Text is provided in a table with a toolbar, it is recommended to include the Wrap button on the toolbar, unless space is limited.

Truncation Bookmark this Heading Return to Top

Row headers, column headers and and cell text truncate dynamically when the text string extends beyond the container, or when a user resizes the column or row so that its width is less than that of the text string. See Resize Truncation in the Headers guideline for more information.

Hide/Show Columns Bookmark this Heading Return to Top

Purpose:

Allows users to specify which columns to display, to focus on the most pertinent column data.

Three views of a tree, in which the user has chosen the View menu, selected View > Columns and then, in the resultant submenu, has checked the columns she wants shown. The third image shows the table with the selected columns now showing.

Hide/Show Columns

Description:
  • The Hide/Show Columns action should be available as follows:
    • Menu: With the View > Columns submenu, and selecting/deselecting the columns to view, or clicking Show All (see View: Columns Submenu in the Table Elements guideline).
    • Context menu: With the Columns submenu.
  • If the user hides a selected column, that column remains selected, even though it is hidden.
  • If the Columns submenu contains more than 10 items, the last item in the list is Show More Columns, which displays a dialog to more easily select which columns to show. See the image below.
  • Hiding Rows is not supported.
  • Hiding frozen columns is supported. See Freeze/Unfreeze Columns above.
  • Hiding column groups is supported, but child columns cannot be hidden independently of their parent.
  • Hidden columns in an instance of a table persists across sessions (as a user profile) until explicitly changed by the user. No explicit 'save' action by the user is required.

The Show More Columns dialog menu with selectshuttle component

Show More Columns Dialog

Usage:

Consider using the Hide/Show Columns in tables with the following characteristics:

  • Many columns of attributes.
  • Some attributes may be less significant for part of the user audience.
  • If horizontal scrolling is likely to occur.

Expand/Collapse Row Details Bookmark this Heading Return to Top

A row may include a details region and a Disclosure icon to expand and collapse that region. See Show Details Column in the Table Elements guideline for more information.

Expand/Collapse Selected Row Bookmark this Heading Return to Top

Purpose:

Displays/hides the details region of the selected row.

Description:
  • Users can expand/collapse row details regions as follows:
    • Direct manipulation: By clicking the Disclosure icon.
    • Menu: By selecting a row and using the View: Expand/Collapse command (see View Menu in the Table Elements guideline).
    • Keyboard: By tabbing to the Disclosure icon for a specific row and pressing Enter.
  • If a row details region contains required fields, the user may expand and collapse the region. However, if the page is submitted with empty required fields, those row detail regions will be automatically expanded to show field level errors.
  • Expanding or collapsing row details regions in an instance of a table persists across sessions (as a user profile) until explicitly changed by the user. No explicit 'save' action by the user is required.

A table with row details region expanded

Table with Row Details Region Expanded

Usage:

If row details regions are implemented, then Disclosure icons must be provided in Show Details columns, and the View: Expand/Collapse menu item must be enabled.

Collapse All Bookmark this Heading Return to Top

Purpose:

Collapses all row details regions.

Description:
  • Collapse All follows same interaction rules as Expand/Collapse.
  • Collapse All is available as follows:
    • Menu: With the View: Collapse All command.
  • Collapse All collapses all row details regions including those scrolled out of view.
  • When all row details regions are collapsed, the Collapse All menu item appears disabled.

A table with all row details regions collapsed; all disclosure icons in the Show Details Column are collapsed.

Table with All Row Details Regions Collapsed

Usage:

Same as Expand/Collapse.