Position sticky on perspective tables would be very useful

[Andrei_Matei]

Hi all,

I was trying to lock/freeze a column on a table while horizontally scrolling. I've seen that the CSS position: sticky on the column config style does not work. While researching the issue, I found a discussion form back in 2021, with some amazing entries from user victordcq:

[FEATURE] position:sticky

Currently you can only sure position:absolute and relative. But there are more usefull ones too like sticky! Currently its only possible to use that in a canvas (i think): sticky can do this! stick the header and left column to the side depending on scroll direction, cool to make tables or something. uh a cooler example here (in html+css):

Perspective - View Canvas - replicate Excel spreadsheet - freeze top and left headers?

In Perspective, I am trying to make a manual table where it would have headers on the left and dates on the top. The data is in a flex repeater. I would like it where I can scroll up or down so they move together except the top date headers, but only a flex repeater on the right of the headers would be able to be scrolled horizontally. Think of Excel worksheet where you freeze the top pane, but I’m not referring to a Table component (which I know many people have been requesting this functiona…

While these threads are very useful, I do wonder if official support was added in the past two years. The position CSS prop is recognized by the compiler, but it does not function, only for fixed or absolute but it really does not like that at runtime .

If it was added, how do I do it? I really cannot figure it out.

If it was not, are there any other workarounds than recreating the table by hand or replacing that column with in-line a view with the table?

I need to display a 20x40 table and the client is quite stubborn about it

Thanks!

[victordcq]

The way the table is constructed its not quite feasble to make the columns sticky with just css.
Its not a magic css property, it needs to have the correct html structure aswell for it to work, which in this case it doesnt, making it unusable on the table. And i dont see this getting changed, unless they add a sperate feature to pin a column to the front.

Your best bet is to use my methode creating 3 flex repeaters for left, top and "body" and sticky the left and top.

You could maybe dable in js injection to transfer the scroll from the main table to the "pinned table", but i doubt that will scroll as smooth

[Andrei_Matei]

Thanks Victor, I'm afraid that's the only option I have left really. I'm exploring creating a horizontal pager as well so I do not have to redo a lot more work.

I inspected how the table in drawn and guessed this might not work, but I was really hoping official support was added somehow and I missed a checkmark somewhere.

Well, such is life I guess. It is quite disappointing, it makes the table element quite useless outside some very specific, static and small use cases, especially for mobile use. Maybe it will be added in 8.2

[victordcq]

Well, showing tables with to many feartures on mobile is never a good idea though, sticking columns would take up a lot of space...
but yes we dont really use the table componet either, we use a selfmade module.