Adding rows breaks datatable in Django - django

Question

I have a datatable in Django that functions fine when hardcoded, but when I add my Django template tags it breaks. The inspect on the page says: Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined in jquery.datatables.min.js
This only happens when I have more than one user in the table, or try to add a column in the table with django. Since I will be using multiple datatables in my project, I need to figure out what I'm doing wrong. The datatable JS code I'm using comes from a template, and I'm not sure if the error is in the template code or in my Django template code. So please excuse the long code blocks.
employees.html (django template):
<div class="card-body collapse in">
<div class="card-block card-dashboard">
<button id="addRow" class="btn btn-primary mb-2 js-create-employee"><i class="ft-plus"></i> Add New Employee</button>
<table class="table table-striped table-bordered zero-configuration">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Roles</th>
<th>Email</th>
<th>Mobile Contact</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for profile in user_profile_list %}
<tr>
{% if not profile.user.is_superuser %}
<td>{{ profile.user.get_full_name }}</td>
<td>{{ profile.user.username }}</td>
<td>
{% for g in profile.user.groups.all %}
<div class="tag tag-default">{{ g.name|split:'_'|title }}</div>
{% endfor %}
</td>
<td>{{ profile.user.email }}</td>
<td>{{ profile.mobile_phone }}</td>
<td><i class="fa fa-pencil"></i> <a href="#" alt="Assign"><i class="fa fa-link"></i><a/> <a href="#" alt="delete"><i class="fa fa-times"></i><a/></td>
{% endif %}
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Roles</th>
<th>Email</th>
<th>Mobile Contact</th>
<th>Actions</th>
</tr>
</tfoot>
</table>
Datatable instantiation:
$(document).ready(function() {
/****************************************
* js of zero configuration *
****************************************/
$('.zero-configuration').DataTable();
});
Jquery.datatables.min.js and dataTables.bootstrap4.min.js are also used, but those come stock from bootstrap 4. I'm not going to add them here unless needed, and they are minified anyway.

Answer 1

This issues occurs only when data is not available for the table or tags.
You have conditions in template using django templatestag So the number of every <td> element in your table that is a child of a <tr> element doesn't match the number of <th> elements that are a child of the element.
Please make sure you have same number of <td> tag in <tbody> tag.
EDIT:
Maybe {% if not profile.user.is_superuser %} this condition creating this issue. If user is superuser then no <td> tag will create that will not match same number of <th> in <thead>