# Tables longues et pagination

Laissez les longs tableaux s'écouler sur les feuilles, gardez les blocs courts ensemble et choisissez où commence une nouvelle section.

Lorsque vous créez une mise en page, vous souhaiterez peut-être qu'un contenu circule en continu, qu'un bloc reste ensemble ou qu'une nouvelle partie démarre sur sa propre feuille. Tembuilder vous permet de combiner ces approches au sein d'un même modèle.

Définissez le comportement de pagination pour chaque section dans **Config → Sauts de page**. Ce guide couvre les options, les tableaux longs et les règles CSS qui peuvent affecter les sauts de page.

## 1. Ouvrez les paramètres de saut de page d'une section

Sélectionnez la section dans **Structure**, puis ouvrez **Config → Sauts de page**. Il existe deux contrôles :

- **Garder ensemble** : indique si la section peut être divisée sur plusieurs feuilles PDF.
- **Saut de page** : s'il faut forcer un saut avant ou après la section.

Les commandes sont indépendantes. Une section peut commencer sur une nouvelle feuille et continuer sur plusieurs feuilles lorsque son contenu est long.

Pour un tableau ou une liste avec un nombre variable de lignes, commencez par **Garder ensemble : Désactivé** et **Saut de page : Aucun** pour laisser le contenu circuler.

<figure class="doc-sim pagination-illustration" aria-label="Structure → Section → Config → Sauts de page">
<div class="sim-stage"><div class="pg-path">Structure <span>→</span> Postes de facture <span>→</span> Config</div><div class="sim-panel pg-editor"><div class="pg-structure"><div class="sim-panel-title">STRUCTURE</div><div class="sim-tree-row">⌄ Facture</div><div class="sim-tree-child sim-muted">Parties de facturation</div><div class="sim-tree-child sim-selected">Postes de facture</div><div class="sim-tree-child sim-muted">Règlement</div></div><div class="pg-config"><div class="sim-tabs"><span>HTML</span><span>CSS</span><span>Props</span><span class="sim-active sim-focus">Config</span></div><div class="pg-config-card"><strong>Sauts de page</strong><div class="pg-setting"><span>Restez ensemble</span><div class="pg-options"><span class="pg-option pg-active">Désactivé</span><span class="pg-option">Activé</span></div></div><div class="pg-setting"><span>Saut de page</span><div class="pg-options"><span class="pg-option pg-active">Aucun</span><span class="pg-option">Avant</span><span class="pg-option">Après</span><span class="pg-option">Les deux</span></div></div></div></div></div></div>
<figcaption>Structure → Section → Config → Sauts de page</figcaption>
</figure>

## 2. Gardez un bloc de contenu ensemble

Utilisez **Garder ensemble : activé** pour une courte section qui doit rester intacte, comme une signature, des détails de paiement ou un résumé. Si l'espace restant est trop petit, la section passe à la feuille suivante.

Utilisez **Désactivé** pour un long tableau ou une longue liste qui doit continuer sur plusieurs feuilles. Garder l'ensemble du tableau ensemble peut laisser un grand espace sur la feuille précédente.

Le paramètre s'applique à **toute la section**. Pour conserver uniquement la signature ensemble, créez-en une section distincte plutôt que d'activer On pour une section contenant l'intégralité de la table de service.

<figure class="doc-sim pagination-illustration" aria-label="Activé → déplacer la section de signature ensemble sur la feuille suivante">
<div class="sim-stage"><div class="pg-keep-setting sim-panel"><strong>Restez ensemble</strong><div class="pg-options"><span class="pg-option">Désactivé</span><span class="pg-option pg-active sim-focus">Activé</span></div></div><div class="pg-comparison"><div><small>Désactivé</small><div class="pg-mini-pair"><div class="pg-sheet"><div class="pg-lines"><i></i><i></i><i></i></div><div class="pg-signature pg-signature-first">APPROBATION</div><small class="pg-sheet-number">1</small></div><div class="pg-sheet"><div class="pg-signature pg-signature-rest"><i></i><span>Signature</span></div><small class="pg-sheet-number">2</small></div></div></div><div><small>Activé</small><div class="pg-mini-pair"><div class="pg-sheet"><div class="pg-lines"><i></i><i></i><i></i></div><small class="pg-sheet-number">1</small></div><div class="pg-sheet"><div class="pg-signature">APPROBATION<i></i><span>Signature</span></div><small class="pg-sheet-number">2</small></div></div></div></div></div>
<figcaption>Activé → déplacer la section de signature ensemble sur la feuille suivante</figcaption>
</figure>

## 3. Choisissez où commence une nouvelle section

Utilisez **Saut de page** pour séparer les parties du document, par exemple en commençant les termes sur une nouvelle feuille après une facture.

| Option | Comportement |
| --- | --- |
| **Aucun** | Ne forcez pas de pause avant ou après la section. |
| **Avant** | Commencez cette section sur une nouvelle feuille lorsque le contenu la précède. |
| **Après** | Commencez la section suivante sur une nouvelle feuille. |
| **Les deux** | Pause avant et après la section lorsque le contenu existe des deux côtés. |

**Les deux** ne limite pas la section à une seule feuille. **Gardez ensemble** contrôle toujours la division au sein de la section.

Un saut au niveau d'une limite de page existante n'ajoute pas de feuille vierge. Par exemple, Avant dans la première section n'insère pas de feuille vierge avant le document.

<figure class="doc-sim pagination-illustration" aria-label="Avant → démarrer la section sur une nouvelle feuille">
<div class="sim-stage"><div class="sim-panel"><div class="pg-break-head"><strong>Saut de page</strong><div class="pg-options"><span class="pg-option">Aucun</span><span class="pg-option pg-active sim-focus">Avant</span><span class="pg-option">Après</span><span class="pg-option">Les deux</span></div></div><div class="pg-break-pages"><div class="pg-sheet"><b class="pg-doc-title">Contenu</b><div class="pg-lines"><i></i><i></i><i></i></div><div class="pg-lines"><i></i><i></i><i></i></div><small class="pg-sheet-number">1</small></div><span class="pg-arrow" aria-hidden="true">→</span><div class="pg-sheet"><div class="pg-new-section"><b>Conditions</b><div class="pg-lines"><i></i><i></i><i></i></div></div><small class="pg-sheet-number">2</small></div></div></div></div>
<figcaption>Avant → démarrer la section sur une nouvelle feuille</figcaption>
</figure>

## 4. Laissez les longs tableaux se poursuivre sur les feuilles

Réglez **Garder ensemble : Désactivé** sur la section contenant le tableau. Utiliser `<thead>` for the header and `<tbody>` for data rows. The `<thead>`l'en-tête se répète lorsque le tableau continue sur une autre feuille.

Pour les lignes de service, générez le contenu de la table à partir de `params.lineItems` :

```handlebars
<table>
  <thead>
    <tr><th>Service</th><th>Quantity</th><th>Amount</th></tr>
  </thead>
  <tbody>
    {{#each params.lineItems}}
      <tr>
        <td>{{ description }}</td>
        <td>{{ qty }}</td>
        <td>{{ amount }}</td>
      </tr>
    {{/each}}
  </tbody>
</table>
```

Pour placer les totaux après la dernière ligne du tableau, placez-les après le tableau ou dans la section suivante avec **Saut de page : Aucun**. Pour conserver les totaux intacts, activez Conserver ensemble dans la section des totaux uniquement.

Voir [Tableaux et objets](/docs/fr/data/arrays-objects/) pour en savoir plus sur la transmission de listes dans un modèle.

<figure class="doc-sim pagination-illustration" aria-label="Le tableau continue sur la feuille suivante avec son en-tête répété">
<div class="sim-stage"><div class="pg-table-settings"><span class="sim-badge sim-focus">Rester ensemble : Désactivé</span><span class="sim-badge">Saut de page : Aucun</span></div><div class="pg-table-pages"><div class="pg-sheet"><div class="pg-table"><div class="pg-table-head"><b>SERVICE</b><b>QTÉ</b></div><div><span>Service 1</span><span>1</span></div><div><span>Service 2</span><span>1</span></div><div><span>Prestation 3</span><span>1</span></div><div><span>Prestation 4</span><span>1</span></div><div><span>Prestation 5</span><span>1</span></div></div><small class="pg-sheet-number">1</small></div><div class="pg-sheet"><div class="pg-table"><div class="pg-table-head"><b>SERVICE</b><b>QTÉ</b></div><div><span>Prestation 6</span><span>1</span></div><div><span>Service 7</span><span>1</span></div><div><span>Service 8</span><span>1</span></div><div><span>Service 9</span><span>1</span></div><div><span>Service 10</span><span>1</span></div></div><small class="pg-sheet-number">2</small></div></div></div>
<figcaption>Le tableau continue sur la feuille suivante avec son en-tête répété</figcaption>
</figure>

## 5. Lorsque le contenu est tronqué ou se déplace comme un bloc

Ces symptômes indiquent généralement des paramètres différents :

| Symptôme | Où chercher |
| --- | --- |
| Une section entière passe à la feuille suivante, laissant un grand espace | Le paramètre **Garder ensemble** de la section et `break-inside` sur son conteneur. |
| Les dernières lignes disparaissent au bord d'un conteneur | Les CSS `height`, `max-height` et `overflow` du conteneur. |
| Une section démarre toujours sur une nouvelle feuille malgré l'espace disponible | Son **Saut de page : Avant/Les deux**, Après dans la section précédente, ou CSS `break-before`. |

Par exemple, un conteneur `.items` avec une hauteur fixe et un `overflow: hidden` clipse tout ce qui dépasse sa boîte. S'il doit s'agrandir avec la liste, supprimez la limite de hauteur et autorisez le contenu visible, comme illustré ci-dessous.

Config contrôle la section elle-même. Les éléments à l'intérieur peuvent toujours avoir leurs propres règles de rupture CSS, alors inspectez-les si la modification de Config ne change pas le résultat.

<figure class="doc-sim pagination-illustration" aria-label="Section CSS → ajuster le conteneur qui limite ou coupe le contenu">
<div class="sim-stage"><div class="sim-panel"><div class="sim-tabs"><span>HTML</span><span class="sim-active">CSS</span><span>Props</span><span>Config</span></div><div class="pg-css-comparison"><div><small>Conteneur à hauteur fixe</small><div class="pg-code"><code>.items {<br />  height: 120px;<br />  overflow: hidden;<br />}</code></div></div><div><small>Conteneur de la taille du contenu</small><div class="pg-code sim-focus"><code>.items {<br />  height: auto;<br />  overflow: visible;<br />}</code></div></div></div></div></div>
<figcaption>Section CSS → ajuster le conteneur qui limite ou coupe le contenu</figcaption>
</figure>
