En juillet 2023, Bubble a introduit son nouvel élément Table. Cela peut sembler anodin, mais c'est une amélioration significative qui nous facilite grandement la vie lorsqu'il s'agit de construire des Tables dans Bubble.io.
En bref, l'objectif de cet élément est de rendre la construction de Tables (ou Tableaux) dans Bubble plus facile, plus rapide et plus propre.
Avant cet élément, nous devions utiliser un Repeating Group et utiliser quelques contournements pour créer des Headers de titres et du contenu de Table propres. Ça faisait le travail (et ça le fait toujours) mais c'est plus chronophage.
Cependant, il est important de noter que l'élément table est encore en phase bêta. Bien qu'il apporte plusieurs fonctionnalités avancées, il en manque encore certaines. Vous pourriez donc parfois rencontrer quelques obstacles, mais la plupart auront des solutions de contournement.
Dans ce tutoriel, vous apprendrez toutes les bases nécessaires pour utiliser l'élément table de Bubble.io.
C'est parti !
Note importante : l'élément Table de Bubble est toujours en bêta. De nouvelles améliorations ont été annoncées et devraient bientôt arriver (fin 2025).
Comprendre les éléments Table dans Bubble
Quand utiliser des Tables vs. des Repeating Groups
Comme mentionné précédemment, la méthode habituelle pour construire des tables consistait à utiliser un Repeating Group. Maintenant que nous avons l'élément Table disponible, ce sera la plupart du temps la meilleure façon de construire des Tables.
Cependant, il peut parfois être plus avantageux d'utiliser un Repeating Group à la place. Les deux servent à afficher des listes de données, mais ils ont des forces différentes et des cas d'usage idéaux.
Fondamentalement, vous voudrez principalement utiliser un élément Table lorsque vous présentez des données de "manière classique", où chaque ligne représente un enregistrement.
Par exemple, cette Table (construite dans Bubble) affiche des données avec une mise en page assez classique, donc l'élément Table sera le choix recommandé !
NB : Si vous voulez accéder à des Tables Bubble.io pré-construites, n'hésitez pas à consulter cette bibliothèque de composants.
Cependant, pour certains cas d'usage, vous voudrez créer des Tables plus complexes avec une mise en page plus élaborée, comme celle-ci :
Comme vous pouvez le voir, cette Table a une Table imbriquée dans chaque cellule utilisée pour afficher plus de détails sur l'élément. Ce type de mise en page n'est pas possible avec l'élément Table, vous devrez donc utiliser un Repeating Group.
Introduction à l'élément Table de Bubble.io
Dans Bubble, l'élément Table est composé de 3 parties principales :
1. La Table elle-même
C'est là que vous configurerez la Data Source, les conditions et le style global de votre Table.
Vous pouvez également choisir la direction de votre Table, selon vos besoins.
2 - La Row 0 - c'est le Header de la Table (c'est-à-dire où vous ajouterez très probablement les titres de vos colonnes)
En sélectionnant cette ligne statique, vous pourrez modifier le Background Style de toute la Row, ainsi que la faire rester en haut si vous le souhaitez.
Chaque ligne est composée de cellules, que vous pouvez également sélectionner et personnaliser comme vous le souhaitez.
Si nécessaire, vous pouvez ajouter plus de lignes statiques en sélectionnant la Row 0.
3 - La Row 1 ∞ - c'est la Row qui va se répéter indéfiniment pour afficher toutes vos données.
En sélectionnant cette Row, vous verrez une case à cocher nommée "Set fixed number of repeating rows".
Vous devrez très probablement décocher cette case, pour vous assurer que cette ligne se répète autant de fois que nécessaire pour afficher toutes vos données.
Bien sûr, vous pouvez également modifier l'arrière-plan de la Row et ajouter des conditions pour changer la couleur de fond lorsqu'elle est survolée.
Enfin, vous pouvez également ajouter ou supprimer des colonnes en sélectionnant une colonne :
Comment utiliser l'élément Table de Bubble.io
Remplir la Table avec des données
Très bien, maintenant que nous avons couvert les bases, donnons vie à notre Table !
Tout d'abord, vous devrez évidemment injecter les bonnes données dans cette Table.
Dans mon cas, je vais injecter une liste de Contacts dans cette Table, rien de trop compliqué.
Pour accéder aux paramètres de Data Source de votre Table, sélectionnez simplement la Table (pas une ligne, pas une colonne, mais la Table) et allez dans l'onglet "Appearance" de son panneau de propriétés.
Là, vous pourrez sélectionner le Type of Content que vous souhaitez afficher et la Data Source.
Dans mon cas, j'affiche un Data Type appelé "Contacts", et je fais une recherche pour récupérer ces contacts.
Comme vous pouvez le voir, cela fonctionne de la même manière qu'un Repeating Group, vous ne devriez donc pas être perdu !
Maintenant que votre Data Source est configurée, vous pouvez commencer à ajouter du texte dans votre Table.
Pour ce faire, faites simplement glisser-déposer des éléments texte dans chaque cellule de votre Table et :
1. Pour le Header, tapez simplement le titre de votre colonne
2. Pour les données réelles, utilisez une expression dynamique pour afficher les bonnes données
Et voilà, répétez le processus et votre Table sera remplie en un rien de temps !
Tout ce qu'il nous reste à faire maintenant est de nous assurer qu'elle est responsive, pour qu'elle puisse être vue sur mobile également.
Comment rendre une Table bubble.io responsive
La façon la plus efficace et basique de rendre une Table responsive est de permettre aux utilisateurs de faire défiler horizontalement dedans lorsque la page devient trop étroite.
C'est un sujet que nous avons déjà abordé pour les repeating groups (Bubble.io Horizontal Scroll in a Repeating Group - Easy 2 min guide (2024)), et nous ferons essentiellement la même chose pour les Tables.
Le concept est qu'une Table devient scrollable lorsque les éléments à l'intérieur deviennent plus larges que la Table elle-même.
Maintenant que nous savons cela, tout ce que nous avons à faire est de définir une Min Width sur chacune des colonnes de notre Table.
De cette façon, lorsque la page devient trop étroite, le contenu de la Table deviendra trop large, ce qui rendra notre Table scrollable (et responsive).
Maintenant, vous vous demandez peut-être quelle Min Width vous devriez appliquer sur vos colonnes ? Cela dépend du contenu de votre colonne, vous devrez vous adapter à la largeur de votre contenu (par exemple, un Email sera généralement plus large qu'un Montant).
Répétez cette étape pour chaque colonne, et ce sera bon !
Questions fréquentes
C'est quoi l'élément Table dans Bubble.io ?
L'élément Table de Bubble.io est un composant introduit en juillet 2023 qui permet de créer des tableaux de données facilement. Il remplace l'ancienne méthode utilisant les Repeating Groups et permet d'afficher des données de manière structurée avec des lignes et colonnes.
Table ou Repeating Group sur Bubble ?
Utilisez l'élément Table pour des mises en page classiques où chaque ligne représente un enregistrement. Utilisez un Repeating Group pour des layouts complexes avec des tableaux imbriqués ou des structures de données non-standard.
Comment rendre une Table Bubble responsive ?
Pour rendre une Table responsive, définissez une largeur minimale (Min Width) sur chaque colonne. Ainsi, quand l'écran devient trop étroit, la Table devient scrollable horizontalement et reste utilisable sur mobile.
Comment paginer une Table sur Bubble ?
L'élément Table ne dispose pas de pagination native car il est encore en version bêta. Cependant, il existe des solutions de contournement pour ajouter cette fonctionnalité à votre Table.
Quelle est la différence entre Row 0 et Row 1 dans Bubble Table ?
La Row 0 est la ligne d'en-tête statique où vous placez vos titres de colonnes. La Row 1 ∞ est la ligne qui se répète automatiquement pour afficher toutes vos données provenant de votre Data Source.
L'élément Table de Bubble est-il stable ?
L'élément Table est actuellement en phase bêta. Il est fonctionnel et apporte de nombreuses fonctionnalités avancées, mais manque encore de certaines options comme la pagination native. Des mises à jour régulières améliorent progressivement cet élément.
