Add column headings to a gallery to display tabular data

(2) Share

Report

Posted on by Steelman70

873

Here is a small hack to add bold column headings to a gallery and display tabular data.

Connect to your data source if you have not done so already (in my case a table (FX_data) of foreign exchange rates by date in an Access Web App, but it could be anything)
For your chosen screen, set the following property:

OnVisible = ClearCollect( FX_data_with_headings, { IsHeadingRow: true}); Collect(FX_data_with_headings, FX_data))

The trick is that when you navigate to the screen you create a first row before your data to identify it as the heading row
Create a vertical custom gallery in your screen and set the following property:

Items = FX_data_with_headings
Add text boxes in your gallery and arrange them horizontally (see image below) and set the following properties

For the first text box (in my case the date column):
Text = If(ThisItem.IsHeadingRow ,"Date",DateValue(ThisItem.Date))
FontWeight = If(ThisItem.IsHeadingRow ,FontWeight.Bold,FontWeight.Normal)

For the second text box (in my case the BRL column):
Text = If(ThisItem.IsHeadingRow ,"BRL", ThisItem.BRL_rate)
FontWeight = If(ThisItem.IsHeadingRow ,FontWeight.Bold,FontWeight.Normal)

The trick is to use the IsHeadingRow field to identify the heading row and display titles and make them bold, underlined or whatever you like

Hope this helps someone, and please let me know if there is an easier way of doing this.

The editing process...

...the result

Categories:

Building Power Apps

I have the same question (0)

All responses (8)

Answers (1)

Verified answer

LauraOnu on at

Like (2)

Report

Very creative idea, the headings get added just like another row to the collection!
Another pattern that I've seen was to use two galleries: one for the headings and one for the records. This provides a sticky header while scrolling the records. Are you trying to build a gridview with sort/ filter, etc?

Was this reply helpful? Yes No
Steelman70 873 on at

Like (0)

Report

I have to admit that the two gallery approach is superior. Frankly I was just playing around with this new tool, and what fun it is!
By the way, is there a function to return the column names of a table? I have not seen one in the reference.

Was this reply helpful? Yes No
SimonP 44 on at

Like (2)

Report

I know this is an old topic, but here's another hack that might help.
Create labels for the column headings above the Gallery. For each label use calculated values for the x position and the width to match the Gallery item so:
For the label width: MyGalleryItem.Width
For the label x position: MyGallery.X + MyGalleryItem.X

This will cause the label width and alignment to always match the field for which it's the heading. It's a bit of a faff, but worth it in the long run.

The other more obvious alternative if you want a pure data table is to use the 'Data Table' control, which does all this for you. However, as far as I can see this doesn't support custom layouts. e.g. in my case I needed a second row for a description that spanned multiple columns in the first row.

Was this reply helpful? Yes No
luuminhvuong93 300 on at

Like (0)

Report

@SimonP
Hi Simon,
I tried to re-create your suggestion but could not.
I created 2 Horizontal Galleries.
How to match the Header Gallery Labels with the content in the 2nd gallery below

Was this reply helpful? Yes No
luuminhvuong93 300 on at

Like (0)

Report

@LauraOnu I cant seem to get the column header position to match the below
What can I do?

Was this reply helpful? Yes No
hikmatune1 35 on at

Like (0)

Report

brilliant @Steelman70 , thanks for sharing

Was this reply helpful? Yes No
hikmatune1 35 on at

Like (0)

Report

@LauraOnu I have been using two galleries approach but is a headache if you want make the app responsive!

Was this reply helpful? Yes No
sahu_deepak 2 on at

Like (0)

Report

I have same issue. in my case date of the month is my column name and in rows absent or present.
So if i add two gallery control one is for header and one is for rows . every gallery control will have right scroll which is not good.

think if there are 30 columns in header and 30 columns in row gallery control. every gallery control will have their own right scroll.

I am looking for a solution. my requirement is to so leaves in to Power app canvas app

vacation app.PNG

Was this reply helpful? Yes No