CODEWITHSUNDEEP
htmldjangodjango-templateshtml-table
Jedi
Jedi

Reputation: 3358

Avoid duplicate "if conditions" in django template HTML tables

Depending on the user accessing a web page, the generated HTML tables may show extra columns. My current implementation checks a flag on every row within my template file, where show_secret_column is a flag set by the view:

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th class="col-md-4">Column 1 Header</th>
                <th class="col-md-2">Column 2 Header</th>
                <th class="col-md-2">Column 3 Header</th>
                {% if show_secret_column %}
                <th class="col-md-2">Secret Column Header</th> 
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for row in row %}
            <tr>
                <td>{{ row.a }}</td>
                <td>{{ row.b }}</td>
                <td>{{ row.c }}</td>
                {% if show_secret_column %}
                <td>{{ row.secret }}</td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

Is this a bad approach? Is there any other way recommended to perform this check only once in the template and generate the extra column?

Upvotes: 2

Views: 961

Answers (1)

thedarklord47
thedarklord47

Reputation: 3312

if you really want to micro-optimize for a row count that large (which I highly suggest you don't) you could duplicate the template like this:

{% if show_secret_column %}
    <thead>
        <tr>
            <th class="col-md-4">Column 1 Header</th>
            <th class="col-md-2">Column 2 Header</th>
            <th class="col-md-2">Column 3 Header</th>
            <th class="col-md-2">Secret Column Header</th> 
        </tr>
    </thead>
    <tbody>
        {% for row in row %}
        <tr>
            <td>{{ row.a }}</td>
            <td>{{ row.b }}</td>
            <td>{{ row.c }}</td>
            <td>{{ row.secret }}</td>
        </tr>
        {% endfor %}
    </tbody>
{% else %}
    <thead>
        <tr>
            <th class="col-md-4">Column 1 Header</th>
            <th class="col-md-2">Column 2 Header</th>
            <th class="col-md-2">Column 3 Header</th>
        </tr>
    </thead>
    <tbody>
        {% for row in row %}
        <tr>
            <td>{{ row.a }}</td>
            <td>{{ row.b }}</td>
            <td>{{ row.c }}</td>
        </tr>
        {% endfor %}
    </tbody>
{% endif %}

I just want to re-iterate that if I saw this in my code I would be horrified. It is super brittle now (you would have to be careful to duplicate all changes made to both sections). It is also just a lot of bloat and an eyesore.

Your main objective should be to not have a table with 40k rows in the first place. That said, this will do what you're asking.

Upvotes: 1

Related Questions