Data grids are perhaps the most universally familiar UI component for transactional applications. The data grid can take a number of layouts: table, list, and grid. Additionally, a data grid can accommodate a number of different configurations — a table with a status bar, a list view with a toolbar, or a grid with high water mark scrolling, for example.

Elements and Appearance


All data grids must appear below an identifying header.

The following layouts can set the data grid header:

When the spatial proximity of a navigation tab is close to a data grid, either may substitute for a dedicated header.

The illustrations below depict how data grids should appear with headers.

Examples of a table layout on a page, with headers.


A data grid may be displayed to the full width of the page in which it appears. The goal is to avoid having to use horizontal scrollbars, which can occur easily with tables. If scrollbars appear to be unavoidable with a table, consider using an alternative data grid layout, such as the List View.

If the width of the table columns do not match the full width of the table viewport, then select a column to widen, which will consume the balance of the table viewport width. Typically the most salient column, such as the object name, is the one widened, to ensure that the column's values remain fully visible. Users prefer to not have to routinely resize a table column to see the most significant data column.

ToolBar: Actions, Search, and Sort

The data grid toolbar is optional.

The following image provides a toolbar with a series of data grid-level actions.

A table toolbar example. Sample sort control mechanism of data from a data grid, offering results filtered by price, from low to high, and from high to low, for example.

This design presentation is an industry standard for displaying sort attributes and order. It is based on an expectation that users desire to sort on few attributes. Users can quickly select for both the attribute and sort order in a single mouse or keyboard gesture. Sort order values are conveniently matched to sort attributes in a conversational tone that is more approachable (for example, "Low to High" for Price, instead of "Descending" or "Ascending" for Price).

Multiple Selection of Rows

If multiple row selection is enabled for a data grid in the Oracle Alta UI, we recommend setting a single column for the row headers as a way to create a visual cue to the user that multiple row selection is enabled.

The first of the following images for multiple row selection shows the row headers, which indicates that multiple row selection is available. In the subsequent image, multiple row selection support is implicitly shown with color as the rows are selected using a <CTRL>+<click>meta-key combination.

A table with multi-select enabled is indicated in the row header multi-selection.

Scroll Policy

The flowing page layout of the Oracle Alta UI presents the user with one vertical scrollbar, with few exceptions. When the total number of records that a data grid can display exceeds the data grid viewport height, then the user is presented with an option to "scroll" the data grid.

Scroll policy refers to use of the following optional methods of viewing rows that are beyond the height of the data grid viewport:

Pagination Controls

One option for "scrolling" is pagination (for example, Previous and Next controls).

Illustrations of different  pagination control examples

Height Selection Controls

The data grid height selection is a dropdown that allows users to select the number of rows they want to see in the data grid. This establishes the height of the data grid viewport. Any increment is available, but increments of either 10 or 25 are recommended (for example, page selection ranges from 10 - 100, or from 25 - 100), to a maximum data grid height of 100 rows.

Give users the flexibility to set the data grid height when there are no other form elements beneath the data grid in the layout other than the page footer.

The following image shows an example of a data grid's right-aligned height selection control.

 Pagination controls.

High Water Mark Scrolling

When more rows exist in a data grid than are visible on the page, scrolling can be accomplished using auto-load to load more rows automatically as the user scrolls, or using high water mark or "load more" scrolling. High water mark scrolling is a scroll policy that adds a set number of rows to the overall data grid height when explicitly requested by the user. This scroll policy is most appropriate when no other UI content exists beneath the data grid and the content of the data grid is the prevailing context for the page. As a rule, "load more" scrolling is a single control appearing at the foot of the data grid, as illustrated below.

Illustration of high water mark scrolling

Use the Browser Vertical Scrollbar

In the Oracle Alta UI, use the browser's vertical scrollbar when needed. For example, the browser vertical scrollbar is used in conjunction with a high water mark scroll policy. Using data grid scrollbars (horizontal, vertical) is discouraged.

Horizontal scrolling is highly discouraged for data grids because it isn't mobile-friendly or conducive to responsive design.

Column, List, and Grid Layouts

There are three common data grid formats:

The columnated format is the most common. It is used to display data in a tabular format of rows and columns. The following image illustrates a typical, columnated table.

Illustration of typical columnated table

The list view is one of the most versatile data grid formats. It is essentially a table of iterated form layouts.

The following image shows a simple, three-column list view.

Illustration of typical table minus table column headers

This format is a favorite to present search results. It can easily handle a number of attributes and UI controls (such as images, links, and text) within a limited, horizontal page width. Following is an example of a five-column list view.

Illustration of typical list view formatted table

The grid or matrix layout is a popular format used for its efficient layout.

The following is an example of a typical grid layout.

Illustration of typical grid table

Additional Resources