Tables Overview

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.

Guideline Contents

• General Principles
• Types of Tables
• Read-Only Tables
• Editable Tables
• Types of Data in Table Cells
• General Tables Heuristics
• Table-Specific Guidelines (separate documents)
• Table Information Design
• Table Elements
• Table Display Manipulation
• Common Table Actions
• Table Interaction Methods

Related Guidelines

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:

General Principles

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.

Types of Tables

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.

Read-Only Tables

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

Usage:

• 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

Editable Tables

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

Usage:

• 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

Types of Data in Table Cells

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.

General Table Heuristics

• 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.

Table-Specific Guidelines

Due to the volume and complexity of table options, RCUX 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.