Tables in Pega are a widely used, compact, structural component that is great for displaying information.
You can use tables as an efficient way to sort, filter, group, and organize data. You can also configure tables, as they offer a great deal of flexibility. Adding to the list of benefits, Pega offers Optimize code, a new configuration option for tables that brings new features to tables.
Even without this configuration setting turned on, tables will still do what they do best. But optimized tables offer new features that improve user experience. Read on to learn more about some of these features.
Optimized tables offer user-friendly features
A few years ago, Pega introduced the Optimize code configuration setting, diving into new features in browser and front-end technology. The goal? To create a modern table layout. Let’s go through some of the new and enhanced capabilities of the optimized table.
End-user personalization
When the Optimize code is enabled on a table, end users can personalize tables. End users can modify which table properties are presented in the columns, adjust the order and width of columns, and sort and filter as necessary. After making their desired personalization changes, users can save their customizations as one or more views. This allows for a tailor-made experience for end users working with tables.
Search capabilities
Optimized code also allows users to easily search for specific data within an optimized table. This, in combination with the personalization features, allows for an efficient and user-friendly experience when viewing or manipulating the table data at runtime.
Responsive UI
Depending on the amount of data sourcing a table, the length of the data, and the number of properties displayed, you may find yourself with quite a sizable table. How do you ensure a consistent and responsive experience for users with varying screen resolutions and zoom levels?
Optimized tables have moved away from using forced adjustments through JavaScript, and instead naturally resize and align themselves respective to the browser. This not only helps with performance but provides a consistent and flexible experience for various user groups.
Optimized tables offer functional benefits
One of the key differences between unoptimized and optimized tables is the process used for rendering the table control on the UI (user interface). Optimized tables no longer make use of server-side rendering of tables—instead, optimized tables opt for client-side template-based rendering technology.
This leads to increased rendering performance for tables of varying amounts of data. Since it uses very little JavaScript, the optimized table brings with it increased performance— especially on mobile devices. Optimized tables also support offline usage thanks to this rendering process!
Optimized tables support accessibility
Accessibility is an ongoing mission at Pega, as we strive to create an equitable experience for all users. Optimized tables offer many accessibility benefits:
Cleaner markup
One great stride for a cleaner and more accessible experience can be seen in the underlying markup in the DOM (Document Object Model) that comprises an optimized table.
In unoptimized tables, the component contains a much larger amount of pure markup than the optimized variant, to account for some of the table’s formatting and structure. With just one table tag in the markup with an optimized table, screen reader users can understand the structure and content of the table more easily, and accessibility testers will see less issues in both automated and manual testing. The reduced amount of markup consequently improves browser processing as well.
Captions
Optimized tables allow users to add a caption tag within the table itself. The caption allows users to add further contextual information to the table, without needing to squeeze all the necessary information into the table title.
It is also useful for screen reader users to have extra information on the contents of the table they have focused on.
Simple keyboard navigation
Keyboard users can easily navigate table headers and cells in optimized tables. Focusing on the headers of a table behaves very similarly to a tab group. Once a user focuses on one of the headers, they can use the arrow keys to navigate between headers. Pressing Enter allows the user to use the sort and filter menu options easily. From here, pressing escape returns focus to the header itself. Within the table, using the tab key will focus on the interactive elements within cells, rather than entire cells themselves.
Are optimized tables the right option for you?
The Optimize code checkbox brings with it several enhancements and new functionalities. However, remember which configuration options it supports.
While optimized tables are a work-in-progress with new features and enhancements being added over releases, non-optimized tables still have more features, including master-level detail editing, responsiveness, and report definition as a data source. Depending on your application requirements and the origin of your data, these differences might be decisive factors in determining which table is best for you, so consider both options carefully.
We will continue to improve optimized tables and add features to make it both a versatile and performance-efficient component. In time, the optimized table will become the standard for presenting data to users in an efficient, flexible, and feature-rich way.
Don’t Forget
- JOIN THE CONVERSATION on Collaboration Center
- FOLLOW @PegaDeveloper on Twitter