title: Collapse / Expand Click Groups with Angular DataTable
body: <p>I'm using <a href="https://l-lin.github.io/angular-datatables/#/welcome" rel="nofollow noreferrer">Angular datatable</a> with Angular 8.
  I'm trying to implement <a href="http://live.datatables.net/najufodu/1/edit" rel="nofollow noreferrer">this example</a> done with jQuery, but the problem is when I use row group in my code:</p>
  <pre><code>this.dtOptions = {
        order: [[2, 'asc']],
        rowGroup: {
          // Uses the 'row group' plugin
          dataSrc: 2,
          startRender: function (rows, group) {
              var collapsed = !!collapsedGroups[group];
  
              rows.nodes().each(function (r) {
                  r.style.display = collapsed ? 'none' : '';
              });    
  
              // Add category name to the &lt;tr&gt;. NOTE: Hardcoded colspan
              return $('&lt;tr/&gt;')
                  .append('&lt;td colspan=&quot;8&quot;&gt;' + group + ' (' + rows.count() + ')&lt;/td&gt;')
                  .attr('data-name', group)
                  .toggleClass('collapsed', collapsed);
          }
        },
        processing : true,
        //retrieve: true,
        destroy: true,
        pagingType: 'full_numbers',
        // Declare the use of the extension in the dom parameter
        dom: 'Bfrtip',
        // Configure the buttons
        buttons: [],
        columnDefs: [],
        responsive: false,
        scrollX: true,
        drawCallback: function ( settings ) {
          var api = this.api();
          var rows = api.rows( {page:'current'} ).nodes();
          var last=null; 
  
          api.column(3 /*this is index of column that you want to make group on it*/ , {page:'current'} ).data().each( function ( group, i ) {
          
  
              if ( last !== group ) {
                  $(rows).eq( i ).before(
                      '&lt;tr style=&quot;background-color:#dedede&quot; class=&quot;group&quot;&gt;&lt;th colspan=&quot;5&quot;&gt;'+group+'&lt;/th&gt;&lt;/tr&gt;'
                  ); 
                  last = group;
              }
          });
       }
  };
  </code></pre>
  <p>I receive the error below:</p>
  <blockquote>
  <p><strong>Type '{ order: (string | number)[][]; rowGroup: { dataSrc: number; startRender: (rows: any, group: any) =&gt; JQuery; }; processing: true; destroy: true; pagingType: string; ... 5 more ...; drawCallback: (settings: SettingsLegacy) =&gt; void; }' is not assignable to type 'Settings'.
  Object literal may only specify known properties, and 'rowGroup' does not exist in type 'Settings'.</strong></p>
  </blockquote>
  <p>Note: My html page similar to example that I've mentioned with below header :</p>
  <pre><code>&lt;table id=&quot;example&quot; datatable [dtOptions]=&quot;dtOptions&quot; [dtTrigger]=&quot;dtTrigger&quot; dt-instance=&quot;dtInstance&quot; class=&quot;table-bordered compact cell-border compact stripe hover&quot; width=&quot;100%&quot; cellspacing=&quot;0&quot;&gt;
  
  </code></pre>
  <p><strong>Update:</strong><br />
  I added the required plugins in <strong>angular.json</strong></p>
  <pre><code>&quot;styles&quot;: [
      ...
      &quot;node_modules/datatables.net-rowgroup-dt/css/rowGroup.dataTables.min.css&quot;
  ],
  &quot;scripts&quot;: [
      ...
      &quot;node_modules/datatables.net-rowgroup-dt/js/rowGroup.dataTables.min.js&quot;
  ]
  </code></pre>