> For the complete documentation index, see [llms.txt](https://docs.gaiodataos.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gaiodataos.com/gaio-dataos-spanish/herramientas/tareas/entrega/contenido/documentacion-de-nunjucks.md).

# Documentación de Nunjucks

**Nunjucks** es un potente motor de plantillas para JavaScript que permite generar contenido dinámico utilizando variables, filtros y estructuras de control.

### Contexto Disponible

En este entorno tienes acceso al siguiente objeto `context`:

```js
{
  params: {}, // Query parameters
  table: {    // Contains all available tables
    tableExample: [], // Each table is a list of objects
    anotherTable: []
  }
}
```

### Sintaxis Básica

**Variables**

Accede a variables utilizando doble llave:

```
{{ params.name }}
{{ table.tableExample[0].id }}
```

**Condicionales**

```
{% if params.showDetails %}
  Showing details for {{ params.id }}
{% else %}
  No details available
{% endif %}
```

**Bucles**

```
<ul>
{% for row in table.tableExample %}
  <li>{{ row.name }}: {{ row.value }}</li>
{% endfor %}
</ul>
```

### Filtros

Modifica variables utilizando el símbolo:

```
{{ params.name | upper }}
{{ params.date | date("YYYY-MM-DD") }}
{{ table.tableExample[0].amount | round(2) }}
```

#### Filtros Comunes

* `upper`, `lower` → Cambiar mayúsculas/minúsculas
* `trim` → Eliminar espacios
* `first`, `last` → Obtener primer/último elemento
* `length` → Obtener tamaño de arreglo o texto
* `sort` → Ordenar un arreglo
* `join` → Unir elementos de un arreglo

### Expresiones

```
{{ table.tableExample[0].price * 1.1 }}
{{ "Price: " + table.tableExample[0].price }}
{{ table.tableExample.length > 0 ? "Has items" : "Empty" }}
```

### Comentarios

```
{# This is a comment that won't be rendered #}
```

### Ejemplos Prácticos

**Formatear una Tabla Dinámica:**

```
<table>
  <thead>
    <tr>
      {% for key in Object.keys(table.tableExample[0]) %}
        <th>{{ key }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for row in table.tableExample %}
      <tr>
        {% for key in Object.keys(table.tableExample[0]) %}
          <td>{{ row[key] }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>
```

**Formato Condicional:**

```
{% for item in table.tableExample %}
  <div class="{% if item.value > 100 %}highlight{% endif %}">
    {{ item.name }}: {{ item.value }}
  </div>
{% endfor %}
```

**Usar Parámetros para Filtrar:**

```
{% if params.filter %}
  <h3>Filtered results for: {{ params.filter }}</h3>
  {% set filteredRows = table.tableExample | filter(row => row.category == params.filter) %}
  {% for row in filteredRows %}
    <div>{{ row.name }}</div>
  {% endfor %}
{% else %}
  <h3>All results</h3>
  {% for row in table.tableExample %}
    <div>{{ row.name }}</div>
  {% endfor %}
{% endif %}
```

**Acceder a Múltiples Tablas:**

```
<div>
  <h3>Table 1: {{ table.tableExample.length }} rows</h3>
  <ul>
    {% for row in table.tableExample %}
      <li>{{ row.name }}</li>
    {% endfor %}
  </ul>
  
  {% if table.anotherTable %}
  <h3>Table 2: {{ table.anotherTable.length }} rows</h3>
  <ul>
    {% for row in table.anotherTable %}
      <li>{{ row.title }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
```

**Agregación de Datos:**

```
{% set total = 0 %}
{% for item in table.tableExample %}
  {% set total = total + item.amount %}
{% endfor %}
<div>Total: {{ total }}</div>
```

Para información más detallada sobre todas las capacidades disponibles, consulta la [documentación oficial de Nunjucks](https://mozilla.github.io/nunjucks/templating.html).