> 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="/files/RosEgC54XK3prplNe05a" 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="/files/svKuNGr4JLkaDnKAS9Pt" 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="/files/9aYtyg1uex5V6J56a1ow" alt=""><figcaption></figcaption></figure> <figure><img src="/files/bWINcxNr63GjwyfeD2cb" alt=""><figcaption></figcaption></figure></div>

## 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
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=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
