Components

Tables and lists

A table should be used when a user needs the ability to compare data both vertically and horizontally. If comparison of data is not necessary for the user, a repeating dynamic layout is a better choice. Tables are widely used for displaying data in the Pega platform making it important to utilize a consistent look and feel for our out of the box format.

Best practices regarding tables:

  • Tables should extend to 100% of the available space.
  • Numbers should align right, while text should align left.
  • Columns containing a single word or icon should be aligned to the center.
  • Column headings should always match the text-alignment of the data in the column.
  • Columns should be presented in a logical order.
  • Primary data should appear in column 1 (In many business apps this is often a link to another object.)
  • Row actions — such as delete — should be the last column.
Table example

Last updated: Mar 2017

Mobile tables

Pega's table controls (grids) are responsive, and on mobile sizes will reformat automatically to work for that form factor. The Primary column from the grid becomes the header for the item, and other columns in the grid are listed with the labels on the left and values on the right.

Mobile table list example

Last updated: Mar 2017

Table actions and interactions

Specific columns in grid controls can be filtered out of the box. If a column is configured to be filterable, a small black filter icon is shown. On click, an overlay appears and allows the user to filter. If a column has been filtered, the icon color changes to red.

Table actions example

Last updated: Mar 2017

What type of grid do I use?

The Pega control for a table is called a "grid". "Grid" is just a standard HTML table.

  • Use a Grid if there is a significant quantity of information to display, and/or a need to compare one or more properties of the items.
  • Use a Fat list if there is a significant amount of information to display, and users may need to compare no more than one property between items.
  • Use a Tile list if there is a significant quantity of information to display, but the user doesn't need to compare items.
  • Use a Tree if you have a significant quantity of information to display, and this information is hierarchical with a parent-child relationship.

Depending on the type of information you're displaying to the user, more than one of these types may be appropriate, and designers should use their discretion to choose the best solution.

Last updated: Mar 2017

"Grids" (a.k.a. tables)

Default

The Default grid style can be used in most cases. Items are delineated by 1px border, and the header is separated from content via a 2px border.

Table grid example

Spreadsheet

The Spreadsheet style mimics the look and feel of an Excel spreadsheet, and is most useful for comparing and working with large quantities of data.

Spreadsheet format example

Transparent

The Transparent style has no hover state or outlines. It is best for organizing information, as long as users will not need to do a lot of comparison between lines.

Transparent grid example

Mobile grids

Grids are responsive, and on mobile sizes will reformat automatically to work for that form factor. The Primary column from the grid becomes the header for the item, and other columns in the grid are listed with the labels on the left and values on the right.

Mobile grid example

Tiles

Tiles should be formatted in the same way as a container tile.

Tile example

Last updated: Mar 2017

Table/grid actions and interactions

Filters

Specific columns in grid controls can be filtered out of the box. If a column is configured to be filterable, a small black filter icon appears. On click, an overlay will appear allowing the user to filter. If a column has been filtered, the icon appears in red.

Filtering example

Open an item

Use a link to open an item. Click on the entire row to toggle the item to selected. If expanding the item on the same page, use an expand/collapse icon to the left of the content, in a color that is not link blue (usually the same color as the text).

Opened item example

Select an item/row

Click on the entire row to toggle it to selected. Click again to toggle it to unselected. For accessibility reasons, use an invisible checkbox that a screen reader can locate.

Selected item example

Delete a row

Use the trash icon to delete a row. This icon should live on the far right, and does not require a label.

Deletion example

Edit/configure a row

  • A pencil icon should be used for editing a row.
  • A gear icon should be used for configuring an item.

Editing pertains to text or other simple properties that may be changed, without having an effect on other items. For example, changing a name or birthdate.

Configuring refers to changing items that interact with other items, or making in-depth changes. If there are many more fields and pieces of data to change that are not shown as grid columns, configure should be used. If changing some data will affect other items (e.g., in the grid control or in the action the user is performing), then configure should be used.

Editing/configuring is more relevant than opening an item (with the link) when the user will be going directly to an edit mode, and when finished, will be returned to the list. If the user does not return to the list after editing, then a link should be used instead of an icon.

Editing example Configuration example

Number of actions in a row

No more than two icons should be used in a row. If there are more than two actions, use a menu instead.

Actions menu example

Labeling actions

Any uncommon actions should have a label in desktop mode. The label is optional in mobile, however, should be used when in doubt.

If there is one uncommon and one common action on a row, the uncommon one should be listed to the left of the common one. The common one does not require a label (optional).

One common and one uncommon action

One common and one uncommon action example

Two uncommon actions

Two uncommon actions example

Last updated: Mar 2017

Next: Basic page structure