Fixing DataTables Warning Incorrect Column Count
Getting the DataTable warning of incorrect column count? Check this post to resolve it!
Jan 17, 2023 | Read time 7 minutes🔔 Table of contents
Introduction
I was playing around with DataTables for displaying large amounts of data and came across the warning “incorrect column count”.
There are a few potential causes for a “DataTables warning: incorrect column count” issue, and the fixes for this can be the following:
-
The number of columns defined in the HTML table
<thead>does not match the number of columns in the<tbody> -
Your HTML does not contain the
theadandtbodyelements. -
Make sure You are not using
colspanandrowspanin the table body rows. -
Make sure the HTML is valid
What is DataTables?
DataTables is a popular JavaScript library that provides advanced interaction controls for HTML tables.
It allows you to easily add pagination, sorting, and filtering functionality to your tables, as well as various other features such as search bar, multi-column ordering, and more. DataTables, you can quickly and easily turn your plain HTML tables into dynamic and interactive data grids.
I will go over a number of reasons why we are getting the warning: “incorrect column count”:
1. The number of columns defined in the HTML table <thead> does not match the number of columns in the <tbody>
When setting up DataTables, we need to make sure that the columns that we define in the table header is the same as the table body.
Consider the following HTML table:
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
...
</tbody>
</table>As we can see from the above HTML structure, we can see that there are three columns in the table header, but only two columns in the table body.
The reverse will also give the error - having two columns in the table header and three columns in the table body:
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
...
</tbody>
</table>2. Your HTML does not contain the thead and tbody elements.
A common misunderstanding of how to setup HTML for Datatables is forgetting to add the table header (thead) and table body tags (tbody).
For example, in the below HTML table structure we do not have thead and tbody. Notice that we have the same number of columns in each row!
Although this will render fine and look like a table, DataTables will complain with the “incorrect number of columns” warning.
<table>
<tr>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
...
</table>Why
theadandtbody?In HTML, the
<thead>and<tbody>elements are used to separate the header information from the body of a table. The<thead>element is used to group the header content in a table, while the<tbody>element is used to group the body content.The
<thead>element is used to provide a container for the header rows (typically<tr>’s) of a table, allowing the browser to know that the rows it contains constitute the header of the table. This allows browsers to render the header rows with special formatting, such as bold text or a different background color.The
<tbody>element is used to provide a container for the rows of the table’s body, which contains the data to be displayed. This allows browsers to apply different styles and layout to the body of the table, such as alternating row colors or different text alignment.Additionally, using thead and tbody elements allows the browser to handle the table in a more efficient way, making it faster and easier to manage large tables and scrolling, and accessibility features like screen readers can also benefit from this structure.
3. Make sure You are not using colspan and rowspan in the table body rows.
When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspan in the table’s header, assigning the required order listeners to the TH element suitable for that column.
Having colspan and rowspan can stuff up the column rendering for DataTables if not used correctly.
We can use the rowspan and colspan in the table header. However, DataTables does not support colspan or rowspan attributes on cells in the table body.
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">HR Information</th>
<th colspan="3">Contact</th>
</tr>
<tr>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">AAA</td> <!-- ❌ Avoid this -->
<td colspan="2">XXX</td> <!-- ❌ Avoid this -->
<td colspan="3">BBBB</td> <!-- ❌ Avoid this -->
</tr>
</tbody>4. Make sure the HTML is valid
A common reason why this DataTable warning of incorrect column count appears is that the HTML is not valid. Some examples of invalid HTML to check include:
HTML contains unclosed tags:
<td>This is a paragraph
<td>This is another paragraphIn this example, the first <p> tag is not closed properly, resulting in invalid HTML.
HTML has misnested tags:
<b><i>This text is bold and italic</b></i>In this example, the <i> tag is not properly nested within the <b> tag, resulting in invalid HTML.
To check and validate your HTML, we can use the service: https://validator.w3.org/
Summary
In this post, I went over the DataTable warning of “incorrect column count”. The reason why “incorrect column count” warning appears is that the columns in the table header does not match the columns in the table body.
We can fix this by making sure that thead and tbody column counts are the same. Additionally we should make sure that our table contains thead and tbody tags.
Another reason why this warning comes up is the use of colspan and rowspan. We can use colspan and rowspan for Datatables table header but NOT table body!
Lastly, we should check that the HTML is valid - not having missed closing tags or invalid nested tags.
