Skip to main content


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

Modifying presentation options of the non-optimized table layout

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Define the look and behavior of a table layout in your user interface to build a responsive, intuitive, and user-friendly application that meets your business needs. For example, you can style your table like a spreadsheet or make the table responsive to the screen width changes.

Before you begin: Create a table layout for your application. For more information, see Creating a table layout without code optimization.
  1. Search for and open an existing section form that contains the target layout.
  2. In the Table header, click the View properties icon to display the Properties panel, and then select the Presentation tab.
  3. In the Style list, select a pattern for the table rows and columns.
    Tip: You can see the available styles and their previews in the skin rule. For more information, see Component style formats.
  4. In the Container format list, define the look of the layout.
  5. In the Width of content list, define whether the width of the layout columns is set as a percentage or in pixels:
    • To set minimum column widths that expand if the content exceeds the minimum width, select Pixels (fit content).
    • To set column widths as fractions of the total width of the layout area, specified in pixels, select Fill (100%).
    • To set specific column widths, select Pixels (fixed).
  6. Optional: To define additional layout behavior, select any number of the following check boxes, which represent specific personalization settings:
    • To specify a fixed height for the layout, select the Fixed (pixel) size grid check box, and then provide the height in pixels.
    • To sequentially number the rows in the grid, select the Display row numbers check box.
    • To make the table change the appearance of a row when a pointer hovers over a row, select the Enable row hovering check box.
      Note: You can set the hover text and background color in the skin rule. For more information, see Component style formats.
    • To display the container headings, select the Display container header and title check box, and then configure the headings in the Header settings section, which opens when you select the option.
    • To make your grid adjust to screen width changes, select the Responsiveness check box.
      Tip: When you enable responsiveness, you can specify which columns users can see in the table when the available screen width is reduced. For more information, see Arranging column visibility by importance.
    • To override the default presentation when the grid is empty, select the Display custom message when there are no rows to display check box. In the fields that open when you select the option, you can specify a custom section or a field value that you want to present instead.
    • To override the default presentation when your filter criteria yield no matching results, select the Display custom message when there are no results upon filtering check box. In the fields that open when you select the option, you can specify a custom section or a field value that you want to present instead.
  7. Click Submit.
  8. On the section form, click Save.

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