Skip to main content

Sorting repeater rows

In this tutorial, you'll learn how to sort the rows in a repeater in ascending and descending order based on a column in the repeater's dataset.

info

Click here to download the completed RP file for this tutorial.

1. Widget setup​

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag a rectangle widget onto the canvas, right-click it, and select Create Repeater from the context menu.

  3. Add two rows, and then edit the Column1 cells to be numbered from 1-5, in a random, non-ascending order

  4. Drag a button widget onto the canvas, and then Set the text on the button to Add sort.

2. Add sort​

  1. Select the "Add sort" button and click New interaction in the Interactions pane.

  2. Select the Click or tap event in the list that appears, and then select the Add sort action.

  3. Select the repeater widget in the Target dropdown.

  4. In the Name field, enter Toggle Column1.

  5. Leave Column1 selected in the Column dropdown, and leave Number selected in the Sort as dropdown.

  6. In the Order dropdown, select Toggle, and leave Ascending selected in the Default dropdown.

    This sort will target Column1 of the dataset, treat its data as numbers, and toggle the sort order back and forth between ascending and descending whenever the button is clicked.

  7. Click OK to save the action.

3. Remove sort​

  1. Drag another button widget onto the canvas and set its text to Remove Sort.

  2. With the button widget selected, click New interaction in the Interactions pane.

  3. Select the Click or tap event in the list that appears, and then select the Remove sort action.

  4. Select the repeater widget in the Target dropdown.

  5. Select the All radio button and click OK to save the action.

info

To remove only one specific sort, you can select the second radio button and enter the sort's name in the text field. This can be useful when you have multiple sorts applied to a repeater at the same time.

4. Preview​

  1. Preview the page again and click the "Add sort" button to sort the repeater.

  2. Click the button again to change the rectangles to descending order.

  3. Click the "Remove sort" button to return the repeater to its unsorted state.