title: Merge columns with last value per group
body: <p>I am trying to get the merge the Date and Current Status columns and make their value equal to that of the last cell in their respective grouping. I don't know enough about DataTables and the row groupings to accomplish this with JavaScript. Simply adjusting the columns with colspan and setting the value as the last row ended up changing it for the entire column regardless of the groupings.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Rowgroup = function() {
  
    var initTable = function() {
      var table = $('#table');
      table.DataTable({
        responsive: true,
        order: [
          [0, 'asc']
        ],
        rowGroup: {
          dataSrc: 0,
        }
      });
    };
    return {
      init: function() {
        initTable();
      },
    };
  }();
  jQuery(document).ready(function() {
    Rowgroup.init();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /&gt;
  
    &lt;script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;table class="table table-hover" id="table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Date&lt;/th&gt;
            &lt;th&gt;Notes&lt;/th&gt;
            &lt;th&gt;Current Status&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;808&lt;/td&gt;
            &lt;td&gt;5/1/2018&lt;/td&gt;
            &lt;td&gt;Lorem ipsum ut porta.&lt;/td&gt;
            &lt;td&gt;Active&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;808&lt;/td&gt;
            &lt;td&gt;5/1/2018&lt;/td&gt;
            &lt;td&gt;Netus blandit ante felis.&lt;/td&gt;
            &lt;td&gt;Active&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;808&lt;/td&gt;
            &lt;td&gt;5/1/2018&lt;/td&gt;
            &lt;td&gt;Vel fusce tortor.&lt;/td&gt;
            &lt;td&gt;Inactive&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;698&lt;/td&gt;
            &lt;td&gt;5/15/2018&lt;/td&gt;
            &lt;td&gt;Per sit commodo.&lt;/td&gt;
            &lt;td&gt;Inactive&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;698&lt;/td&gt;
            &lt;td&gt;5/15/2018&lt;/td&gt;
            &lt;td&gt;Hendrerit imperdiet.&lt;/td&gt;
            &lt;td&gt;Inactive&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;698&lt;/td&gt;
            &lt;td&gt;5/15/2018&lt;/td&gt;
            &lt;td&gt;Class augue phasellus.&lt;/td&gt;
            &lt;td&gt;Active&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;698&lt;/td&gt;
            &lt;td&gt;5/15/2018&lt;/td&gt;
            &lt;td&gt;Ante aliquet.&lt;/td&gt;
            &lt;td&gt;Active&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>