Angular nested Data Tables with dynamic headers issue

Question

I am using Angular DataTables in my application and trying to create nested datatables with dynamic headers.

Here is my Html code.

<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2" dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
 <thead>
 <tr>
 <th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
 <td ng-repeat="col in headerList2" ng-switch="col">
 <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
 <span ng-switch-default>{{ client[col] }}</span>
 </td>
 </tr>
 <tr ng-show="showViewDetail">
 <div class="span12 pull-right" ng-show="showViewDetail">
 <table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
 <thead>
 <tr>
 <th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
 <td ng-repeat="col3 in headerList3" ng-switch="col">
 <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
 <span ng-switch-default>{{ client[col3] }}</span>
 </td>
 </tr>
 </tbody>
 </table>
 </div> 
 </tr> 
 </tbody>
</table> 

Here is javascript Code

 function makeDetailTable(data) { 
 var header = data[0],
 dtColumns = [];
 $scope.headerList2 = [];
 var i = 0;
 var key = "";
 //create columns based on first row in Parent Datatable
 for (var key in header) {
 dtColumns.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
 $scope.headerList2.push(key);
 i = i + 1;
 }
 $scope.dtColumnDefs2 = dtColumns; 
 $scope.dtOptions2 = DTOptionsBuilder.newOptions() 
 .withPaginationType('full_numbers') 
 .withButtons([
 'excel',
 {
 text: 'Reset',
 action: function (e, dt, node, config) {
 $("#dtInvoicingData2").DataTable().search("").draw();
 }
 }
 ]);
 }
 $scope.btnViewDetails_Click = function (rowIndex) { 
 var detailList = $scope.lstInvoiceDetail[rowIndex]['lstDetail']; 
 var header3 = detailList[0],
 dtColumns3 = [];
 $scope.headerList3 = [];
 var i = 0;
 var key = "";
 //create columns based on first row in child datatable
 for (var key in header3) {
 dtColumns3.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
 $scope.headerList3.push(key);
 i = i + 1;
 }
 $scope.dtColumnDefs3 = dtColumns3;
 $scope.dtInstance2 = null;
 $scope.dtOptions3 = DTOptionsBuilder.newOptions() 
 .withPaginationType('full_numbers')
 .withButtons([
 'excel',
 {
 text: 'Reset',
 action: function (e, dt, node, config) {
 $("#dtInvoicingData3").DataTable().search("").draw();
 }
 }
 ]);
 $scope.showViewDetail = true;

when I try to add child datatable it doesn't work and show console error

TypeError: Cannot set property '_DT_CellIndex' of undefined

I did search on this error but i have not find proper solution

Here is a little info related to this error

it says the problem is

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.

Update:

Now i have trying this.

 <table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2" dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
 <thead>
 <tr>
 <th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
 <td ng-repeat="col in headerList2" ng-switch="col">
 <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
 <span ng-switch-default>{{ client[col] }}</span>
 </td>
 </tr>
 <tr>
 <td colspan="3">
 <table class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
 <thead>
 <tr>
 <th ng-repeat="col3 in headerList3">{{col3 | translate}} </th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="(index,client) in lstChildInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
 <td ng-repeat="col3 in headerList3" ng-switch="col">
 <!-- <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span> -->
 <span ng-switch-default>{{ client[col3] }}</span>
 </td>
 </tr>
 </tbody>
 </table>
 </td> 
 <td style="display:none;"> </td>
 <td style="display:none;"></td>
 </tr> 
 </tbody>
 </table> 

Child Table is created on first row, i want to created on each row.

Do you have any idea about it?

Answer 1

Because you are trying to create two rows with different structures instead of nested tables.

Row 1 :

<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
 <td ng-repeat="col in headerList2" ng-switch="col">
 <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
 <span ng-switch-default>{{ client[col] }}</span>
 </td>
 </tr>

And Row 2 :

<tr ng-show="showViewDetail">
 <div class="span12 pull-right" ng-show="showViewDetail">
 <table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
 <thead>
 <tr>
 <th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
 </tr>
 </thead>
 <tbody>
 <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
 <td ng-repeat="col3 in headerList3" ng-switch="col">
 <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
 <span ng-switch-default>{{ client[col3] }}</span>
 </td>
 </tr>
 </tbody>
 </table>
 </div> 
 </tr> 

and as far error states, data in both rows has different count for header and columns. It means your lists dtColumnDefs2, headerList2, dtColumnDefs3, and headerList3 have different counts.