How to render form.as_table in multiple columns

Question

I am using a model form, and I have rendering that form in the template as below.

 <table>
    {{form.as_table}}
 </table>

But the problem is, its rendering all the fields as rows. Since my model contains more than 200 rows, when its showing the elements as 200 rows its looking bad. I want to divide them into 5 columns, so the total rows will be around 40-43. Is there any inbuilt template tag available for this or any other way using which we can solve the problem.

Rohan can you pls show me a sample code, how to iterate. thansk — sandeep, Nov 22 '13 at 10:54

score 5 · Accepted Answer · answered Nov 22 '13 at 11:02

You can refer this doc: looping over form fields

What you can do in your template is

{% for field in form %}

    {%if forloop.counter|divisibleby:"5" %}
        {#after 5 fields, somehow put elements in next row
         of table, paragraph, or using divs etc
        #}
    {%endif%}

    {{field}}
{%endfor%}

score 1 · Answer 2 · answered Nov 22 '13 at 11:05

Your question is a bit unclear however this example is more than enough.

the loop iterates over a list data and I have replaced so that it would display column1,column2,column3,column4,column5 in every row for example purposes.

<!DOCTYPE html>
<html>
<head>
    <title>Jack of All Trades</title>
</head>
<body>
<table border="1">
{% for element in data %}
    <tr>
    <td><p>column 1 </p></td>
    <td><p>column 2 </p></td>
    <td><p>column 3 </p></td>
    <td><p>column 4 </p></td>
    <td><p>column 5 </p></td>
    </tr>
{% endfor %}
</tr>
</table>
</body>
</html>

Assuming data has 5 elements it would produce something like this:

enter image description here

score 1 · Answer 3 · answered Apr 05 '17 at 20:15

This worked better for me (divisibleby: n, n = number of columns):

          <form enctype="multipart/form-data" method="POST">
                {% csrf_token %}
                {% for field in form %}
                    {{ field.label }} {{ field }}
                    {% if forloop.counter|divisibleby:"2" %}
                        <br>
                    {% endif %}
                {% endfor %}
                <input type="submit" value="Continue" />
            </form>

Nelson Yan · Answer 4 · 2018-08-16T22:16:11.397

I use bootstrap 4 and form tag name is 'employee_in'. There is 6 input fields in each of the two columns (fixed, anyone else knows how to make it automatic?) best I can do so far, hope it helps

  <form enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <table class = 'table table-hover'>
            {% for my_divider in employee_in %}
              {% if forloop.counter <= 6 %}
                <tr>
                  <td>{{ my_divider.label }}</td>
                  <td>{{ my_divider }}</td>
                </tr>
              {% endif %}
            {% endfor %}
          </table>
        </div>
        <div class="col-lg-6">
          <table class = 'table table-hover'>
            {% for my_divider in employee_in %}
              {% if forloop.counter > 6 %}
                <tr>
                  <td>{{ my_divider.label }}</td>
                  <td>{{my_divider}}</td>
                </tr>
              {% endif %}
            {% endfor %}
          </table>
        </div>
      </div>
    <input type="submit" class = 'btn btn-secondary' value="Submit">
    </div>
  </form>

score 0 · Answer 5 · answered Sep 19 '20 at 02:23

0

<form method="POST">
{% csrf_token %}
<table>
    {% for field in form %}
        <tr>
            <td>{{ field.label}}</td>
            <td>{{ field }}</td>
        </tr>
    {% endfor %}
</table>
<button type="submit" class="btn btn-primary">Submit</button>

answered Sep 19 '20 at 02:23

Naseem

119
6

I know the post is very old but there are still same issues pertaining to form.as_p and form.as_table. I have used this code to properly align the field label and its values... if we put this under tag and use this formating your fields will be aligned.
– Naseem Sep 19 '20 at 02:26

score 0 · Answer 6 · answered Oct 19 '22 at 03:10

Another option to consider in newer versions of Django is to use Reusable form templates to create a form template to call as {{ form.as_td }}, just like you would call {{ form.as_table }} in your template.

This has a few nice features:

A FormSet with each form wrapped in a <tr> but fields wrapped in <td> can coexist with other nice add-ons like django-dynamic-formset
This method can be used for other elements your might want to render forms with

Steps:

Create a RenderMixin that implements as as_td() method, to be called as {{ form.as_td }} in your template

from django.forms.utils import RenderableMixin

class ColumnRenderableFormMixin(RenderableMixin):
  def as_td(self):
    """Render as <td> elements excluding the surrounding <table> tag."""
    return self.render(self.template_name_td)

Create a reusable template in your app templates directory (or other suitable directory)

The template will look just like the standard Django templates in django/forms/templates/django/forms/*.html
A bare bones example put into someapp/templates/td.html could be:

{% for field, errors in fields %}
  <td>
    {{ errors }}
    {{ field }}
  </td>
{% endfor %}

Add the custom mixin to your form, and specify the td.html template file path in the template_name_td class variable:

class SomeForm(ModelForm, ColumnRenderableFormMixin):
  template_name_td = "someapp/td.html"

In your view's template, render the form with {{ form.as_td }}.

If you're using a formset this would look like the following:

<table class="table">
{% for form in formset %}
  <tr>
    {{ form.as_td }}
  </tr>
{% endfor %}
</table>

How to render form.as_table in multiple columns

6 Answers6

Steps: