Add column headings to a gallery to display tabular data

[Steelman70]

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

1. 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)
   
   
   
2. 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
   
   
   
3. Create a vertical custom gallery in your screen and set the following property:
   
   Items = FX_data_with_headings
   
   
   
4. 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

[LauraOnu · Accepted solution]

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?

[Steelman70]

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.

[SimonP]

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.

[luuminhvuong93]

@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

[luuminhvuong93]

@LauraOnu I cant seem to get the column header position to match the below

What can I do?

[hikmatune1]

brilliant @Steelman70 , thanks for sharing 

[hikmatune1]

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

[sahu_deepak]

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