Limit row selection

Hello,

Hello,

I'm building a tournament management platform, which includes a feature to register for various events. To ensure fairness, I aim to limit participants to registering for a maximum of three events.

Originally, I considered implementing a check upon submission to enforce this limit. However, for a better user experience, I now intend to restrict the number of selectable rows in the form itself to three.

For example, imagine there are four events available, but participants can only choose up to three.

Is there a way to implement this restriction using the selectRow function in the table component?

Thanks for helping me :slight_smile:

Hello!, i don't think is it possible to limit row selections, but you can make a validation:

  1. In a transformer (i named it selectedRows), check for selected rows, if selected rows is greater than (n) return true, else return false
let selectedRows = {{ table1.selectedRows.length }};

if (selectedRows > 3) {
  return true;
}
return false;
  1. if transformer is returning true, disable the submit button and show the alert
    image
    Disabled: {{ selectedRows.value }}

image
Hidden: {{ !selectedRows.value }}

Result:
Animation

1 Like

Hello @OOSC3,

Thanks !

You confirm my intuition.

I'm gonna test next week :slight_smile:

Have a good day