Tableaux dynamiques dans vos PDF

Les tableaux présentent des données structurées en lignes et en colonnes : lignes d’une facture, listes de produits, récapitulatifs de commande, tout ce qui suit un motif répété.

Créer un tableau

Un tableau s’ajoute comme n’importe quel composant : cliquez sur Table dans la palette du panneau de gauche, puis cliquez dans la section voulue, sur le canevas. Un tableau par défaut de 2 colonnes et 2 lignes apparaît dans la section.

Structure d’un tableau

Chaque tableau a deux parties :

• La ligne d’en-tête : la première ligne, qui porte les intitulés des colonnes comme « Description », « Qté », « Prix ».
• Les lignes de données : les lignes suivantes, qui portent votre contenu ou vos variables.

Par défaut, la ligne d’en-tête se distingue visuellement des données.

Ajouter et supprimer des colonnes

Quand le tableau est sélectionné, un bouton vert + apparaît sur son bord droit : cliquez dessus pour ajouter une colonne. Un bouton rouge × apparaît au-dessus de chaque colonne pour la supprimer.

Pour redimensionner une colonne, survolez la limite entre deux en-têtes de colonne jusqu’à voir la poignée, puis tirez à gauche ou à droite. La colonne voisine compense : la largeur totale du tableau ne change pas.

Ajouter et supprimer des lignes

Un bouton vert + sur le bord inférieur ajoute une ligne. Un bouton rouge × à côté de chaque ligne la supprime.

Pour redimensionner une ligne, survolez la limite entre deux lignes et tirez. Contrairement aux colonnes, chaque ligne a sa propre hauteur, indépendante des autres.

Modifier les cellules

Double-cliquez sur une cellule pour modifier son contenu. Saisissez un texte fixe comme « Description » pour un en-tête, ou une variable comme {{items.description}} pour des données dynamiques.

Cliquez en dehors de la cellule pour terminer la saisie.

Tableaux dynamiques

C’est la fonctionnalité la plus puissante des tableaux. Avec des variables de tableau dans une ligne de données, le tableau génère automatiquement une ligne par élément de vos données.

Par exemple, construisez votre ligne de données ainsi :

| {{items.description}} | {{items.qty}} | {{items.unit_price}} |

Puis envoyez ces données à l’API :

{
  "items": [
    { "description": "Widget A", "qty": 2, "unit_price": 15.00 },
    { "description": "Widget B", "qty": 5, "unit_price": 8.50 },
    { "description": "Widget C", "qty": 1, "unit_price": 42.00 }
  ]
}

Le tableau affiche trois lignes, une par élément. Inutile de fixer le nombre de lignes à l’avance : le tableau s’allonge avec vos données.

Les cellules acceptent aussi les expressions. Par exemple, {{items.qty * items.unit_price}} calcule le total de chaque ligne.

Tableaux et sauts de page

Quand un tableau dynamique compte plus de lignes qu’une page ne peut en contenir, il se poursuit automatiquement sur les pages suivantes. La ligne d’en-tête est répétée en haut de chaque nouvelle page : le lecteur sait toujours à quoi correspond chaque colonne.

Pour que les sauts de page fonctionnent correctement, le tableau doit être le seul élément de sa section. Si d’autres éléments doivent figurer au-dessus ou en dessous, placez-les dans des sections séparées.

Mettre en forme les cellules

Sélectionnez le tableau pour accéder à ses options de mise en forme. Le panneau de droite indique la cible des réglages : le tableau entier (Table), toutes les cellules (All cells), une ligne (Row) ou une colonne (Column).

Les réglages disponibles, dans la barre d’outils du haut :

• Typographie : police, taille, graisse, couleur, alignement
• Fond : couleur de fond
• Bordure : épaisseur, style, couleur, côté par côté
• Marge intérieure : l’espace entre le bord de la cellule et le texte

Quelques repères pratiques :

• mettez la ligne d’en-tête en gras ou sur un fond discret pour la faire ressortir ;
• alignez les nombres à droite (quantités, prix, totaux) pour faciliter la lecture ;
• prévoyez assez de marge intérieure pour que le texte ne colle pas aux bords des cellules : 4 à 8 pixels suffisent en général.

Étapes suivantes

• Mise en forme : la référence complète de la mise en forme pour tous les composants
• Expressions : valeurs calculées et agrégats comme {{sumproduct(items.qty, items.price)}}
• Liaison de données : comment transmettre vos données aux templates via l’API