RCUI Document Version 5.0.1 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (22.214.171.124.0)
Tables are the principal method for displaying and interacting with data in FusionFX applications. Tables are used not only to display tabular read-only data, but can also provide a wide range of highly interactive functions to modify and manipulate data.
Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.
||For Information About
|Table Information Design
||Range of layout options, include grid lines and banding, row and column span, totals, and alignment of cell contents.
||Range of possible controls and other components in each area of a table, such as menus, toolbars, rows, columns, and status bar.
|Table Display Manipulation
||Describes range of options for users to modify the display of a table, including sorting, filtering, resizing columns, and other configuration options.
|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.
||PivotTables share much of the same design and behaviors as tables.
||Tabular data display is a common alternative to graphical data display.
||Displaying gauges in table cells.
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:
Tables can be used to display and modify a wide range of read-only and editable data. Links and a brief description of other table-specific guidelines are appended at the end of this document.
Tables are broadly grouped into two types, each with different characteristics:
- Read-only tables: Display read-only data and do not contain any web widgets in cells. Read-only tables may allow direct actions using select-and-act or functional icons.
- Editable tables: Include standard web widgets in table cells. Editable tables may consist of a mix of cells with read-only data and cells with web widgets.
Purpose: Display a list of objects for users to view, or to drill down to detail pages. Read-only tables may also allow actions on data using select-and-act or functional icons.
Read-Only Table without Support for Actions
- A read-only table may support actions on table data in two ways:
- Through row selection and use of menus, toolbars, or equivalent keyboard shortcuts.
- Placing functional icons in one or more columns.
- A read-only table may allow users to manipulate the display of the table contents (for example with Sort or Reorder commands), to drill down to details, or to perform actions on drill down pages.
- A read-only table may become editable when users perform certain actions, such as Create Inline. See Common Table Actions and Table Interaction Methods for details.
- A common example of a read-only table is a search results table.
Read-Only Table with Menu/Toolbar to Perform Actions
Note: A read-only table may include a menu/toolbar command to make the table editable, in which case cells may become editable and additional actions may be provided.
Purpose: Display a list of objects for users to modify directly within table cells, without requiring the user to navigate away from the page.
Editable Table with Both Menu/Toolbar and Web Widgets in Cells
- Editable tables display editable web widgets and other input fields directly in table cells. See Valid Cell Content in the Table Elements guideline for a list of elements.
- Editable tables follow the same information design as read-only tables. See the Table Information Design guideline for details.
- Editable tables may include menus, toolbars, links, and functional icons, and can be used to perform actions on data, such as Create and Delete. See Common Table Actions for details.
- A page may contain multiple editable tables or a mix of editable and read-only tables.
- Editable tables can be implemented as a direct-edit table or as a click-to-edit table.
- Direct-edit tables (also known as Edit All tables) are recommended when the user is expected to perform a significant amount of editing or edit many rows in a table in a given session.
- Click-to-edit tables are recommended when the user is expected to edit a small number of rows in a given session.
- Teams may provide an "Edit All" toggle option, either as a button on the toolbar or as an option in the menu, to enable switching between click-to-edit and edit-all modes when a mix of users is expected to use the table, where some users will edit only a small number of rows at a time, while others may wish to edit many rows during a session.
- See Editing Within Tables in the Table Interaction Methods guideline for details about using direct-edit and click-to-edit tables.
Click-To-Edit Table with Row in Edit Mode
Click-To-Edit Table Showing "Edit All" Option in Toolbar and in View Menu
Both read-only and editable table cells may contain any of the following types of data:
- Display-only or editable data
- Text or numeric data
- Links and icons that provide access to more data (that is to drill down to read-only or editable details pages)
For more details, see Valid Cell Content in the Table Elements guideline.
- Horizontal scrolling of tables should be avoided wherever possible. Usability studies show that users have difficulty completing tasks when the information scrolls horizontally off the page. If, however, there are cases which require many table columns, or if table columns exceed the width of the browser window, then horizontal scrolling may become necessary to reveal the table data beyond the window. For additional details, see Table Width in the Table
Information Design guideline.
- The most important column information within the table (importance of data to a user can be determined by usability studies) should be placed on the left side of the table, or on the right if translated to right-to-left languages.
- Grid line and banding options should be used to improve the information design of tables. For details, see Grid Lines and Banding in the Table Information Design guideline.
- Editable tables can contain web widgets (such as, text field, choice list), icons, and links, as well as read-only data. Display-only tables can contain read-only data, icons, and links in table cells. For details, see Valid Cell Content in the Table Elements guideline.
- All tables should have a table title that qualifies the information displayed in the table. The table title is a Header/Subheader/Sub-subheader component; the level of header depends on where the table is within the content of the page. (Providing a table title satisfies accessibility requirements specified in the W3C guidelines.) For details, see Table Title Area in the Table Elements guideline.
Due to the volume and complexity of table options, RCUI has divided information about tables among the following set of five guidelines:
- Table Information Design - Describes range of layout options, include grid lines and banding, row and column span, totals, and alignment of cell contents.
- Table Elements - Describes range of possible controls and other components in each area of a table, such as menus, toolbars, rows, columns, and status bar.
- Table Display Manipulation - Describes range of options for users to modify the display of a table, including sorting, filtering, resizing columns, and other configuration options.
- Common Table Actions - Describes common data-specific actions, such as Create, Delete, and Duplicate.
- Table Interaction - 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.