204
Views
3
Comments
Fixed column in a table

I would like to know step-by-step how to implement a fixed column by choice in a table, which stays at the same place whenever you scroll the table (horizontally and vertically). 
The ealier forums about this topic are all outdated. I'm using reactive web OutSystems 11.
Is there please someone who can help me with this?

2018-06-05 16-54-03
Maria da Graça Peixoto

Hi! 

Have you tried João Marques Solution ?

https://www.outsystems.com/forums/discussion/65195/how-can-i-create-a-horizontal-scrollable-table-that-has-a-fixed-coloumn/

It´s from 2020 , but I do not see why it shall not  work now. 

Hope this helps

Graça



UserImage.jpg
Andy Asri

Hi Maria!

Yes I have, but unfortunately it didn't work. 

That question is also actually about Traditional web and the screenshots don't match with the Service Studio I work in. 
Besides, in my opinion there is a lack of expanation in his answer. For example, it's unclear for me why he pasted multiple style classes in his CSS style sheet and then only uses the class "table-scroll-wrapper". Further, it's unclear where the TableRecords are coming from in his screenshots cause I didn't see them in the properties of my table in my version of Service Studio.

But if it worked for you, please feel free to help me further!

2018-06-05 16-54-03
Maria da Graça Peixoto

Hi! 

The solution works , but some reactive "reactions" didn't make the test easy. 

Starting by the wrapper container :

I used the class "table-scroll-wrapper" from João CSS but added also my "TableContainer", the css "overflow-y" allow the container to have the "scrolling bar (max-width was just to force the scroll bar to be necessary) 

In the table I only use the class from João as shown in the image below. 

The properties from the table in traditional are a little bit different  from reactive , but the classes fields are there.

Hope this helps you. 

Let us know the result  

Graça

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.