# Dynamic Tables

### Table Configuration

1. **Add each field to the setup line** which determines the number of table rows:

   ```django
   {% set max_length = [<field_1>|length, <field_2>|length, <field_3>|length]|max %}
   ```

   \
   For each field you want in the table, add `<field>|length` in between the  `[` and `]`, and separate with commas
2. **Create the table structure** with dynamic content:

<table data-header-hidden><thead><tr><th></th><th width="249.265625"></th><th></th></tr></thead><tbody><tr><td>Header one</td><td>Header two</td><td>Header three</td></tr><tr><td>{%tr for i in range(max_length) %}</td><td></td><td></td></tr><tr><td>{{ &#x3C;field>[i] if i &#x3C; &#x3C;field>|length else "" }}</td><td>{{ &#x3C;field>[i] if i &#x3C; &#x3C;field>|length else "" }}</td><td>{{ &#x3C;field>[i] if i &#x3C; &#x3C;field>|length else "" }}</td></tr><tr><td>{%tr endfor %}</td><td></td><td></td></tr></tbody></table>

3. **Add header columns** to match your table structure. These can be plain text, or make use of a field value using `{{ <field> }}` .
4. **Add columns in between the table template rows (third row)** to match your desired table and fill with field values:

   ```django
   {{ <field>[i] if i < <field>|length else "" }}
   ```

{% hint style="info" %}
Make sure you replace every `<field>` with your own field names!
{% endhint %}

### Finished Table

<figure><img src="https://640450274-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHAVngDAEk3s8Bw7P6Ntz%2Fuploads%2F3NHhYbOBDNPAaqgfFU5n%2Fimage.png?alt=media&#x26;token=e64a1ae4-3deb-4ef9-b8fa-26efb97702ba" alt="" width="563"><figcaption></figcaption></figure>
