Créer des Tables avec défilement horizontal est une compétence indispensable dans Bubble.
Que vous soyez débutant ou développeur Bubble.io intermédiaire, maîtriser cette technique peut considérablement améliorer l'expérience utilisateur de votre application.
Surtout parce que c'est la meilleure façon de rendre facilement une Table responsive.
Ce tutoriel vous guidera étape par étape sur comment implémenter un défilement horizontal dans un repeating group, en vous assurant que votre application se démarque avec une navigation fluide et une interface moderne.
Voici ce que nous allons construire dans ce tutoriel : Notre guide complet sur l'élément table dans Bubble.io
Étape 1 - Construire l'interface de votre Repeating Group
La première étape de ce tutoriel est bien sûr de construire l'interface de votre Repeating Group.
Vous pouvez appliquer ce tutoriel à pratiquement tous les types d'interface (Tables, Grilles, Carrousels etc...), mais ce qu'il faut retenir c'est que dans ce tutoriel nous utiliserons un Repeating Group pour créer notre Table.
Si vous souhaitez en apprendre plus sur l'élément Table de Bubble, nous avons rédigé un guide complet sur l'élément Table dans Bubble.io
Pour illustrer ce tutoriel, je vais utiliser comme exemple cette Table ci-dessous provenant de la bibliothèque Nocodable Component :
Comme vous pouvez le voir, rien de trop compliqué. Simplement un beau tableau de données bien organisé.
Mais quand la page devient trop étroite, voici comment elle se comporte :
Comme vous pouvez le voir, dès que l'écran devient trop étroit, ma Table commence à déborder et me permet de faire défiler horizontalement dedans. Ce qui me permet à son tour de voir toutes les informations affichées.
Si vous voulez y jeter un œil de plus près, vous pouvez prévisualiser ce composant ici : Table 7 - Nocodable Components Preview
Maintenant, avant d'aller plus loin, examinons de plus près comment c'est construit :
Comme vous pouvez le voir ci-dessus, mon Repeating Group est composé de deux groupes :
Le "Group HEADER" qui contient les titres de ma Table
Le "Group MAIN LINE" qui contient toutes les informations de la Current Row
Pour ceux qui se posent la question, le "Group HEADER" est masqué par défaut et seulement visible sur la première ligne de mon Repeating Group en utilisant la condition ci-dessous :
Enfin, mon "Group MAIN LINE" est simplement composé de divers Groups et Text Elements avec un Row Layout.
Étape 2 - Le rendre Scrollable
Très bien maintenant, plongeons dans l'ajout d'un défilement horizontal à cette Table.
a - Qu'est-ce qui rend un Repeating Group Scrollable ?
Tout d'abord, nous devons comprendre ce qui fait qu'un Repeating Group défile horizontalement ?
Fondamentalement, les Repeating Groups dans Bubble deviennent scrollables lorsque le contenu affiché à l'intérieur commence à déborder (c'est-à-dire devient plus large que le repeating group).
Ça a l'air simple, non ?
Eh bien oui, ça l'est vraiment.
Gardez simplement à l'esprit que nous ne voulons pas que le Repeating Group soit plus large que la page, nous voulons que le contenu à l'intérieur du repeating group soit plus large que la page.
b - Le rendre vraiment Scrollable
Maintenant que nous savons cela, tout ce que nous devons faire est de laisser le Repeating Group s'étirer autant qu'il le peut et appliquer une Min Width aux Groups à l'intérieur du Repeating Group.
De cette façon, lorsque la page deviendra trop étroite, le contenu à l'intérieur du Repeating Group commencera à déborder en raison de sa Min Width, ce qui rendra notre Repeating Group Horizontalement Scrollable.
Maintenant, tout ce que vous devez faire est de vous assurer que tous les Groups qui sont placés directement sous votre Repeating Group ont la même Min Width.
Dans mon cas, je dois m'assurer que le "Group HEADER" et le "Group MAIN LINE" ont tous les deux une Min Width de 800px.
Et évidemment, 800px est une valeur arbitraire, vous devrez l'adapter en fonction du contenu à l'intérieur de votre RG et de sa largeur.
Si vous avez beaucoup d'informations affichées, vous pourriez vous retrouver avec une min width de 1000px par exemple.
Et voilà ! Vous savez maintenant comment créer un Repeating Group à défilement horizontal dans Bubble 😎
Questions fréquentes
Comment faire défiler horizontalement dans Bubble ?
Pour créer un scroll horizontal dans Bubble, définissez une Min Width sur les groupes à l'intérieur de votre Repeating Group. Quand la page devient trop étroite, le contenu déborde et devient scrollable horizontalement.
Pourquoi mon Repeating Group ne scroll pas horizontalement ?
Si votre Repeating Group ne scroll pas, c'est probablement parce que le contenu à l'intérieur n'a pas de Min Width définie. Assurez-vous que tous les groupes directement sous le Repeating Group ont la même Min Width (ex: 800px).
Quelle Min Width mettre pour un scroll horizontal sur Bubble ?
La Min Width dépend de votre contenu. Commencez avec 800px pour une table standard, puis ajustez selon la largeur de vos données. Plus vous avez d'informations à afficher, plus la Min Width devra être élevée (ex: 1000px ou plus).
Scroll horizontal sur Table ou Repeating Group ?
Le scroll horizontal fonctionne avec les deux. Ce tutoriel utilise un Repeating Group, mais le principe est le même : appliquer une Min Width au contenu pour qu'il déborde et devienne scrollable quand l'écran rétrécit.
Comment rendre une table Bubble responsive avec scroll ?
Laissez votre Repeating Group s'étirer sur toute la largeur disponible, puis ajoutez une Min Width identique sur tous les groupes enfants (Header et lignes de données). Le scroll horizontal s'active automatiquement sur mobile.
Le scroll horizontal marche sur mobile dans Bubble ?
Oui, le scroll horizontal fonctionne parfaitement sur mobile. C'est justement la meilleure solution pour afficher des tables avec beaucoup de colonnes sur petit écran tout en gardant toutes les informations accessibles.
