Expandable and Collapsible Tables in PowerApps

Introduction

In this article, you will learn how to easily expand and collapse multiple tables in PowerApps.

Follow the below steps for the expansion and collapse

Step 1. Setting up the canvas control

If you need to add multiple tables or use the same screen for multiple tables, consider adding a scrollable screen or canvas control. You can copy the canvas control from a scrollable screen.

Step 2. Customizing columns

Once you've added the canvas, you can customize the columns as per your requirements. In this example, I'm using two columns in the canvas control.

Step 3. Adding containers

Add the number of containers as per your table's requirements. In each container, add the controls you need for your development.

Step 4. Adding controls to containers

Add an Icon control and select the ChevronUp icon. In the OnSelect property, add the following formula

UpdateContext({varTable1:!varTable1})

Step 5. Adding Expand/Collapse functionality for table 1

Add an Icon control and select the ChevronUp icon. In the Icon property, add the following formula

If(varTable1,Icon.ChevronUp,Icon.ChevronDown)

 

Step 6. Add the Container height as dynamic and use the following code for the height.

If(varTable1,471,40)

 

Adding Expand/Collapse functionality for subsequent tables

For the remaining tables, follow the same steps but replace the variable with varTable2, varTable3, and so on. This will allow each table to collapse and expand individually based on their respective variables.

Conclusion

With the help of this article, you can easily expand or collapse your tables, making your screen more effective and user-friendly. Implementing the collapse and expand functionality will improve the user experience and allow for efficient utilization of the screen space.