title: Using rowGroup in DataTables
body: <p>For this project I am working on, I am pulling data via REST API to populate my DataTable. To reduce the amount of similar items displayed, I want to create DataTable subrows with a drop down based on an item in my &quot;Deliverables&quot; Column. The example I want to base it off is the example table shown <a href="https://datatables.net/" rel="nofollow noreferrer">here</a>.</p>
  <p>I have the column Deliverables with two options, Meeting Minutes and MSR, I want to have only those two things populate to the table, then have a click down showing everything under what &quot;Program&quot; it is. Here is a picture of my current DataTable, and I will attach the code below.</p>
  <hr />
  <p>Here is my code: it creates a DataTable, but doesn't populate any of the data to it.</p>
  <pre><code>    function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
          //create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
          var urls = [&quot;url1&quot;,&quot;url2&quot;,&quot;url3&quot;];
              
          for (i=0; i &lt; urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
            $.ajax({
              url: urls[i],
              'headers': { 'Accept': 'application/json;odata=nometadata' },
              success: function (data) { // success function which will then execute &quot;GETTING&quot; the data to post it to a object array (data.value)
                data = data;
                var table = $('#myTable').DataTable();
                table.rows.add( data.value ).draw();
              }
            });
          } // missing bracket
      }
      function format ( data ) {
          // `d` is the original data object for the row
          return '&lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;padding-left:50px;&quot;&gt;'+
              '&lt;tr&gt;'+
                  '&lt;td&gt;Program:&lt;/td&gt;'+
                  '&lt;td&gt;'+data.Program+'&lt;/td&gt;'+
              '&lt;/tr&gt;'+
              '&lt;tr&gt;'+
                  '&lt;td&gt;Recipient:&lt;/td&gt;'+
                  '&lt;td&gt;'+data.To+'&lt;/td&gt;'+
              '&lt;/tr&gt;'+
              '&lt;tr&gt;'+
                  '&lt;td&gt;Date:&lt;/td&gt;'+
                  '&lt;td&gt;'+data.Date+'&lt;/td&gt;'+
              '&lt;/tr&gt;'+
              '&lt;tr&gt;'+
                  '&lt;td&gt;Approved:&lt;/td&gt;'+
                  '&lt;td&gt;'+data.Approved+'&lt;/td&gt;'+
              '&lt;/tr&gt;'+
              '&lt;tr&gt;'+
                  '&lt;td&gt;Additional Notes:&lt;/td&gt;'+
                  '&lt;td&gt;'+data.Notes+'&lt;/td&gt;'+
              '&lt;/tr&gt;'+
          '&lt;/table&gt;';
      }
      $(document).ready(function() {
          var table = $('#myTable').DataTable( {
              &quot;columns&quot;: [
                  {
                      &quot;className&quot;:      'details-control',
                      &quot;orderable&quot;:      false,
                      &quot;data&quot;:           null,
                      &quot;defaultContent&quot;: ''
                  },
                  { &quot;data&quot;: &quot;Deliverable&quot; }
              ],
              &quot;order&quot;: [[1, 'asc']]
          } );
  loadData();
            
          $('#myTable tbody').on('click', 'td.details-control', function () {
              var tr = $(this).closest('tr');
              var row = table.row( tr );
        
              if ( row.child.isShown() ) {
                  // This row is already open - close it
                  row.child.hide();
                  tr.removeClass('shown');
              }
              else {
                  row.child( format(row.data()) ).show();
                  tr.addClass('shown');
              }
          } );
      } );
  </code></pre>