Rowspan causing _DT_CellIndex error and breaking column sorting and tool buttons

[RipleWare]

I'm submitting a...

[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Question

Problem

I am populating a datatable using the following array:

$scope.students = [
    {
        Id: 1,
        Name: 'Joe Blogs',
        Courses: [
            {
                Title: 'Course 1',
                Grade: 87,
                Completed: true,
                DateCompleted: '2018-01-01'
            },
            {
                Title: 'Course 2',
                Grade: 2,
                Completed: false
            }
        ]
    },
    {
        Id: 2,
        Name: 'Peter Smith',
        Courses: [
            {
                Title: 'Course 1',
                Grade: 100,
                Completed: true,
                DateCompleted: '2018-01-01'
            },
            {
                Title: 'Course 2',
                Grade: 95,
                Completed: true,
                DateCompleted: '2018-01-01'
            },
            {
                Title: 'Course 3',
                Grade: 10,
                Completed: false
            }
        ]
    },
    {
        Id: 3,
        Name: 'Joanne Someone',
        Courses: [
            {
                Title: 'Course 3',
                Grade: 55,
                Completed: false,
            }
        ]
    }
];

And have been assisted to produce my datatable using the following code:

<table datatable="ng" dt-options="dtOptions" class="table">
<thead>
  <tr>
    <td>Id</td>
    <td>Name</td>
    <td>Course</td>
    <td>Grade</td>
    <td>Completed</td>
    <td>Date Completed</td>
  </tr>
</thead>
<tbody ng-repeat="x in students">
  <tr>
    <td rowspan="{{x.Courses.length}}"><span>{{ x.Id }}</span></td>
    <td rowspan="{{x.Courses.length}}"><span>{{ x.Name }}</span></td>
    <td><span>{{x.Courses[0].Title}}</span></td>
    <td><span>{{x.Courses[0].Grade}}</span></td>
    <td><span>{{x.Courses[0].Completed}}</span></td>
    <td><span>{{x.Courses[0].DateCompleted}}</span></td>
  </tr>
  <tr ng-repeat="item in x.Courses" ng-if="$index > 0">
    <td><span>{{item.Title}}</span></td>
    <td><span>{{item.Grade}}</span></td>
    <td><span>{{item.Completed}}</span></td>
    <td><span>{{item.DateCompleted}}</span></td>
  </tr>
</tbody>
</table>

This populates into the datatable fine and give me the following output (concept view only):

However, it produces the following error in the console:

TypeError: Cannot set property '_DT_CellIndex' of undefined
    at _fnCreateTr (jquery.dataTables.js:3104)
    at _fnAddData (jquery.dataTables.js:2423)
    at HTMLTableRowElement.<anonymous> (jquery.dataTables.js:2451)
    at jquery.min.js:2
    at Function.map (jquery.min.js:2)
    at w.fn.init.map (jquery.min.js:2)
    at _fnAddTr (jquery.dataTables.js:2449)
    at loadedInit (jquery.dataTables.js:1281)
    at HTMLTableElement.<anonymous> (jquery.dataTables.js:1306)
    at Function.each (jquery.min.js:2)

It also prevents the table header column sorting from working and the tool buttons (such as print and csv export). I'm assuming it has something to do with rowspan but I can't find any information on how to correct this issue.

My controller code for my datatable looks like so:

        $scope.dtOptions = DTOptionsBuilder
            .newOptions()
            .withDOM( 'Brt' )
            .withBootstrap()
            .withPaginationType( 'full_numbers' )
            .withButtons([
                'copyHtml5',
                'csvHtml5'
            ])
            .withDisplayLength( 50 );

Environment

- node version:
- angular version: 1.5.5
- angular-cli version:
- jquery version: 3.2.1
- datatables version: 1.10.18
- angular-datatables version: 0.6.2

[kishor-dalwadi]

There are simple solution for it. Remove ColSpan and RowSpan from table. Put <td style="display:none"></td> tag. It will work,

[rajat-rjt]

ERROR TypeError: Cannot set property '_DT_CellIndex' of undefined at _fnCreateTr (jquery.dataTables.js:3140) at _fnAddData (jquery.dataTables.js:2453) at HTMLTableRowElement. (jquery.dataTables.js:2481) at jquery.js:208 at Function.map (jquery.js:463) at jQuery.fn.init.map (jquery.js:207) at _fnAddTr (jquery.dataTables.js:2479) at loadedInit (jquery.dataTables.js:1281) at HTMLTableElement. (jquery.dataTables.js:1306) at Function.each (jquery.js:381)

I'm getting this error when using datatable

This my html file :

<table class="table table-striped" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">

Name Email Phone Address

    <tbody>
        <tr
            *ngFor="let user of users;">
            <!-- data table-->
            <ng-container *ngIf="user.is_deleted == 0 && user.role == 'u' ">
                <td> {{ user.name }} </td>
                <td> {{ user.email }} </td>
                <td> {{ user.phone }} </td>
                <td> {{user.address}} {{user.city}} {{user.state}} ({{user.zip}}) </td>
                <!-- <td *ngIf="user.status == 1 ;  else elseStatus" class="text-success"> Active </td>
                <ng-template #elseStatus class="text-danger"> Inactive </ng-template>
                <td> <button (click)="editUser( user._id )" class="btn btn-outline-primary"> Edit </button></td>
                <td> <button (click)="deleteUser( user._id )" class="btn btn-outline-danger"> Delete </button> </td>
                <td> <a *ngIf="user.status == 1" (click)="deactivateUser(user._id)"
                        class="btn btn-outline-secondary"> Deactivate </a> </td> -->
            </ng-container>
        </tr>
    </tbody>
</table>