24

What's the Django way of presenting a formset horizontally, i.e. one row per form? The as_table method generates multiple forms vertically (with the labels). I need the form fields in table rows (one row per form) and the labels should be on top. I don't see anything out of the box. Is this discouraged for some reason?

I should clarify that I actually want a table, because of a UI table widget I'll be using. And that table should have the labels in the .

So my desired structure is:

<table>
  <thead>
     <tr><th>column1</th><th>column2</th></tr>
  </thead>
  <tbody>
    <tr><td>form1.value1</td><td>form1.value2</td></tr>
...
  </tbody>
</table>

3 Answers 3

39

You might want to try something like this http://www.djangosnippets.org/snippets/1442/

{{ formset.non_form_errors.as_ul }}
<table id="formset" class="form">
{% for form in formset.forms %}
  {% if forloop.first %}
  <thead><tr>
    {% for field in form.visible_fields %}
    <th>{{ field.label|capfirst }}</th>
    {% endfor %}
  </tr></thead>
  {% endif %}
  <tr class="{% cycle row1 row2 %}">
  {% for field in form.visible_fields %}
    <td>
    {# Include the hidden fields in the form #}
    {% if forloop.first %}
      {% for hidden in form.hidden_fields %}
      {{ hidden }}
      {% endfor %}
    {% endif %}
      {{ field.errors.as_ul }}
      {{ field }}
    </td>
  {% endfor %}
  </tr>
{% endfor %}
</table>
5
  • 6
    Yes, this does it. It is a verbose thing to put in your templates. With something so verbose, you'd want it either as a as_table-like method or you'd want to have the ability to call templates with a parameter (not just include them). I am really surprised that something as mature as Django doesn't have this out of the box.
    – kmt
    Feb 10, 2010 at 4:10
  • 4
    I typically add this as a generic template (saved as formset_table.html) then for each formset template i pass {% include "formset_table.html" %}, but i agree it would be nice of it could be rendered as a builtin method.
    – Dave
    Feb 10, 2010 at 16:01
  • 2
    I ended up doing the same. And because I have a page with multiple such forms I ended up doing using the with tag to parameterize it.
    – kmt
    Feb 10, 2010 at 20:35
  • If you get 'ManagementForm data is missing or has been tampered with' error, add {{ formset.management_form }} just after the <table> opening tag github.com/django/django/blob/…
    – abumalick
    Jun 21, 2020 at 16:57
  • 1
    The above code doesn't include {{ form.non_field_errors }} Jun 24, 2020 at 10:17
8

I suggest using form.as_ul and styling it with your CSS to make it all on one row. You can do that with ul li { display: inline; } or of course, substitute a class or ID if you don't want to affect all ULs in that manner.

Here's the relevant section of the Django docs: http://docs.djangoproject.com/en/dev/topics/forms/#displaying-a-form-using-a-template

Edit: To address your need for a table, you'd like want to do something like this... edited some more.

It's difficult to put all of these forms in a table, and still have valid HTML. A form element can surround a table, or be inside a <td>... though this will likely still work.

<thead>
  <tr>
   {% for field in form %}
     <th>{{ field.label }}</th>
   {% endfor %}
  </tr>
</thead>

<tbody>
 <tr class="table_row">
  <form action="/something/" method="post">
    {% for field in form %}
      <td>
       <table>
        <tr><td>{{ field.label }}</td></tr>
        <tr><td>{{ field }}</td></tr>
       </table>
      </td>
    {% endfor %}
   </form>
  </tr>
 </tbody>
5
  • See my clarification please. I actually need a table.
    – kmt
    Feb 10, 2010 at 3:04
  • I think you're going to have to go with the customization in your template, then, instead of using the methods that automatically generate HTML. Then you can put it all in one <tr>.
    – JAL
    Feb 10, 2010 at 3:29
  • I see your update. Thanks! But, well, I need the labels to be in the <thead>, above all rows, not repeating for each individual row. I basically need a table representation of a recordset. Find it surprising that I couldn't find this googling.
    – kmt
    Feb 10, 2010 at 3:45
  • Okay, you'd just want to go over the elements the first time and print only the labels, as th s in the thead, then print the rest of your forms.
    – JAL
    Feb 10, 2010 at 4:08
  • Yes. But then take care of the errors too, etc. It becomes the snippet that Dave here posted. I appreciate your answers though. Being new at Django, I appreciate any ideas.
    – kmt
    Feb 10, 2010 at 4:13
0

Here is very basic form to display all fields in line along with tags as headers.

<table class="table">
    <tr>    
        {% for field in form %}
            <th>{{ field.label }}</th>
        {% endfor %}
    </tr>
    <form method="POST"> {% csrf_token %}
        {% for field in form %}
                <td>{{ field }}</td>
            {% endfor %}
    </form>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.