> For the complete documentation index, see [llms.txt](https://docs.opencityitalia.it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.opencityitalia.it/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-datagrid.md).

# Il datagrid

{% hint style="warning" %}
All'interno del Datagrid **non vanno inseriti componenti&#x20;*****nested form,*** per cui non funzionerebbe la precompilazione dei dati.
{% endhint %}

Il componente Datagrid è un contenitore dinamico e ripetibile che ti permette di inserire più righe di dati, ciascuna con una o più colonne (campi), come se fosse una piccola tabella interattiva compilabile

Trascina dalla voce "Layout" il componente "Datagrid".

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FSTy7WSJVTAwuC25NT2n9%2Fimage.png?alt=media&amp;token=cacb9679-da42-4f48-88cc-d200fa594080" alt=""><figcaption></figcaption></figure>

Una volta inserito e configurato il titolo (*Label*), trascina al suo interno i componenti che vuoi mettere nella tabella.

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FTCba9mCuZ6fzbrLih9UT%2FScreen%20recording%202025-05-21%2017.27.47.gif?alt=media&amp;token=26789591-84ed-4d4d-a6ad-2dea65e25efb" alt=""><figcaption></figcaption></figure>

Quando inserisci numerosi campi direttamente all'interno del Datagrid, nella visualizzazione lato cittadino i campi potrebbero apparire troppo compatti.

Per migliorare la visualizzazione, inserisci i campi all'interno di un componente **Columns** con la larghezza delle righe impostata a 12 md e poi includi il componente Columns nel Datagrid, invece di inserire i campi direttamente.

{% hint style="info" %}
Se non vuoi mostrare la label del componente Columns, attiva l'opzione **"Hide label"** nella sezione di configurazione del componente.
{% endhint %}

<div><figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2F1FVIzFoFip0vOV89UR6v%2FScreenshot%202026-06-08%20alle%2011.33.38.png?alt=media&amp;token=1f9e1bbc-7490-487e-90d2-cc7a764e1374" alt=""><figcaption></figcaption></figure> <figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2FCO4rSAmnnQsb3dNweYcF%2FScreenshot%202026-06-08%20alle%2011.33.51.png?alt=media&amp;token=dd8830e6-5d78-4dd4-bb9e-02ae85ba279e" alt=""><figcaption></figcaption></figure></div>

#### Impostare un numero minimo o massimo di righe

Nella sezione **Validation** del componente Datagrid puoi impostare **Minimum** e **Maximum** per stabilire quante righe il cittadino deve o può compilare.\
Quando si raggiunge il minimo di righe impostato, il bottone "Elimina riga" scompare, così il cittadino non può scendere sotto quella soglia<br>

<figure><img src="https://4252442743-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrdV0mwA7iy2c3I7wu5BX%2Fuploads%2F4v2IDObZy6idxCNZONmG%2FScreenshot%202026-07-28%20alle%2014.42.23.png?alt=media&amp;token=cc2fce99-aefd-4d16-b7d5-e44200525cba" alt=""><figcaption></figcaption></figure>

## Un caso d'uso: pratica inviata con la prima riga del Datagrid vuota

In alcuni casi il Datagrid non aggiorna il `defaultValue` quando aggiungi nuovi componenti al suo interno. La pratica viene inviata con la prima riga vuota anche se il cittadino ha compilato il modulo correttamente. I dati possono risultare mancanti nel backoffice ma presenti nel PDF della domanda.

Una configurazione errata si riconosce così:

{% code title="Configurazione errata" %}

```json
{
  "label": "Servizi igienici",
  "defaultValue": [
    []
  ]
}
```

{% endcode %}

**Come risolvere**

1. Apri il JSON del Datagrid.
2. Elimina la proprietà `defaultValue`.
3. Apri il componente Datagrid in modifica.
4. Salva il componente.

Il salvataggio rigenera `defaultValue` con i valori di default corretti. Una configurazione corretta si presenta così:

{% code title="Configurazione corretta" %}

```json
"defaultValue": [
  {
    "textField": ""
  }
]
```

{% endcode %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.opencityitalia.it/stanza-del-cittadino/guida-alla-creazione-dei-servizi-digitali/creare-un-servizio/i-componenti/il-datagrid.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
