Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Tables

Updated on February 2, 2021

Use a table when displaying tabular data or comparing data both vertically and horizontally.

Usage

  • Tables should extend to 100% of the available space.
  • Numeric cell data should align right; otherwise, the data should be left-aligned.
  • Columns containing a single 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.

Table actions

Tables can have actions that apply to the entire list or to specific items.

The primary table action (such as adding a new row) should display as a button at the top right of the container in the header of the table. Exceptions are for multiple grids appearing in a single container, grids appearing in tabs, or inline actions on tiny lists.

If there are more than two table actions available, they should be consolidated into a dropdown labeled “Actions”. An exception to this is for an action that adds a new row to the grid; this should appear in its own button since it is not truly a bulk action (it does not apply to the entire grid).

If there are actions that apply to specific items in a table, display them at the far right of the table row, right-justified. If there is more than 1 action, they should be in this order: [Action], [Configure/Edit], [Delete/Remove], [More].

If there are three or more inline actions, they should appear inside a three-dots hamburger menu in descending order of importance or frequency of use. If there is a “delete” option, it should be at the bottom, separated by a horizontal rule.

Mobile tables

Table controls are responsive; and on mobile devices, they will reformat automatically to work for that form factor. The primary column from the table becomes the header for the item, and other columns in the table are listed with the labels on the left and values on the right.

Pagination

Pagination allows data to be broken up into sequence pages.

Standard pagination

Standard pagination should be the default way to present a large list. Pagination should always be in the bottom right of the page using the format “1, 2, 3, 4 >”.

Uses: Workflow search, case widgets, fat lists, dedicated search pages, search results

Show all

Use when filtering is not a major use case, and when fitting lists in small spaces.

Uses: Case widgets (i.e. team members, attachments)

Progressive paging

Progressive paging (“lazy load”) automatically loads more items as the user scrolls. Use progressive pagination when there is no content under a list on a page and browsing/filtering is the primary action.

Uses: Mobile, Dedicated search pages

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us