cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Steelman70
Power Participant
Power Participant

Add column headings to a gallery to display tabular data

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...

FX_capture_raw.PNG

 

...the result

FX_capture.PNG

1 ACCEPTED SOLUTION

Accepted Solutions
LauraOnu
Power Apps
Power Apps

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?

GridView.jpg

View solution in original post

8 REPLIES 8
LauraOnu
Power Apps
Power Apps

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?

GridView.jpg

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
Advocate I
Advocate I

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.

@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

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

What can I do?

hikmatune1
Frequent Visitor

brilliant @Steelman70 , thanks for sharing 

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

sahu_deepak
Regular Visitor

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 

Helpful resources

Announcements
Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Users online (1,417)