Citizen Developer
Timespan
explore our new search
​
Power Apps: Scrollable Gallery + Table
Power Apps
Jan 26, 2026 5:41 PM

Power Apps: Scrollable Gallery + Table

by HubSite 365 about Reza Dorrani

Principal Program Manager at Microsoft Power CAT Team | Power Platform Content Creator

Power Apps on Power Platform: build a responsive gallery with horizontal and vertical scroll for editable table and CRUD

Key insights

  • The video shows how to build a responsive, editable table in Power Apps using a Gallery control instead of Data Tables, giving smooth horizontal and vertical scrolling for many columns and rows.
  • Quick setup: use Insert Gallery, pick Vertical or Horizontal, set the Items property to your data source, and choose a layout to preview data instantly.
  • Template editing: enter Template editing mode to add controls (Labels, Text inputs), map fields to those controls, and reuse the design across every record automatically.
  • Scrolling and layout tips: combine container and gallery settings to allow both scroll directions, add scrollable headers, and use properties like ShowNavigation and ShowScrollbar to improve user navigation.
  • Make it responsive: design with relative widths and dynamic column rendering so the gallery adapts to screen size and orientation, and apply Delegation-aware queries to handle large datasets efficiently.
  • Enable full data actions: add in-place editors inside the gallery for CRUD tasks, then use Patch (with batching and error checks) to update the data source reliably from the gallery items.

Overview of the Video

In a recent YouTube tutorial, author Reza Dorrani demonstrates how to build a flexible editable table using a Power Apps Gallery that supports both horizontal and vertical scrolling. The walkthrough targets makers who want a spreadsheet-like experience inside a Canvas app while avoiding the built-in Data Table control. Consequently, the video focuses on a gallery-based approach that adapts to screen size and orientation to deliver a responsive grid feel for many rows and many columns.

How the Responsive Gallery Is Built

First, Dorrani explains how to configure a gallery template so it repeats controls across each record while allowing horizontal movement for columns and vertical movement for rows. He shows how to place text inputs and labels inside the template, then use layout formulas to align items and to let the gallery respond to device width and height. As a result, the layout scales from phone to desktop, and users can scroll across columns without losing the vertical position in the dataset.

Next, the tutorial covers scroll and navigation properties that make the experience smoother, including enabling arrow navigation and showing scrollbars when appropriate. These settings improve usability when many columns are present, and the video highlights how to hide or show UI hints based on device type. Thus, the design strikes a balance between visual clarity and discoverability for end users.

Editing, CRUD and Data Handling

Importantly, Dorrani builds full create, read, update, and delete (CRUD) capability directly within the gallery so that users can edit values inline. He demonstrates how to bind inputs to the gallery template and how to use the Patch function to commit changes back to the data source safely. Consequently, the gallery becomes an editable grid where users can make multiple edits and then save them in batches or one-by-one, depending on how an app maker implements the logic.

However, the video also notes tradeoffs when enabling inline edits. For example, immediate patching offers real-time updates but can increase API calls and create concurrency challenges in multi-user scenarios. Conversely, buffering edits locally improves performance and reduces write operations but requires extra code to validate, merge, and commit changes in the correct order.

Performance and Tradeoffs

Dorrani addresses performance concerns caused by large datasets and many columns, and he recommends design choices that limit on-screen complexity. For instance, loading only visible items and using delegation-friendly data operations can reduce lag, while virtualizing columns or paging can minimize memory use. As a result, app responsiveness improves, but these approaches add implementation complexity and require careful planning around user expectations and data consistency.

Moreover, the tutorial highlights the tradeoff between a fully dynamic column layout and predictable template design. Dynamic columns increase flexibility for varied datasets but demand more formulas and conditional logic, which can slow down rendering. In contrast, a fixed template simplifies maintenance and performance but can limit how broadly the solution applies across different data structures.

Practical Challenges and Best Practices

Throughout the video, Dorrani calls out practical challenges such as aligning headers with scrollable content, maintaining focus when users edit fields, and preserving accessibility for keyboard and screen reader users. He demonstrates ways to keep headers in sync with horizontally scrolling content so that column context remains clear. Consequently, following these patterns improves usability, yet makers must test across devices to ensure a consistent experience.

He also suggests handling delegation limits by pushing heavy filtering and aggregation to the data source where possible, and by keeping client-side logic lightweight. This advice reduces the risk of partial results and unexpected behavior when queries exceed service limits. Nevertheless, these choices shift responsibility to the backend and may require collaboration with data owners to add indexes or views.

Recommendations and Conclusion

In summary, the video from Reza Dorrani provides a hands-on, step-by-step path to create an editable grid using a Gallery in Power Apps, while also exposing the tradeoffs between flexibility, performance, and complexity. For teams that need a customizable, mobile-friendly table experience, the gallery approach offers strong UI control and inline editing, but it calls for deliberate choices around data loading, patching strategy, and column management. Therefore, project leads should weigh user needs against implementation effort before selecting this pattern.

Finally, the tutorial is valuable for makers who want a practical, production-ready pattern and are willing to accept the development tradeoffs that come with a gallery-based editable table. With careful testing, delegation-aware queries, and a clear patching strategy, the approach can deliver a modern, scalable grid that works well across devices while keeping maintenance manageable. Overall, the video delivers actionable guidance and clear warnings that help app builders design a balanced solution.

Power Apps - Power Apps: Scrollable Gallery + Table

Keywords

Power Apps gallery tutorial, Power Apps horizontal scroll gallery, Power Apps vertical scroll gallery, Power Apps editable table tutorial, Build Power Apps gallery, Editable gallery in Power Apps, Responsive Power Apps gallery, Power Apps table editing