tablerow |
Ligne de table |
|---|---|
| Liquid (Microsoft) | |
Syntaxe
|
{% tablerow item in collection [cols:n] %} {{ item }} {% endtablerow %} |
Paramètres
| Nom | Description |
|---|---|
| item | Ce paramètre permet de définir le nom de la variable temporaire utilisée pour représenter chaque élément de la collection pendant l'itération. |
| collection | Ce paramètre permet d'indiquer la source de données à parcourir, typiquement une liste d'éléments (par exemple : contacts, produits,...). |
| cols | Ce paramètre permet de spécifier le nombre de colonnes par ligne dans le tableau HTML généré. Si ce paramètre est omis, toutes les valeurs s'affichent sur une seule ligne. |
Description
Cette balise permet d'afficher une collection sous forme de tableau HTML avec contrôle sur les lignes et colonnes.
Remarques
- Structure automatique de tableau HTML avec peu de code : La balise {% tablerow %} simplifie considérablement la génération de tableaux
HTML en intégrant automatiquement les balises
et . Cela évite d'avoir à écrire manuellement la logique de découpage des lignes et colonnes dans une boucle classique. - Organisation flexible grâce au paramètre cols : Le paramètre cols:n permet de contrôler précisément combien de cellules sont affichées par ligne. Par exemple, cols:3 affiche trois éléments par ligne, puis passe automatiquement à la ligne suivante. Ce comportement est idéal pour un rendu propre et uniforme.
- La variable item représente chaque élément individuellement : À l'intérieur de la boucle, chaque itération donne accès à une variable temporaire (souvent nommée item) qui correspond à un élément de la collection. Cette variable peut être utilisée pour afficher des champs spécifiques (comme item.name, item.email,...).
- Utilisation courante pour afficher des grilles de données dans Power Pages : Dans le contexte des portails Power Pages, tablerow est pratique pour présenter des listes d'enregistrements (comme des produits ou des contacts) dans une disposition en grille, sans avoir à gérer manuellement la logique HTML pour le placement en colonnes.
- Gère automatiquement le passage à la ligne après un nombre défini d'éléments : Dès que le nombre d'éléments affichés dans une ligne atteint la valeur spécifiée par cols, la balise insère automatiquement une nouvelle ligne (<tr>). Cela rend l'écriture de tableaux complexes plus intuitive et évite les erreurs de structure HTML.
- Compatible avec les autres filtres Liquid dans la boucle : On peut combiner tablerow avec des filtres Liquid sur la collection (comme sort, where, limit,...). Cela permet d'afficher uniquement un sous-ensemble structuré de données, avec des règles de tri ou de filtrage appliquées avant l'affichage.
- Rend les pages plus accessibles et sémantiques : Le tableau HTML généré par tablerow respecte la structure sémantique des données tabulaires, ce qui est bénéfique pour les lecteurs d'écran et les moteurs de recherche. Cela améliore à la fois l'accessibilité et le SEO d'un portail.
- Attention aux effets de bord si cols est omis : Si le paramètre cols est oublié, tous les éléments sont rendus sur une seule ligne, ce qui peut casser la mise en page si la collection est longue. Il est donc recommandé de toujours définir une valeur cols adaptée au nombre d'éléments ou à la largeur du conteneur.
Dernière mise à jour : Mercredi, le 23 Juillet 2025