Editor de plantillas
Docs/Plantillas de diseño

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.

5 minutos de lectura5 secciones
En esta página

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.

Structure → Elementos de factura → Config
ESTRUCTURA
⌄ Factura
Partes de facturación
Elementos de factura
Liquidación
HTMLCSSPropsConfig
Saltos de página
Mantenernos juntos
ApagadoEn
Salto de página
NingunoAntesDespuésAmbos
Structure → Sección → Config → Saltos de página

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.

Mantenernos juntos
ApagadoEn
Apagado
APROBACIÓN
1
Firma
2
En
1
APROBACIÓNFirma
2
Activado → mover la sección de firma a la siguiente hoja

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.

Salto de página
NingunoAntesDespuésAmbos
Contenido
1
Términos
2
Antes → comenzar la sección en una hoja nueva

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:

<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 para obtener más información sobre cómo pasar listas a una plantilla.

Mantenerse juntos: desactivadoSalto de página: Ninguno
SERVICIOCANTIDAD
Servicio 11
Servicio 21
Servicio 31
Servicio 41
Servicio 51
1
SERVICIOCANTIDAD
Servicio 61
Servicio 71
Servicio 81
Servicio 91
Servicio 101
2
La tabla continúa en la siguiente hoja con el encabezado repetido

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.

HTMLCSSPropsConfig
Contenedor de altura fija
.items {
height: 120px;
overflow: hidden;
}
Contenedor del tamaño del contenido
.items {
height: auto;
overflow: visible;
}
Sección CSS → ajusta el contenedor que limita o recorta el contenido

Buscar documentación