Answers

• kthorngren Posts: 22,333Questions: 26Answers: 5,135

  September 2022

  Thats an old example using drawCallback. The RowGrouphttps://datatables.net/extensions/rowgroup/ is what you want to use. It has multi level grouping, which is what I think you are asking for. See this example.

  Kevin
• parcival Posts: 28Questions: 8Answers: 0

  September 2022

  Very cool! I almost got this working. Is there a way to hide the top level row grouping?
  If I set "startrender": null then it will hide the whole header but if I return null then it shows No Group on the page which I'd like to hide.
  This is my code:

  var table = $('#example').DataTable({
              ajax: {
                  url: "/api/applicationPackageData/",
                  type: 'POST'
              },
               order: [[0, 'asc'],[1, 'asc']],
                  rowGroup: {
                      startRender: function ( rows, group, level ) {
                          if (level === 0) { return null;}  
  
                          let data = rows.data();
                          let application = data[0].Applications.Name
                          let version = data[0].Applications.Version
                         
                          return $('<tr/>')
                              .append('<th colspan="6" scope="row">'+application+" "+version+'</th>')
                      },
                      dataSrc: [ "Applications.Name", "Applications.Version"]
                  },
              columnDefs: [ {
                          targets: [ 0, 1 ],
                          visible: false
                      } ],
              serverSide: true,
              columns: [
                  { data: "Applications.Name" },
                  { data: "Applications.Version" },
                  { data: "ApplicationPackages.Variant" },
                  { data: "ApplicationPackages.Type" },
                  { data: "ApplicationPackages.StatusId" },
                  { data: "ApplicationPackages.IsAvailable" },
                  { data: "ApplicationPackages.Modified" },
                  { data: "ApplicationPackages.ModifiedBy" }
              ]
          });
  

  This is my result:
  
• kthorngren Posts: 22,333Questions: 26Answers: 5,135

  September 2022 Answer ✓

  Is there a way to hide the top level row grouping?

  Possibly. You can use the level parameter to see which level is being processed. And if the first level add the inline style style="display:none; or just use CSS with a class to hide the top level. Inspecting the row I find this in one of the examples:

  <tr class="dtrg-group dtrg-start dtrg-level-0"><th colspan="6" scope="row">Edinburgh</th></tr>
  

  You can probably use CSS to hide the class dtrg-level-0.

  Another option might be to use rowGroup.dataSrc as a function to combine the two columns into one group. There is an example at the bottom of the docs page in the comments.

  Kevin
• parcival Posts: 28Questions: 8Answers: 0

  September 2022

  So many ways to get to the same end result! I ended up using the function to create a custom field to group on, like so:

                  rowGroup: {
                      dataSrc:  function(row) {
                          return row.Applications.Name + " " + row.Applications.Version;
                      }
                  },
  

  This looks the cleanest to me, and also easily enables changes in the future.

  Thank you!
• kthorngren Posts: 22,333Questions: 26Answers: 5,135

  September 2022 Answer ✓

  This looks the cleanest to me, and also easily enables changes in the future.

  I agree. Glad you got it working.

  Kevin