jQuery Datatables column count error - Requested unknown parameter '0' for row 0, column 0 - datatables

Question

This is a very common question, I'm aware. But I spent almost a day because I can't spot the error I have to post this. Can anyone see a mistake?
Markup :-
<table class="table align-items-center table-flush py-3" id="inquiry-select-table">
<thead class="thead-light">
<tr>
<th scope="col" style="display:none">ID</th>
<th scope="col" style="display:none">Version</th>
<th scope="col" style="display:none">Created Date</th>
<th scope="col" style="display:none">Created Time</th>
<th scope="col" style="display:none">Updated Date</th>
<th scope="col" style="display:none">Updated Time</th>
<th scope="col" style="display:none">Client ID</th>
<th scope="col">Client Name</th>
<th scope="col">Knowledge Source</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS :-
var inquirySelectTable;
var inquirySelectTableColumns = [{
data: "id"
},
{
data: "version"
},
{
data: "createdDate"
},
{
data: "createdTime"
},
{
data: "updatedDate"
},
{
data: "updatedTime"
},
{
data: "clientId"
},
{
data: "clientName",
defaultContent: "",
className: "all"
},
{
data: "knowledgeSource",
defaultContent: "",
className: "all",
render: function (data, type, row) {
switch (data) {
case 'WOM':
return 'Word of mouth';
case 'PAPER':
return 'Paper Article';
case 'FB':
return 'Facebook';
case 'GOOGLE':
return 'Google Ad';
case 'EMAIL':
return 'Email';
case 'SMS':
return 'SMS';
default:
return 'Other'
}
}
},
{
data: "description",
defaultContent: "",
className: "all"
}
];
var inquiryColumnDefs = [{
"targets": [0, 1, 2, 3, 4, 5, 6],
"visible": false,
"searchable": false
}];
var tableSizeFromFive = [
[5, 10, 15, 25 - 1],
[5, 10, 15, 25, "All"]
];
$(document).ready(function () {
inquirySelectTable = $('#inquiry-select-table').DataTable({
pagingType: "numbers",
responsive: true,
lengthMenu: tableSizeFromFive,
columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,
});
$.get("inquiries/getAllInquiries", function (data, status) {
console.log(data);
setGridData(inquirySelectTable, data);
});
});
function setGridData(table, data) {
table.clear();
table.rows.add(data).draw();
if (table.data().count() > 0) {
$(".table-responsive").removeClass("disabled");
} else {
$(".table-responsive").addClass("disabled");
}
}
The data received from the server :-
The error I'm getting is :-
According to https://datatables.net/manual/tech-notes/4, since I'm getting an Integer as the parameter it means the column count does not match with the row count. But it seems ok to me. Does anyone see something I missed?

Answer 1

Seems like you've swapped columnDefs and columns:
columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,
Interchange them and it'll work fine:
columnDefs: inquiryColumnDefs,
columns: inquirySelectTableColumns,
Example fork:
http://jsfiddle.net/bsf69o04/