Skip to main content


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

Run-time behavior of Cosmos React tables

Updated on December 13, 2022

Cosmos React tables offer a rich set of features that can help you design a modern, user-friendly, and efficient UI. The tables support run-time editing, as well as a number of out-of-the-box capabilities and customization tools.

Table menu

The table menu appears in the upper-right corner of a table when you click the More icon.

Sample table menu at runtime
Menu in the top-right corner of the table includes options such as Show/Hide columns and Auto size.

Depending on the table configuration, the options in your table menu can vary. The following list presents some of the key table menu options:

Auto size columns
Adjust the size of the column to fit its content.
Export to Excel
Download an .xlsx file with the content of the table.
Filter
Apply simple or complex filters to your data.
Freeze columns
Pin a column to the left side of the table so that when you scroll horizontally, you do not lose the context of the row.
Group
Select the field by which you want to group rows.
Mark as app default
Use the current setup as the default configuration for every user in the application.
Query info
Display information about the table source.
Row density
Define the height of the table rows.
Save view as
Save the current setup as a configuration that you can later access.
Show/hide columns
Choose which columns to display in the table.
Sort
Choose the order in which your data appears on the list.

Column menu

The column menu appears when you click the More icon in the header of the column that you want to edit. Depending on the type of content that you display in the column, the options available in the menu can vary. The following list presents some of the key column menu options:

Aggregate column
Display a sum of numerical values in the column in the column or group header.
Combine with left/right
Merge the contents of the column with a neighboring column under a new name.
Customize column
Change the label and the format of the data in the column.
Filter
Apply simple or complex filters to your data.
Freeze column
Pin the target column to the left side of the table when you scroll horizontally
Group by this column
Use the target column to arrange table rows into groups.
Hide column
Hide the target column.
Sort
Choose the order in which your data appears on the list.
For example:

In this scenario, the table rows are grouped according to the value in the Work status column, and the Amount column is aggregated.

Sample table configuration with grouping
The entries in the table are grouped according to work status. The group header also includes a sum of field values in that group.
  • Previous topic Configuring a React table in a section
  • Next topic Displaying the list of recent items in your application

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