title: Angular datatables - add row in a dynamic column table
body: <p>I have a datatable table with a variable columns number and I need to add rows to it.</p>
  
  <p>That's how I set the columns:</p>
  
  <pre><code>var columns = getColumnsName();
  columns.forEach(function(column, index){
      dtColumns.push(DTColumnBuilder.newColumn(index).withTitle(column));
  });
  </code></pre>
  
  <p>This only works when I don't put a <code>&lt;tr&gt;</code> inside <code>&lt;tbody&gt;</code>. If I put a <code>&lt;tr&gt;</code> inside <code>&lt;tbody&gt;</code>, I got the following error:</p>
  
  <pre><code>TypeError: Cannot read property 'length' of undefined
      at _fnGetRowElements (jquery.dataTables.js:3021)
      at HTMLTableRowElement.&lt;anonymous&gt; (jquery.dataTables.js:2428)
      at jquery.js:144
      at Function.map (jquery.js:467)
      at jQuery.fn.init.map (jquery.js:143)
      at _fnAddTr (jquery.dataTables.js:2427)
      at loadedInit (jquery.dataTables.js:1307)
      at HTMLTableElement.&lt;anonymous&gt; (jquery.dataTables.js:1332)
      at Function.each (jquery.js:374)
      at jQuery.fn.init.each (jquery.js:139)
  </code></pre>
  
  <p>Note that if I can't put a <code>&lt;tr&gt;</code>, I can't place a <code>ng-repeat</code> to repeat my data inside <code>&lt;tbody&gt;</code>.</p>
  
  <p>I seems that I'm getting the above error when I have a <code>&lt;tr&gt;</code> inside <code>&lt;tbody&gt;</code> without enough <code>&lt;td&gt;</code> inside it. Supposing I know how many columns I have and put this exactly number of <code>&lt;td&gt;</code> inside <code>&lt;tr&gt;</code>, I don't get this error...</p>
  
  <p>How can I add rows to table in this case?</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>As asked, here goes the HTML:</p>
  
  <pre><code>&lt;table dt-options="ctrl.dtOptions" dt-columns="ctrl.dtColumns" dt-column-defs="ctrl.dtColumnDefs" datatable="ng"&gt;
      &lt;thead&gt;&lt;/thead&gt;
      &lt;tbody&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>