PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 27 → Fix column in a table
Fix column in a table
Débuté par Marc, 11 juil. 2021 10:41 - 3 réponses
Posté le 11 juillet 2021 - 10:41
Hi,
Since Webdev is still unable to fix the first columns in a table - essential behaviour for tables, Pcsoft ??? - I try a simulation.
Put the 2 tables side by side, the left one contains the 'fixed' columns, the other the data.
when I click left, I can make the right one follow.
But when I scroll the left one, how can I make the right one follow?

Any help much appreciated.
Posté le 16 juillet 2021 - 09:56
Found another solution after some thinking out of the box.
Don't use the horizontal scrollbar, add 2 buttons to scroll horizontally. If you want to move to the right, keep your fixed columns and set the other visible columns to invisible.. and the next set on the right appear

They are other solutions of course, but this one fits our needs since we have horizontal & vertical (sub) totals in our table as well.
Membre enregistré
58 messages
Popularité : +3 (3 votes)
Posté le 04 août 2021 - 11:08
Not sure if you were the same Marc in the French section that posted the message too.

Below is the message I put, basically you go in the description of the control Table and select the column you want to fix.
In style go in the overload and in the CSS add the following code:

position: sticky !important;
left: 50px !important;
z-index: 50;
background-color: #ffffff;
outline: 1px solid lightgray;


Message is in French but you can google translate it.

Posted on August, 02 2021 - 11:02 AM


Bonjour Arriety et vous tous,

le problème que nous avions, était:
- L'en-tete colonne scrollait et donc n’était pas fixe.
- le première cellule de la colonne était fixe mais celle-ci et celles du dessous étaient en sur-impression avec les autres ( overlapped)

A ce qu'Arriety a conseillé, nous avons ajouté z-index: 50; et avons pris en compte la largeur de nos colonnes car nous en bloquons 3.
( le outline c'est pour faire plus joli afin que le cadre de la cellule ne change pas de couleur et évite un clignotement quand on scroll)

Afin d’éviter de faire un inspect et découvrir le nom de la colonne; nous sommes allés dans le description de la table et pour chaque colonne que nous voulions bloquer nous avons ajouté ceci:

Pour la premiere colonne:

position: sticky !important;
left: 0px !important;
z-index: 50;
background-color: #ffffff;
outline: 1px solid lightgray;

Pour la deuxième (et les suivantes)
( la seule différence est dans le left. left prend en compte la largeur de la colonne précédente (elle est de 50 pour nous) ainsi elles ne se surimposent pas)

position: sticky !important;
left: 50px !important;
z-index: 50;
background-color: #ffffff;
outline: 1px solid lightgray;

Pour la troisieme ( left prend en compte la largeur des 2 premières colonnes soit 50 + 90 = 140)
position: sticky !important;
left: 140px !important;
z-index: 50;
background-color: #ffffff;
outline: 1px solid lightgray;

et ainsi de suite en fonction de la largeur de vos colonnes, si on veut d'autres colonnes bloquées.

Le seule inconvénient avec z-index 50 c'est que cela risque de cacher les popups associés a votre table (ce qu'a dit mon développeur) mais nous n'en avons pas.

Donc cette solution nous convient parfaitement, merci Arriety d'avoir relancé le sujet et d'avoir partagé vos informations .


cordialement,
Xavier
Posté le 08 avril 2022 - 15:49
Yes, the same Marc.
I was happy to find your solution in the French forum, it works great and I shared it with a collegue who implemented it with perfect results. Thank you!
Now looking to find a way to put some rows (or the cells in the row) to read only. This is much needed since we put total rows in our table (accounting).