# Tablas largas y paginación

Deje que las tablas largas fluyan a lo largo de las hojas, mantenga juntos los bloques cortos y elija dónde comienza una nueva sección.

A medida que creas un diseño, es posible que desees que parte del contenido fluya continuamente, que un bloque permanezca unido o que una nueva parte comience en su propia hoja. Tembuilder le permite combinar estos enfoques dentro de la misma plantilla.

Establezca el comportamiento de paginación para cada sección en **Config → Saltos de página**. Esta guía cubre aquellas opciones, tablas largas y reglas CSS que pueden afectar los saltos de página.

## 1. Abra la configuración de salto de página de una sección

Seleccione la sección en **Structure**, luego abra **Config → Saltos de página**. Hay dos controles:

- **Mantener juntos**: si la sección se puede dividir en hojas PDF.
- **Salto de página**: si se debe forzar un salto antes o después de la sección.

Los controles son independientes. Una sección puede comenzar en una hoja nueva y continuar en varias hojas cuando su contenido es extenso.

Para una tabla o lista con un número variable de filas, comience con **Mantener juntos: Desactivado** y **Salto de página: Ninguno** para permitir que el contenido fluya.

<figure class="doc-sim pagination-illustration" aria-label="Structure → Sección → Config → Saltos de página">
<div class="sim-stage"><div class="pg-path">Structure <span>→</span> Elementos de factura <span>→</span> Config</div><div class="sim-panel pg-editor"><div class="pg-structure"><div class="sim-panel-title">ESTRUCTURA</div><div class="sim-tree-row">⌄ Factura</div><div class="sim-tree-child sim-muted">Partes de facturación</div><div class="sim-tree-child sim-selected">Elementos de factura</div><div class="sim-tree-child sim-muted">Liquidación</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>Saltos de página</strong><div class="pg-setting"><span>Mantenernos juntos</span><div class="pg-options"><span class="pg-option pg-active">Apagado</span><span class="pg-option">En</span></div></div><div class="pg-setting"><span>Salto de página</span><div class="pg-options"><span class="pg-option pg-active">Ninguno</span><span class="pg-option">Antes</span><span class="pg-option">Después</span><span class="pg-option">Ambos</span></div></div></div></div></div></div>
<figcaption>Structure → Sección → Config → Saltos de página</figcaption>
</figure>

## 2. Mantenga un bloque de contenido junto

Utilice **Mantener juntos: activado** para una sección breve que debe permanecer intacta, como una firma, detalles de pago o un resumen. Si el espacio restante es demasiado pequeño, la sección pasa a la siguiente hoja.

Utilice **Desactivado** para una tabla o lista larga que deba continuar en todas las hojas. Mantener toda la tabla junta puede dejar un gran espacio en la hoja anterior.

La configuración se aplica a **toda la sección**. Para mantener junta solo la firma, conviértala en una sección separada en lugar de habilitar Activado para una sección que contenga toda la tabla de servicios.

<figure class="doc-sim pagination-illustration" aria-label="Activado → mover la sección de firma a la siguiente hoja">
<div class="sim-stage"><div class="pg-keep-setting sim-panel"><strong>Mantenernos juntos</strong><div class="pg-options"><span class="pg-option">Apagado</span><span class="pg-option pg-active sim-focus">En</span></div></div><div class="pg-comparison"><div><small>Apagado</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">APROBACIÓN</div><small class="pg-sheet-number">1</small></div><div class="pg-sheet"><div class="pg-signature pg-signature-rest"><i></i><span>Firma</span></div><small class="pg-sheet-number">2</small></div></div></div><div><small>En</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">APROBACIÓN<i></i><span>Firma</span></div><small class="pg-sheet-number">2</small></div></div></div></div></div>
<figcaption>Activado → mover la sección de firma a la siguiente hoja</figcaption>
</figure>

## 3. Elige dónde comienza una nueva sección

Utilice **Salto de página** para separar partes del documento, como comenzar los términos en una hoja nueva después de una factura.

| Opción | Comportamiento |
| --- | --- |
| **Ninguno** | No fuerces un descanso antes o después de la sección. |
| **Antes** | Inicie esta sección en una hoja nueva cuando el contenido la preceda. |
| **Después** | Comience la siguiente sección en una hoja nueva. |
| **Ambos** | Divida antes y después de la sección cuando exista contenido en ambos lados. |

**Ambos** no limita la sección a una hoja. **Mantener juntos** aún controla la división dentro de la sección.

Un corte en el límite de una página existente no agrega una hoja en blanco. Por ejemplo, Antes en la primera sección no inserta una hoja en blanco antes del documento.

<figure class="doc-sim pagination-illustration" aria-label="Antes → comenzar la sección en una hoja nueva">
<div class="sim-stage"><div class="sim-panel"><div class="pg-break-head"><strong>Salto de página</strong><div class="pg-options"><span class="pg-option">Ninguno</span><span class="pg-option pg-active sim-focus">Antes</span><span class="pg-option">Después</span><span class="pg-option">Ambos</span></div></div><div class="pg-break-pages"><div class="pg-sheet"><b class="pg-doc-title">Contenido</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>Términos</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>Antes → comenzar la sección en una hoja nueva</figcaption>
</figure>

## 4. Deje que las tablas largas continúen a lo largo de las hojas.

Establezca **Mantener juntos: Desactivado** en la sección que contiene la tabla. Utilice `<thead>` for the header and `<tbody>` for data rows. The `<thead>`el encabezado se repite cuando la tabla continúa en otra hoja.

Para las filas de servicios, genere el contenido de la tabla a 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>
```

Para colocar los totales después de la fila final de la tabla, colóquelos después de la tabla o en la siguiente sección con **Salto de página: Ninguno**. Para mantener los totales intactos, habilite Mantener juntos solo en la sección de totales.

Consulte [Matrices y objetos](/docs/es/data/arrays-objects/) para obtener más información sobre cómo pasar listas a una plantilla.

<figure class="doc-sim pagination-illustration" aria-label="La tabla continúa en la siguiente hoja con el encabezado repetido">
<div class="sim-stage"><div class="pg-table-settings"><span class="sim-badge sim-focus">Mantenerse juntos: desactivado</span><span class="sim-badge">Salto de página: Ninguno</span></div><div class="pg-table-pages"><div class="pg-sheet"><div class="pg-table"><div class="pg-table-head"><b>SERVICIO</b><b>CANTIDAD</b></div><div><span>Servicio 1</span><span>1</span></div><div><span>Servicio 2</span><span>1</span></div><div><span>Servicio 3</span><span>1</span></div><div><span>Servicio 4</span><span>1</span></div><div><span>Servicio 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>SERVICIO</b><b>CANTIDAD</b></div><div><span>Servicio 6</span><span>1</span></div><div><span>Servicio 7</span><span>1</span></div><div><span>Servicio 8</span><span>1</span></div><div><span>Servicio 9</span><span>1</span></div><div><span>Servicio 10</span><span>1</span></div></div><small class="pg-sheet-number">2</small></div></div></div>
<figcaption>La tabla continúa en la siguiente hoja con el encabezado repetido</figcaption>
</figure>

## 5. Cuando el contenido se recorta o se mueve como un bloque

Estos síntomas suelen indicar diferentes escenarios:

| Síntoma | Dónde buscar |
| --- | --- |
| Una sección completa pasa a la siguiente hoja, dejando un gran espacio | La configuración **Mantener juntos** de la sección y `break-inside` en su contenedor. |
| Las últimas filas desaparecen en el borde del contenedor | CSS `height`, `max-height` y `overflow` del contenedor. |
| Una sección siempre comienza en una hoja nueva a pesar del espacio disponible | Su **Salto de página: Antes/Ambos**, Después en la sección anterior, o CSS `break-before`. |

Por ejemplo, un contenedor `.items` con altura fija y `overflow: hidden` sujeta cualquier cosa que esté más allá de su caja. Si crece con la lista, elimine el límite de altura y permita contenido visible, como se ilustra a continuación.

Config controla la sección en sí. Los elementos dentro de él aún pueden tener sus propias reglas de ruptura CSS, así que inspeccione si cambiar Config no cambia el resultado.

<figure class="doc-sim pagination-illustration" aria-label="Sección CSS → ajusta el contenedor que limita o recorta el contenido">
<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>Contenedor de altura fija</small><div class="pg-code"><code>.items {<br />  height: 120px;<br />  overflow: hidden;<br />}</code></div></div><div><small>Contenedor del tamaño del contenido</small><div class="pg-code sim-focus"><code>.items {<br />  height: auto;<br />  overflow: visible;<br />}</code></div></div></div></div></div>
<figcaption>Sección CSS → ajusta el contenedor que limita o recorta el contenido</figcaption>
</figure>
