I was revisiting this topic to figure out a better way to add a header and I think I’ve had a eureka moment!
It seems fairly easy to implement too. All you have to do is create two groups in the repeating group, one above the other. The top group I named “Header” and added my header fields in there. The bottom group I named “Content” and this contains the normal fields you would put in the repeating group. I make the “Header” group invisible on page load and collapse height when hidden.
I have one condition on the “Header” to show when the Current cell’s index is 1 – one means it’s the first row.
This is what it looks like in the editor. The grey portion is the header. Right now it shows in every row, but the condition on the group will hide it for every row except the 1st.
For the repeating group, I keep the data source empty on the object and load it through workflow. I initially load it on page load, and then I’ve started to setup additional workflow to sort by the different columns.
I had not thought of doing it that way before. I don’t think its necessarily a bad idea at all. It can get confusing when one has collapsing groups anywhere, though. Depending on what else you need to do in your RG cell, it might make things more fiddly than simply having a header group above and outside of the RG itself.
I’m not 100% sure of the performance impact of this. Note that, theoretically you are doubling the number of elements inside of your repeating group. Obviously most of those elements are hidden. I guess the thing to check (I wouldn’t know this off the top of my head) would be: are all those elements actually in the DOM all the time are do they only exist when visible?
(Surely someone already knows and might chime in here without us having to go poking around in dev tools, but the above are the two main concerns I’d have about this. Depending upon what you’re doing those concerns might not impact or bother you at all!)
I don’t think the static header data would add too much, even if it was present in the file a few hundred times.
I haven’t performed any extensive testing, but for me, it seems to make it a little easier to build and I think it may work a little better responsively.
Just wanted to +1 this solution - it was exactly what I was looking for!
I extended this a bit so that when you click on a column header a second time, it reverses the sort. I did this by creating a state variable on the repeating group that kept track of what the current sort is as well as whether it’s ascending or descending; then I have workflows for each of the sortable columns and each of desc vs asc.
It all works now, but I’m wondering if there’s a good way to make this more replicable since I’ll be using this a few times throughout the app. Is this a good use case for a reusable element?
Hi @Kfawcett, thanks for posting this tip. It has been really helpful. (Also glad to see it got @romanmg’s seal of approval!)
I’m wondering if anyone has any idea how this might be extended to achieve a ‘freeze panes’ type excel effect where the table’s header row stays fixed on the page when scrolling down?
Great idea, been using it a few times, but what to do about the content in the first cell? Im showing a list of things sorted by modified date, making it a bit hard to make sure i always have a empty cell in the top, any ways to starte a repeating group with cell #2?
I’m having two issues with creating a header in the way suggested here. Number one, the header locations are not matching with the data items that show below. It’s currently a formatting disaster if I expand my screen.
I prefer to keep the labels out of the RG. Not saying that keeping the labels inside the RG is bad.
I put all the content in the RG inside a group and copy paste the same group for the labels. I only change the text inside the label and make no changes to the dimensions. Everything ends up aligned perfectly.
@sharma.himanshu0608 I appreciate the response. I’ll give that a shot. Now, if I can just figure out how to inherit the data inside the new group, I’ll be fine. Haven’t solved that one yet, either. (I was giving it a shot without additional groups inside the RG first.)
So I finally got the group within the RG working properly. Not sure what was wrong, but I’ll take it. Still having the formatting issue though, although less severe.
I took your advice @sharma.himanshu0608 of copying the group and using it as a header outside the RG. So, better, certainly, but I remain in combat with formatting gremlins. Anyone have any ideas?
)
