Not able to resolve Datatable SCRIPT5007: Unable to set property '_DT_CellIndex' of undefined or null reference

I am not be able to resolve following Datatables error:

SCRIPT5007: Unable to set property '_DT_CellIndex' of undefined or null reference

I tried to look all over the internet and found this to be the best solution. But I am still not able to resolve this issue. Am I missing something here? I am a newbie in JavaScript.

12 Answers

Basically this issue came out because of miss matching count of th to td. be sure for number of th matches to td. hope this will help you.

We had the same error! What fixed it for us was changing the target in the dataTable initialization based on the number of columns starting from 0.

In our table we had 4 columns so targets: [3]

$.extend($.fn.dataTable.defaults,{ columnDefs: [{ targets: [3] }] }); 

In my case, using colspan in a row, the number of cells didn't match the table headers so this error shows. you can add these hidden cells to get rid of that error.

try this

<tr> <td colspan="4">details</td> <td></td> <td></td> <td></td> </tr> 

add the required cells but hide them

found this answer here: datatable forums

A simple mistake, the table header had a column " with no title, but the column did not exist in the table itself. I could not see it missing (because o no title and no borders).

did it work?

I had the error, when there was no data in the data table. The table is empty. After adding one record, the error disappeared.

I fixed it. It was js part vs html.

Problem happened when I deleted html column and forgot to delete a js column that looked like this.

 {"name": "Product", "orderable": true, "searchable": true}, 

Once I deleted the extra column in js everything started working.

To solve the error:

Unable to set property '_DT_CellIndex' of undefined

First I tell you that $("id_tu_tabla").Datatable() have a minimum number of columns, it is 6. But if you have less than that, you have specify it, like with this code:

$('#table').DataTable({ columnDefs: [ { goals: [4] }] }); } 

It seems like many people got the error because of th and td mismatch. For me I got the error with what seemed to be a logical error. Look the code below.

Note: This was me experimenting with datatables in Angular 7, enhance things like *ngFor, ng-container, *ngIf, but never mind these, just look at the code structural difference (swapped tr with ng-container).

Table head:

<thead> <tr> <th>Name</th> <th>Surname</th> <th>Email</th> <th>Organisation</th> </tr> </thead> 

This produce the error:

<tr *ngFor="let user of users; let index = index"> <ng-container *ngIf="showInactiveUsers"> <td>{{user?.firstName}}</td> <td>{{user?.lastName}}</td> <td>{{user?.email}}</td> <td>{{user?.attributes?.organisation}}</td> </ng-container> <ng-container *ngIf="!showInactiveUsers && user?.enabled"> <td>{{user?.firstName}}</td> <td>{{user?.lastName}}</td> <td>{{user?.email}}</td> <td>{{user?.attributes?.organisation}}</td> </ng-container> </tr> 

Rearranging the code like below solves the error:

<ng-container *ngFor="let user of users; let index = index"> <tr *ngIf="showInactiveUsers"> <td>{{user?.firstName}}</td> <td>{{user?.lastName}}</td> <td>{{user?.email}}</td> <td>{{user?.attributes?.organisation}}</td> </tr> <tr *ngIf="!showInactiveUsers && user?.enabled"> <td>{{user?.firstName}}</td> <td>{{user?.lastName}}</td> <td>{{user?.email}}</td> <td>{{user?.attributes?.organisation}}</td> <td *ngIf="user?.enabled"> </tr> </ng-container> 

If you requirement is to show the row with "No record found" message like below code

@if(Model.Count==0) { <tr> <td colspan="3"> No record found. </td> </tr> } 

then just simple remove this condition because datatable itself append "No data available in table" message, in my case it's resolve the my error

I had a similar issue and it was fixed by removing the '$' sign which was among the column name. Hope this helps.

Check the count of your table column and dtColumnDefs.

If you have 6 columns then below will be your configuration for dtColumnDefs.

self.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1), DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3), DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5) ]; 

I was having the same issue. In my case, I was having 5 columns but in orderable targets, I was setting up to 7 columns. so make sure you do not have extra columns mentioned in the orderable targets too.

{ "orderable": false, "targets": [1,2,3,4] }