Peut-on figer la ligne supérieure dans une liste?

Tags: #<Tag:0x00007f80fcdc00f8>

Bonjour,

Tout est dans le titre ;-)

Merci d’avance,
Abed.

Bonjour,

Oui c’est un besoin générique mais incomplet quand on doit paginer des listes.
HTML5 ne permet pas de le faire nativement sur une table et pour cause.

C’est une demande déjà identifiée en V5 :

  • Soit on garde les tableaux <table> et on rend sticky le titre/header dans la zone visible et la table (un peu comme la barre d’actions qui se détache mais reste dans le container du formulaire).

Ca permet de ne pas forcer une hauteur max au tableau (pas de scrollbar), et de laisser visible le titre suivant le scroll de la page qui peut toujours déborder/afficher 50 lignes. Il faudra cloner le header et lui donner les mêmes largeurs pour conserver l’alignement des colonnes.

  • Soit tuer les tableaux, au profit de <div/> avec des tailles forcées en fonction du champ

Là c’est le tableau qui devra avoir une hauteur max et un scroll, induisant une double paginations (scroll interne : on voit 5 lignes sur 20 + pagination : par page de 20 items) pas souhaitable en terme d’UX. Il faudrait alors plutôt charger la liste par paquet quand on scroll vers le bas (retirer les boutons de pagination).

Donc 2 écoles sans cas d’usage généralisable.