Power Apps – Gallery with clickable sort per column

Introduction:

We will take a look at one way to create a table with columns to sort chosen by the user using a gallery. Keep in mind that there is a ‘Table’ (modern) control that has sorting capabilities, but you cannot customize it like adding icons per row. This is an alternative solution.

Step 1:

Insert a button (modern) named ButtonCanvas1. Change the following properties:

Text property

"Create Collection"

OnSelect property

ClearCollect(collMyCollection,
Table(
{'Last Name':"Colton",'First Name':"Baldwin",Age:27},
{'Last Name':"Landon",'First Name':"Harris",Age:32},
{'Last Name':"Jacquelyn",'First Name':"Ceballos",Age:56},
{'Last Name':"Grady",'First Name':"Burgener",Age:61},
{'Last Name':"Emmie",'First Name':"Winsor",Age:16},
{'Last Name':"Shyla",'First Name':"Shippy",Age:24},
{'Last Name':"Tesha",'First Name':"Webb",Age:43},
{'Last Name':"Leana",'First Name':"Vasquez",Age:21},
{'Last Name':"Judi",'First Name':"Cornell",Age:46},
{'Last Name':"Millicent",'First Name':"Roundtree",Age:32},
{'Last Name':"Edythe",'First Name':"Gariepy",Age:11},
{'Last Name':"Karisa",'First Name':"Chalfant",Age:33},
{'Last Name':"Junie",'First Name':"Romans",Age:27})
)

Step 2:

Activate play mode and then click on the ‘Create Collection’ button so our collection gets created. Check if the collection has been created.

Step 3:

Back to studio mode, insert another button (modern) named ButtonCanvas2. Change the following properties:

Text property

"First Name"

OnSelect property

UpdateContext(
{varSortOrder:If(varSortOrder=SortOrder.Ascending And varSortColumn = "First Name",
SortOrder.Descending,SortOrder.Ascending),
varSortColumn:"First Name"}
);

Width property

150

BorderRadius (RadiusBottomLeft, RadiusBottomRight, RadiusTopLeft, RadiusTopRight) property

0

Icon property

If(varSortColumn = "First Name", "Filter")

IconRotation property

If(varSortOrder = SortOrder.Descending, 0, 180)

Layout property

"Icon after"

Step 4:

Insert another button (modern) named ButtonCanvas3. Change the following properties:

Text property

"Last Name"

OnSelect property

UpdateContext(
{varSortOrder:If(varSortOrder=SortOrder.Ascending And varSortColumn = "Last Name",
SortOrder.Descending,SortOrder.Ascending),
varSortColumn:"Last Name"}
);

Width property

150

BorderRadius (RadiusBottomLeft, RadiusBottomRight, RadiusTopLeft, RadiusTopRight) property

0

Icon property

If(varSortColumn = "Last Name", "Filter")

IconRotation property

If(varSortOrder = SortOrder.Descending, 0, 180)

Layout property

"Icon after"

Step 5:

Insert another button (modern) named ButtonCanvas4. Change the following properties:

Text property

"Age"

OnSelect property

UpdateContext(
{varSortOrder:If(varSortOrder=SortOrder.Ascending And varSortColumn = "Age",
SortOrder.Descending,SortOrder.Ascending),
varSortColumn:"Age"}
);

Width property

150

BorderRadius (RadiusBottomLeft, RadiusBottomRight, RadiusTopLeft, RadiusTopRight) property

0

Icon property

If(varSortColumn = "Age", "Filter")

IconRotation property

If(varSortOrder = SortOrder.Descending, 0, 180)

Layout property

"Icon after"

Step 6:

Insert a blank vertical gallery named Gallery1. Change the following properties:

Items property

SortByColumns(collMyCollection,varSortColumn,varSortOrder)

TemplateSize property

56

Step 7:

Insert a text (modern) named TextCanvas1 inside Gallery1. Change the following properties:

Text property

ThisItem.'First Name'

Step 8:

Insert a text (modern) named TextCanvas2 inside Gallery1. Change the following properties:

Text property

ThisItem.'Last Name'

Step 9:

Insert a text (modern) named TextCanvas3 inside Gallery1. Change the following properties:

Text property

ThisItem.Age

Conclusion:

To test it out, activate play mode and click on the header column buttons. You will notice that the table will sort on the specific column that you selected. Click each twice to toggle between ascending and descending sort order.