How to configure Cosmos React-based UI Table component in PEGA 8.5?

In this particular post, we will learn to configure Cosmos React-based UI components in PEGA 8.5. Cosmos is PEGA recommended design system developed using React JS libraries. It improves client-browser performance, interactivity, mobile-friendly and provides a rich user experience. React Component UI architecture provides a better contextual experience.

We can leverage Cosmos in two different ways:

1. Create a new application with ReactJS run-time architecture [PEGA 8.6+]
2. Create a new application with Theme-Cosmos as Built-On Application [PEGA 8.5+]

Let us explore the second approach for the table component

Pre-requisites:

1. PEGA Environment Access

Step 1: Create a section with a Table Component

Select Structural -> Table component

In the Table — Preferences, enable the following Options

• Optimize code to make the table mobile friendly
• Personalize table to allow users to make changes to the table to get the different run-time views

In the Grid Operations, Check to “Enable Search”

Step 2: Source the Table component with a D Page

Provide the List D_Page as the source

Ensure in the D_Page — Load Management, check to enable pagination. This option provides paging on the server. It improves performance and memory as it stores only the displayed rows in the table.

Step 3: Optional — Configure the Section as a Widget

Create the section as a widget and map it to the appropriate category

Navigate to the dashboard and configure the created widget

Observe in the table component, there is a Search box, Group By, Selected Fields, Density and Refresh.

Wohoooo — Congratulations :) You are successful in configuring the new Table component. Happy learning and explore the new PEGA React-based components.