Datatable Failing With Rowspan

I am using jQuery DataTables to render my grid data and am using the concept of rowspan with rowsGroup option. Its spanning some rows and look good but after some rows its failing.

Solution 1:

Datatables can apply rowspan only on unique values for each row, if any rowspan column has differnt value then it will not work, see below snippet in which I have applied rowspan on Item Number and Description, and last 2 rows have common values(290015 and XXX5) so rowspan work fine.

$(document).ready(function() {
  var resultArray = [
    ["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "F1 id", "F1 code", "F1 name", "F1 desc", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5 id", "XXX5", "XXX name", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "CC 1", "Code2", "Name", "Desc", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
  ];

  console.log(JSON.stringify(resultArray));
  var table = $('#example').DataTable({
    columns: [{
      title: 'Item Master Number',
      name: 'ItemMasterNumber'
    }, {
      title: 'Description',
      name: 'Description'
    }, {
      title: 'First Processing Date',
      name: 'FirstProcessingDate'
    }, {
      title: 'Alias',
      name: 'Alias'
    }, {
      title: 'Master Price',
      name: 'MasterPrice'
    }, {
      title: 'Product Id',
      name: 'ProductId'
    }, {
      title: 'Product Description',
      name: 'ProductDescription'
    }, {
      title: 'Feature Set#',
      name: 'FeatureSetId'
    }, {
      title: 'Feature Set Code',
      name: 'FeatureSetCode'
    }, {
      title: 'Feature Set Name',
      name: 'FeatureSetName'
    }, {
      title: 'Feature Set Description',
      name: 'Feature Set Description'
    }, {
      title: 'Enablement Type',
      name: 'Enablement Type'
    }, {
      title: 'Feature Id',
      name: 'FeatureId'
    }, {
      title: 'Attribute Name',
      name: 'AttributeName'
    }, {
      title: 'Attribute Value',
      name: 'AttributeValue'
    }],
    data: resultArray,
    rowsGroup: [
      // Always the array (!) of the column-selectors in specified// order to which rows groupping is applied.// (column-selector could be any of specified in:// https://datatables.net/reference/type/column-selector)'ItemMasterNumber:name',
      'Description:name'
    ],
    pageLength: '20',
  });
});

body {
  font: 90%/1.45em"Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

div.container {
  min-width: 980px;
  margin: 0 auto;
}

/** Hide console */.as-console-wrapper { display: none !important; }

<title>TODO supply a title</title><metaname="viewport"content="width=device-width, initial-scale=1.0"><scripttype="text/javascript"src="//cdn.mcfcloud.com/jquery-1.11.2/external/jquery/jquery.js"></script><linkhref="//datatables.net/download/build/nightly/jquery.dataTables.css"rel="stylesheet"type="text/css" /><scriptsrc="//datatables.net/download/build/nightly/jquery.dataTables.js"></script><scriptsrc="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script><divclass="container"><tableid="example"class="display"width="100%"></table></div>