Discussion

1
Replies
189
Views
Richard Marsot (RichardMarsot)
PEGA
Director, Front-end Development
Pegasystems Inc.
US
RichardMarsot Member since 2011 23 posts
PEGA
Posted: February 17, 2021
Last activity: 1 week 5 days ago
Posted: 17 Feb 2021 17:34 EST
Last activity: 1 Jun 2021 4:32 EDT

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.

This article explains how to implement such functionality using a CSS-only approach and the 'display: sticky' attribute. This approach does not require Javascript and it will only work on modern browsers. For older browsers like IE11, it will use graceful degradation and will not freeze the column and header.

Here is a demo of the functionality using the Templates landing page in Dev Studio.

demo freeze column and header

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.

table config #1

table config #2

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.

div[data-node-id="pzSectionsUsingDTemplate"] #gridBody_right {
    position: relative;
    max-width: calc(100vw - 80px);
    margin: auto;
    z-index: 1;
    overflow: auto!important;
    max-height: 800px;
}
div[data-node-id="pzSectionsUsingDTemplate"] #gridBody_right > table {
    overflow:auto;
    border-left:none!important;
    border-top:none!important;
}
/* implement the freeze of the first column */ 
div[data-node-id="pzSectionsUsingDTemplate"] #gridTableBody > tr > th:nth-child(2),
div[data-node-id="pzSectionsUsingDTemplate"] #gridTableBody > tr > td:nth-child(2){
    background: #FFF;
    z-index: 2;
    position: sticky!important;
    left: 0;
    border-left: 1px solid #CBCBCB;
}
/* implement the freeze of the header */ 
div[data-node-id="pzSectionsUsingDTemplate"] #gridTableBody > tr:nth-child(1) > th {
    background: #FFF;
    position: sticky!important;
    top: 0;
    border-top: 1px solid #CBCBCB;
}
div[data-node-id="pzSectionsUsingDTemplate"] #gridTableBody > tr:nth-child(1) > th:nth-child(2) {
    z-index:3;
}

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. 

Conclusion

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.

for more details

https://community.pega.com/knowledgebase/articles/whats-new-pega-platform/modernize-your-interface-cosmos-react-ui-85 

https://www.youtube.com/watch?v=lnYb-Eu-b2A

 

 

***Edited by Moderator: Pooja Gadige to add Developer Knowledge Share tag***
Pega Platform 8.5 User Experience Front-End Developer Developer Knowledge Share