Learn how to prototype web and mobile apps

Prototyping sortable columns for your Data List

In this tutorial, you will learn how to sort each of the columns of your Data List in ascending and descending order, and according to their type (in this case name, age and birthday).


Follow the next steps:

1) Go to the Data Master tab and create a new Data Master. Name it ‘sort_datagrid’ and create three fields: name, age and birthday. Change the type of the attribute ‘birthday’ from text to date. Click OK.

2) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Fill in some example data there, making sure to input the date in American format (mm/dd/yyyy). Click OK.

3) Now click on a Data List widget: a pop-up dialog will show up. Name it ‘sort_data’ and select the Data Master you’ve created. Then select all its fields.

4) Select the header of one of the columns, go to the Properties tab and make sure that the layout is set to ‘free layout’. Then drag two arrow icons that will perform the sorting of the values in the Data List. Select one of the arrows, go to the ‘events’ tab and add an “On Click” + “Set Value” event, choosing the entire Data List as the component that will display the value. Click the ‘Calculate’ button and build the following expression:


The expression is made up of the Data Function “SORT” (make sure you don’t mix it up with the Number function “SQRT”), the first row of the Data List and the “Name” field from the Data Master.

Important: when adding the field, go to the Data Master tab in the central section of the expression builder and choose the relevant field from there (do not write the name of the field in manually). sort-column-expression

Then, click OK twice. Do the same for all the headers, changing the sort type from ascendant to descendant when necessary, and selecting the relevant Data Master field.

You’re all set. Click, simulate and enjoy!

Next tutorial > Expressions on data lists


  1. Hardik

    December 30, 2015 at 2:48 pm

    This doesn’t work for me. The finally created table doesn’t show any records, only column headers and empty rows. Please help me understand better.

    • Emily Adiseshiah

      December 30, 2015 at 3:51 pm

      Hi there,

      Make sure that you have filled in your data master correctly, otherwise nothing will show during simulation (check out this tutorial for help with this: https://www.justinmind.com/support/dynamic-datagrids). Also, remember that in the canvas the Data List will appear with empty rows. To see the final data list in action, you need to click on “Simulate” in the top right-hand corner of the editor.

      Hope this helps!