Table grids and repeating dynamic layouts

You can use table grids to present large amounts of information in a clear and consistent format in your UI. They allow for the sorting, filtering, and grouping of data so that end users can more quickly make decisions or complete their tasks.

The following figure shows an example of a table with a column for deleting rows:

When using tables in a Pega application, ensure that you choose optimized tables for the most accessible experience for all users, particularly those who rely on screen readers. 

Optimized tables use the WCAG-standard grid navigation, and also provide improvements from a performance perspective to create optimal response times.

Best Practices

• Optimized table grids should be used for displaying read-only data. Tables should not be used for layout or for including form input fields.  
• Pagination should be enabled for tables with large amounts of data.
• For any actions configured on table rows, ensure that you configure an equivalent method using the keyboard.
  • Alternatively, configure another column with an actionable item to achieve the same action. For example, a link or a button to delete a row (as in the previous figure).
• Provide clear and concise column header labels for each column in your table.
• Avoid placing multiple actionable form components in the table cells, to minimize confusion and clutter.
• Include a caption and set the table as responsive with 100% width.
• Understand your application and user needs when deciding which table type is best for your needs. Using optimized tables is generally recommended.

Configuring table grids

The following figure highlights the configuration setting that you select to use optimized table code:

A repeating dynamic layout (RDL) is a container format used to organize and display a list of different items while maintaining a consistent template. RDLs can display an unlimited number of records while maintaining a consistent format for each item in the list. They are typically used for long lists of data that are not best suited to being displayed in a tabular format. RDLs should be used when form fields are required.

The following figure demonstrates an RDL displaying content within the same template:

While the RDL itself is not a visible component in the UI, there is an important configuration option that changes how users navigate RDL items by using the keyboard. This option is the Keyboard navigation method radio button selection.

The following figure shows the radio buttons on the General tab of an RDL configuration window:

When you use the Arrow keys option, users who navigate with the keyboard can move between items within an RDL list using the Arrow keys. This makes use of the standard WCAG grid cell method of navigation with Arrow keys by applying the role of "gridcell" to each row in the RDL. Users can then press Enter on an row in the list to navigate between, and interact with interactive elements within that item. This method is best suited to users when working through long lists of items, because it removes the need to individually tab through each interactive element. If your RDL is structured to visually look like a table, this can also be a more contextual means of navigation for your users.

When you select the Tab key option, instead of navigating on a row-by-row basis by using the Arrow keys, the RDL uses Tab navigation so that users can navigate through every interactive element within each item in the list. Tab navigation can be useful for lists that are not too extensive, and when each item has a minimum number of interactive fields. It is also a more intuitive navigation route for most users, especially when typical form components are included in each item in the list. 

Best Practices

• Use RDLs when input form fields are required in the list of items.
• Determine which navigation pattern is best suited to your application's RDLs by understanding your user and app requirements.
• Use pagination for extensive lists, to reduce screen clutter and excessive navigation.
• Avoid using 'drag to re-order' operations, as there is no accessible alternative for keyboard users.

For further information on the differences in navigation with RDLs, see the Accessible navigation patterns with RDLs .