The optimized table is the preferred approach for rendering read-only and editable tables. It has a lighter markup, it 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 is particularly useful when you use paging and want to quickly select all the rows in the page.

Here is a demo of the functionality

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.

Note: You don't need to set a property on this checkbox - it will automatically set to the pyDefaultTemplate property. The property will not be stored in the editable DP and does not have to be sent to the server.

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