Posted: 17 Feb 2021 17:34 EST Last activity: 18 Feb 2021 13:44 EST
How to freeze the first column of an optimized table
If you are rendering a table with a lot of columns, it is sometimes important to freeze the first column of the table or the header.
Here is a demo of the functionality using the Templates landing page in Dev Studio.
1/ Configure the table to be a read-only table and optimized
The optimized table has a simpler markup than the legacy table - For this functionality to work, you need to make sure to upgrade your table to use the optimized table.
2/ Add the following CSS snippet to a CSS File attached to your skin
Note: this code snippet uses a section name in the selector to only apply the change to this section. A better approach is to wrap the section containing the table into another section and use a helper class attached to the section include. You can also apply the selectors to a specific table format but beware that creating a new table format will increase significantly the size of the auto-generated CSS file.
The snippet will freeze both 1column and header - remove the unneeded selector if you only need to freeze the header or the column.
the max-height and max-width will need to be changed depending on where your table is dropped. The same applies to the border color.
This solution allows you to easily add support for a sticky header and footer to your table. If you want a richer example with different column freeze and for a very large table, the recommendation is to use the new React-based table available in Pega 8.5 - These new table implementation can run along with your Pega Infinity application as a dedicated landing page.