Datatables.js incorrect columns

Question

I am trying to create a datatables with datatables.js, but I keep encountering a problem, it keeps showing an error saying incorrect number of columns, this is in asp.net core NET 7.0, so I am working with a model for my data.

DataTables warning: table id=employeeTable - Incorrect column count. For more information about this error, please see http://datatables.net/tn/18 please fix this it still is not working

<table id="employeeTable" class="table table-striped">
    <thead>
        <tr>
            <!-- Empty header for the toggle button -->
            <th></th>
            <th>First Name</th>
            <th>Second Name</th>
            <th>Job Title</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var employee in Model)
        {
            <tr class="parent-row">
                <td><i class="fas fa-arrow-right expand-icon"></i></td>
                <td>@employee.FirstName</td>
                <td>@employee.SecondName</td>
                <td>@employee.JobTitle</td>
                <td>@employee.Salary</td>
            </tr>
            <tr class="child-row rowhide">
                <td></td>
                <td colspan="4">
                    <div class="child-details">
                        About me: @employee.AboutMe
                        <br />
                        ID: @employee.Id
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>

$(document).ready(function () {
        let table = $('#employeeTable').DataTable({
            "order": [[1, 'asc']]
        });

        $('#employeeTable tbody').on('click', '.expand-icon', function () {
            var tr = $(this).closest('tr.parent-row');
            var row = table.row(tr);

            if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
            } else {
                row.child(tr.next('tr.child-row').html()).show();
                tr.addClass('shown');
            }
        });
    });

I want the page to have parent and child rows that can expand if you click on the toggle arrow.

Answer 1

I reproduced your issue in my side as you can see the table is loaded like what you want but it just gave us an alert.

Inside the document it mentioned, we could see that

Ensure colspan and rowspan are not used in the table body rows

That's the reason, so the easiest workaround for this scenario is setting the other 3 invisible like <td style="display:none"></td> and add a comment here with description that to avoid datatablejs warning. I'm also trying to find some other soltuion. But right now I only found this reply which used display none as well. By the way, the columnDefs is not suitable for your toggle action.