The optimized table is the preferred approach for rendering read-only and editable tables. It has a lighter markup, is more accessible and has improved performance. Having said that it does not have all the functionality of the legacy table component. One of the most requested feature is the ability to select all the rows in a page. This functionality is particularly useful when you use paging and want to quickly select all the rows in the page before performing some actions.

Such functionality can be achieved by running some data transform on click of the checkbox header and then refreshing the list, but this is not the most efficient way, especially with columns that have a lot of columns. The most efficient way is to toggle each row of the table on the client side. 

Here is a demo of the functionality for the bulk follow action running in a modal dialog

This document is going to explain how to implement such functionality with a little bit of custom javascript.

1/ Configure the optimized table to use an editable DP

Make sure that your optimize table is using an editable DP - For this example, we will use the data page called 'D_pxUnFollowCases' which is used to follow / unfollow cases.

Here is the configuration of this table using Theme-Cosmos

Make sure to disable column grouping in the 'presentation' tab for this functionality to work. The recommended settings would be:

2/ Add a checkbox on the first column

Add a checkbox using the .pySelected property and configure the click action to 'post value' - This will allow the setting to be persisted in the editable DP - If you do not configure the click action, the row selection will be lost when changing to the next page

3/ Add a checkbox in the header of the first column

Add a checkbox in the header of the column - this will be used for the 'select all' action - on click, add a runscript action that will call a function called selectAllCheckbox.

Do not set a property on this checkbox so that there is nothing to be stored on the primary page. The 'select all' checkbox will act as a toggle but the state of the checkbox will not be persisted when navigating to a new page.

4/ Implement the function selectAllCheckbox

There are several ways to implement a JS function - the recommended approach is to create a new JS file and reference the file in your portal harness. If you want to get this function available everywhere, you can also load the JS file using the userworkform fragment.

For this document, we will implement directly the function in UserWorkform using the following snippet

<script>
function selectAllCheckbox(event) {
   var el = event.target;
   $(el).closest("table").find(".checkbox").each(function() { 
      if(el !== $(this)[0] && $(this)[0].checked != el.checked) {
        pega.control.actionSequencer.fireTopPriorityEvent($(this)[0], "click") 
      }
   });
}
</script>

The function will find all the checkbox visible in the table and trigger the click action on each individual checkbox. Note that if you have other checkboxes in the table, they might be triggered too - you will need to implement some additional filtering in the if condition above.

5/ Implement business logic for selected rows

If you are rendering the table in a modal dialog, the last step is to create a DT or activity and configure it in the post processing of the flow action - On submit of the modal, the pro-processing work will look for the rows with .pySelected set to true

Other functionality can be added like selecting multiple rows using the shift click action or being able to use the up and down arrow to quickly select or unselect all the rows.

For more details you can import the attached RAP on your Pega Platform dev sandbox and add the branch 'demoSelectAll' to your application. Then navigate to "Configure -> User interface -> Skins, interfaces and templates". The table that displays the list of templates will showcase this functionality. (Note that the branch has been created on a Pega 8.6 and might not work on older Pega version).

Here is a demo of the functionality