Home Power PlatformsHow to guide? Your Gallery Was Never a Grid: Hands-On with the Modern Data Grid Control

Your Gallery Was Never a Grid: Hands-On with the Modern Data Grid Control

by Mo Faheem
Drawing table lines by hand with a ruler — graph paper exists

Last month I reviewed a canvas app that a client’s operations team had built themselves, and it contained the single most common structure in all of canvas app development: a gallery pretending to be a table. Five labels per template row, aligned by hand. A “header” made of five more labels floating above the gallery, aligned to the first five by eyeball. A sort icon wired to a variable and a SortByColumns formula. It looked convincing — right up until someone changed the browser zoom, at which point the columns drifted apart like a band breaking up.

None of this was the maker’s fault. For years, if you wanted a proper tabular view in a canvas app, your options were a gallery you disguised as a table, or the classic Table control, which was read-focused, visually dated, and never quite earned anyone’s love. So we all built gallery-tables and pretended the alignment would hold.

As of the July/August 2026 feature update, that era is officially over: the Data Grid modern control is generally available in canvas apps. It is a real grid — sortable, searchable, resizable, virtualized, built on Fluent UI — and it takes about ten minutes to adopt. Here is the walkthrough.

Why the Gallery Workaround Was Always on Borrowed Time

A gallery is a repeater, not a table. It stamps out one template per record, and everything table-like about it — columns, headers, alignment — is decoration you maintain by hand. Add a field and you are nudging X coordinates on six controls. Let a user resize a column? Not without a weekend and some regrets. Search and sort mean writing your own Filter and SortByColumns plumbing and hoping delegation cooperates.

Alignment is not structure. The Data Grid gives you the structure: columns are first-class objects, headers come from the control, sorting is a property, search is a property, and row virtualization keeps large datasets scrolling smoothly instead of grinding. Microsoft describes it as a high-performance, data-dense view of tabular data, and for once the marketing line matches the experience in Studio.

Step 1 — Turn On Modern Controls and Themes

If your app does not already use modern controls, enable them first. In Power Apps Studio, go to Settings > Updates, open the New tab, and turn on Modern controls and themes. This is app-level, not environment-level, so you flip it once per app. Existing classic controls keep working — modern and classic coexist happily in the same app, which is exactly what makes gradual migration practical.

Power Apps Studio Settings Updates New tab with Modern controls and themes toggled on
Settings > Updates > New — one toggle stands between you and this decade’s controls.

Step 2 — Insert the Data Grid and Point It at Your Data

With modern controls on, insert the grid from the Insert pane — modern controls sit in the regular categories rather than a separate section, so just search for data grid. Then set its Items property to your data source. Dataverse tables, collections, and inline table expressions are all supported; in my demo I pointed it at Accounts.

Here is the part that will feel strange to gallery veterans: the moment you connect a data source, columns generate themselves. Pick the fields you want in the authoring panel and the grid builds a column per field — typed, labeled, and aligned without a single X coordinate being harmed. What took an afternoon of label-nudging in a gallery takes one property assignment here.

Data Grid bound to the Accounts table with auto-generated columns
Point Items at a table and the columns build themselves. Nobody aligned anything.

Step 3 — Unlock the Columns and Make Them Yours

Auto-generated columns arrive locked — sensible defaults you have not customized yet. Select a column and choose Unlock to take control of it. From there you can rename the Header Text, set the Width (150px by default), hide columns, and — this is the good part — drive the cell content with Power Fx: the Text property takes a formula like ThisItem.'Account Name', so computed and concatenated columns work the way you would expect.

Column types go well beyond plain text: number, phone, email, and URL columns render their values as proper interactive elements (an email column is a working mail link, not a string), and a button column gives every row an action without the transparent-button-over-the-gallery hack we have all committed at least once.

Step 4 — Wire Up Search, Sort, and Selection

The features you used to hand-build are now three properties:

  • Searchable — adds a search bar above the grid; the current query is exposed through the SearchText output property if you want to react to it elsewhere.
  • Sortable — users sort by clicking column headers. Delete your sort-variable plumbing; it has been relieved of duty.
  • SelectMultiple and ShowSelector — turn on multi-row selection with checkboxes. Read a single selection from Selected, or the whole set from SelectedItems when multi-select is on — exactly the shape you want for a “process these five records” button.

Users can also resize columns at runtime, which is one of those small dignities gallery-tables never offered.

Data Grid in preview with the search box filtering to Contoso
Search and sort, zero formulas. This box used to cost a Filter formula and a delegation headache.

What the Grid Won’t Do (Yet)

⚠ Important: the biggest performance caveat hides in an innocent-looking setting. Row virtualization — the feature that keeps 2,000+ record datasets scrolling smoothly — is disabled if any column has text wrapping enabled. The app checker will flag it, but know the trade going in: wrapped text or big-data smoothness, not both.

A few more honest limitations: attachment columns are not supported; row heights are fixed, with no zebra striping or per-column font styling; the built-in search may not delegate on every data source, so verify results against your largest tables rather than trusting a 50-row test; and DefaultSelectedItems changes are not reflected after the grid first loads. If your scenario leans hard on custom row layouts, keep the gallery — that is what it is actually for.

Retire the Gallery-Table, Keep the Gallery

Microsoft is positioning the Data Grid as a distinct new control rather than a forced replacement, and I would adopt it in exactly that spirit. New screens that show tabular data should start with the Data Grid, full stop. Existing gallery-tables can migrate screen by screen as you touch them — the payoff is real (search, sort, resize, virtualization, and Fluent theming for free), but nothing breaks if you take a quarter to get there. Galleries themselves remain the right tool for card layouts and custom row designs; they are just finally excused from impersonating spreadsheets.

This is also a nudge to keep an eye on the monthly feature updates generally — as I wrote in my 2026 release wave 1 mid-wave checkpoint, the features land automatically, but the habits around them do not. The client with the drifting columns? Their app’s main screen is now one Data Grid, two properties deep in configuration, and it survived a browser-zoom test that would have scattered the old version to the winds. The team maintains a data binding now, not a layout. That is the whole upgrade: stop drawing your own table lines — graph paper exists.

Related Articles

Leave a Comment